用途
该工作流用于 HTML5 游戏的端到端生产,覆盖素材、策划、原型、测试用例、实现、QA、部署与报告各阶段。适用于创建新游戏、实现游戏机制或将现有游戏移植。与相邻技能的区分是:游戏玩法概念与功能优先级尚未成形的阶段应先使用 game-design;需要针对 Godot 引擎本身的深入实现细节时使用 godot;本技能侧重跨技术栈的生产流程编排。
技术栈限制
允许使用:Rust + WASM(推荐 Macroquad,Bevy 用于高级场景);Godot 4.x(HTML5 导出)。 禁止使用:JavaScript/TypeScript 及所有 JS 框架(Phaser、PixiJS、Three.js 等);Unity WebGL;其他网页游戏引擎。
工作流概览
- 素材获取(编码前必须完成)
- 基于素材细化策划
- 机制验证(原型)
- 编写测试用例(TDD)
- 实现与策划互补迭代(直至测试用例 100% 通过)
- QA(Playwright + 人工)
- 上线测试
- 报告(4 张截图 + DoD 清单)
素材获取(第一阶段)
编码前未取得素材不得开工。素材来源优先级:NAS 游戏资产库、MiniPC Gemini AI 生成、免费素材(kenney.nl CC0、opengameart.org、freesound.org)、MacBook MLX Z-Image-Turbo、Blender 3D 转 2D 渲染。必备素材清单:角色与物件精灵;背景图片或图块地图;UI 元素(按钮、图标、面板);至少一首 BGM(mp3/ogg,循环);至少三个 SFX(点击、成功、失败);素材授权确认(CC0/MIT/允许商用)。公开游戏的授权政策:可使用 Kenney.nl CC0、AI 生成、自制素材;不使用 Unity Asset Store(含免费)及不允许再分发的素材。
Rust + WASM 实现
Macroquad(推荐):在项目目录中执行 cargo init;Cargo.toml 中依赖 macroquad = "0.4",release profile 设置 opt-level = "z" 与 lto = true。基础结构使用 use macroquad::prelude::*; 与 #[macroquad::main("Game Title")] async fn main(),在循环中调用 clear_background(BLACK) 与 next_frame().await。构建与部署:cargo build --release --target wasm32-unknown-unknown,将生成的 wasm 复制到目标目录,并准备 index.html。
Bevy(高级):仅在需要复杂 ECS 结构时使用;构建时间较长(7 分钟以上),WASM 体积较大(3.6MB 以上)。
Godot 4.x 实现
在项目目录中执行 godot4 --headless --path . --quit 生成 project.godot。导出设置:Project → Export → Add... → Web;Export Path 设为 build/web/index.html;Texture Format 设为 VRAM Compressed;可按需使用自定义 HTML 模板。构建命令:godot4 --headless --path . --export-release "Web",产物位于 build/web/(index.html、.wasm、.pck)。
测试用例(第四阶段,TDD)
实现前先写测试用例,分类包括功能(游戏开始显示标题画面、点击开始进入游戏、核心机制对输入的正确响应、分数或进度更新、满足结束条件时显示结果画面)、UI/UX(移动端视口 390x844 正常显示、无横向滚动、触控区域至少 44x44px、safe-area 适配)、性能(页面加载 5 秒内、JS 控制台 0 错误、游戏过程中维持 60fps)。用例文档位置为 specs/games/<game>/test-cases.md。
实现与策划互补循环(第五阶段)
循环:按用例实现 → 执行用例 → 失败则修改代码或调整策划 → 重新实现 → 重新执行,直至全部通过。退出条件:所有功能、UI/UX、性能用例通过,且 DoD 清单全部满足。
QA(第六阶段)
自动化测试使用 Playwright 执行 games/<game-name>.spec.ts。必查项:页面加载成功(5 秒内)、JS 控制台 0 错误、开始按钮可点击、游戏可玩(存活 5 秒以上)、移动端视口(390x844)正常显示。人工清单:完整走一遍游戏循环、边界情况测试、音效播放确认(BGM + SFX)、响应式确认(桌面端 + 移动端)。截图至少 4 张:标题画面、游戏进行中、UI 元素(菜单、设置等)、结果画面(游戏结束或通关)。
部署
Rust + WASM:部署 index.html、<game>.wasm、mq_js_bundle.js(Macroquad)、assets/ 素材文件夹。Godot:部署 build/web/ 内容,包括 index.html、<game>.wasm、<game>.pck,必要时包含 assets/。
完成标准(DoD)
需全部满足:应用真实图片素材(禁止 CSS 图形或 emoji);应用真实音频素材(禁止 oscillator);测试用例 100% 通过;Playwright 自动化测试通过;截图 4 张以上;移动端响应式确认;致命缺陷 0 个;生成 og.png(1200x630);上线测试通过(实际 URL)。
游戏评级
A:DoD 全项满足、测试用例 100% 通过,保持并做营销。B:游戏可运行,但部分素材缺失或用例未通过,替换素材并补全用例。C:仅有代码、无素材、未写用例,从第一阶段重来。F:无 index.html、空目录或崩溃,删除或重做。
详细指南引用
Rust Macroquad:references/rust-macroquad.md;Rust Bevy:references/rust-bevy.md;Godot HTML5:references/godot-html5.md;素材授权:references/asset-licensing.md;性能优化:references/optimization.md。
重要约束
技术栈仅限 Rust + WASM 或 Godot;素材优先,编码前全部取得;强制 TDD,先写用例再实现;移动端优先,同步实现响应式;遵守授权,仅使用可再分发的素材。
快速开始示例(Snake,Rust + Macroquad)
从 NAS 获取蛇与食物精灵,从 kenney.nl 获取 BGM/SFX;编写 6 个功能用例、5 个 UI 用例、4 个性能用例;用 Macroquad 实现蛇移动、碰撞与分数逻辑;Playwright 自动化测试加移动端人工测试;部署到指定路径。资料给出的耗时参考:素材获取 1 小时 + 实现 2 小时 + QA 30 分钟,约 3.5 小时。
限制
具体游戏引擎版本兼容细节、部署域名配置、CI 集成方式、团队协作规范、非 HTML5 平台的发布方式等,暂未提供。