技术能力与成本对照表
先确定你在比较同一层的什么问题。Figma 与 Cocos 之间通常是交付关系，Canvas 与 WebGL 之间是渲染路线选择，FairyGUI 与引擎之间是集成关系。
一眼看懂职责
| 技术 | 主要职责 | 典型产物 | 进入微信小游戏前需要什么 |
|---|---|---|---|
| Figma | 布局、组件设计、交互原型 | 设计稿、规范、图片 | 在目标 UI 系统重建布局、交互，处理字体与资源 |
| Photoshop | 位图绘制与图像处理 | 分层文件、切图、纹理 | 按尺寸和格式导出，再导入资源管线 |
| Illustrator | 矢量图形与图标设计 | 矢量源文件、导出图 | 核对运行时格式支持，必要时栅格化 |
| Canvas 2D | 通过绘图 API 生成二维画面 | 绘制代码、素材 | 平台 Canvas API、输入和资源适配 |
| WebGL | GPU 图形绘制接口 | 网格、纹理、着色器和命令 | 核对平台图形接口、扩展及资源管理 |
| Cocos Creator | 场景、组件、UI、资源与构建 | 引擎项目与平台构建产物 | 使用微信目标构建，核对 API、版本与设备 |
| Unity／团结引擎 | 游戏与 UI 的完整引擎系统 | 场景、资源、程序与构建 | 区分通用 WebGL 导出与微信专用适配链路 |
| FairyGUI | 可视化 UI 制作与运行库 | UI 包、图集、组件描述 | 选择对应引擎 SDK，再走引擎的平台构建 |
| LayaAir | 游戏引擎、场景与平台发布 | 引擎项目 | 使用对应版本的平台发布和适配功能 |
| PixiJS | 二维渲染与显示对象组织 | 渲染代码、素材 | 浏览器接口假设与微信适配需要逐项验证 |
| Phaser | 二维游戏框架 | 场景、输入、动画、素材 | 评估所选版本的运行时依赖与移植方案 |
| Three.js | 三维渲染和场景组织 | 三维场景、材质、代码 | 核对资源加载、图形接口、输入及适配层 |
| Godot | 二维／三维游戏引擎 | 场景、资源与脚本 | 核对导出目标和微信适配；Web 导出不能直接证明微信支持 |
| Spine | 二维骨骼动画制作与运行库 | 骨骼、附件、动画数据、纹理 | 匹配编辑器与运行库版本，并评估特性和授权 |
| AE／Lottie | 动效制作与部分动画描述播放 | 合成、视频／序列帧、动画数据 | 核对导出特性及目标播放器；小程序适配不等于小游戏适配 |
以上是职责速查，不是兼容性认证。具体条件与官方来源分别见 引擎章节、其他框架、动画章节 与 Lottie 章节。
按需求选择组合
| 想做的效果 | 起步组合 | 成本主要落在哪里 | 何时重新评估 |
|---|---|---|---|
| 少量按钮与静态面板 | Canvas 或现有引擎 UI + 九宫格 | 命中、文本、布局与维护 | 多页面状态与复杂列表开始增长 |
| 大量业务式游戏界面 | 引擎 UI；必要时评估 FairyGUI | 组件规范、数据绑定、编辑与协作 | 编辑器工作流或运行库不适配团队 |
| 角色待机和换装 | 引擎 + 骨骼动画运行库 | 拆件、绑定、动画与版本管理 | 部件关系很复杂或动画主要是逐帧特效 |
| 手绘爆炸与风格化逐帧效果 | 序列帧 + 图集 | 帧数、分辨率、纹理内存 | 动作变体过多、包体或内存吃紧 |
| 可调数量的金币与星光 | 粒子／对象池 + 补间轨迹 | 透明叠加、对象更新和生命周期 | 大面积覆盖屏幕或反馈遮挡交互 |
| 溶解、扫描、动态描边 | 自定义材质／Shader | 技术美术、采样、适配与维护 | 团队无法维护材质或目标设备不稳定 |
| 三维角色展示与二维菜单 | 三维引擎场景 + UI 系统 | 灯光、模型、渲染层级和资源体积 | 视觉收益不足以覆盖加载与设备成本 |
别把成本压成一个分数
“轻量”“高性能”“低代码”都需要说明比较条件。至少拆开以下五项：
- 制作成本：需要设计师、动画师、技术美术还是程序员参与？
- 资源成本：下载体积、解码体积、纹理尺寸、字体范围分别是什么？
- 运行成本：CPU 更新、GPU 绘制、透明叠加和内存谁先达到限制？
- 适配成本：需要哪些插件、转换器、基础库或设备条件？
- 维护成本：版本升级、换人、换皮、多语言和内容迭代会影响什么？