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

動かしてみる

webpack-dev-server

Project is running at http://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化しよう