By kyorohiro (河村潔広)
Scratch 3.0 自分専用機を作ろうということで、
VM について、解説して行きたいと思います。
今回は、Scratch 2.0 のコードを、Scratch3.0 で動作させてみます。
コードは以下
https://github.com/kyorohiro/doc.advent.scratch30/tree/master/scratch-vm-test
renderの実験 や Babelの実験 やWebpackの実験 で、環境構築について、
重複するので、端折ります。
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
https://github.com/kyorohiro/doc.advent.scratch30/blob/master/scratch-vm-test/webpack.config.js
<!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();
};
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-testcd 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/
Comments
Post a Comment