关于调色板开发
大家好，我是永恒计划组的程序员。
接下来我要讲述的是一个程序员对染色调色板的苦恼。
我也没想到自己会如此深入地研究调色板。
我们的游戏里不是有很多对染色情有独钟的玩家吗？
无法忘记第一次看到这个问题的日子，——偶尔还能梦到。
现有的染色调色板不仅尺寸小，而且颜色之间排列紧凑，难以用鼠标选择颜色。
正好那时在征集调色板改革方案，所以我也尝试了很多种方案。
色彩的基本概念
在讲述调色板之前，我首先需要了解色彩的基本概念。
毕竟，这是我第一次开发洛奇的染色系统，因此我需要了解色彩的基本概念。
即色调、饱和度、明度、光度、颜色空间。
•色调(Hue) : 指的是颜色的质或调。是红色、黄色、蓝色等颜色的基本特性。
•饱和度(Saturation) : 指的是颜色的纯度或强度。饱和度越高，颜色越鲜明和浓郁。
•明度(Value/Brightness) : 指的是颜色的亮度。明度越高，颜色越亮；越低，颜色越暗。
•光度(Luminosity/Lightness) : 指的是光的亮度，通常通过将颜色转换为黑白来表示颜色的亮度概念。
•彩色空间(Color space) : 是一种数值上表达颜色的体系，包括RGB、HSV、CMYK等。其中HSV和HSL是我们需要进一步了解的。（我们计划稍后用这些来调整调色板。）
通常在游戏图形中出现的伽马空间和线性空间也可以看作是彩色空间体系的一部分。
oHSL : 由色调/饱和度/光度构成。亮度最高的颜色是纯白色
oHSV :由色调/饱和度/明度构成。最大值（亮度）的颜色类似于在有色物体上照射白色光
分析调色板数据
现在，我们回到提案的话题上，既然我们已经理解了色调、饱和度、明度和光度，就需要找到色彩调色板的呈现方式。
在我们游戏中使用的布料、皮革、丝绸和金属调色板中，提取了最常用的调色板数据，并移除重复的颜色后，大约得到了4万种颜色。
然而，我的大脑实在无法想象出要用何种方式呈现这4万种不连续的RGB颜色。
所以，我决定寻求AI的帮助。
?
没错。
AI帮不上我的忙。😭
所以我还是要用我的大脑来相出一个合适的调色板。
首先，我将现有颜色代码数据转换为图像，以便能用肉眼确认。
(因为比起一串数字，看实际颜色会更有助于想象。)
尝试制作成正方形图像后，发现颜色数量不足，角落出现了空白处。
但没关系，我会继续加油的。
我决定为了让颜色更加均衡排布，进行颜色排序。
颜色数据处理
首先，颜色数值本身就有R、G、B三个通道，根据不同的彩色空间，还可以用其他值作为轴……（自言自语）
通过我的各种搜索，我找到了以下5种颜色排序方式
1.RGB排序：按R值、G值、B值的顺序升序排列
2.仅使用Hue排序：按色调值升序排列
3.HSV排序（包括HVS、SHV、SVH、VHS、VSH）：色调、饱和度、明度全用上！
4.STEP排序：计算特殊处理的光度值（Luminosity），进行预处理，然后使用处理后的色调、明度、光度进行优先级排序
以防万一有人会对这些感到好奇，我在下面简单说明一下：
通常，利用RGB值计算光度（Luminosity）的公式如下：
Lum = 0.2126R + 0.7152G + 0.0722B
但发现使用在step排序中，通过不同权重和平方根特殊处理的公式，所以我也尝试使用这一公式。
Lum = sqrt(0.241R + 0.691G + 0.068B)
然后根据色调、光度和明度确定优先级并进行排序。
如果没有人好奇的话...（眼泪）
Hilbert排序：按照类似分形的漩涡线排列点，并按照点的顺序排列所拥有的RGB数据（这更像是颜色分布方式而非排序）。
所以那令人期待的结果是…！
这不是凌晨的电视节目。
感觉都不能用。
虽然STEP排序看起来是像样一些，但也不是我要的那种感觉。
所以结论是……我没能提出新的调色板方案。
利用现有调色板进行放大/缩小
所以我只好保留了现有染色调色板的扭曲方式，并在这基础上开发了放大功能，以便更轻松地选择颜色。
但现在的颜色调色板尺寸较小，直接放大使用会导致变模糊。
因此，我对扭曲之后的颜色值，进行了质感升级的预处理。
幸运的是，我已经完成了将扭曲的颜色数据提取为游戏内质感并应用的工作，因此上采样后的应用相对容易，只需连续导入数据即可。
左：直接放大 / 右：上采样后放大
但这个过程也不是一帆风顺的。
本以为只需准确计算2D坐标，但实际放大缩小后鼠标坐标会出现偏差。
我在放大后缩小，尝试将鼠标移动到最后一个颜色位置时，问题出现了。
“不是！我计算的肯定没错啊，为什么一放大再缩小，鼠标就总是停在莫名其妙的颜色上？”
然后一查发现，鼠标坐标值竟然是以像素位置为单位的整数值！
(其实这是理所当然的，因为显示在屏幕上的像素不可能有小数点。)
啊！还我的鼠标坐标！
尽管有过一段时间的挫败感，但我没有放弃，并针对缩小时产生的鼠标小数点值误差进行了校正。
如果只是简单粗暴地将小数点值转换为整数，就会导致截断，从而选择错误的颜色。因此基于缩小时的鼠标坐标，检查了八个方向，以确认选择颜色和候选颜色是否完全匹配。
因此，我进行了位置校正工作，以确保在缩小状态下也能看到放大时所见的颜色。
以上……
为了给洛奇创造一个更好的调色板，作为程序员尝试了多种方向的努力。
我期待未来的染色系统会以更完美的形式展现给大家。
希望各位米莱西安能够愉快地享受游戏，也请大家继续给予关注和支持。
接下来我要讲述的是一个程序员对染色调色板的苦恼。
我也没想到自己会如此深入地研究调色板。
我们的游戏里不是有很多对染色情有独钟的玩家吗？
无法忘记第一次看到这个问题的日子，——偶尔还能梦到。
现有的染色调色板不仅尺寸小，而且颜色之间排列紧凑，难以用鼠标选择颜色。
正好那时在征集调色板改革方案，所以我也尝试了很多种方案。
色彩的基本概念
在讲述调色板之前，我首先需要了解色彩的基本概念。
毕竟，这是我第一次开发洛奇的染色系统，因此我需要了解色彩的基本概念。
即色调、饱和度、明度、光度、颜色空间。
•色调(Hue) : 指的是颜色的质或调。是红色、黄色、蓝色等颜色的基本特性。
•饱和度(Saturation) : 指的是颜色的纯度或强度。饱和度越高，颜色越鲜明和浓郁。
•明度(Value/Brightness) : 指的是颜色的亮度。明度越高，颜色越亮；越低，颜色越暗。
•光度(Luminosity/Lightness) : 指的是光的亮度，通常通过将颜色转换为黑白来表示颜色的亮度概念。
•彩色空间(Color space) : 是一种数值上表达颜色的体系，包括RGB、HSV、CMYK等。其中HSV和HSL是我们需要进一步了解的。（我们计划稍后用这些来调整调色板。）
通常在游戏图形中出现的伽马空间和线性空间也可以看作是彩色空间体系的一部分。
oHSL : 由色调/饱和度/光度构成。亮度最高的颜色是纯白色
oHSV :由色调/饱和度/明度构成。最大值（亮度）的颜色类似于在有色物体上照射白色光
分析调色板数据
现在，我们回到提案的话题上，既然我们已经理解了色调、饱和度、明度和光度，就需要找到色彩调色板的呈现方式。
在我们游戏中使用的布料、皮革、丝绸和金属调色板中，提取了最常用的调色板数据，并移除重复的颜色后，大约得到了4万种颜色。
然而，我的大脑实在无法想象出要用何种方式呈现这4万种不连续的RGB颜色。
所以，我决定寻求AI的帮助。
?
没错。
AI帮不上我的忙。😭
所以我还是要用我的大脑来相出一个合适的调色板。
首先，我将现有颜色代码数据转换为图像，以便能用肉眼确认。
(因为比起一串数字，看实际颜色会更有助于想象。)
尝试制作成正方形图像后，发现颜色数量不足，角落出现了空白处。
但没关系，我会继续加油的。
我决定为了让颜色更加均衡排布，进行颜色排序。
颜色数据处理
首先，颜色数值本身就有R、G、B三个通道，根据不同的彩色空间，还可以用其他值作为轴……（自言自语）
通过我的各种搜索，我找到了以下5种颜色排序方式
1.RGB排序：按R值、G值、B值的顺序升序排列
2.仅使用Hue排序：按色调值升序排列
3.HSV排序（包括HVS、SHV、SVH、VHS、VSH）：色调、饱和度、明度全用上！
4.STEP排序：计算特殊处理的光度值（Luminosity），进行预处理，然后使用处理后的色调、明度、光度进行优先级排序
以防万一有人会对这些感到好奇，我在下面简单说明一下：
通常，利用RGB值计算光度（Luminosity）的公式如下：
Lum = 0.2126R + 0.7152G + 0.0722B
但发现使用在step排序中，通过不同权重和平方根特殊处理的公式，所以我也尝试使用这一公式。
Lum = sqrt(0.241R + 0.691G + 0.068B)
然后根据色调、光度和明度确定优先级并进行排序。
如果没有人好奇的话...（眼泪）
Hilbert排序：按照类似分形的漩涡线排列点，并按照点的顺序排列所拥有的RGB数据（这更像是颜色分布方式而非排序）。
所以那令人期待的结果是…！
这不是凌晨的电视节目。
感觉都不能用。
虽然STEP排序看起来是像样一些，但也不是我要的那种感觉。
所以结论是……我没能提出新的调色板方案。
利用现有调色板进行放大/缩小
所以我只好保留了现有染色调色板的扭曲方式，并在这基础上开发了放大功能，以便更轻松地选择颜色。
但现在的颜色调色板尺寸较小，直接放大使用会导致变模糊。
因此，我对扭曲之后的颜色值，进行了质感升级的预处理。
幸运的是，我已经完成了将扭曲的颜色数据提取为游戏内质感并应用的工作，因此上采样后的应用相对容易，只需连续导入数据即可。
左：直接放大 / 右：上采样后放大
但这个过程也不是一帆风顺的。
本以为只需准确计算2D坐标，但实际放大缩小后鼠标坐标会出现偏差。
我在放大后缩小，尝试将鼠标移动到最后一个颜色位置时，问题出现了。
“不是！我计算的肯定没错啊，为什么一放大再缩小，鼠标就总是停在莫名其妙的颜色上？”
然后一查发现，鼠标坐标值竟然是以像素位置为单位的整数值！
(其实这是理所当然的，因为显示在屏幕上的像素不可能有小数点。)
啊！还我的鼠标坐标！
尽管有过一段时间的挫败感，但我没有放弃，并针对缩小时产生的鼠标小数点值误差进行了校正。
如果只是简单粗暴地将小数点值转换为整数，就会导致截断，从而选择错误的颜色。因此基于缩小时的鼠标坐标，检查了八个方向，以确认选择颜色和候选颜色是否完全匹配。
因此，我进行了位置校正工作，以确保在缩小状态下也能看到放大时所见的颜色。
以上……
为了给洛奇创造一个更好的调色板，作为程序员尝试了多种方向的努力。
我期待未来的染色系统会以更完美的形式展现给大家。
希望各位米莱西安能够愉快地享受游戏，也请大家继续给予关注和支持。
谢谢。