牛马日记（hustle-diary）：微信小游戏「羊了个羊」风格消除游戏

安装与快速上手

安装方式非常直接：

npm install playcanvas

或者使用官方脚手架在数秒内创建一个完整项目：

npm create playcanvas@latest

README 给出的 Hello World 示例是一个旋转的立方体，展示了引擎的基本使用范式：

• 创建 Application 并绑定到 canvas 元素；
• 通过 setCanvasFillMode 与 setCanvasResolution 设置画布填充与分辨率策略；
• 监听窗口 resize 事件并调用 resizeCanvas() 自适应尺寸；
• 用 Entity 加 addComponent 的方式组装渲染体、相机与灯光；
• 在 app.on('update', ...) 回调中按帧间隔 dt 旋转立方体；
• 最后调用 app.start() 启动主循环。

这种“实体 + 组件”的组织方式对熟悉组件化开发的读者比较友好。README 还提供了 CodePen 在线示例链接，以及基于引擎搭建本地开发环境的独立指南入口。

生态与工具链

README 用一张表格梳理了围绕引擎的生态包，方便按需选型：

这意味着团队可以按自身技术栈选择接入方式：纯引擎脚本、React 组件化，或 Web Components 声明式写法。可视化编辑器则提供了不写代码也能搭建场景的路径。

项目展示与使用者

README 的 Project Showcase 一节列出了若干已发布的游戏与应用，并给出可在线试玩的链接，包括 Seemore、After The Flood、Casino、Swooop、dev Archer、Gaussian Splat Statues、Car、Star-Lord、Global Illumination 等，更多作品可在官网探索页查看。

Users 一节列出了在游戏、广告与可视化领域使用该引擎的公司名单，例如 Animech、Arm、BMW、Disney、Facebook、Famobi、King、Miniclip、Mozilla、Nickelodeon、Samsung、Snap、Zynga 等。这些信息来自 README 原文，可作为了解其工业应用场景的参考。

学习建议

对于初次接触的读者，建议按以下顺序推进：

1. 先跑通 README 中的旋转立方体示例，理解 Application、Entity、组件与 update 事件的关系；
2. 阅读用户手册中的独立开发环境搭建章节，建立本地工程；
3. 按兴趣深入图形、XR、高斯泼溅或物理等专题手册；
4. 对照示例页面与 API 参考，逐步替换为自己的场景与脚本。

引擎同时支持 JavaScript 与 TypeScript 编写脚本，已有前端经验的开发者上手成本相对可控；但 3D 图形、着色与 XR 相关内容仍需一定的图形学基础。