Scratch 3.0 自分専用機 を作ろう!! (14) scratch-vm.js を使って、100行でHTML5化しよう

on
By kyorohiro (河村潔広)

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

動かしてみる

Comments

Post a Comment