Evilom
114 lines
6.4 KiB
Markdown
114 lines
6.4 KiB
Markdown
# NzSOwDHlgiPCx9klcKWcxzawnhe
|
|
|
|
Source: https://dianchukeji.feishu.cn/wiki/NzSOwDHlgiPCx9klcKWcxzawnhe
|
|
|
|
|
|
# 一.工作内容概述
|
|
- 持续推进碎片收集系统进度
|
|
- 尝试使用AI制作图片处理工具，解决之前遇到的“边缘问题”
|
|
# 二.图片处理工具
|
|
## 问题背景
|
|
在之前的尝试中，AI生成的单个按钮、图标或面板，视觉上看起来可用，但边缘像素通常不适合直接作为游戏资源使用，体现在如下方面：
|
|
- 背景不是真实透明背景，而是被绘制上去的真实像素。
|
|
- 使用AI进行抠图无法解决边缘问题，产出的图片边缘存在大量瑕疵，完全无法使用
|
|
## 尝试思路
|
|
尝试使用AI编写工具来进行资源的处理，思路如下：
|
|
使用特定颜色（如洋红色#FF00FF） 作为临时背景识别色工具通过这个颜色判断背景区域。但不能简单地把所有接近 #FF00FF 的像素都删除，因为素材内部也可能有粉色、紫色高光或装饰。因此需要通过“外部连通区域”来识别真正背景。
|
|
处理原则是：
|
|
|
|
> [嵌入电子表格: HcE6syErph4tJ9tlkn0c...]
|
|
|
|
也就是说，目标不是把素材变成纯扁平图形，而是把它处理成：**主体仍然有质感，但外部轮廓干净、透明、无紫边。**
|
|
如果输入图是高像素版本，例如目标尺寸的 3 倍或 4 倍，工具可以先完成边缘处理，再缩小到目标尺寸。
|
|
这样可以减少：
|
|
- 紫边；
|
|
- 锯齿；
|
|
- AI 生成噪点；
|
|
- 边缘不稳定像素。
|
|
但也要注意：
|
|
- 小高光可能变弱；
|
|
- 极细描边可能变淡；
|
|
- 图标细节可能略糊。
|
|
所以缩放需要使用高质量算法，并允许轻微锐化。
|
|
## 流程原理梳理
|
|
### 颜色距离检测：判断像素是否接近背景色
|
|
工具首先计算每个像素与 #FF00FF 的颜色距离。
|
|
背景色为：
|
|
颜色距离计算：
|
|
距离越小，说明像素越接近背景色。
|
|
这一步的作用是：
|
|
- 识别纯背景像素
|
|
- 识别接近背景色的混色像素
|
|
- 辅助判断紫边污染
|
|
不会直接删除像素，只是生成“背景候选区域”。
|
|
### 泛洪填充：只识别外部背景
|
|
仅靠颜色距离还不够，因为素材内部也可能有类似颜色。
|
|
因此工具从画布四周开始做泛洪填充：从图片四条边缘开始，找到接近 #FF00FF 的像素，向相邻像素扩散，只把与画布外部连通的区域标记为背景。这样可以避免误删素材内部的粉色或紫色内容。
|
|
例如：按钮内部的粉色高光，如果没有和外部背景连通，就不会被识别为背景
|
|
这一步会得到背景 Mask：背景区域 = 1，非背景区域 = 0
|
|
### 提取素材主体 Mask
|
|
背景 Mask 取反后，就可以得到素材主体的大致区域：主体 Mask = 非背景区域
|
|
但这个主体 Mask 还不一定干净，因为它可能包含：
|
|
- 真正的按钮主体
|
|
- 正常抗锯齿边缘
|
|
- 外部阴影残留
|
|
- 外发光残留
|
|
- 紫边污染像素
|
|
所以这一步只是得到粗略主体，后续还需要边缘清理。
|
|
### 生成边缘检测区
|
|
为了只处理边缘问题，不误伤按钮内部质感，工具会基于主体 Mask 生成一圈边缘检测区。
|
|
方法是：
|
|
这个区域主要用于检查：
|
|
- 外部阴影、发光
|
|
- 混色边缘
|
|
- 灰色软边等
|
|
这样工具只会重点处理素材外轮廓附近的问题，不会大范围修改按钮内部的高光、渐变和描边。
|
|
### 识别外部污染像素
|
|
工具在边缘检测区中判断哪些像素属于污染。
|
|
判断依据主要有两个：
|
|
- 位置在主体外轮廓附近
|
|
- 颜色接近 #FF00FF 或明显偏紫 / 偏灰 / 偏蓝光晕
|
|
污染大致分三类：
|
|
|
|
> [嵌入电子表格: HcE6syErph4tJ9tlkn0c...]
|
|
|
|
### 边缘去污染：修正紫边
|
|
紫边的本质是主体颜色与背景色混合：
|
|
例如白色按钮边缘与紫色背景混合后，就会变成淡紫色。
|
|
工具处理时分两种情况：
|
|
这类像素不属于素材本体，直接删除：
|
|
这类像素可能是正常抗锯齿，只是颜色被污染。
|
|
如果直接删除，会让按钮边缘变硬或破损。
|
|
更合理的方式是：找到紫边像素后，在附近寻找干净的主体颜色，用邻近主体颜色修正紫边
|
|
这样可以做到：去掉紫边，保留正常边缘过渡，避免按钮轮廓被硬切
|
|
### 生成真实 Alpha 通道
|
|
清理背景和边缘污染后，工具生成最终透明通道。
|
|
规则如下：
|
|
最终结果是：
|
|
此时 #FF00FF 背景已经被完全移除，最终图片是真正的透明 PNG。
|
|
### 自动裁切与安全边距
|
|
生成 Alpha 后，工具根据非透明区域计算最终裁切范围：
|
|
安全边距的作用是：
|
|
- 避免素材贴边
|
|
- 防止缩放时边缘被裁掉
|
|
- 方便导入引擎后对齐
|
|
### 高像素缩放与轻微锐化
|
|
如果输入图是高像素版本，工具可以在边缘处理完成后缩放到目标尺寸，可以起到如下效果：
|
|
- 减少锯齿
|
|
- 弱化残留噪点
|
|
- 让边缘更稳定
|
|
如果缩放后素材边缘变软，可以做轻微锐化用来恢复。
|
|
## 效果展示
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
当前版本相比前一版已经明显稳定，核心问题基本从“紫边 / 伪透明 / 抠图失败”转变为“白色 UI 柔边在深色背景下的显示适配”。
|
|
从检查结果看，图片 Alpha 状态正常，存在完整透明区、半透明边缘区和不透明主体区，背景已经是真透明，并不是伪透明背景，也不是黑底或压缩问题。
|
|
目前紫边的问题已基本解决，缩放锯齿也在可接受范围内。剩余主要问题是部分按钮边缘仍有浅色半透明柔边，在黑色或深色背景下会显示成灰白边。这主要来自按钮本身的白色柔边和浅蓝描边，不属于抠图异常。
|
|
## 仍未解决的问题 |