跳到主要内容

Cocos Creator 3.8.8 接入示例

示例工程位于仓库 examples/cocos。它把金币图集、炮塔和机器人放进同一个小场景,关注资源接入,不实现完整塔防玩法。

导入后的数据关系​

glTF 数据Creator 子资源/组件
Scene/NodePrefab与节点层级
MeshMesh与MeshRenderer
SkinSkeleton与SkinnedMeshRenderer
Material/Texture材质与纹理
AnimationAnimationClip

把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节点控制水平旋转,底座保持不动。这与机器人骨骼动画是两种不同的运动方式。金币则是图片切帧:三者都在“动”,底层数据完全不同。

验收顺序​

  1. 确认控制台无加载异常,资源数量与清单一致。
  2. 检查三个对象的尺寸、朝向、材质与可见性。
  3. 检查金币帧持续变化、炮管跟随Yaw、机器人骨骼摆动。
  4. 记录引擎版本、浏览器、构建配置与实际结果。
  5. 再构建微信小游戏,进入下一层验证。

工程的实际执行结果与下载入口见验证记录、下载。

官方阅读:模型导入、glTF转换、CLI构建。