最近探索用 Codex 做 2D 网页游戏，想通过游戏交互来讲故事。
我的设想是：不同剧情对应不同玩法。比如第一关是逃跑追逐，玩家需要在一个空间里利用障碍物躲避 AI 的追逐，坚持一段时间后通关；下一关进入新的剧情，再切换成另一种玩法。还没来得及琢磨后续的故事情节和玩法，就先被游戏地图的制作卡住了
在 ChatGPT 的建议下，我开始试着入门 Tiled。也正是在这个过程中，我发现 ChatGPT Image 2 真的可以生成挺不错的 2D 游戏地图素材，但这些素材导入 Tiled 后，基本没法直接用。
为了在Tiled里用上这些生成好的 SpriteSheet，我做了一个适配 Tiled 工作流的网页工具 SpriteSheet 编辑器
下面具体分享下这个过程。
Tiled 需要什么样的素材 #
Tiled 是一款开源的 2D 地图编辑器。在 Tiled 里，N 个固定大小的 tile 格子拼一起 = Layer 图层，N 个 Layer 图层叠一起 = 地图。
它可以把导入的图片按设定的大小分割处理成 tileset，比如导入一张图，就可以从右侧素材库里选中某些 tile，画到左边的地图编辑区。
所以只要拿到合适的图，比如 SpriteSheet这种一张集中存放多个素材的图片。当图片上的素材按照固定网格排好，并被 Tiled 正确切分后，它就可以作为 tileset 使用，拿到合适的 tileset，就可以 DIY 出想要的地图
| 概念 | 简单理解 |
|---|---|
| Tile | 地图里的一个小格子，比如 64×64 像素 |
| Tileset | 一组 tile 组成的素材库 |
| SpriteSheet | 把多个角色、道具、地块素材排在一张图里 |
| Layer | 地图图层，比如地面层、障碍物层、装饰层 |
| Tiled | 用 tile / tileset 拼 2D 地图的编辑器 |
用 ChatGPT Image 2 生成 SpriteSheet #
准备 SpriteSheet，要么自己画，要么去 itch.io 这类网站下载别人分享的，但找素材也很难快速找到美术风格满意的。 AI 时代，0基础小白最理想的选择，当然是用 AI 生成。
比如用这样一段提示词，就能生成素材：
Cat and mouse chase game SpriteSheet,
Including cat, mouse, land, grass, flowers, and some obstacles, Stardew Valley inspired cozy pixel art style,
strict evenly aligned grid layout,
64x64 tiles,
transparent background, isolated tiles, clean tile spacing, suitable for Tiled tileset and 2D game asset workflow
这样的图看上去很好，但实际上不可用。
| 问题 | 表现 | 影响 |
|---|---|---|
| 背景不透明 | 导入 Tiled 后出现白底 / 色块 | 图层遮挡，地图很脏 |
| 网格不对齐 | 元素没有严格落在 64×64 格子里 | Tiled 切出来的 tile 残缺 |
| 元素粘连 | 一个格子里有多个物体 | 无法单独选择素材 |
这些问题，在多次尝试调整提示词后也无法稳定产出高可用的 SpriteSheet，为了方便后期处理，开发了一个网页工具 SpriteSheet 编辑器。
SpriteSheet 编辑器 #
它可以
- 一键移除背景
- 自由截取需要的元素
- 重新排版组装成一张SpriteSheet
- 导出透明PNG
经过处理后导入 Tiled 可直接使用，干净整洁！
目前的Workflow #
于是就形成了这样一个 AI 生成 SpriteSheet 的处理 workflow：
- 用 ChatGPT Image 2 生成一张包含角色、地块、障碍物的素材图
- 把原图导入 SpriteSheet 编辑器
- 移除背景，手动框选有用元素，重新排版成 SpriteSheet，导出 PNG
- 在 Tiled 中导入为 tileset
- 用不同图层拼出地图
可能这个定制化 workflow 不够通用，也和真正的游戏开发 workflow 差距甚远，但也算是迈出了用 AI 做游戏的一小步。
感谢 AI，让以往那些完全不敢想的事情，都有点跃跃欲试了。