哈希技術部落格


Slider

快速開發自己的Scratch擴充積木

隨著Scratch結合越來越多的功能(人工智慧、Arduino、影像辨識…等等)
你是否也開始好奇,這些自製的擴充積木,是如何產生的呢?

今天,我們會教你如何快速產生你自己的Scratch擴充積木哦

使用擴充積木產生器

Scratch的核心功能是開源的,因此有許多的開發者建立自己版本的Scratch。Kittenblock也是其中之一並且製作了更多功能,而他們也製作了擴充積木產生器,方便開發者開發擴充積木。

開啟擴充積木產生器:https://kittenbot.github.io/scratch3-extension/,開啟後可以看見以下畫面

開始製作擴充積木

首先,你需要幫你的擴充積木取一個ID與顯示名稱,ID只能使用純英文(不能使用特殊符號),顯示名稱則可以自行決定,這個名稱也就是出現在Scratch介面上的名稱

接下來,就可以選擇你想要製作的積木類型,包含事件積木(蓋子形狀)、指令積木、輸出入積木(圓形)、判斷積木(六邊形)

製作完成可以點擊右上方的生成預覽,觀察成果

確認完成後,可以點擊右下方的「Export Inndex.js」,這樣就產生可以使用在Scratch3之中的javascript程式碼囉

將擴充積木加入在Scratch內

完成擴充積木之後,下一步就是如何加入到Scratch中。官方的Scratch不支援使用者自行新增擴充積木,但是核心功能的Scratch是開源的,因此我們需要先建立一個自己的Scratch。在建立Scratch之前,需要使用Node.js與Git,所以先下載這兩個程式

Node.js :https://nodejs.org/ 

Git:https://git-scm.com/downloads

開源的Scratch核心功能:https://llk.github.io/scratch-gui/master/


建立自己的Scratch

今天我們會簡單分享如何快速建立自己的Scratch,想知道更多功能與使用的資訊,可以閱讀Scratch開發者Github:https://github.com/LLK

透過Git建立自己的Scratch,在終端機頁面中,依序輸入

mkdir Scratch
cd Scratch
git clone https://github.com/llk/scratch-gui
git clone https://github.com/llk/scratch-vm
git clone https://github.com/llk/scratch-blocks
cd scratch-vm
npm install
npm link
npm run watch
cd ../scratch-blocks
npm install
npm link
cd ../scratch-gui
npm install
npm link scratch-vm scratch-blocks
npm start
網頁開啟:http://localhost:8601

加入製作好的擴充積木

建立了自己的Scratch之後,接下來就可以把剛剛產生的擴充積木程式碼,加入到Scratch的擴充積木目錄底下

Scratch\scratch-gui\src\lib\libraries\extensions

接下來,就可以在擴充積木中看見你製作好的擴充積木囉

*來源說明:
擴充積木產生器來自Kittenblock
建立自己的Scratch參考自https://github.com/LLK/scratch-gui/wiki/Getting-Started

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *