Scratch가 3.0으로 버전이 올라가면서 사용자가 확장 블럭 (Extension)을 추가하는 것이 좀더 간단해졌다. 확장 블럭은 Scratch의 기본 기능 외에 다양한 하드웨어나 클라우드 서비스의 기능을 사용할 수 있는 것인데, 메인 화면 왼쪽 하단의 버튼을 눌러 추가한다.
Scratch에 기본적으로 포함되어 있는 확장 블럭은 다음과 같다. 외부 기기나 하드웨어 클라우드 서비스 등이 포함된다.
이제 이것들 이외에 사용자만의 블럭을 추가 할 수 있다. 이 작업은 크게 두가지로 나뉠 수 있는데, 처음은 위 화면에서 본것과 같은 확장 카드를 추가하기, 다음으론 확장 블럭 생성하기이다.
먼저 사용할 이미지를 준비한다. 위 확장 카드에서 가장 크게 보이는 이미지로, 크기는 600×372 이고, png 타입이다.
준비된 이미지를 다음의 경로에 복사한다. (경로는 앞 포스트에서 설명한 경로를 기준으로 설명함).
~/Developer/scratch/scratch-gui/src/lib/libraries/extensions/edubot.png다음으로 확장카드에 들어갈 작은 이미지와 추후 메인화면의 카테고리에 들어갈 중간 사이즈의 이미지를 준비한다. 이 이미지는 가급적이면 SVG 타입의 벡터 이미지를 사용한다. (벡터 이미지는 Illustrator, Sketch, Affinity Designer 등의 툴을 사용하면 쉽게 생성 가능)
준비된 이미지를 다음의 경로에 복사한다. (디렉토리를 생성해야함).
~/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 를 참고한다.
일단 여기까지!.
