使用gpt image 2生成可用游戏UI组件全流程分享

AI绘图发展这么长时间以来，一直没能很好的介入游戏UI生产，原因主要有三个：

1.游戏UI需求非常繁杂，无法准确的使用提示词来描述。同时还有一些风格一致性的问题。本质是模型对于自然语言的理解能力不足。

2.绘制精度不够，UI组件作为功能性图片，通常长得很抽象，导致模型无法理解而加入奇怪的细节，或者应有的细节被模糊处理。这也是模型训练不足导致的。

3.无法处理alpha透明度，UI组件绝大部分都需要使用具备透明通道的png图片，现阶段所有模型都不能直接生成透明图片。

现在gpt image 2对于前两个问题已经有了比较不错的突破，第三个问题现在也能通过一些人工手段来达到一个比较优质的结果，具体来说就是利用在白色背景和黑色背景上色值的差值来计算出alpha的值。

下面是一些效果图

为了达到可用和可拓展的目的，我们需要将所有UI组件尽可能分类拆分成通用组件，并且让模型识别理解其功能，同时我们需要保证各个部分的风格统一，所以我们需要在一张大画布中平铺开所有需要用到的UI组件，并且标注好组件功能（这里其实是代替了在提示词中的需求描述），一次性喂给模型。

类似这样

因为我们对每个部分做好了标注，提示词里能省去最复杂的需求描述，我们只需要使用简单的自然语言作为提示词。

例如，“这是一张游戏UI控件资源，保持功能和尺寸不变，背景白色。帮我换一个UI风格，换成乙游风格，华丽，闪闪发光。可参考闪耀暖暖”

我们将得到这样的结果

到这里我们得到了一个风格基础，现在产出的素材是不能达到可使用标准的。仔细看会发现有非常多的问题，比如分辨率不够，细节错误，内容理解错误等等。

接下来我们需要人工筛选出可用的部分，新建一张小画布，单独导出，交给模型重绘。

主要解决：1.分辨率不够导致的细节丢失。2.装饰元素的错误和不好看的地方修改。3.风格、色彩、疏密等等设计的微调。

使用简单的自然语言提示词“这是一个UI底框，重绘边框高光与暗部细节，使其更有质感。减弱框体中间的发光和细节。”

或者“保持图中<<<image_1>>>对话框尺寸和比例不变，去掉做左上角和右上角菱形宝石，重绘框体和花朵，画风参考<<<image_2>>>。”

这里为了保证风格和色调的统一，可以将生成的已经满意的图片喂给模型。

到了这里我们已经完成了大部分工作，现在需要处理透明通道的问题。处理方法是将白底图作为参考图，让模型保持内容不变生成一张黑色底的图，如果是透明度较高的组件可以单独写进提示词。

例如“保持内容不变，将白色背景改为黑色。”

如果遇到没有对齐的情况需要去ps里手动对齐

然后使用https://frameronin.com/中的抠图去背功能，就可以还原透明通道。也可以用cursor手搓一个工具。

一通操作下来我们就可以得到

最后将其装回原有界面，利用九宫格略微调整尺寸就可以得到最终的UI素材了。