基于Github上的scratch-render实现sb2或者sb3文件可以用h5的canvas直接播放而不是flash
前言
关于scratch-render，scratch-gui，scratch-vm等组件的关系可以查看这篇教程Getting Started，然后发现与Scratch文件相关的播放部分是由scratch-render控制。
Scratch 3.0
安装
git clone https://github.com/LLK/scratch-render.git
cd scratch-render
npm install # 使用cnpm可能会安装失败
下载龟速的话可以科学上网然后使用Proxifier全局代理
使用
其实Scratch开发团队已经实现了这个功能，只是我们要找到接口来调用。打开目录下的/test/integration/index.html可以打开这个播放器Demo网页。此时上传sb文件会发现只能显示代码初始状态的效果，这时需要添加一行代码，添加vm.greenflag()给js执行，就可以实现播放的效果了。
这个网页的代码如下：
<body>
<script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
<script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
<script src="../../node_modules/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
<!-- note: this uses the BUILT version of scratch-render! make sure to npm run build -->
<script src="../../dist/web/scratch-render.js"></script>
<canvas id="test" width="480" height="360" style="width: 480px"></canvas>
<input type="file" id="file" name="file">
<script>
// These variables are going to be available in the "window global" intentionally.
// Allows you easy access to debug with `vm.greenFlag()` etc.
window.devicePixelRatio = 1;
var canvas = document.getElementById('test');
var render = new ScratchRender(canvas);
var vm = new VirtualMachine();
var storage = new ScratchStorage();
var mockMouse = data => vm.runtime.postIOData('mouse', {
canvasWidth: canvas.width,
canvasHeight: canvas.height,
...data,
});
vm.attachStorage(storage);
vm.attachRenderer(render);
vm.attachV2SVGAdapter(new ScratchSVGRenderer.SVGRenderer());
vm.attachV2BitmapAdapter(new ScratchSVGRenderer.BitmapAdapter());
document.getElementById('file').addEventListener('click', e => {
document.body.removeChild(document.getElementById('loaded'));
});
document.getElementById('file').addEventListener('change', e => {
const reader = new FileReader();
const thisFileInput = e.target;
reader.onload = () => {
vm.start();
vm.loadProject(reader.result)
.then(() => {
// we add a `#loaded` div to our document, the integration suite
// waits for that element to show up to assume the vm is ready
// to play!
const div = document.createElement('div');
div.id='loaded';
document.body.appendChild(div);
// ------------------------------ //
vm.greenflag(); // 这里添加这条语句
// ------------------------------ //
});
};
reader.readAsArrayBuffer(thisFileInput.files[0]);
});
</script>
</body>
现在打开之后随便扔一个sb文件进去就会自动播放了
scratch播放器
然后你就可以根据这个网页的逻辑进行改编，进一步定制实现自己的播放器界面了，比如像网易卡达这样子
网易卡达播放页面
后记
为什么写篇博文呢，因为当初找不到文档和教程啊，卡了老子好久有没有，结果发现加上这句话就好了，自己就像个sb一样。另外scratch3.0在写这篇博文的时候还没有正式发布，之后的版本具体可能与现在不一致，请读者自行分辨尝试。
网友评论