项目概览
一款 Q 版山海经题材的塔防游戏：玩家召唤山海经妖灵（狻猊、应龙、夔牛、毕方、赑屃、举父等 10 只）抵御异兽入侵。 核心玩法是 五行克制体系（金木水火土相生相克）+ 召唤流组合策略。 整个项目从场景、系统到 UI 全部采用纯代码构建，并围绕它搭建了一条 AI 美术管线。
五行克制系统
金木水火土相生相克，妖灵属性与敌人属性相互制衡，阵容搭配有深度。
召唤流玩法
以召唤妖灵为核心战斗资源的流派设计，配合五行属性形成策略空间。
AI 美术管线
ImageGen 生成立绘 → PIL flood-fill 抠图（保留最大连通域）→ 自动裁剪透明空白，10 只妖灵立绘全部产出。
山海经内容体系
每只妖灵配套山海经原文 + 现代解读，图鉴页即科普页，游戏与文化结合。
纯代码 UI 体系
颜色常量表 + 布局工具函数，整套 UI 一键换皮（墨色/宣纸/朱砂/烫金的卷轴印章风格）。
自测流水线
puppeteer + headless Chrome 打开 Cocos 预览自动截图验证 UI，改完不靠肉眼猜。
- Cocos Creator 3.8.8 游戏引擎
- TypeScript 开发语言
- ImageGen 立绘生成
- Python / PIL 抠图裁剪工具链
- puppeteer-core UI 自测
- Git 版本管理
开发侧重点
为什么值得看这个项目：它把「一个人做游戏」可能遇到的工程问题全走了一遍—— 纯代码搭建 UI（避免编辑器手动拖拽的不可复现）、AI 生图后处理（抠图 / 裁剪 / 去水印的像素级处理）、 数据驱动调参（妖灵占屏比例用真实数据对比主流塔防后决定）、以及一套可自动验证的 UI 自测流程。 这些方法不限于游戏，Web 前端与小程序开发同样适用。
踩过的典型坑：Label 多行文本（RESIZE_HEIGHT 模式高度由引擎计算，需用"贴边法"布局）、 节点锚点默认值 (0,0) 导致立绘偏移、AI 生成图"透明背景"并非真透明、批量改源码脚本的 off-by-one 陷阱。 相关复盘已沉淀为系列文章（见博客）。