跳到主内容
梁典典梁典典的博客
搜索
AI
文章阅读

给 Cocos Creator 小游戏补一套 Codex 技能工作流

这篇整理我给 Codex 配的一套 Cocos Creator 小游戏技能组合：怪物行走/攻击雪碧图、游戏 UI 设计、Cocos 3.x 实现、SVG 图标和 PNG 素材生成。重点不是让 AI 一次性把美术全做完，而是把设计、素材整理和引擎落地拆开，让结果更稳。

2026/05/031142 次阅读6 分钟
#AI#Cocos Creator#Codex#学习#游戏引擎

如果你用 Codex 做 Cocos Creator 小游戏，别一上来就让它直接把所有美术都生成完。

这件事我最近又确认了一遍：AI 直接做游戏美术，尤其是怪物动画、游戏 UI、按钮图标、卡牌面板这一类东西，很容易看起来“差不多”，但真正放进游戏里就不稳。比例不统一、边缘不干净、图标风格散、UI 不像一个系统，这些问题会反复出现。

所以我最后整理的思路不是找一个“万能 Cocos 美术技能”，而是给 Codex 配一套组合工作流。每个 skill 只负责自己最擅长的部分。

先说结论

我最后保留并安装到 Codex 的核心技能是这些：

  • game-ui-design
  • cocos-survivor-defense-minigame
  • cocos-creator-3x-cn
  • theone-cocos-standards
  • ui-ux-pro-max
  • svg-draw
  • responses-image-generation
  • pixel-td-cocos-expert

这里面真正新装的是 game-ui-design。其他几个是我本来就有或补齐到 Codex 技能入口里的 Cocos / UI / 素材相关技能。

这套组合的重点很简单：

game-ui-design 负责游戏 UI 判断，ui-ux-pro-max 负责视觉规范，svg-draw 负责稳定图标，responses-image-generation 负责真正出 PNG，cocos-creator-3x-cn 负责 Cocos 3.x 落地，cocos-survivor-defense-minigame 负责竖屏小游戏结构和素材流程。

怪物行走和攻击动画不要直接赌 AI

我原本想找的是能做 Cocos Creator 怪物行走动画、攻击动画雪碧图的技能。

最后发现，没有一个特别靠谱、专门为 Cocos Creator 做这件事的高质量单点技能。公开技能库里有一些 sprite sheet、sprite animation 相关技能，但要么安装量不高，要么偏 PixiJS、Phaser，要么更像通用图片生成。

真正实用的是 cocos-survivor-defense-minigame 里的素材脚本。

它有两个很有用的能力：

第一，把逐帧 PNG 整理成 manifest 和横向 sprite sheet。


node /Users/ldd/.codex/skills/cocos-survivor-defense-minigame/scripts/prepare-sprite-frames.mjs \
  --input /absolute/path/to/walk_frames \
  --output /absolute/path/to/output \
  --name monster_walk

第二，把规则网格 sprite sheet 切回单帧 PNG，并生成 manifest。


node /Users/ldd/.codex/skills/cocos-survivor-defense-minigame/scripts/slice-sprite-sheet.mjs \
  --input /absolute/path/to/monster_attack_sheet.png \
  --output /absolute/path/to/attack_frames \
  --columns 4 \
  --rows 2 \
  --name monster_attack

这就比较符合实际生产流程了。

图片可以用别的方式生成，甚至可以人工修。Codex 这边只负责整理、切图、命名、生成清单，然后再交给 Cocos Creator 去做 AnimationClip 或 prefab。

这比让 AI 一次性生成“完美怪物攻击动画”靠谱得多。

游戏 UI 要拆成设计和实现两层

另一个问题是 Cocos Creator 游戏界面 UI。

我之前直接说过：AI 美术不太行。现在看，问题不只是“画得不够好”，而是它经常没有系统感。

一个按钮看着还行，十个按钮放一起就散了。一个技能卡牌看着还行，放到升级三选一面板里就会发现间距、边框、图标、文字层级都不统一。

所以这里我更推荐用两个技能配合：

game-ui-design 负责游戏 UI 的判断，比如 HUD、血条、经验条、技能冷却、暂停按钮、移动端安全区、战斗中可读性。

ui-ux-pro-max 负责把它变成设计规范，比如颜色、字号、间距、组件状态、按钮规范、卡牌规范、弹窗规范。

然后再用 cocos-creator-3x-cn 把这些东西落到 Cocos Creator 3.x 里，比如 Canvas、Widget、Button、Label、Sprite、UIOpacity、tween、触摸事件。

也就是说，不要让一个 skill 同时负责“审美判断、素材生成、Cocos 实现”。分开之后，效果会稳定很多。

图标优先用 SVG，而不是每次都生图

游戏 UI 里有很多小图标：金币、攻击、攻速、暴击、暂停、加速、重开、技能冷却、穿透、减速。

这些东西其实不适合每次都用图片生成模型来做。

原因很简单：你要的不是一张“看起来很酷的图”，你要的是一组风格统一、尺寸稳定、边缘干净、能在 32 到 64 像素下读得清楚的符号。

所以我把 svg-draw 放进这套工作流里。

它更适合做 UI 图标、按钮符号、占位图标，然后按需转 PNG。这样比直接让 AI 生一堆小图标更稳，后期也更容易统一颜色和线条。

我现在会怎么调用

如果是设计一套竖屏割草游戏 HUD，我会这样叫：


$game-ui-design 帮我设计一个竖屏 Cocos 割草游戏 HUD：血条、XP条、暂停、加速、金币、技能冷却、升级三选一卡牌、死亡复活弹窗。

如果要整理 Cocos 项目结构和 UI 节点，我会这样叫：


$cocos-survivor-defense-minigame 帮我整理这个游戏的 UI 节点结构、素材目录、HUD/升级卡牌/技能树/复活面板的 Cocos 实现方案。

如果要做一组稳定图标，我会这样叫：


$svg-draw 给我做一套统一风格的 Cocos UI 图标：金币、攻击、攻速、暴击、暂停、加速、重开，SVG 并导出 PNG。

如果要一次性把设计和 Cocos 落地都考虑进去，我会这样组合：


$game-ui-design $ui-ux-pro-max $cocos-creator-3x-cn
给我的 Cocos Creator 3.x 竖屏割草游戏设计一套可落地 UI。要求：移动端 9:16，别太 AI 味，给 HUD 布局、颜色规范、按钮/卡牌/弹窗组件状态、Cocos 节点结构、素材清单和实现注意事项。

这个组合基本覆盖了从 UI 判断到 Cocos 实现的完整链路。

这套技能怎么分工

game-ui-design：专门看游戏 UI，适合 HUD、菜单、移动端安全区、战斗中可读性、按钮提示、游戏手柄和触控体验。

cocos-survivor-defense-minigame：适合竖屏小游戏整体结构，尤其是割草、守卫、自动射击、升级三选一、技能树、复活、排行榜这类玩法。

cocos-creator-3x-cn：Cocos Creator 3.x API 和 TypeScript 实现。做 Canvas、Widget、Sprite、Button、Label、tween、资源加载这些时用它。

theone-cocos-standards：Cocos 项目代码规范和性能约束。写正式代码、优化包体、做可试玩广告时很有用。

ui-ux-pro-max：补充 UI/UX 设计系统，适合做颜色、字号、间距、组件状态、界面规范。

svg-draw：做稳定的 SVG 图标和 UI 符号。

responses-image-generation：真正需要 PNG 图片素材时再用。

pixel-td-cocos-expert：如果项目偏像素、低模、塔防，再引入它。

我的实际建议

这套东西真正有价值的地方，不是“安装了很多技能”。

真正有价值的是把 AI 容易翻车的地方拆开。

怪物动画不要指望一次性生成完美 sprite sheet，而是先生成或手修图片，再用脚本整理成 Cocos 可用的帧和清单。

游戏 UI 不要让 AI 直接画完整大图，而是先做 HUD 结构、组件规范、图标系统，再交给 Cocos 实现。

小图标不要每次都生图，优先用 SVG 稳定下来。

这才是我现在更愿意采用的 Codex 工作流：让 AI 做拆解、规范、整理和落地，把不稳定的美术生成控制在一个比较小的范围里。

对 Cocos Creator 小游戏来说，这比“让 AI 帮我做一套美术”实际得多。

返回顶部