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

2024-08-26 08:38

本文主要是介绍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文件单独运行的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1108081

相关文章

Python如何将OpenCV摄像头视频流通过浏览器播放

《Python如何将OpenCV摄像头视频流通过浏览器播放》:本文主要介绍Python如何将OpenCV摄像头视频流通过浏览器播放的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完... 目录方法1:使用Flask + MJPEG流实现代码使用方法优点缺点方法2:使用WebSocket传输视

k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)

《k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)》本文记录在K8s上运行的MySQL/MariaDB备份方案,通过工具容器执行mysqldump,结合定时任务实... 目录前言一、获取需要备份的数据库的信息二、备份步骤1.准备工作(X86)1.准备工作(arm)2.手

华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

《华为鸿蒙HarmonyOS5.1官宣7月开启升级!首批支持名单公布》在刚刚结束的华为Pura80系列及全场景新品发布会上,除了众多新品的发布,还有一个消息也点燃了所有鸿蒙用户的期待,那就是Ha... 在今日的华为 Pura 80 系列及全场景新品发布会上,华为宣布鸿蒙 HarmonyOS 5.1 将于 7

Java -jar命令如何运行外部依赖JAR包

《Java-jar命令如何运行外部依赖JAR包》在Java应用部署中,java-jar命令是启动可执行JAR包的标准方式,但当应用需要依赖外部JAR文件时,直接使用java-jar会面临类加载困... 目录引言:外部依赖JAR的必要性一、问题本质:类加载机制的限制1. Java -jar的默认行为2. 类加

java -jar命令运行 jar包时运行外部依赖jar包的场景分析

《java-jar命令运行jar包时运行外部依赖jar包的场景分析》:本文主要介绍java-jar命令运行jar包时运行外部依赖jar包的场景分析,本文给大家介绍的非常详细,对大家的学习或工作... 目录Java -jar命令运行 jar包时如何运行外部依赖jar包场景:解决:方法一、启动参数添加: -Xb

eclipse如何运行springboot项目

《eclipse如何运行springboot项目》:本文主要介绍eclipse如何运行springboot项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目js录当在eclipse启动spring boot项目时出现问题解决办法1.通过cmd命令行2.在ecl

Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

《KotlinComposeButton实现长按监听并实现动画效果(完整代码)》想要实现长按按钮开始录音,松开发送的功能,因此为了实现这些功能就需要自己写一个Button来解决问题,下面小编给大... 目录Button 实现原理1. Surface 的作用(关键)2. InteractionSource3.

使用nohup和--remove-source-files在后台运行rsync并记录日志方式

《使用nohup和--remove-source-files在后台运行rsync并记录日志方式》:本文主要介绍使用nohup和--remove-source-files在后台运行rsync并记录日... 目录一、什么是 --remove-source-files?二、示例命令三、命令详解1. nohup2.

使用WPF实现窗口抖动动画效果

《使用WPF实现窗口抖动动画效果》在用户界面设计中,适当的动画反馈可以提升用户体验,尤其是在错误提示、操作失败等场景下,窗口抖动作为一种常见且直观的视觉反馈方式,常用于提醒用户注意当前状态,本文将详细... 目录前言实现思路概述核心代码实现1、 获取目标窗口2、初始化基础位置值3、创建抖动动画4、动画完成后

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs