本文主要是介绍Scratch3.0 动画播放支持SB3.0文件单独运行，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
git clone https://github.com/LLK/scratch-render.git
cd scratch-render
npm install # 使用cnpm可能会安装失败git下载慢的，可以考虑一下：加速下载
http://tool.mkblog.cn/github/其实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>
这篇关于Scratch3.0 动画播放支持SB3.0文件单独运行的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
