Scratch 3.0을 Hack하자. scratch-vm.js를 사용하여 100 줄로 HTML5화합시다.

7406 단어 Scratch

Scratch 3.0 자신 전용기를 만들자는 것으로,

VM에 대해 설명하고 싶습니다.

우선, 시작
이번에는 Scratch 2.0 코드를 Scratch3.0에서 실행해 보겠습니다.

Scratch3.0 VM에서 실행하자.

이번에는 webpack을 사용하는 방법으로 실험해 보겠습니다.

코드는 다음

Render 실험 이나 Babel 실험 이나 Webpack 실험 에서, 환경 구축에 대해서,

겹치기 때문에 끝을 접습니다.

Project 만들기

mkdir scratch-vm-test
cd scratch-vm-test/
npm init -f
npm install --save-dev webpack babel-core babel-loader babel-eslint babel-preset-es2015
npm install --save-dev webpack web-dev-server copy-webpack-plugin
npm install --save-dev scratch-vm scratch-storage scratch-render scratch-audio

Webpack 준비하기

다음과 같은 느낌

콘텐츠 추가

emacs src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scratch WebGL rendering demo</title>
    <style>
        #scratch-stage { width: 480px; border:3px dashed black;}
    </style>
</head>
<body style="background: lightsteelblue">
<canvas id="scratch-stage"></canvas>
<br>
<button id="start-button">Start</button>
<button id="stop-button">Stop</button>
<script src="scratch-vm-hello.js"></script>
</body>
</html>

emacs src/scratch-vm-hello.js

const ScratchVM = require("scratch-vm");
const ScratchRender = require("scratch-render");
const ScratchStorage = require("scratch-storage");
const ScratchAudio = require("scratch-audio");

const canvas = document.getElementById('scratch-stage');
const startButton = document.getElementById('start-button');
const stopButton = document.getElementById('stop-button');

const vm = new ScratchVM();
const renderer = new ScratchRender(canvas);
const storage = new ScratchStorage();
const audioEngine = new ScratchAudio();


//
// Assets Setting
//

const ASSET_SERVER = 'https://cdn.assets.scratch.mit.edu/';
const PROJECT_SERVER = 'https://cdn.projects.scratch.mit.edu/';
const getProjectUrl = function (asset) {
    const assetIdParts = asset.assetId.split('.');
    const assetUrlParts = [PROJECT_SERVER, 'internalapi/project/', assetIdParts[0], '/get/'];
    if (assetIdParts[1]) {
        assetUrlParts.push(assetIdParts[1]);
    }
    return assetUrlParts.join('');
};

const getAssetUrl = function (asset) {
    const assetUrlParts = [
        ASSET_SERVER,
        'internalapi/asset/',
        asset.assetId,
        '.',
        asset.dataFormat,
        '/get/'
    ];
    return assetUrlParts.join('');
};

storage.addWebSource([storage.AssetType.Project], getProjectUrl);

storage.addWebSource([storage.AssetType.ImageVector, storage.AssetType.ImageBitmap, storage.AssetType.Sound], getAssetUrl);

vm.attachStorage(storage);


//
// Render Setting
//
vm.attachRenderer(renderer);

//
// Audio Setting
//
vm.attachAudioEngine(audioEngine);

//
// START & Download
//
vm.start();
vm.downloadProjectId("119615668");

//
// Button Action Setting
//
startButton.onclick = function() {
 vm.greenFlag();
};

stopButton.onclick = function() {
 vm.stopAll();
};

움직여 보자

webpack-dev-server

Project is running at htp://0.0.0.0:8362/

webpack output is served from/

움직였습니다!

PS

이하의 장소에서도, 알레코레 써 갑니다.

Scratch2.0 입문

불의 형태 With Scratch 2.0 (프로그램 입문) 00권

불의 형태 With Scratch 2.0 (프로그램 입문) 01권
화염 유형 With Scratch 2.0 (게임 프로그램 시작)

Scratch3.0 자신 전용기를 만들자!!

(0) Scratch 3.0 자신 전용기를 만들자!! (0)
(1) Scratch3.0을 빌드해 보자
(2) Scratch3.0을 Android 앱으로 작동합시다. (1)
(3) Scratch3.0을 Android 앱으로 작동합시다. (2)
(4) Scratch3.0을 Android 앱으로 작동합시다 (3)
(5) Webpack이란?
(6) Scratch3.0의 package.json을 읽어 보자.
(7) scratch-gui를 설치해 봅시다.
(8) scratch-vm에 사용되는 scratch-xxx를 만져 보자.
(9) Babel을 만져 보자.
(10) scratch-render.js에서 무언가를 만들어 만져 보자.
(11) scratch-storage.js를 만져 보자.
(12) Blockly를 만져 보자.
(13) Scratch Block을 만져 보자.
(14) scratch-vm.js를 사용하여 100 줄로 HTML5 화합시다.

Reference

이 문제에 관하여(Scratch 3.0을 Hack하자. scratch-vm.js를 사용하여 100 줄로 HTML5화합시다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kyorohiro/items/2a38dd2b3ac634e97d86

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다