如何使用AI快速开发《码农物语》游戏原型-美术资产2D篇

Agent制作游戏教程（三）：独狼的美术自救指南——AI制作美术资产的三种流派

本文依然基于我自己的独立游戏《码农物语》开发时遇到的问题以及踩坑总结，干货较多，面向有一定AI和Agent使用基础、但美术基础约等于零、或者根本没预算请外包美术的独狼开发者。

但是需要你们有钱买哈机密、gpt会员、豆包和minimax的会员或者api

2D美术死穴与帧间一致性

上一期我们讲了模块化开发和如何用文档防止AI拉出一坨屎山代码。按照前两期的步骤，很多盒友手里的PoC应该已经跑通了——比如我游戏里的农田能划格子了、机器人能按写好的脚本去播种浇水了。

但这时候，只要你点开游戏画面，一股浓烈的廉价感就会扑面而来：全屏都是灰扑扑的div方块、网上随便扒来的风格互斥的图标、还有刺眼的白底红字。

这时候肯定有盒友要问了：现在AI绘图不是都进化到能以假乱真了吗？我直接让AI给我画一套游戏角色的跑动动作图不就行了？

很可惜的是，人工智障还没有进化到那一步。AI画单张壁纸确实强，但游戏动画要的是“连续帧”。AI一旦开始画第二帧，反手就会给你整出新花样：第1帧长发飘飘，第2帧头发突然变短；第3帧衣服颜色从蓝色变绿色；第4帧甚至可能凭空多长出两根手指。这东西放进游戏里一播放，角色不是在走路，是在原地发病变异

这就是AI做游戏美术最大的死穴：缺乏帧间一致性。说白了，AI画第二帧的时候，根本不记得第一帧到底画成了什么样。

为了解决这个问题，目前行得通的方案主要有三种：穷哥们法、美术大佬法、视频法。丰俭由人，大家根据自己的钱包和肝脏健康程度自选。

穷哥们法：让AI手搓SVG代码

所谓穷哥们法，省流：一分钱不花，全靠你手里的编程Agent纯手搓SVG。

很多不怎么懂前端的盒友可能不知道SVG是什么。这玩意儿本质上不是由一个个彩色像素拼起来的位图（不是png也不是jpg），它其实就是纯文本格式的XML代码。矩形就是，圆形就是，复杂的轮廓线条就是贝塞尔曲线，填充颜色就是fill="#xxxxxx"。

既然是写代码，那这正好撞在各大LLM（Deepseek、千问、Claude等）的枪口上了，这可是它们的传统强项。

穷哥们法有极其离谱的优点：

第一是真的一毛钱不用掏。不需要你买MJ会员，不需要你有4090跑SD，甚至连画图软件都不用开，你平常用哪个AI搞VibeCoding，就让它顺手写SVG。

第二是矢量图无限缩放不模糊。不管你游戏窗口怎么拉伸、在高分屏上怎么放大，它都是绝对锐利的。这东西天生极度适合做UI图标、技能按钮、农作物各生长阶段外观、机械零件、掉落物以及扁平科技风的小物件。

但这里注意注意注意！Ai画的SVG只能说勉强能用，只适合图标和一些轻量小游戏的美术资产制作。

千万不要试图让AI用SVG给你画二次元老婆立绘或者厚涂写实怪物。复杂的贝塞尔曲线AI写出来极容易变成抽象派毕加索，而且代码量上万行后会让浏览器渲染直接卡死。

提示词模板如下，直接复制给你的Agent：

“你现在是资深2D游戏矢量UI与图标设计师。请用纯SVG代码帮我绘制一个【主题，比如：2D扁平风格的农田自动巡检机器人，包含履带底座、方块机身和扫描探头】。
要求：
1. 必须使用标准的
2. 结构必须语义化分组，用 、、 等标签包裹不同部件；
3. 扁平风格，色彩明快，主色调不要超过4种；
4. 保证图形居中，四周留出安全边距；
5. 只输出纯 代码块，不要带任何markdown废话和外层HTML容器。”

美术大佬法：3D姿态截图 + 深度图 + 逐帧跑图 + 人工修图

如果你的游戏是横版卷轴、动作或者RPG，主角必须得有跑动、挥剑、施法这套正儿八经的连续动作序列帧，那穷哥们法的矢量图就搞不定了，你必须得用位图。

因为这套方案需要用到3D软件，而且最后必须有人工修图把关。Ai直出的图属于能看但存在各种各样的问题。

这套方法的核心逻辑非常朴素：AI之所以每帧乱变，是因为它脑子里没有物理空间的概念。那我们就用现成的3D骨骼动作给AI作为参考图。

具体怎么干？分四步：

第一步：去白嫖现成的3D动作。零美术基础千万别想着自己去Blender里建模捏人绑骨骼，那是职业模型师干的事。直接去Adobe旗下的Mixamo网站（完全免费的动捕动作库，注册个账号就能下）或者去开源模型站下个人体木偶。选好你想要的动作，比如“Walk Forward”或者“Slash”。把3D视角的摄像机锁死在你游戏需要的角度（比如标准的2D侧视，或者45度斜俯视），然后把这个动作按帧导出一组截图。

这一步也可以ai代劳，只需要安装blender和blenderMCP，就可以让ai输出参考图，提示词如下

“如果当前没有安装blender的mcp，则安装，并完成以下任务：

将指定模型在blender中输出深度图、骨骼图、剪影图和姿势参考截图到指定目录。”

姿势示意图，给ControlNet的OpenPose识别动作姿态；另一个是深度图（Depth map，就是距离镜头近处偏白、远处偏黑的灰度图）。深度图极其关键！它把角色的胖瘦、肢体前后遮挡关系彻底焊死了，AI拿到深度图就再也没法随便给角色胡乱加粗手臂或者长出第三只手。

gemini的agent反重力里，只能上传3张图片给绘画模型，多余的会被抛掉。所以我建议只上传骨骼示意图、深度图和角色对应视角的设定图。

有需要参考图的请留言或者私信联系我，我会免费提供。

第二步：把角色设定图和深度图、姿势示意图传给ai

第三步：人肉修图（最关键的一步！）。AI生成的这十几张PNG，大体动作肯定是对齐的，但细看必定会有穿帮：第3帧胸口有纽扣，第4帧纽扣突然没了；第5帧剑刃突然变粗了；第7帧靴子边缘多了几块脏斑点。这时候你必须把这组图扔进Photoshop、Aseprite或者Krita里，按播放快捷键来回轮播，像挑刺一样把穿帮的像素点手动涂改抹平。这一步省不掉，不修的话放到游戏里角色就会疯狂闪烁抽搐。

不人肉修图的代价如下：

第四步：合成精灵图。把修好的PNG按规律命名（比如hero_run_00.png到07.png），用TexturePacker或者直接让Agent写个几行Python脚本，一键拼成整张精灵图（Sprite Sheet）并导出带有每帧坐标信息的JSON文件。

让Agent写拼图脚本的提示词很简单：

“写一个本地Python脚本，用Pillow库：读取指定目录下所有有序命名的PNG图片，检测并裁掉每张图四周的透明空白，按角色底部脚底对齐，将它们无缝拼成一张单行（或4x4网格）的sprite_sheet.png，并输出对应的atlas.json记录每张小图的位置和宽高。”

富哥法：AI生成视频 + 抽帧 + 智能抠图

如果你觉得搞3D太麻烦，学不会Blender也懒得在Mixamo里调动作，而且你自认手残修不来图，但你兜里有预算（或者本地显卡有4090/各大视频模型平台点数充足），那就可以直接走富哥路线。

富哥法的底层逻辑是降维打击：利用现在的视频生成大模型（可灵Kling、Runway Gen-3、Luma等）。视频模型在预训练的时候学的就是现实世界连续运动的规律，它天生就解决了“帧与帧之间连接不自然”的毛病。

具体操作：

第一步：图生视频跑绿幕动作。把你事先设计好的角色正面立绘作为参考图喂给视频模型。提示词里必须严防死守两个东西：背景和机位！比如提示词必须写明：“纯绿色背景（green screen #00FF00）、地面无阴影、固定机位视角摄像机、2D游戏角色循环奔跑动画”。千千万万不能让AI运镜，镜头要是拉近推远一下，这组素材当场就废了。

第二步：视频转图片。给agent下指令：

“把视频转换为帧序列”

第三步：批量抠图去绿边。从视频里抽出来的图底色是绿的，而且由于视频压缩，角色边缘往往会有很严重的绿幕反光和溢色（Green Spill）。如果用传统画图软件的颜色魔棒去点，边缘会留下一圈极其恶心的绿色毛边。要么手动抠图要么让ai进行抠图。只需要对agent说：

“抠图、保持画风不变、去除背景”

ai抠图建议使用gpt和gemini。豆包不知道怎么回事，经常输出不出透明背景的图

第四步：脚底中心对齐。视频模型生成的动作通常会有轻微的全局位移漂移（角色一边走一边往前滑）。如果你直接把抽出来的图拼在一起，角色在游戏里循环播放时就会左右乱抖。让Agent写个轻量的OpenCV脚本，计算每一帧角色身体像素的“最底部中心点”，把所有帧的脚底坐标钉死在画布相同的位置，再拼成精灵图。

视频法虽然爽，但坑也很明显：

首尾帧循环闭环难搞。视频模型很难做到完美的无缝循环（Seamless loop），通常需要你人工在抽出来的几十帧里，手动挑选出刚好跨完一步的完整周期（比如刚好从左脚落地到下一次左脚落地的第4帧到第12帧）拿来用。

一般来讲，精灵图都是4帧4向（上下左右）的。这里我为了演示视频转帧序列由ai抠图后的gif的效果多好，采用的是24帧/s的图，实际游戏中只需要抬腿迈腿落地等关键帧组成的4-8帧。不过很可惜的是我口袋里分文不剩，只能给你们看不精修和抽卡时长啥样了。如图：

下期预告：美术资产3D篇：