Post

Scratch 积木式可视化编程

Scratch 是 MIT Media Lab 发起的积木式可视化编程平台。本文介绍它的背景历史、开发入门、核心功能、适合开发的应用类型、经典作品示例,以及 GitHub 上值得关注的相关开源项目。

Scratch 积木式可视化编程

Scratch 是什么

Scratch 是一套以积木块为核心的可视化编程语言和在线创作社区,口号是 Imagine, Program, Share。它最初由 MIT Media Lab 的 Lifelong Kindergarten Group 推动,面向儿童和青少年编程教育,但它并不只是“儿童玩具”:Scratch 把事件、循环、条件、变量、列表、消息广播、克隆、坐标、声音、图形、交互输入等编程概念包装成可拖拽的积木,让学习者可以先关注“我要做什么”,再逐步理解“程序如何运行”。

从工程视角看,Scratch 的独特之处不只在“积木式编程”,还在于它把三件事放到一个环境里:

  • 创作工具:浏览器里即可完成角色、舞台、脚本、声音、造型编辑。
  • 运行环境:项目可以直接在网页中运行,也可以用离线编辑器创作。
  • 分享社区:作品可以发布、评论、收藏、改编(remix),学习者能直接查看别人的项目结构。

因此,Scratch 更像一个“低门槛的创造性计算平台”,而不是一门孤立的编程语言。

背景历史

Scratch 的思想可以追溯到 Logo、Smalltalk、HyperCard、StarLogo、AgentSheets、Etoys 等强调探索式学习和可视化表达的系统。英文维基百科 记录,Scratch 的早期原型出现在 2003 年,Scratch 1.0 于 2007 年发布,Scratch 2.0 于 2013 年上线,Scratch 3.0 于 2019 年发布。

几个关键阶段可以这样理解:

  • 2003 年左右:原型探索 MIT Media Lab 的 Lifelong Kindergarten Group 关注的是“孩子如何用代码表达想法”。Scratch 的设计不是从语法教学出发,而是从动画、故事、游戏、音乐、艺术等创作场景出发。

  • 2007 年:Scratch 1.0 发布 Scratch 1.x 使用 Squeak / Smalltalk 相关技术实现,主要以桌面应用形式存在。这个阶段奠定了角色、舞台、积木、绿旗运行、可分享项目等基本模型。

  • 2013 年:Scratch 2.0 转向 Web Scratch 2.0 基于 Flash / ActionScript,强化了在线编辑、上传、预览、分享和社区互动。这个阶段让 Scratch 从一个离线创作工具变成了大型在线社区。

  • 2019 年:Scratch 3.0 发布 Scratch 3.0 转向 HTML5 / JavaScript,不再依赖 Flash,更适合现代浏览器、平板和触屏设备。3.0 还引入了更清晰的扩展机制,例如音乐、画笔、翻译、文字转语音、视频侦测、micro:bit、LEGO 设备等。

从项目文件格式看,Scratch 1.x 常见扩展名是 .sb / .sprite,Scratch 2.0 是 .sb2 / .sprite2,Scratch 3.0 则使用 .sb3 / .sprite3

按照 中文维基百科 的概括,Scratch 是 MIT 媒体实验室 Lifelong Kindergarten Group 开发的积木式视觉化编程语言平台,面向全球多个国家和地区,提供多语言版本。它的设计目标非常明确:降低编程门槛,让学习者通过创造作品理解编程。

为什么 Scratch 适合入门

传统编程入门最容易卡在三个地方:语法、环境、反馈。Scratch 对这三个问题都做了简化。

首先,它用积木替代文本语法。学习者不需要一开始就记住括号、分号、缩进、类型声明,而是通过积木形状和颜色理解“哪些东西可以拼在一起”。例如事件积木像程序入口,控制积木负责循环和条件,运算积木负责表达式,变量积木负责状态。

其次,它把开发环境放进浏览器。打开 Scratch 官网,点击创建,就可以直接写程序、看效果、改造型、加声音。没有复杂安装流程,也不需要先理解编译器、解释器、包管理器。

第三,它的反馈很即时。点击绿旗后,角色马上移动、说话、发声或响应键盘鼠标。对初学者来说,这种即时反馈比命令行输出更直观,也更容易形成“改一改、试一试、再改一改”的探索循环。

开发使用入门

如果是第一次使用 Scratch,可以从一个“会动、会说话、能响应键盘”的小项目开始。

1. 创建项目

进入 Scratch 官网 后选择创建项目。界面通常可以分为几个区域:

  • 舞台:项目运行结果显示的地方,角色会在这里移动、碰撞、切换背景。
  • 角色列表:管理当前项目里的角色,每个角色都有自己的脚本、造型和声音。
  • 积木区:按类别提供动作、外观、声音、事件、控制、侦测、运算、变量、列表、函数等积木。
  • 脚本区:把积木拖到这里并拼接,形成角色的行为逻辑。
  • 造型 / 声音编辑区:编辑角色外观、背景和音效。

2. 理解绿旗和事件

Scratch 程序通常从事件开始。最常见的是:

当绿旗被点击

它类似文本编程里的入口函数。你可以把“移动 10 步”“说 Hello 2 秒”“重复执行”等积木接在下面。Scratch 还支持键盘、鼠标、角色被点击、收到消息等事件,所以它很适合开发交互式作品。

3. 做一个最小游戏

一个简单的“躲避小球”游戏可以这样拆:

  • 玩家角色:按左右方向键移动。
  • 敌人角色:从上方随机位置落下。
  • 规则判断:如果敌人碰到玩家,游戏结束;如果敌人落到底部,重新回到顶部。
  • 分数变量:每躲过一次敌人,分数加 1。

这个小项目会自然覆盖事件、循环、条件、变量、随机数、坐标、碰撞检测等核心概念。做完之后,再加开始界面、音效、难度递增、排行榜,就会逐步接近一个完整游戏。

4. 学会看别人的项目

Scratch 社区的价值在于项目可以被打开、学习和改编。看到一个喜欢的作品,不要只点击运行,可以点进去观察:

  • 角色是如何拆分的?
  • 每个角色分别负责什么行为?
  • 变量记录了哪些状态?
  • 消息广播如何组织流程?
  • 游戏开始、运行、失败、胜利分别在哪里处理?

这比单纯照教程做项目更重要,因为它会训练“读程序”的能力。

.sb3 文件是什么

.sb3 是 Scratch 3.0 的项目工程文件格式。一个 .sb3 文件保存的是完整 Scratch 项目,通常包括脚本代码、角色、背景、造型、声音、图像资源以及项目元数据。它的用途是存储 Scratch 3.0 创作的互动游戏、动画、故事、教学课件或其它交互作品。

从文件结构上看,.sb3 本质上是一个改了扩展名的 .zip 压缩包。把 .sb3 复制一份并改名为 .zip 后,可以用 7-Zip、系统解压工具等打开,里面通常会看到:

  • project.json:项目结构和脚本逻辑,包含角色、舞台、积木、变量、列表、广播消息等信息。
  • 图片资源:角色造型、背景等,常见格式包括 .svg.png.jpg
  • 声音资源:项目使用的音效或音乐,常见格式包括 .wav.mp3

因此,.sb3 既是“作品文件”,也是一个可以被分析的工程包。把它发给别人,对方可以在 Scratch 官网在线编辑器、Scratch 离线桌面版,或 Mind+、TurboWarp 等兼容软件中打开,看到完整代码并继续修改。

需要注意的是,.sb3 在不同语境下也可能指 Stable Baselines3,这是一个基于 PyTorch 的开源强化学习库。但在少儿编程、Scratch、动画、游戏创作这些语境里,.sb3 通常指 Scratch 3.0 项目文件。

如何打开 Scratch 项目

打开 Scratch 项目主要有两种情况:一种是打开别人分享的在线项目链接,另一种是打开本地 .sb3 工程文件。

打开 Scratch 官网项目

如果别人发来的是 Scratch 项目链接,通常形如:

https://scratch.mit.edu/projects/项目ID/

直接在浏览器中打开即可试玩。点击绿旗可以运行项目,点击“查看内部”可以进入编辑器,看到角色、脚本、造型、声音和变量等内容。如果你登录了 Scratch 账号,还可以收藏、评论、加入 Studio,或 remix 成自己的版本继续修改。

这种方式最适合学习社区作品,因为不需要下载文件,也能直接查看完整项目结构。

网站打开后如何运行项目

在 Scratch 官网打开项目页面后,运行方式通常很简单:

  1. 等待项目加载完成,舞台区域出现角色和背景。
  2. 点击舞台上方或左上角的 绿旗,项目就会从作者设置的入口脚本开始运行。
  3. 按照项目说明操作,例如方向键移动、空格跳跃、鼠标点击、拖拽角色或输入文字。
  4. 如果想停止项目,点击绿旗旁边的 红色停止按钮
  5. 如果想放大试玩,可以点击舞台旁边的全屏按钮。

很多 Scratch 项目都依赖“当绿旗被点击”这个事件作为入口,所以点击绿旗相当于启动游戏。也有一些项目会用“点击角色”“按下某个键”“收到消息”等事件启动,如果点击绿旗后没有反应,可以先看项目说明区,确认作者有没有写操作方法。

如果是在“查看内部”的编辑器页面运行,操作也类似:点击舞台上方的绿旗运行,点击红色停止按钮停止。编辑器页面还可以边运行边观察脚本、变量、角色状态,这很适合调试和学习。

常见运行问题包括:

  • 页面还没加载完,绿旗点击后没有反应。
  • 浏览器拦截了自动播放声音,需要先点击页面或允许音频播放。
  • 项目使用键盘控制,但当前焦点不在舞台上,可以先点一下舞台再按键。
  • 项目依赖云变量、在线资源或 Scratch 账号状态,未登录时效果不完整。
  • 手机浏览器没有键盘,方向键类游戏需要作者提供屏幕按钮或触摸控制。
  • 项目本身有 bug,例如没有写绿旗入口脚本、初始化变量缺失、角色被隐藏。

在 Scratch 官网打开 .sb3

如果拿到的是本地 .sb3 文件,可以用 Scratch 官网在线编辑器打开:

  1. 进入 Scratch 创建页面
  2. 在菜单中选择“文件”。
  3. 选择“从你的电脑中上传”。
  4. 选择本地 .sb3 文件。
  5. 等待导入完成后,点击绿旗测试项目。

需要注意,上传本地项目会替换当前编辑器里的项目。如果当前项目还没保存,应该先保存或导出备份。

用 Scratch Desktop 打开

Scratch Desktop 是官方离线编辑器,适合没有稳定网络、课堂机房或本地备课场景。安装后可以直接打开 .sb3 文件,也可以在软件里选择“文件 -> 从你的电脑中上传”。

它的优点是离线可用、体验接近官网编辑器;缺点是不能直接使用在线社区功能,分享项目时仍然需要导出 .sb3 或上传到官网。

用 TurboWarp 打开

TurboWarp 是常见的 Scratch 兼容运行和编辑工具,支持打开 Scratch 项目链接或 .sb3 文件。它的运行性能通常更好,也支持一些额外功能,常用于测试大型项目、打包 H5 或桌面应用。

常见用法是:

  1. 打开 TurboWarp。
  2. 输入 Scratch 项目链接,或上传本地 .sb3
  3. 测试运行效果。
  4. 如果需要发布,再用 Packager 打包。

需要注意,如果项目使用 TurboWarp 特有能力,回到 Scratch 官网后可能无法完全兼容。

用 Mind+ 等兼容软件打开

一些图形化编程和创客教育软件也支持导入 .sb3,例如 Mind+。这类工具常用于课堂、硬件扩展或本地教学环境。打开前要确认软件版本是否支持 Scratch 3.0 项目,以及项目中使用的扩展是否兼容。

解压查看 .sb3 内容

如果只是想研究项目文件结构,可以把 .sb3 复制一份,改名为 .zip 后解压。这样可以看到 project.json、图片、声音等资源。但这种方式只是查看底层文件,不适合普通编辑;如果手动修改 project.json 或资源文件,项目可能无法再被 Scratch 正常打开。

常见打不开的原因

遇到项目打不开时,可以先检查这些问题:

  • 文件是不是完整下载,大小是否异常为 0 或很小。
  • 文件扩展名是否真的是 .sb3,而不是 .zip.sb2 或浏览器误改名。
  • 项目是否来自 Scratch 3.0;旧版 .sb2 可能需要先转换或用兼容工具打开。
  • 是否使用了非官方扩展,导致 Scratch 官网无法识别。
  • 浏览器是否过旧,建议使用新版 Chrome、Edge、Firefox 或 Safari。
  • .sb3 被手动解压修改过,导致 project.json 或资源引用损坏。

核心功能

Scratch 的功能可以按编程概念分成几类。

事件驱动

Scratch 项目通常不是从上到下执行一次就结束,而是由事件触发。绿旗、按键、鼠标点击、角色点击、收到消息、背景切换都可以成为入口。事件驱动是游戏、动画和交互应用的基础。

角色与舞台

角色(Sprite)是 Scratch 的核心对象。每个角色可以有自己的:

  • 脚本:控制行为。
  • 造型:控制外观和动画帧。
  • 声音:控制音效和配音。
  • 位置、方向、大小、显示状态等属性。

舞台则承载背景、全局状态和整体流程。很多项目会把开始界面、关卡背景、胜利失败画面放在舞台逻辑里管理。

积木分类

Scratch 3.0 常见积木包括:

  • 动作:移动、旋转、设置坐标、面向方向。
  • 外观:说话、思考、切换造型、改变大小、显示隐藏。
  • 声音:播放声音、停止声音、改变音量和音效。
  • 事件:绿旗、按键、点击、广播消息。
  • 控制:等待、重复、如果、克隆、停止脚本。
  • 侦测:碰到角色、碰到颜色、鼠标位置、询问输入。
  • 运算:数学、比较、逻辑、字符串处理、随机数。
  • 变量和列表:保存分数、生命、道具、问题列表、排行榜等数据。
  • 自制积木:封装重复逻辑,相当于自定义函数。
  • 扩展:画笔、音乐、翻译、文字转语音、视频侦测、硬件设备等。

消息广播

广播是 Scratch 里组织复杂项目的关键。一个角色可以广播“游戏开始”“进入第二关”“玩家死亡”“播放爆炸效果”等消息,其他角色收到后执行自己的脚本。它让角色之间不必直接互相控制,适合管理多角色协作。

克隆

克隆用于动态创建角色副本。例如射击游戏里的子弹、弹幕游戏里的敌机、平台游戏里的金币、粒子效果里的小碎片,都可以用克隆实现。学会克隆之后,Scratch 项目会从“几个固定角色”升级到“动态生成对象”。

变量、列表与云变量

变量用于保存分数、生命、倒计时、当前关卡等状态。列表则可以保存多个数据,例如题库、背包、关卡配置、排行榜记录。Scratch 还支持云变量,可以在一定限制下保存跨用户共享的数据,常见于在线分数榜或多人互动实验。

扩展与硬件

Scratch 3.0 的扩展系统让它可以连接更多场景。常见扩展包括:

  • 画笔:绘制轨迹、图案、数据可视化。
  • 音乐:制作节奏、旋律和互动音乐。
  • 翻译与文字转语音:制作多语言或语音互动作品。
  • 视频侦测:通过摄像头动作控制项目。
  • micro:bit、LEGO、Makey Makey:连接传感器、按钮、机器人和实体装置。

这也是 Scratch 能进入创客教育和 STEM 课堂的重要原因。

可以开发哪些应用

Scratch 最常见的是游戏,但它能做的远不止游戏。

互动故事

适合做儿童绘本、分支剧情、角色对话、历史故事、英语情景剧。关键能力是背景切换、角色对话、广播流程和用户选择。

2D 游戏

Scratch 特别适合开发 2D 小游戏,例如:

  • 平台跳跃游戏
  • 迷宫游戏
  • 飞行射击游戏
  • 点击器游戏
  • 塔防或回合制小游戏
  • 音乐节奏游戏
  • 问答闯关游戏

如果项目变复杂,建议把每个角色的职责拆清楚:玩家角色只处理输入和状态,敌人角色处理移动和碰撞,舞台处理关卡流程,UI 角色处理分数、生命和按钮。

动画与短片

Scratch 的造型切换、声音、等待、广播非常适合做动画。它不需要复杂时间轴,角色行为可以通过脚本控制。初学者可以从“角色走路 + 对话 + 背景切换”开始,逐步加入镜头运动和音效。

教学课件

老师可以用 Scratch 做数学可视化、物理模拟、英语单词练习、历史问答、科学实验演示。例如用画笔扩展绘制几何图形,用变量展示速度变化,用随机题库做练习系统。

模拟器

Scratch 可以做简单模拟:生态系统、交通灯、粒子运动、抽奖机、排队系统、弹簧运动、投掷轨迹等。虽然性能和数据结构有限,但足够表达核心模型。

音乐与艺术

通过声音、音乐、画笔和随机数,Scratch 可以制作互动音乐、生成艺术、节奏可视化、涂鸦工具。很多 Scratch 作品的价值不在“代码复杂”,而在交互创意。

机器人与实体交互

连接 micro:bit、LEGO、Makey Makey 等设备后,Scratch 可以做实体按钮、传感器互动、机器人控制和课堂实验。对低龄学习者来说,看到代码影响现实设备,往往比屏幕动画更有冲击力。

如何发布 Scratch 游戏

Scratch 游戏开发完成后,发布方式取决于你的目标:只是分享给同学试玩、发布到 Scratch 社区、嵌入个人网站,还是打包成独立应用。常见方法有下面几类。

发布到 Scratch 官网

最推荐的入门方式是直接发布到 Scratch 官网

基本流程是:

  1. 登录 Scratch 账号。
  2. 在在线编辑器中打开项目,填写项目标题。
  3. 点击“分享”发布到 Scratch 社区。
  4. 补充项目说明、操作方式、鸣谢信息和标签。
  5. 把项目链接发给别人,或加入相关 Studio。

这种方式的优点是最简单,别人打开链接就能玩,也能查看代码并 remix。缺点是项目必须符合 Scratch 社区规范,部分高级扩展、第三方扩展或非官方能力可能无法使用。

发布到 Scratch 社区前,最好补齐这些信息:

  • 操作说明:例如“方向键移动,空格跳跃,碰到怪物会扣血”。
  • 目标说明:告诉玩家怎么玩才算赢。
  • 素材来源:如果使用了他人的图片、音乐、角色,要注明来源。
  • 版本说明:可以写清楚当前是 v1.0,后续计划增加哪些内容。

导出 .sb3 文件分享

如果只想把工程文件发给别人,可以从 Scratch 编辑器中选择“保存到你的电脑”,导出 .sb3 文件。对方拿到 .sb3 后,可以在 Scratch 官网、Scratch Desktop、TurboWarp、Mind+ 等兼容工具中打开。

这种方式适合:

  • 课堂作业提交。
  • 老师批改或二次修改。
  • 同学之间互相学习项目结构。
  • 离线保存作品备份。
  • 在不同电脑之间迁移工程。

它的优点是保留完整源工程,别人可以直接看到脚本、角色、背景、声音和资源。缺点是传播体验不如网页链接,接收方需要知道如何打开 .sb3

用 TurboWarp 打包成网页或桌面应用

如果希望作品像普通小游戏一样分发,可以使用 TurboWarp Packager 或 TurboWarp 的在线打包工具,把 Scratch 项目打包成 HTML、zip,甚至 Windows、macOS、Linux 可执行程序。

这种方式适合:

  • 想把 Scratch 游戏放到个人网站。
  • 想发给别人一个离线可运行版本。
  • 想隐藏 Scratch 编辑器界面,只保留游戏运行界面。
  • 项目较复杂,希望借助 TurboWarp 的性能优化运行。

常见流程是:

  1. 准备 Scratch 项目链接或 .sb3 文件。
  2. 用 TurboWarp 打开并测试运行。
  3. 在 Packager 中选择打包目标,例如 HTML、zip 或桌面应用。
  4. 配置窗口大小、是否全屏、启动按钮、图标、加载页等选项。
  5. 导出并测试不同平台的运行效果。

需要注意,TurboWarp 属于社区生态,不是 Scratch 官方发布渠道。如果项目依赖非官方扩展或打包选项,最好在目标设备上实际测试。

如何下载 TurboWarp

TurboWarp 有在线版、桌面版和打包工具,是否需要下载取决于你的用途。

  • 在线编辑 / 运行 Scratch 项目:直接打开 TurboWarp 在线版,不需要安装软件。适合临时打开 .sb3、测试 Scratch 项目链接、体验性能优化。
  • 离线编辑器:下载 TurboWarp Desktop。它是 Scratch 3 的离线编辑器增强版,适合没有稳定网络、需要长期编辑项目,或希望使用暗色模式、插件、编译器等增强能力的场景。
  • H5 / 桌面应用打包:使用 TurboWarp Packager。如果只是把 Scratch 项目导出成 HTML、zip 或可执行程序,通常直接用在线 Packager 即可,不一定要安装桌面版。
  • GitHub 下载:如果官网入口访问慢,或想下载指定版本,可以到 TurboWarp Desktop Releases 获取 Windows、macOS、Linux 对应安装包。

下载时按系统选择即可:

  • Windows:优先选择安装包,老系统要注意版本兼容性。
  • macOS:可通过官网、Mac App Store 或 GitHub Releases 下载,Apple Silicon / Intel 机型要注意架构。
  • Linux:按官网说明选择 AppImage、deb、rpm 或其它发行版适配方式。

对大多数用户来说,推荐顺序是:先用在线版试项目;需要离线编辑再装 Desktop;需要发布 H5 再用 Packager

TurboWarp 的功能和作用

TurboWarp 可以理解为 Scratch 3 的高性能兼容运行环境和增强工具链。它不是 Scratch 官方产品,但围绕 Scratch 项目的“运行、编辑、测试、打包、发布”补上了很多工程化能力。

它的主要作用包括:

  • 加速运行 Scratch 项目 TurboWarp 的核心卖点是性能优化。很多大型 Scratch 项目在官方播放器里容易卡顿,例如大量克隆、复杂列表、弹幕、粒子效果、平台游戏和大型地图项目,用 TurboWarp 运行时通常更流畅。

  • 打开 Scratch 链接和 .sb3 文件 TurboWarp 可以直接打开 Scratch 官网项目链接,也可以上传本地 .sb3 文件。它适合作为“兼容播放器”和“测试环境”,用来检查项目在高性能运行时是否正常。

  • 提供增强版编辑体验 TurboWarp Desktop 类似增强版 Scratch Desktop,支持离线编辑 Scratch 3 项目,并提供暗色模式、插件、更多设置和一些效率功能。对于长期维护 Scratch 项目的人,它比纯网页编辑更稳定。

  • 支持更多扩展能力 TurboWarp 社区生态里有一些 Scratch 官方没有的扩展,例如更丰富的输入、存储、网络、窗口、渲染或高级控制能力。不过这些能力往往不是官方 Scratch 标准,使用后可能无法回到 Scratch 官网完整运行。

  • 将 Scratch 项目打包发布 TurboWarp Packager 可以把项目打包成 HTML、zip 或桌面可执行程序。这是把 Scratch 游戏发布为 H5、离线小游戏、课堂展示包或桌面试玩版时最常用的工具。

  • 适合做发布前测试 如果计划把 Scratch 游戏发给别人玩,TurboWarp 可以帮助测试加载速度、运行性能、全屏效果、移动端兼容性和资源体积。项目越复杂,发布前越值得在 TurboWarp 里跑一遍。

使用 TurboWarp 时要记住一个边界:如果目标是 Scratch 官方社区,最好只使用 Scratch 官方支持的积木和扩展;如果目标是 H5 或独立发布,可以更大胆地使用 TurboWarp 的增强能力,但要自己负责兼容性测试

发布为 H5 小游戏

Scratch 作品可以比较自然地发布为 H5 小游戏。最常见做法是先用 TurboWarp Packager 把项目打包成 HTML / zip,再部署到静态网站或对象存储上,例如 GitHub Pages、Cloudflare Pages、Vercel、Netlify、Nginx 静态站点或云厂商 OSS / COS。

典型流程是:

  1. 在 Scratch 或 TurboWarp 中完成游戏,并导出 .sb3
  2. 用 TurboWarp Packager 导出 HTML 或 zip。
  3. 解压后检查 index.html、脚本文件、资源文件是否完整。
  4. 部署到支持 HTTPS 的 Web 服务器或静态托管平台。
  5. 用手机浏览器、微信内置浏览器、iPad、桌面浏览器分别测试。

H5 发布前要特别注意移动端体验。很多 Scratch 项目默认用键盘控制,但手机上没有方向键,所以最好改成屏幕按钮、点击、拖拽或触摸控制;舞台比例也要适配竖屏/横屏,避免按钮太小、角色跑出可视区域或音效无法自动播放。

如果目标只是“在微信里打开玩”,H5 通常已经够用:把 H5 地址发到微信群、公众号文章或网页中,用户点击链接即可进入。但这仍然是 微信内置浏览器里的 H5 游戏,不是微信小游戏平台里的原生“小游戏”。

打开项目后导出为 H5 的具体步骤

假设你已经能打开 Scratch 项目,接下来可以按这个流程导出 H5:

  1. 确认项目能正常运行 先在 Scratch 官网、Scratch Desktop 或 TurboWarp 中点击绿旗试玩一遍,确认开始、失败、胜利、重新开始流程都正常。

  2. 拿到项目输入源 如果项目已经发布到 Scratch 官网,可以复制项目链接;如果是本地工程,可以准备 .sb3 文件。两种方式都可以交给 TurboWarp Packager 使用。

  3. 用 TurboWarp 打开项目测试 进入 TurboWarp,输入 Scratch 项目链接或上传 .sb3。如果游戏在 TurboWarp 中运行正常,再继续打包;如果画面、音效、克隆或扩展行为异常,应先回到项目里修复。

  4. 进入 Packager 打包 使用 TurboWarp Packager,选择项目来源,然后选择导出格式。常见选择是:
    • HTML:导出单个网页文件,适合简单项目或快速分享。
    • zip:导出包含 index.html 和资源文件的压缩包,适合部署到网站。
    • 桌面应用:导出 Windows、macOS、Linux 可执行程序,不属于 H5,但适合离线分发。
  5. 配置运行选项 根据项目需要配置标题、窗口大小、是否自动开始、是否显示加载页、是否全屏、是否启用高性能运行、是否保留控制按钮等。面向手机时,建议优先测试横屏/竖屏和触摸操作。

  6. 导出并本地测试 如果导出 zip,先解压,打开里面的 index.html 测试。部分浏览器对本地文件访问有限制,如果本地打开异常,可以启动一个简单静态服务器,或直接部署到测试环境再看。

  7. 部署到 HTTPS 站点 把导出的 HTML / zip 解压内容上传到静态站点。入口通常是 index.html。部署完成后,用最终 URL 打开测试。

  8. 移动端和微信内测试 用手机浏览器和微信内置浏览器分别打开,重点检查触摸控制、音频播放、加载速度、横竖屏、分享封面和返回重进后的状态。

导出 H5 后,Scratch 项目本身不会自动变成更专业的网页游戏工程。它仍然是一个由 Scratch 运行时驱动的网页版本,所以复杂项目要特别关注性能、资源体积和移动端输入方式。

发布为微信小游戏

严格来说,Scratch 项目不能直接一键发布成微信小游戏。微信小游戏运行在微信提供的小游戏运行环境里,不是普通浏览器页面;它没有完整 DOM,也不能简单把 TurboWarp 导出的 index.html 原封不动放进去运行。

常见可行路线有三种:

  • 路线一:发布成 H5,在微信中打开 这是成本最低的方案。Scratch -> TurboWarp Packager -> H5 -> HTTPS 部署 -> 微信内置浏览器访问。适合课程作品、试玩 Demo、个人展示和轻量小游戏。

  • 路线二:用小程序 web-view 承载 H5 如果只是想放进“小程序”入口,可以考虑小程序 web-view 打开 H5 页面。但这属于微信小程序承载网页,不是微信小游戏;同时通常需要满足业务域名、账号主体、备案等平台要求。

  • 路线三:重写或移植为微信小游戏 如果目标是真正上架微信小游戏平台,通常要把 Scratch 项目的玩法逻辑和素材迁移到 Cocos Creator、LayaAir、Egret、Unity 小游戏导出方案,或直接用微信小游戏原生 API / Canvas 重写。这个路线工作量最大,但能接入微信小游戏的登录、分享、广告、排行榜、分包、性能优化等能力。

可以把选择标准简单归纳为:

  • 只是给别人玩:优先 H5。
  • 想在微信里传播:H5 + 微信内置浏览器通常够用。
  • 想有小程序入口:考虑小程序 web-view 承载 H5。
  • 想上架微信小游戏:建议迁移到 Cocos / Laya / Unity / 原生小游戏工程。

从工程角度看,Scratch 更适合做原型、教学作品和轻量游戏;如果游戏已经验证了玩法,后续再把核心机制迁移到专业 H5/小游戏引擎,会比一开始就强行把 Scratch 工程塞进微信小游戏环境更稳。

嵌入博客或网页

Scratch 官网项目支持嵌入网页。发布项目后,可以在项目页面找到嵌入代码,把它放到博客、教学网站或作品集页面中。这样读者不需要离开当前页面,就能直接试玩。

这种方式适合:

  • 在个人博客展示作品。
  • 在课程页面嵌入课堂小游戏。
  • 在作品集里展示互动动画。
  • 给家长或同学提供一个集中展示页。

如果博客系统对 iframe 有限制,也可以改成放项目链接或截图,再跳转到 Scratch 项目页。

发布到第三方游戏平台

一些小游戏聚合站、教育平台或 Scratch 游戏站会收录 Scratch 作品,例如 Scratch 游戏聚合类网站、课堂平台或学校内部作品墙。发布前通常要看平台要求:有的平台只接受 Scratch 项目链接,有的平台接受 .sb3,有的平台需要打包成 HTML。

这种方式的优点是更容易被特定玩家群体看到,缺点是平台质量参差不齐,作品说明、版权、广告和内容审核规则也不同。面向儿童或课堂场景时,建议优先选择可信平台。

录制视频发布

如果作品不方便直接发布,或者想展示开发过程,也可以录制试玩视频发布到视频平台。视频发布不等于交互发布,但很适合展示:

  • 游戏玩法预告。
  • 关卡通关过程。
  • 开发复盘。
  • 教程讲解。
  • 课堂作品展示。

录视频时最好同时说明项目链接或 .sb3 获取方式,这样感兴趣的人可以继续试玩或学习源码。

发布前检查清单

无论选择哪种发布方式,最好先做一次发布前检查:

  • 游戏是否有清晰的开始、失败、胜利或重新开始流程。
  • 操作方式是否写在说明里,玩家不需要猜按键。
  • 音量、画面、角色大小和舞台边界是否合适。
  • 是否处理了明显 bug,例如角色卡住、分数异常、无限克隆导致卡顿。
  • 是否注明了素材来源,避免直接使用无授权音乐、图片或角色。
  • 是否在目标平台实际打开测试过,而不只是在编辑器里运行过。
  • 如果面向儿童或公开社区,内容是否符合平台规范。

简单来说,Scratch 官网适合学习和社区分享,.sb3 适合工程文件交换,TurboWarp 适合打包为 H5,网页嵌入适合作品展示,第三方平台适合扩大传播;如果目标是真正的微信小游戏,通常需要移植或重写

经典应用与游戏示例

Scratch 社区里有大量玩家创作的作品。Scratch Games Online 这类第三方聚合站会整理动作、冒险、平台、解谜、点击器、模拟、体育等不同类型的 Scratch 游戏;不过学习时更推荐回到 Scratch 原项目页面,查看项目结构和 remix 关系。

一些经常被提到的 Scratch 作品或类型包括:

  • Paper Minecraft:典型的复杂 Scratch 游戏案例,展示了方块世界、角色控制、资源系统和大型项目组织能力。
  • Geometry Dash / 平台跳跃类作品:适合学习关卡滚动、碰撞检测、节奏控制和失败重开。
  • Getting Over It 风格作品:适合观察物理感、鼠标控制和角色约束如何用积木模拟。
  • Among Us Scratch 版本:适合学习多人规则、任务系统、角色状态和 UI 流程。
  • 点击器游戏:适合初学变量、升级系统、自动收益、商店逻辑。
  • 问答闯关游戏:适合课堂教学,重点是题库列表、输入判断、分数统计。
  • 互动动画短片:适合练习广播、时间控制、声音同步和分镜。

如果只是玩游戏,可以从热门作品开始;如果想学习开发,建议挑一个“看起来有趣但规模不太大”的项目,打开源代码,先回答三个问题:

  1. 项目里有哪些角色?
  2. 哪些变量决定游戏状态?
  3. 流程是靠哪个广播消息串起来的?

这三个问题回答清楚,基本就能读懂一个 Scratch 项目的骨架。

GitHub 上值得关注的相关项目

Scratch 的官方和社区生态有不少开源项目。星标数会变化,下面按“值得关注程度 + 当前大致热度”列出几个方向。

  • scratchfoundation/scratch-gui Scratch 3.0 编辑器图形界面,约 4.7k stars。它是理解 Scratch 编辑器前端结构的核心项目之一。

  • scratchfoundation/scratch-blocks Scratch 积木编辑库,约 2.7k stars,基于 Google Blockly 思路构建,适合研究积木式编程界面如何实现。

  • scratchfoundation/scratch-www Scratch 网站 Web 客户端,约 1.6k stars,适合了解 Scratch 社区网页、项目展示和站点结构。

  • scratchfoundation/scratch-vm Scratch 3.0 虚拟机,约 1.3k stars,负责表示、运行和维护 Scratch 程序状态。想理解积木脚本如何被执行,可以重点看这个项目。

  • scratchfoundation/scratch-render Scratch 3.0 的 WebGL 渲染引擎,约 270 stars,适合研究舞台、角色、图层和图形渲染。

  • scratchfoundation/scratch-editor Scratch 编辑器 mono-repo,约 200 stars。官方项目正在逐步向这个仓库迁移,后续研究 Scratch 3.0 编辑器应关注它。

  • TurboWarp/desktop TurboWarp 的离线编辑器,约 560 stars。TurboWarp 是 Scratch 3 的高性能改造版本,加入了编译器、暗色模式、插件等能力。

  • TurboWarp/packager 可以把 Scratch 项目打包成 HTML、zip 或桌面可执行程序,约 330 stars。适合想把 Scratch 作品发布成独立应用的人研究。

这些项目大致可以分成三层:

  • 编辑器层scratch-guiscratch-editorscratch-blocks
  • 运行时层scratch-vmscratch-render
  • 增强和发布层:TurboWarp 的 desktop、packager、社区扩展

如果目标是“用 Scratch 学编程”,不需要一开始看源码;如果目标是“做一个类似 Scratch 的积木编程平台”,这些仓库就非常值得系统阅读。

Scratch 的局限

Scratch 降低了入门门槛,但它并不适合所有项目。

比较明显的限制包括:

  • 大型项目管理能力有限,角色、变量、广播多了之后容易混乱。
  • 数据结构比较简单,复杂对象、二维表、文件读写都不方便。
  • 自定义积木能力有限,不能像常规语言那样组织大型模块。
  • 调试能力较弱,缺少断点、调用栈、单元测试等工程工具。
  • 性能有限,复杂物理、大量克隆、高清素材和大型列表容易卡顿。
  • 官方社区对内容安全有较强约束,不适合所有类型的发布场景。

这些限制并不削弱 Scratch 的价值。它最适合承担“第一门编程语言”“创意表达工具”“课堂互动平台”“快速原型工具”的角色。当学习者已经能熟练拆分角色、设计变量、组织事件和广播,再迁移到 Python、JavaScript、Godot、Unity、Web 前端等环境,会自然很多。

学习路线建议

如果希望系统学习 Scratch,可以按下面顺序推进:

  1. 动画阶段:角色移动、说话、切换造型、播放声音。
  2. 交互阶段:键盘控制、鼠标点击、碰撞检测、询问输入。
  3. 游戏阶段:分数、生命、倒计时、失败重开、关卡切换。
  4. 结构阶段:广播消息、自制积木、克隆、列表、项目拆分。
  5. 扩展阶段:画笔、音乐、视频侦测、文字转语音、micro:bit。
  6. 阅读阶段:拆解社区作品,学习别人如何组织复杂项目。
  7. 迁移阶段:把 Scratch 中学到的变量、条件、循环、事件、函数、状态机迁移到 Python 或 JavaScript。

Scratch 入门的重点不是“背积木”,而是逐步形成计算思维:把目标拆成角色,把行为拆成事件,把规则拆成条件,把变化保存成状态,把重复逻辑封装起来。

总结

Scratch 的成功不只是因为它简单,而是因为它把编程、创作和社区连接在了一起。它让初学者可以从故事、动画、游戏、音乐、硬件互动这些有趣的目标进入编程,再在实践中理解事件、循环、条件、变量、列表、函数、消息和状态。

对孩子来说,Scratch 是表达想法的工具;对老师来说,它是可视化教学平台;对开发者来说,它是积木式编程环境、在线创作社区和教育技术产品的经典案例。真正学好 Scratch 的方式,是一边做作品,一边读作品,一边改作品。

参考资料

This post is licensed under CC BY 4.0 by the author.
Share