Scratch 3.0 を Hackしよう。 scratch-vm.js を使って、100行でHTML5化しよう

Scratch

Last updated at 2017-12-23Posted at 2017-12-23

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の準備をする

以下のような感じ

Contentsを追加する

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();
};