前言

前一篇文章中,我們開發了一個 scratch-vm 架構的 Scratch 3.0 Extension。當時我們提到,scratch-vm 架構下的 Extension 腳本在初始化時可以接收 runtime 這個物件,並透過 runtime 物件與 scratch 底層進行溝通,所以可以完成更為複雜的功能。在這篇文章中,我將利用 runtime 物件來實作具備拍照功能的積木。

安裝 Preview 版 Scratch 3.0

這個範例同樣需要安裝 Node.js、Git、 scratch-gui 與 scratch-vm,詳細步驟請前一篇文章

加入 Extension

為了簡化說明,在這個範例中我將直接把 Extension 腳本放在本機的目錄下。不過比較建議的做法還是應該使用 Github 或類似的服務來做腳本的管控。

  1. 利用檔案總管在 C:\Scratch3\scratch-vm\src\extensions 下建立目錄 scratch3_camera。
  2. 在 scratch3_camera 目錄中新增檔案 index.js,內容如下: Scratch3CameraBlocks 物件在初始化時接受 runtime 物件,並儲存在 runtime 變數中 (第 6 行)。這個 Extension 共定義了三個積木,opcode 分別是 takePicture (第 16 行)、videoOn (第 21 行) 與 videoOff (第 26 行)。videoOn 與 videoOff 分別利用 runtime 物件的 ioDevices.video 來控制 webcam 的開啟與關閉。takePicture 則利用 ioDevices.video 的 getFrame 來取得畫面的影像,不過因為瀏覽器並不支援直接存檔的功能,所以程式使用動態產生 html 下載連結的方式來下載抓取到的影像資料 (第 42~54 行)。
  3. 修改檔案 C:\Scratch3\scratch-vm\src\extension-support\extension-manager.js,將 修改為
  4. 選擇一張用來作為 Extension 選擇頁面的代表圖片,並放置到目錄 C:\Scratch3\scratch-gui\src\lib\libraries\extensions 下。
  5. 修改檔案 C:\Scratch3\scratch-gui\src\lib\libraries\extensions\index.js,在 下方加上 其中 webcam.png 需改成你所使用的圖片名稱。此外,需將 改為

測試 Extension

  1. 回到瀏覽器,此時應該會重新出現歡迎畫面,再次點選 Try It! 進入 Scratch 3.0 的編輯頁面。
  2. 點選左下方圖示開啟 Extension 選擇頁面。

    開啟 Scratch 3.0 Extension 選擇頁面

    開啟 Scratch 3.0 Extension 選擇頁面

  3. 拉到最下方應該可以看到我們新增的 Extension,而顯示的圖示則會是你之前複製到 C:\Scratch3\scratch-gui\src\lib\libraries\extensions 這個目錄下的圖片。點選這個圖示就可以載入我們新增的 Extension。

    選取新增的 Camera Extension

    選取新增的 Camera Extension

  4. 載入成功後可以看到左邊下方出現 Camera 的選項,包含三個積木、分別是 Turn webcam on、Turn webcam off 與  Take a picture from webcam。

    使用新增的 Camera Extension

    使用新增的 Camera Extension

  5. 此 Extension 在載入時會自動開啟 webcam。積木 Turn webcam off 可以用來關閉 webcam,積木 Turn webcam on 則用來開啟 webcam,至於積木 Take a picture from webcam 則會拍攝一張解析度為 800×600 的照片並下載成為圖檔 webcam.jpg。需要特別注意的是必須在 webcam 開啟的狀態下才能順利拍攝照片。

在這個範例中,我們利用 scratch-vm 的 runtime 物件來控制 webcam 的功能。除了控制 IO 元件外,runtime 物件還可以用來與 scratch 本身進行複雜的互動。更為完整的資訊請參考 runtime.js 程式碼

Facebook 留言
Print Friendly, PDF & Email
Summary
再探 scratch-vm 架構下的 Scratch 3.0 Extension
Article Name
再探 scratch-vm 架構下的 Scratch 3.0 Extension
Description
scratch-vm 架構下的 Extension 腳本在初始化時可以接收 runtime 這個物件,並透過 runtime 物件與 scratch 底層進行溝通,所以可以完成更為複雜的功能。在這篇文章中,我將利用 runtime 物件來實作具備拍照功能的積木。
Author
Publisher Name
Everlearn Studio
Publisher Logo