Scratch 3.0 확장블럭 추가 (1)

Scratch가 3.0으로 버전이 올라가면서 사용자가 확장 블럭 (Extension)을 추가하는 것이 좀더 간단해졌다. 확장 블럭은 Scratch의 기본 기능 외에 다양한 하드웨어나 클라우드 서비스의 기능을 사용할 수 있는 것인데, 메인 화면 왼쪽 하단의 버튼을 눌러 추가한다.

Scratch에 기본적으로 포함되어 있는 확장 블럭은 다음과 같다. 외부 기기나 하드웨어 클라우드 서비스 등이 포함된다.

이제 이것들 이외에 사용자만의 블럭을 추가 할 수 있다. 이 작업은 크게 두가지로 나뉠 수 있는데, 처음은 위 화면에서 본것과 같은 확장 카드를 추가하기, 다음으론 확장 블럭 생성하기이다.

먼저 사용할 이미지를 준비한다. 위 확장 카드에서 가장 크게 보이는 이미지로, 크기는 600×372 이고, png 타입이다.

준비된 이미지를 다음의 경로에 복사한다. (경로는 앞 포스트에서 설명한 경로를 기준으로 설명함).

~/Developer/scratch/scratch-gui/src/lib/libraries/extensions/edubot.png

다음으로 확장카드에 들어갈 작은 이미지와 추후 메인화면의 카테고리에 들어갈 중간 사이즈의 이미지를 준비한다. 이 이미지는 가급적이면 SVG 타입의 벡터 이미지를 사용한다. (벡터 이미지는 Illustrator, Sketch, Affinity Designer 등의 툴을 사용하면 쉽게 생성 가능)

112×92 SVG
39×39 SVG

준비된 이미지를 다음의 경로에 복사한다. (디렉토리를 생성해야함).

~/Developer/scratch/scratch-gui/src/lib/libraries/extensions/peripheral-connection/edubot/edubot-illustration.svg
~/Developer/scratch/scratch-gui/src/lib/libraries/extensions/peripheral-connection/edubot/edubot-small.svg

이제 index.jsx 파일을 수정한다. 파일의 경로는 다음과 같다.

~/Developer/scratch/scratch-gui/src/lib/libraries/extensions/index.jsx

저장된 이미지에 대한 변수 선언

import edubotImage from './edubot.png';
import edubotPeripheralImage from './peripheral-connection/edubot/edubot-illustration.svg';
import edubotMenuImage from './peripheral-connection/edubot/edubot-small.svg';

이제 중간 쯤 적당한 곳에 블럭 생성을 위한 코드 삽입.

    {
        name: 'OROCA_Edubot',
        extensionId: 'edubot',
        collaborator: 'OROCA',
        iconURL: edubotImage,
        insetIconURL: edubotMenuImage,
        description: (
            <FormattedMessage
                defaultMessage="Play with powerful small robot!"
                description="Description for the 'OROCA_Edubot' extension"
                id="gui.extension.oroca_edubot.description"
            />
        ),
        featured: true,
        disabled: false,
        bluetoothRequired: true,
        launchPeripheralConnectionFlow: true,
        useAutoScan: false,
        peripheralImage: edubotPeripheralImage,
        smallPeripheralImage: edubotMenuImage,
        connectingMessage: (
            <FormattedMessage
                defaultMessage="Connecting"
                description="Message to help people connect to their edubot."
                id="gui.extension.edubot.connectingMessage"
            />
        ),
        helpLink: 'https://github.com/oroca/OROCA-EduBot'
    },

각 설정값의 의미는 다음과 같다.

이외에도

  • extensionId: 확장블럭에 대한 고유 이름
  • launchPeripheralConnectionFlow: 선택시 기기를 연결하기 위한 다이얼로그를 실행할 지 여부
  • useAutoScan: 다이얼로그를 띄운 뒤, 자동 스캔 시작 여부

일단 저렇게 수정한 파일을 저장한다. 다음으로 확장블럭에 대한 파일을 작성한다. 해당 경로는 다음과 같다.

~/Developer/scratch/scratch-vm/src/extensions

위 디렉토리에 확장 블럭의 파일을 위한 디렉토리를 생성하고, index.js 파일을 생성한다. index.js 파일의 템플릿은 ~/Developer/scratch/scratch-gui/src/examples/extensions/example-extension.js 를 참고한다.

일단 여기까지!.

Advertisements

2 Replies to “Scratch 3.0 확장블럭 추가 (1)”

  1. 안녕하세요. index.jsx파일을 수정하였는데 compile이 계속 실패하고 있어서 도움을 요청드립니다ㅠㅠ

    아래와 같은 에러메시지를 혹시 어떻게 수정하면 좋을지 조언을 부탁드려도 될까요?

    ERROR in ./node_modules/scratch-vm/src/extension-support/extension-worker.js (c:/Users/BYJ/AppData/Roaming/npm/node_modules/scratch-vm/node_modules/worker-loader/dist/cjs.js?name=extension-worker.js!./node_modules/scratch-vm/src/extension-support/extension-worker.js)
    Module build failed (from c:/Users/BYJ/AppData/Roaming/npm/node_modules/scratch-vm/node_modules/worker-loader/dist/cjs.js):
    Error: Cannot find module ‘webpack/lib/node/NodeTargetPlugin’
    Require stack:
    – c:\Users\BYJ\AppData\Roaming\npm\node_modules\scratch-vm\node_modules\worker-loader\dist\index.js
    – c:\Users\BYJ\AppData\Roaming\npm\node_modules\scratch-vm\node_modules\worker-loader\dist\cjs.js
    – c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\loader-runner\lib\loadLoader.js
    – c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\loader-runner\lib\LoaderRunner.js
    – c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\webpack\lib\NormalModule.js
    – c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\webpack\lib\NormalModuleFactory.js
    – c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\webpack\lib\Compiler.js
    – c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\webpack\lib\webpack.js
    – c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
    at Function.Module._load (internal/modules/cjs/loader.js:864:27)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object. (c:\Users\BYJ\AppData\Roaming\npm\node_modules\scratch-vm\node_modules\worker-loader\dist\index.js:21:25)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object. (c:\Users\BYJ\AppData\Roaming\npm\node_modules\scratch-vm\node_modules\worker-loader\dist\cjs.js:3:14)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    @ ./node_modules/scratch-vm/src/extension-support/extension-manager.js 210:30-98
    @ ./node_modules/scratch-vm/src/virtual-machine.js
    @ ./node_modules/scratch-vm/src/index.js
    @ ./src/containers/controls.jsx
    @ ./src/playground/blocks-only.jsx
    Child html-webpack-plugin for “blocks-only.html”:
    1 asset
    Entrypoint undefined = blocks-only.html
    4 modules
    Child html-webpack-plugin for “compatibility-testing.html”:
    1 asset
    Entrypoint undefined = compatibility-testing.html
    4 modules
    Child html-webpack-plugin for “index.html”:
    1 asset
    Entrypoint undefined = index.html
    4 modules
    Child html-webpack-plugin for “player.html”:
    1 asset
    Entrypoint undefined = player.html
    4 modules
    Child worker:
    2 assets
    Entrypoint main = 326c5f98902ccd335b5b.worker.js 326c5f98902ccd335b5b.worker.js.map
    1 module
    i 「wdm」: Failed to compile.

    1. 글쎄요… 에러 메시지 내용으론, NodeTargetPlugin 모듈을 찾을 수 없다는 것인데… 먼저 npm install을 통해 관련 모듈을 설치하셔야 할듯 한데요..

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.