scratch 3.0 学习笔记

由 React 组件实现的的 UI 界面

大概布局和功能

菜单：
- 多语言切换
- 项目导出和导入（支持导入scatch2的项目）
- 切换加速模式（加速模式会木块执行更快，因为它不会等待角色渲染）
- 教程
- 编辑项目名称
- 查看社区
- 注册（登陆后是查看我的项目列表）
- 登陆（登陆后是用户信息）
工作区
- 代码：使用积木块操作舞台角色
- 造型：添加或编辑角色的造型图片，支持上传svg、png、jpg等图片，以及摄像头
- 声音：添加或编辑角色的声音，支持上传mp3、wav的声音，以及录音
- 扩展：可以添加额外的积木分类，目前开放的有：音乐、画笔、谷歌翻译、视频侦测等
舞台区
- 绿旗：触发运行工作区中的绿旗积木块
- 停止：停止所有运行中的积木（如果你用了【当响度>10】这样的事件块时，停止后会可能会被再次触发）
- 放大、缩小、全屏：调整舞台大小
- 舞台：使用 webgl 渲染背景、角色
- 其他：显示勾选的变量、列表、侦测值，问答交互
角色区：
- 显示、设置角色的信息：角色名、坐标、显示隐藏、大小、方向
- 添加到舞台的角色列表：
  - 调整顺序
  - 删除角色
  - 复制角色
  - 导出角色（会将角色的声音、造型、积木一起导出为一个 .sprite3 文件）
  - 将积木、声音、造型拖拽分享到其他角色
- 添加角色和背景：支持上传图片和 .sprite3 文件

Scratch Blocks 是基于谷歌 Blockly 开发的一个图形化 js 库，用积木块的形式来实现编程。

这里 Scratch Blocks 抛弃了 Blockly 中积木块转 Python 等编程语言的功能（Blockly中Generator 的部分），通过抛事件的方式搭配 Scratch VM 来实现控制舞台渲染。

Scratch VM 是一个运行 Scratch Blocks 代码块的引擎库。主要有以下功能：

加载解析项目：通过 Scratch GUI 导入一个 .sb2、.sb3 的项目文件，解析项目文件，加载项目中用到的图片和声音，将项目角色渲染到舞台上，将项目中用到的积木块渲染到代码工作区。
导出项目：将当前项目中的角色图片、声音、积木等项目信息和资源打包压缩成 .sb3 文件
解析运行积木：
- 定义每种类型积木执行时的方法
- 通过监听代码工作区的事件，保存当前角色代码工作区对应的积木代码信息
- 角色切换时，根据这些积木信息将该角色的积木块还原到工作区
- 不断检测代码块的状态，在代码块被触发运行时，解析代码块信息，执行代码块对应的方法，更新舞台角色状态
扩展管理：扩展被添加时，解析扩展数据，更新 Scratch Blocks 的 toolbox ，添加新的分类和积木
调用 Scratch Render 提供的渲染接口，更新舞台

Scratch Render 是基于 webgl 的一个渲染引擎，主要用到了 twgl 库，定义了供 Scratch VM 调用的接口。主要功能： + 根据 svg、png 的数据在 canvas 中渲染成图形 + 更新角色图层的信息：大小、位置、角度、图层优先级、图形特效等 + 画笔图层

Scratch Audio 是用来解析声音、播放声音的库。

Scratch Link 通过 WebSocket 使 Scratch 硬件扩展可以和硬件设备通讯。

想知道怎么用 nodejs 实现，可以查看 https://github.com/Micircle/scratch-node-link。

scratch-paint：GUI 中造型编辑的组件，用到了 paper.js，目前处理带有 text 标签的 svg 文件时会有 bug，在 windows 环境中容易崩溃。

scratch-svg-render：scratch 处理 svg 资源的一个工具库，处理带有 text 标签的 svg 文件时会有 bug。

scratch-i10n：scratch 多语言库，包含了Scratch GUI 和 Scratch Blocks 中用到的翻译信息。

喜欢的话请点击一下右上角的 Star 吧，谢谢~

scratch3.0-note