Cocos Creator 3.8.8 接入示例
示例工程位于仓库 examples/cocos。它把金币图集、炮塔和机器人放进同一个小场景,关注资源接入,不实现完整塔防玩法。
导入后的数据关系
| glTF 数据 | Creator 子资源/组件 |
|---|---|
| Scene/Node | Prefab与节点层级 |
| Mesh | Mesh与MeshRenderer |
| Skin | Skeleton与SkinnedMeshRenderer |
| Material/Texture | 材质与纹理 |
| Animation | AnimationClip |
把GLB复制到assets只是输入阶段。编辑器还需要导入并生成子资源,游戏才能按引擎类型使用它们。
打开和构建
用 Creator 3.8.8 打开 examples/cocos,等待资源导入,打开 assets/scenes/Main.scene 预览。脚本在启动时创建相机、灯光、UI与资源实例。
也可以在仓库根运行:
node examples/cocos/tools/build.mjs web-desktop
python3 -m http.server 4174 --directory examples/cocos/build/web-desktop
随后访问 http://localhost:4174。构建脚本先复制本站最终资产,再调用本机 Creator;其他系统用 COCOS_CREATOR 指定可执行路径。
Creator 3.8 CLI的成功退出码为36,脚本已专门处理,并检查输出文件存在。执行日志在本机,不能仅凭“进程结束”断言构建成功。
图片路线
金币图集是1024²纹理,4×4格,格子256²。示例通过Texture2D创建SpriteFrame,按24fps切换16帧。普通JSON坐标清单不直接变成Creator图集,需由接入代码解释。
如果你使用独立PNG帧,也可以在编辑器创建SpriteFrame序列动画。保持统一中心和偏移,避免自动裁剪造成抖动。
模型路线
示例将模型分别放入resources/turret与resources/robot,按目录和类型读取Prefab,避免预先猜导入子资源名。
resources.loadDir('robot', Prefab, (error, prefabs) => {
if (error || !prefabs.length) return;
const model = instantiate(prefabs[0]);
parent.addChild(model);
});
真实业务应同时处理加载失败、资源释放和重复请求;示例把错误显示在场景底部,便于学习与验收。
动画与节点控制
机器人加载对应AnimationClip并配置Loop。片段绑定依赖导入的层级路径,不能随意改骨骼节点名称或重新挂载到不匹配的根下。
炮塔使用Yaw节点控制水平旋转,底座保持不动。这与机器人骨骼动画是两种不同的运动方式。金币则是图片切帧:三者都在“动”,底层数据完全不同。
验收顺序
- 确认控制台无加载异常,资源数量与清单一致。
- 检查三个对象的尺寸、朝向、材质与可见性。
- 检查金币帧持续变化、炮管跟随Yaw、机器人骨骼摆动。
- 记录引擎版本、浏览器、构建配置与实际结果。
- 再构建微信小游戏,进入下一层验证。