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

積木是使用{}包起來描述

積木內容在

blocks: []

 

以下列範例示範

                {
                    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