Codex+Image2生成爆款小游戏UI素材！

原文链接：https://mp.weixin.qq.com/s/e3QvW8sA4iWpj8SaCrXfmw

Codex+Image2生成爆款小游戏UI素材！

• 来源：https://mp.weixin.qq.com/s/e3QvW8sA4iWpj8SaCrXfmw
• 作者：晓衡的游戏开发圈
• 发布时间：2026-06-01

现在客户的胃口，是越来越大了哈！

上周，有客户问我，有没有做有《占城大师》那样的项目？

说实话，非常让我汗颜的是，我只听说过《占城大师》，都还没玩过。另外还有客户，要找传统SLG、卡牌养成类的项目。

社区中，大多都是个人开发者或小团队，像 SLG、RPG 这种大项目，光就美术成本都要几十上百万，没几个人敢碰。

不过呢，之后我又找了些开发者聊天，已经有开发者已经开始用 AI 制作大项目了，特别是在 GPT-image2 游戏 UI 能力，确实让人咋舌。

现在它已经集成到 codex 中了，起来非常简单。

我立即打开 Codex 试了一下，就用《占城大师》一试，效果相当亮眼。

只需要跟 Codex 说，参考 xxx 游戏，生成 xxx 风格的游戏 UI，我用的提示词，简直就是大白话，看下面：

参考《占城大师》游戏，帮我生成皮克斯风格的游戏竖屏 UI 中文界面，界面有 4 个，首页界面、商店界面、卡牌界面、排名界面，每张图的尺寸为 9:16。

光有参考图还不够，还需要将参考图之中的 UI 元素拆分出来，先看效果：

在第一次生成的时候，UI 上还有文字，这样的素材，在游戏中是不方便复用的。只需要对，他说 UI 上不要文字就行了。

请将张排行榜界面，扩展出一套游戏UI的组件库，包括面板、按钮、导航栏、横幅、标题、道具图标等一系列游戏UI可用的组件，平铺在纯色背景上。

接下来，就要对生成的 UI 素材进行抠图去背景。

刚开始 codex 建议我用绿幕#00FF00做背景色，我试了好几把，如果 UI 素材带有渐变半透明的效果，抠图出来的 UI 边缘会有点绿油油的。

建议还是用白色打底，效果会好一些。

而且，我将以上的流程，让 codex 做成了一个 skill。比如说 UI 元素上不能有文字、每个元素之间要有间隔、纯白色背景板等约束。

给生成的 skill 名字叫 game-ui-atlas-generator，我是这样用的：

使用 game-ui-atlas-generator，参考《无尽冬日》游戏截图，生成 1:1 游戏 UI 图集素材。

Codex 他会主动去找游戏截图，提取 U 氨元素，并且避免游戏中的 logo 生成图片，下面是生成的效果

我发现上面生成的 4 张图中，有不少 UI 元素有重复。我直接跟他说，UI 图片存在重复：

Codex聪明的很，建议把 skill 升级成按钮图、面板图、横幅图和图标图四种，这样就避免了一些重复。

用修改的 skill，再试一个中国风的《掌上谈兵》看下效果，提示词如下：

使用 game-ui-atlas-generator，参考《掌上谈兵》游戏截图，生成 1:1 游戏 UI 图集素材。

我并没有给任何参考图，他自己分析的：

不知道是用久了，还是到了晚上的原因，过去了半个小时就只生成了一张，卡在那里不动了。还好，token 并没消耗多少。

我只好让他停止，重启了一次 codex，再继续。

从以上流程看，你觉得用 codex 生成游戏 UI 素材是不是很简单呢？

我尝试过，让 code 完成抠图、切图一整套流程，目前感觉效果不太好。为了快速拿到素材，我直接用的百度文心。

可能有会会问，为什么用百度呢？不用豆包或其他啥的？就一句话：他们都有水印，但百度没有，而且百度还可以去水印。

使用方法很简单，直接打开百度搜索，在搜索框 Ctrl/Cmd + V 图片过去，并输入智能抠图。

使用百度抠图背景，有一个很搞笑的事情。点击保存图片，他居然是 JPG 格式。

但打开图片，它竟然还有透明通道。我用自己做的 tinyshear 提取里面的 U 元素也能正常提取出来！

http://tinyshear.creator-star.cn

这让我非常纳闷，简直就是颠覆我的认知，这怎么可能？实在想不通，我就去问 AI。

原来百度抠图下载下来的是WebP 格式的图片，只是保存成了 JPG 的后缀。

WebP 是 Google 开发的一种专为网络设计的图片文件格式，主打体积小、加载快。‌‌

• 压缩方式‌：同时支持有损和无损压缩，能在画质和文件大小之间灵活选择。

• 体积优势‌：同等画质下，有损压缩比 JPEG 小约 25-34%，无损压缩比 PNG 小约 26%。

• ‌功能特性‌：支持透明背景和动画，能替代 PNG 和 GIF。

• 兼容性‌：Chrome、Firefox、Edge 等主流浏览器都能直接显示，常用看图软件也可打开。‌‌‌

我就说，怎么在 Mac 的 Finder 里面无法预览？但是图片查看器又能够看得到，原来是后缀扩展名的原因，在这里不得不吐槽一下百度。

至此我使用 codex 生成的图片全部在这里了：

整个一周的 token 用量，只花了 17%，5小时用量还剩 88%，还是非常划算的！

目前遗憾的是没有打通，后面的抠图到切图，主要是抠图用百度不消耗 token、无水印。

提取图片，用的是我之前写的 Web 工具http://tinyshear.creator-star.cn完全免费使用！

今天的分享就到这里！

如果你觉得以上生成的UI素材还不错的话，包括提取出的散图哦，可以在公众号后台输入口令：2661获取网盘下载链接！