程序员做游戏美术，我用AI把成本压到了接近0

程序员做游戏美术，我用AI把成本压到了接近0

“你一个人写代码就算了，美术你也自己搞？你以为你是谁？”

——美术同事，在看完我第一个游戏之后说的话

说实话，第一款游戏的美术确实很丑。方块人、纯色背景、图标是系统默认的圆角矩形。

但第二款游戏上线的时候，有人在评论区问：“你们美术团队有几个人？”

还是只有我一个人。区别是：我学会了用AI。

这篇文章不是AI工具软广。我会把我真正在用的工作流完整拆给你看——从「一张图都没有」到「游戏美术资源全部到位」，AI在中间每一步能做什么，做不到什么，以及我踩过的坑。

目录

一、先认清现实：AI能做什么，做不到什么 {#现实}

很多人对AI美术的期待不是太高，就是太低。先对齐一下：

✅ AI现在真的能做到的

❌ AI现在做不好的

• 角色动画：AI生成的动画帧之间抖动严重，当前仍不适合直接用于游戏
• 风格完全统一：不同批次生成的图，细节风格容易漂移，需要手工维护一致性
• 像素精确控制：需要特定尺寸（如16×16图标）的资源，AI很难精准输出，仍需手工处理
• 版权干净的商用资源：AI生成物的商用版权在不同平台规则不同，发布前务必确认

二、概念设计阶段：用 Midjourney / Flux 确定视觉风格 {#概念}

最容易被忽略、但最重要的一步。

在画任何一张正式美术资源之前，先用AI生成10~20张风格参考图，把你脑子里模糊的「我想要那种感觉」变成一张具体的图。

Midjourney V8 提示词技巧（游戏美术向）

基础公式：

[内容描述] + [风格关键词] + [技术参数]

实际示例——休闲手游UI风格确定：

cute mobile game UI kit, colorful cartoon style, buttons icons panels,
flat design, pastel colors, 2D game assets, white background,
clean edges, –style raw –ar 16:9 –v 6.1

像素风角色参考：

pixel art character sprite sheet, 16bit retro style,
fantasy RPG warrior, idle animation frames,
transparent background, 32×32 pixels,
clean pixel art, –style raw –ar 3:2

黑白线稿风（低美术难度）：

black and white minimalist game character,
ink illustration style, simple shapes,
2D platformer protagonist, white background,
–no color –style raw

关键原则：用AI锁定「美术圣经」

生成完之后，选出3~5张你最满意的，放进一个「美术规范文档」，往后所有资源都往这个标准靠。

这一步做好了，整个游戏的美术才有统一感。很多独立游戏看起来「拼凑感强」，就是因为跳过了这一步。

三、UI资源生成：图标、按钮、面板的AI工作流 {#UI}

UI资源是独立开发者用AI最能立竿见影的地方，生成效果好、改动需求少、商用风险低。

3.1 图标批量生成（Midjourney）

技巧：一次生成一组，让AI保持风格一致性。

game UI icon set, [道具名称列表], isometric 3D style,
colorful cartoon, white background, 8 icons in one image,
same art style, game asset, –ar 1:1

例：一次生成一套道具图标

game item icons set: health potion, mana potion, gold coin,
magic sword, shield, key, bomb, treasure chest,
cute cartoon 3D style, vibrant colors, isolated on white,
consistent art style, –ar 2:1 –style raw

生成后用 Adobe Firefly 或 Photoshop AI 做背景去除和边缘处理，5分钟出一套16个图标。

3.2 按钮和面板（Stable Diffusion + ControlNet）

如果需要精确控制布局，SD + ControlNet 比 Midjourney 更合适：

• ControlNet Canny：先用草图/线稿控制形状，再让AI填充风格
• 推荐模型：dreamshaper_8（写实卡通兼顾）或 anything-v5（二次元）

工作流：

1. 在 Figma 里画出按钮/面板的线框草图（10分钟）
2. 导入 SD WebUI 作为 ControlNet 参考
3. 填入风格提示词，批量生成3~5个变体
4. 挑最好的，再用 Firefly 补细节

3.3 生成资源的尺寸规范（Cocos Creator 友好）

四、角色与场景：AI出图 + 手工精修管线 {#角色}

这是AI最能「以假乱真」的环节，但也是最需要手工干预的环节。

4.1 角色立绘工作流（以Cocos微信小游戏为例）

完整流程：

Step 1: Midjourney 生成 5~10 个角色候选（10分钟）
↓
Step 2: 挑最满意的 1~2 张，用 Adobe Firefly 细化
→ 修改细节：表情/服装/配色
→ 去除背景（AI一键去除，效果很好）
↓
Step 3: 导入 Photoshop，手工修整边缘
→ 主要解决：手指/头发 AI的常见错误区域
→ 统一光影方向（和游戏场景光源一致）
↓
Step 4: 切图：按游戏逻辑拆分部件
→ 头部/身体/武器 分层保存（为Spine动画准备）
↓
Step 5: 导入 Cocos Creator 测试实际显示效果
→ 在真实分辨率下看，和AI工具里显示的会有差距

4.2 场景背景生成

背景是 AI 效果最好的类别——生成、微调，基本不需要大量手工修整：

// 滚动背景（横版游戏）
side-scrolling game background, fantasy forest,
2D cartoon style, multiple layers (sky/clouds/trees/ground),
parallax layers, no characters, pastel colors, –ar 16:9

// 俯视角地图（塔防/策略）
top-down game tileset, medieval fantasy,
grass terrain, stone path, trees, water,
cartoon style, game asset, seamless tile, –ar 1:1

重要技巧：让AI生成可无缝拼接的背景

在提示词末尾加：seamless texture, tileable

生成后用 Photoshop 的「偏移滤镜 + 修补工具」二次处理，确保边缘真的能无缝拼接。

五、像素风专项：AI + Aseprite 的高效组合 {#像素}

像素风是独立开发者的「保命」风格——对美术要求低、开发成本小、玩家接受度高。AI + Aseprite 的组合能让这个效率再翻倍。

5.1 用AI生成像素风基础素材

Stable Diffusion 像素风推荐配置：

• 模型：PixelArt LoRA（civitai可免费下载）
• 推荐提示词格式：

pixel art, [内容], 16bit, retro game sprite,
clean edges, limited color palette,
(8 colors:1.3), no anti-aliasing, –style raw

• 负向提示词（必须加）：

blurry, smooth, gradient, anti-aliasing,
high resolution, photorealistic, 3d render

5.2 Aseprite 工作流：从AI草图到正式像素图

Aseprite 是目前最好用的像素画编辑器（$20，买断，GitHub上有源码可编译免费版）。

实战步骤：

1. AI生成参考图（不要求像素精度，只要造型对）
2. 在 Aseprite 中新建 16×16 或 32×32 画布
3. 把AI图缩放到对应尺寸作为底图描摹
4. 用像素笔刷逐格重画（30~60分钟/角色，熟练后更快）
5. 设置颜色表（推荐 Lospec Palette 网站，有大量免费色板）
6. 导出 PNG 精灵图集，在 Cocos Creator 里切割 SpriteFrame

5.3 在 Cocos Creator 中使用像素图资源

注意：像素图导入 Cocos 后默认会做抗锯齿处理，导致像素风变模糊。

必须修改的设置：

// 在加载像素图资源后，设置过滤模式
import { Texture2D, TextureFilter } from 'cc';

// 方式1：在编辑器里选中图片资源 → Inspector → Filter Mode → Point（最近邻）
// 方式2：代码里设置
const texture: Texture2D = yourSprite.spriteFrame.texture as Texture2D;
texture.setFilters(TextureFilter.NEAREST, TextureFilter.NEAREST);

另外，摄像机也需要调整：

// 禁用摄像机的抗锯齿（像素游戏必须）
// 在 Camera 组件的 ClearFlags 里取消 MSAA
// 或者在代码中：
camera.msaa = MSAA_QUALITY.NONE;

六、动画资源：AI生成序列帧 + Spine骨骼动画 {#动画}

动画是目前 AI 最薄弱的环节，但也已经有了可用的工作流。

6.1 AI生成序列帧（适合简单动画）

推荐工具：SpriteFlow（spriteflow.io）

专为游戏精灵动画设计，支持直接输出游戏可用的精灵图集（Sprite Sheet）：

• 上传一张角色图 → 选择动画类型（idle/walk/attack）→ 生成
• 输出：PNG精灵图 + 帧数据JSON
• 直接在 Cocos Creator 中导入使用

适合：休闲小游戏、塔防单位、UI动效

不适合：动作复杂的格斗游戏、有大量动画状态的RPG角色

6.2 AI + Spine 骨骼动画工作流

这是 Cocos 官方论坛推荐的「黑科技工作流」，效率极高：

Step 1: 用 Midjourney 生成角色全身图（正面、T-POSE）
↓
Step 2: Adobe Firefly 去背景，切分部件
→ 头/身体/左臂/右臂/左腿/右腿 分别存PNG
↓
Step 3: 导入 Spine 软件，绑定骨骼
→ Spine 有自动绑骨功能，基础骨骼10分钟搞定
↓
Step 4: K帧：idle动画只需要8~12帧，呼吸感即可
→ 简单位移+缩放，不需要精准的解剖学动作
↓
Step 5: 导出 Spine JSON + 图集，在 Cocos Creator 导入

Cocos Creator 加载 Spine 动画：

import { _decorator, Component, sp } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CharacterController')
export class CharacterController extends Component {
@property(sp.Skeleton)
skeleton: sp.Skeleton = null!;

// 切换动画状态
playAnimation(animName: string, loop: boolean = true): void {
if (!this.skeleton) return;
this.skeleton.setAnimation(0, animName, loop);
}

// 动画混合过渡（避免硬切）
crossFade(animName: string, mixDuration: number = 0.2): void {
this.skeleton.setAnimation(0, animName, true);
// Spine 的 mix 设置在 Spine 编辑器里配置，或：
this.skeleton.findAnimation(animName); // 确认存在
}

onLoad() {
// 默认播放 idle 动画
this.playAnimation('idle');
}
}

七、2026新神器：See-through 一键拆图，告别「拆图地狱」 {#seethrough}

B站视频参考：一键把动漫角色图拆分成用于动画制作的身体部件 作者：硅基包工头 | 播放量：31万 | 点赞：5105

这是我最近看到的独立开发领域最值得关注的开源项目之一。

背景：做骨骼动画的人都知道「拆图」有多痛苦——把一张完整的角色立绘手动抠成头发/眼睛/上衣/下装/手臂等几十个独立图层，每一层还要手工补全被遮挡的部分。一个普通角色拆完至少半天，复杂角色要花一整天。

这个叫 See-through 的开源项目，把这个过程压缩到了5分钟以内。

7.1 See-through 是什么

See-through（论文来自 SIGGRAPH 2026）是一个「单图层分解」AI模型——输入一张完整动漫角色图，自动输出分层好的 PSD 文件，每一层都是独立的身体部件，带 Alpha 通道，按深度顺序排列，可直接导入 Live2D 或 Spine。

核心技术：

• LayerDiff（SDXL）：语义识别，自动划分约 24 个部位图层
• Marigold 深度估计模型：根据深度信息自动排列图层 Z-order，拆分前发/后发、左眼/右眼
• 生成式补全（Inpainting）：补全被遮挡区域（如被刘海遮住的眼睛）

输出的图层命名示例：

所有图层均带 Alpha 通道，按深度 Z 轴正确排列，拿到 PSD 就可以直接开始绑骨骼，不需要再手工处理。

7.2 ComfyUI 接入方式

目前最推荐的使用方式是通过 ComfyUI 插件接入：

# 安装 ComfyUI-See-through 插件
cd ComfyUI/custom_nodes
git clone https://github.com/jtydhr88/ComfyUI-See-through.git

# 安装依赖（仅需4个库）
cd ComfyUI-See-through
pip install -r requirements.txt
# 依赖：diffusers, accelerate, opencv-python, scikit-learn

# 重启 ComfyUI，节点出现在 "SeeThrough" 分类下

ComfyUI 工作流节点连接顺序：

[SeeThrough Load LayerDiff Model] ──┐
├──▶ [SeeThrough Decompose] ──▶ [SeeThrough Save PSD]
[SeeThrough Load Depth Model] ──┘ ▲
[图片输入]

参数说明：
– resolution: 处理分辨率，默认 1280（高质量用 2048，快速测试用 1024）
– tblr_split: 开启后自动拆分左右对称部位（眼睛/眉毛/手套等）

内置三个预设工作流（在 workflows/ 目录）：

运行完成后点击节点上的 「Download PSD」 按钮直接下载，整个流程无需服务器。

7.3 和 Spine 骨骼动画的完整对接

See-through 输出的 PSD，可以无缝衔接第六章里的 Spine 工作流：

以前的工作流：
Midjourney 出图 → 手动抠图（半天）→ 逐层补全遮挡 → Spine 绑骨

现在的工作流：
Midjourney 出图 → See-through 自动拆图（5分钟）→ PSD导入 Spine → 直接绑骨

实操步骤：

7.4 实测效果和局限性

效果好的情况：

• 日式风格动漫角色（训练数据最多）
• 造型相对标准、遮挡不太复杂的角色
• 正面或四分之三侧面构图

局限性（要知道）：

• 极其复杂的发型（多层卷发、长至脚踝的发丝）可能分层不准确
• 手部遮挡处理有时需要手工修整
• 非动漫风格（写实、厚涂、欧美卡通）效果会下降
• 需要 GPU 显存：建议 8GB 以上（16GB 更稳）；无 GPU 可用 Colab 跑

对独立开发者的价值总结：

开源地址：

• 原项目：github.com/shitagaki-lab/see-through
• ComfyUI 节点：github.com/jtydhr88/ComfyUI-See-through

八、音效与背景音乐：程序员最容易忽略的AI能力 {#音效}

很多独立游戏死于「音效用的免费素材库，背景音乐是著名BGM，结果上线被版权打」。

AI在音频方向已经非常成熟，而且大多数平台生成的音频商用无版权风险。

7.1 背景音乐：Suno / Udio（强烈推荐）

Suno（suno.com）是目前最好用的AI音乐生成工具：

• 描述风格 → 生成2分钟完整BGM，带人声或纯音乐可选
• 生成质量已经接近专业制作水准
• 基础功能免费，商用需订阅（$10/月）

实用提示词（游戏BGM向）：

// 休闲小游戏主题曲
upbeat casual mobile game music, happy and bouncy,
xylophone and ukulele, no lyrics, loopable,
suitable for children's game, 120 BPM

// 塔防/策略游戏
epic orchestral strategy game music, tension building,
brass and strings, no lyrics, medieval fantasy theme,
loopable seamlessly, 90 BPM

// 像素/复古风
chiptune retro game music, 8-bit style,
NES era sound, adventure theme, loopable,
upbeat and nostalgic

让BGM可以无缝循环的技巧：

在 Suno 里生成后，用 Audacity（免费）剪辑：

7.2 音效：ElevenLabs Sound Effects

elevenlabs.io/sound-effects

文字描述 → 生成音效，免费额度够用：

// 示例描述
"coin pickup sound, bright and satisfying, arcade game style"
"button click, soft and pleasant, mobile game UI"
"explosion, small and cartoonish, not scary"
"level complete jingle, 3 seconds, happy victory sound"

7.3 在 Cocos Creator 中管理音频资源

// AudioManager.ts – 统一管理音效和BGM
import { _decorator, Component, AudioSource, AudioClip, resources } from 'cc';
const { ccclass } = _decorator;

@ccclass('AudioManager')
export class AudioManager extends Component {
private static _instance: AudioManager;
private _bgmSource: AudioSource = null!;
private _sfxSources: AudioSource[] = [];
private _sfxPoolSize: number = 5; // 同时播放音效的最大数量

private _bgmVolume: number = 0.8;
private _sfxVolume: number = 0.8;

static getInstance(): AudioManager {
return this._instance;
}

onLoad() {
AudioManager._instance = this;
this._bgmSource = this.addComponent(AudioSource);
// 初始化音效池
for (let i = 0; i < this._sfxPoolSize; i++) {
this._sfxSources.push(this.addComponent(AudioSource));
}
}

// 播放背景音乐（循环）
playBGM(clip: AudioClip, volume?: number): void {
if (volume !== undefined) this._bgmVolume = volume;
this._bgmSource.clip = clip;
this._bgmSource.volume = this._bgmVolume;
this._bgmSource.loop = true;
this._bgmSource.play();
}

// 播放音效（从对象池取可用channel）
playSFX(clip: AudioClip): void {
const source = this._sfxSources.find(s => !s.playing);
if (!source) return; // 所有channel都在播放，丢弃本次
source.clip = clip;
source.volume = this._sfxVolume;
source.loop = false;
source.play();
}

// 设置音量（来自用户设置）
setMusicVolume(v: number): void {
this._bgmVolume = v;
this._bgmSource.volume = v;
}

setSFXVolume(v: number): void {
this._sfxVolume = v;
}
}

九、资源整合：Cocos Creator 里的最终工作流 {#整合}

8.1 图集打包（降低 DrawCall 的关键）

所有 UI 图片必须打包成图集（Atlas），否则每张图一个 DrawCall，帧率直接崩：

在 Cocos Creator 编辑器中：
1. 选中所有 UI 图片资源文件夹
2. 右键 → 创建 → Auto Atlas
3. 配置：最大尺寸 2048×2048，格式 PNG
4. 构建时会自动合并，无需手动操作

8.2 纹理压缩格式

重要：在 Cocos Creator 3.8.x 的构建面板里，「纹理压缩」选项必须手动开启，默认是关闭的。开启后 Android 包体通常能减少 30%~50%。

8.3 资源加载策略（避免首帧白屏）

// 预加载核心资源，避免进入游戏时卡顿
import { resources, SpriteAtlas, AudioClip, director } from 'cc';

export class PreloadManager {
// 在加载界面预加载核心资源
static preloadCoreAssets(onProgress: (p: number) => void): Promise<void> {
return new Promise((resolve, reject) => {
resources.loadDir('core', (finish, total) => {
onProgress(finish / total);
}, (err, assets) => {
if (err) { reject(err); return; }
resolve();
});
});
}

// 懒加载非核心资源（关卡2以后的素材）
static lazyLoadLevel(levelId: number): Promise<void> {
return new Promise((resolve) => {
resources.loadDir(`levels/level_${levelId}`, () => resolve());
});
}
}

十、免费素材备选清单（AI不够用时的兜底方案） {#免费}

AI生成的素材有时候风格不一致，或者某个特定类型AI表现不好。这些平台是兜底选项：

Kenney.nl 是重点推荐：这个网站的游戏素材质量极高，免费商用，统一风格，非常适合快速原型。我的多个项目都在用 Kenney 素材做占位，等正式美术出来再替换。

十一、总结：我的美术成本账单 {#账单}

做完两款微信小游戏之后，算了一下我在美术上的实际花费：

总计：约 ¥812（其中¥600是给外包美术精修角色的）

如果全程用AI + 免费素材，理论上可以压到 ¥140（Aseprite买断费）以内。

最后说一句

很多程序员问我：「学会这些AI工具，我是不是就可以做出好看的游戏了？」

诚实回答：工具解决的是「能不能」，而不是「好不好看」。

你仍然需要一点点审美——知道什么颜色搭配好看，什么构图看起来舒服，什么动画节奏让玩家觉得爽。这些感觉不是AI能帮你建立的，是要靠你去玩更多好游戏、看更多好设计来积累的。

但至少，「我不会画画」这件事，再也不是你做游戏的借口了。

💬 你在独立游戏美术上遇到最大的阻碍是什么？ 评论区聊，看到必回。

👍 如果这篇对你有帮助，点个收藏——下次需要的时候找得到。

本文涉及工具均基于作者实际使用体验。AI工具订阅价格以各平台官网最新公告为准。Cocos Creator 代码基于 3.8.x TypeScript，实测可用。

系列文章：

• 一个人能撑起一款游戏吗？老程序员独立游戏开发全纪录
• 微信小游戏广告变现完整指南：从流量主开通到月收益翻倍
• Cocos Creator 性能优化实战：帧率从20fps到稳定60fps全过程