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

Scratch 3.0 自分専用機を作ろうということで、

VM について、解説して行きたいと思います。

まずは、手始めに
今回は、Scratch 2.0 のコードを、Scratch3.0 で動作させてみます。

Scratch3.0 VM 上で動作させてみよう

今回は、webpack を利用する方法で、実験してみます。

コードは以下

https://github.com/kyorohiro/doc.advent.scratch30/tree/master/scratch-vm-test

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

以下のような感じ

https://github.com/kyorohiro/doc.advent.scratch30/blob/master/scratch-vm-test/webpack.config.js

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 /

スクリーンショット 2017-12-23 15.24.25.png

動きましたね!!

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化しよう

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.