Scratch3.0 动画播放支持SB3.0文件单独运行

最新推荐文章于 2024-05-26 09:35:23 发布

IT和尚

最新推荐文章于 2024-05-26 09:35:23 发布

阅读量3.3k

点赞数

分类专栏： H5画布

原文链接：https://blog.csdn.net/qq_36268036/article/details/84262540

版权

H5画布专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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>

IT和尚

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Scratch3.0 动画播放支持SB3.0文件单独运行

git clone https://github.com/LLK/scratch-render.gitcd scratch-rendernpm install # 使用cnpm可能会安装失败git下载慢的，可以考虑一下：加速下载http://tool.mkblog.cn/github/其实Scratch开发团队已经实现了这个功能，只是我们要找到接口来调用。打开目录下的/test...
复制链接

扫一扫

专栏目录