scratch3增加擴充積木
下載scratch3原始碼
網址：https://github.com/LLK/scratch-gui
linux 下可以用git下載，win可以下載zip後解壓縮
git clone https://github.com/LLK/scratch-gui.git
註：linux下如果缺少git套件請自行安裝(sudo apt install git)
打開下載或解壓縮資料夾
安裝必要軟體 nodejs git nopad++
windows install npm 、git 和 nopad++
下載https://nodejs.org/en/download/
安裝64 bit msi
下載:http://git-scm.com/download/win
安裝git
在win下編輯器個人使用nopad++
https://notepad-plus-plus.org/downloads/
安裝visualstudio code
https://code.visualstudio.com/
安裝scratch gui
git clone https://github.com/LLK/scratch-gui.git
cd scratch-gui
npm install
npm install也可以一個指令解決npm install https://github.com/LLK/scratch-gui.git
啟動scratch3-gui
在scratch-gui資料夾下執行
npm start
在瀏覽器的網址列中輸入http://0.0.0.0:8601/就可以看到畫面
如果沒有成功可以嘗試輸入http://127.0.0.1:8601/
增加擴充積木
擴充積木的位置在scratch-gui目錄下的node_modules/scratch-vm資料夾中
原始檔要放在src/extensions資料夾中
試做範例
1.copy scratch3_microbit 成為scratch3_mybit
2.編輯node_modules/scratch-vm/src/extension-support/extension-manager.js
找到gdxfor: () => require('../extensions/scratch3_gdx_for')在行尾加上,和mybit: () => require('../extensions/scratch3_mybit')3.編輯src/lib/libraries/extensions/index.jsx
複製
import microbitIconURL from './microbit/microbit.png';
import microbitInsetIconURL from './microbit/microbit-small.svg';
import microbitConnectionIconURL from './microbit/microbit-illustration.svg';
import microbitConnectionSmallIconURL from './microbit/microbit-small.svg';
修改為
import mybitIconURL from './mybit/microbit.png';
import mybitInsetIconURL from './mybit/microbit-small.svg';
import mybitConnectionIconURL from './mybit/microbit-illustration.svg';
import mybitConnectionSmallIconURL from './mybit/microbit-small.svg';
往下找，找到
{ ame: 'micro:bit',
extensionId: 'microbit',
把整段大括號複製起來，在下面貼上並修改
4.複製microbit資料夾為mybit資料夾
5.回到瀏覽器中輸入網址http://0.0.0.0:8601，再按左下角的+號，就可以看到修改完的擴充積木
打包成離線版
執行指令npm run build
會多build dist兩個資料夾，build資夾中為打包好的檔案，使用瀏覽器開啟index.html。
打包成應用程式
使用的是新北市育林國中林士立老師的打包方法
github下載:https://github.com/t301000/my-scratch3-offline
打包方式詳如github說明檔
1.npm install 安裝套件
2.把scratch-gui下的build資料夾複製到my-scratch3-offline中並改名為app
3.npm run package:win32 打包成exe應用程式
這時會有一個scratch3-win32-x64資料夾産生，裡面會有一個scratch3.exe的應用程式。
如果要打包mac版，需要修改package.json
加入
"compress:mac": "rimraf osep_scratch3-darwin-x64-*.7z && 7z a scratch3-darwin-x64-`date '+%Y%m%d%H%M%S'`.7z osep_scratch3-darwin-x64"
打包指令
npm run package:mac
會産生一個scratch3-darwin-x64的資料夾
extensions內容探究
const 是定義一些事情
class name是物件
最後一行要
module.exports = name;
積木前的圖示可以用blockiconURI來指定
const blockIconURI = 'data:image
積木是使用{}包起來描述
積木內容在
以下列範例示範
{
opcode: 'displayText',
text: formatMessage({
id: 'microbit.displayText',
default: 'display text [TEXT]',
description: 'display text on the micro:bit display'
}),
blockType: BlockType.COMMAND,
arguments: {
TEXT: {
type: ArgumentType.STRING,
defaultValue: formatMessage({
id: 'microbit.defaultTextToDisplay',
default: 'Hello!',
description: `default text to display.
IMPORTANT - the micro:bit only supports letters a-z, A-Z.
Please substitute a default word in your language
that can be written with those characters,
substitute non-accented characters or leave it as "Hello!".
Check the micro:bit site documentation for details`
})
}
}
},
opcode:是每個積木執行時要執行的副程式，後面的文字都對應一個function
blockType: BlockType.COMMAND,是積木型態，可以參考
https://medium.com/@hiroyuki.osaki/scratch-3-block-types-you-can-develop-and-samples-191b0d769b91
text:是描述內容，裡面用formatMessage()來表述時可以做多國語言id default和description，當然可以不寫，直接接一串文字
menus:是選單，每個選單也都是用陣列表示
touchPins: {
acceptReporters: true,
items: ['0', '1', '2']
}
教學影片清單
osep github：https://github.com/ys-fang/OSEP
