概述

本篇簡(jiǎn)單匯總Godot中的顏色的構(gòu)造和使用，內(nèi)容包括了：

• RGB、RGBA，HSV以及HTML16進(jìn)制顏色值、顏色常量等形式構(gòu)造顏色
• 顏色的運(yùn)算以及取反、插值
• 用類型化數(shù)組、緊縮數(shù)組或PNG圖片形式存儲(chǔ)多個(gè)顏色

構(gòu)造顏色

因?yàn)轭伾且环N視覺元素，所以用print打印顏色值到輸出窗口是比較抽象的做法。

這里我采用了HFlowContainer+ColorRect的形式，并編寫一個(gè)函數(shù)show_color來動(dòng)態(tài)生成ColorRect添加到HFlowContainer，來顯示我們構(gòu)造的顏色。

其中：

• HFlowContainer是水平流式布局容器，添加為其一級(jí)子節(jié)點(diǎn)的控件將按照類似HTML文檔的流式布局形式，也就是逐行從右向左排列，占滿一行自動(dòng)換行。
• ColorRect也是一個(gè)專用于顯示單個(gè)顏色的矩形控件

測(cè)試場(chǎng)景：

顏色顯示函數(shù)：

# 用ColorRect顯示顏色
func show_color(color:Color):var rect = ColorRect.new()rect.color = colorrect.custom_minimum_size = Vector2(100,100)print(color) # 打印顏色值add_child(rect)

使用Color類型的構(gòu)造函數(shù)構(gòu)造顏色

• 在GDScript中，顏色有專門的數(shù)據(jù)類型Color。
• Color和int、float以及String一樣，屬于GDScript內(nèi)置的數(shù)據(jù)類型之一，專用于構(gòu)造和存儲(chǔ)顏色數(shù)據(jù)，并提供方法進(jìn)行顏色的處理。
• Color類型提供了多種構(gòu)造函數(shù)，我們可以用構(gòu)造函數(shù)形式，創(chuàng)建Color類型的變量。

# 使用構(gòu)造函數(shù)構(gòu)造顏色
var c1 = Color()                    # 默認(rèn)黑色
# RGB或RGBA形式
var c2 = Color(1.0,0.0,0.0)         # Color(r,g,b)
var c3 = Color(0.0,1.0,0.0,1.0)     # Color(r,g,b,a)

用show_color函數(shù)顯示的效果：

可以看到和Vector2或Vector3類似，空的構(gòu)造函數(shù)都會(huì)返回所有分量都為0的值。而Color()也返回R、G、B分量都是0，但不透明度為1的顏色，也就是黑色。

也就是說：

• Vector2()=Vector2(0,0)
• Vector3()=Vector3(0,0,0)
• Color()=Color(0,0,0)=Color(0,0,0,1)

另外你可以使用RGBA或RGB形式構(gòu)造顏色：

• 一個(gè)Color由R、G、B、A四個(gè)通道組成，分別代表紅色Red、綠色Green、藍(lán)色Blue和不透明度Alpha。
• 每個(gè)通道值都采用0.0到1.0之間的小數(shù)，你也可以將其理解為百分比0%～100%。
• 在構(gòu)造Color類型的時(shí)候你可以使用RGB和RGBA兩種基本形式，RGB形式可以看做是固定A為1.0的RGBA。

使用全局函數(shù)Color8

除了Color類型及其構(gòu)造函數(shù)，GDScript還提供了一個(gè)全局函數(shù)Color8：

Color8(r8: int, g8: int, b8: int, a8: int = 255)

8的意思就是8位，2^8=256，也就是R、G、B、A通道值的范圍是從0到 255，其中A的默認(rèn)值為255，也就是完全不透明。

其實(shí)Color8返回的也是Color類型。所以兩者本質(zhì)上沒有什么區(qū)別。實(shí)際使用中Color類型的小數(shù)形式或者說百分比形式更直觀一點(diǎn)。Color8更偏向原始的計(jì)算機(jī)定義。

var c1 = Color8(255,0,0)      # 紅色
var c2 = Color8(255,0,0,127)  # 紅色，不透明度約0.5

使用16進(jìn)制字符串或顏色名稱形式

# 字符串：16進(jìn)制或顏色名(不區(qū)分大小寫)
var c6 = Color("#0000ff")           # #RRGGBB
var c7 = Color("#0000ffcc")         # #RRGGBBAA
var c8 = Color("#cc0")              # #RGB
var c9 = Color("#cc0c")             # #RGBA
var c10 = Color("cc0c")             # RGBA# 顏色名字符串形式
var c11 = Color("red")              # 顏色名字符串
var c12 = Color("red",0.5)          # 顏色名字符串+ Alpha值# from_string方法
var c20 = Color.from_string("blue",Color.BLUE) # (顏色名，默認(rèn)值)
var c21 = Color.from_string("#ccc",Color.BLUE) # (顏色名，默認(rèn)值)

16進(jìn)制整數(shù)形式

# 16進(jìn)制整數(shù)形式
var c24 = Color.hex(0xff0000ff)  # 0xRRGGBBAA,0x為前綴，表示為16進(jìn)制
var c25 = Color.hex(0x00ff00ff)  # 0xRRGGBBAA,0x為前綴，表示為16進(jìn)制

16進(jìn)制html顏色字符串形式

# 16進(jìn)制html顏色字符串形式
var c26 = Color.html("#ccc")        # #RGB
var c27 = Color.html("#ff0000")     # #RRGGBB
var c28 = Color.html("#ff0000ee")   # #RRGGBBAA
var c29 = Color.html("ff0000ee")    # RRGGBBAA

使用顏色常量

Color類型內(nèi)部定義了很多顏色常量，你可以很方便的用顏色的常量名。
你可以在《包含GODOT所有名稱顏色的JSON》中獲得所有顏色常量的英文名和中文名及其顏色值的信息。

# 顏色常量
var c1 = Color.YELLOW                      # Color內(nèi)置常量
var c2 = Color(Color.YELLOW_GREEN,1.0)     # Color內(nèi)置常量

使用HSV形式構(gòu)造

除了以上的RGB形式，16進(jìn)制顏色值形式，顏色常量或顏色名形式，還可以使用(h,s,v)或(h,s,v,a)形式構(gòu)造顏色。

var c1 = Color.from_hsv(1,1,1,1)
var c2 = Color.from_hsv(0,1,1,1)show_color(c1)  # (1, 0, 0, 1)
show_color(c2)  # (1, 0, 0, 1)

關(guān)于HSV顏色模式的具體內(nèi)容見下文《獲取HSV分量》部分。

獲取比當(dāng)前顏色更暗或更亮的顏色

• 使用Color的lightened()方法，可以創(chuàng)建比當(dāng)前顏色更亮的顏色
• 使用Color的darkened()方法，則可以創(chuàng)建比當(dāng)前顏色更暗的顏色

var c1 = Color.RED  # 顯示顏色
show_color(c1.lightened(0.8))    
show_color(c1.lightened(0.6))
show_color(c1.lightened(0.4))
show_color(c1.lightened(0.2))
show_color(c1)                   # 原始顏色
show_color(c1.darkened(0.2))
show_color(c1.darkened(0.4))
show_color(c1.darkened(0.6))
show_color(c1.darkened(0.8))

獲取顏色的分量

你可以通過以下形式獲取一個(gè)Color的分量：

• r,g,b,a獲取其小數(shù)形式的分量
• r8,g8,b8,a8獲取其8位形式的分量
• 下標(biāo)[0],[1],[2],[3]形式獲取r,g,b,a分量
• h,s,v獲取HSV模式的分量

var c1 = Color("red")        # 顯示顏色
show_color(c1)  # (1, 0, 0, 1)# 小數(shù)形式
print(c1.r)  # 1
print(c1.g)  # 0
print(c1.b)  # 0
print(c1.a)  # 1# 8位形式
print(c1.r8)  # 255
print(c1.g8)  # 0
print(c1.b8)  # 0
print(c1.a8)  # 255# 下標(biāo)形式
print(c1[0])  # 1
print(c1[1])  # 0
print(c1[2])  # 0
print(c1[3])  # 1

獲取HSV分量

HSV顏色模型

HSV是另一種構(gòu)造或表示顏色的模型，你可以稱其為色相-飽和度-明度模型，即：

其數(shù)學(xué)形式的表示，一種是圓柱體，一種是圓錐體。

• H：色相，Hue，是圍繞中心軸的角度，取值為0~360度，GDScript中將其映射到0.0~1.0范圍
• S：飽和度，Saturation，是距中心軸的距離，取值為0~100，GDScript中將其映射到0.0~1.0范圍
• V：明度，Value，是中心軸的高度，取值為0~100，GDScript中將其映射到0.0~1.0范圍

HSV模型又稱HSB，其中B為Brightness。

Godot中的HSV

• ColorPicker和ColorPickerButton使用的是下圖左的取色形式

• 檢視器面板的顏色類屬性（包括導(dǎo)出變量）采用的時(shí)下圖右的取色形式
  
  可以看到兩者只是將H、S、V三個(gè)參數(shù)進(jìn)行了不同的組合：

• 前者將色相H單獨(dú)拎出來，飽和度S和明度V進(jìn)行組合

• 后者將明度V單獨(dú)出來，將色相和飽和度進(jìn)行組合

在其他一些軟件，還可以看到“色環(huán)”形式的HSV取色器設(shè)計(jì)：

• 其中色相H采用360度的色環(huán)形式
• 飽和度S和明度V組合成一個(gè)正三角形且三角形頂部的頂點(diǎn)指向色相，對(duì)應(yīng)錐形模型的切面
• 飽和度S和明度V也可以組合成正方形，對(duì)應(yīng)圓柱體模型的一個(gè)切面

360度色相映射0到1的方法

度數(shù)/360即可。
黃色在RGB/CMY色環(huán)中為60度，60/360=1/6=0.16666666…

var c1 = Color.YELLOWprint(c1.h)  # 色相 0.16666667163372
print(c1.s)  # 飽和度 1
print(c1.v)  # 亮度 1

可以看到數(shù)值非常相近。

用HSV形式構(gòu)造顏色

可以用Color類型的from_hsv()方法以(h,s,v,a)形式構(gòu)造顏色。

var c1 = Color.from_hsv(1,1,1,1)
var c2 = Color.from_hsv(0,1,1,1)show_color(c1)  # (1, 0, 0, 1)
show_color(c2)  # (1, 0, 0, 1)

• 因?yàn)?code>0°和360°都是紅色，所以用0（0/360）或1（360/360）都是可以的。

生成簡(jiǎn)易HSV360色相

for i in range(360.0):show_color(Color.from_hsv(i/360.0,1,1,1))

顏色的比較

兩個(gè)Color類型的顏色值，可以使用==或!=進(jìn)行比較，判斷是否相等。

var c1 = Color(1.0,0,0)print(c1 == Color.RED)  # true
print(c1 != Color.RED)  # false

判斷兩個(gè)顏色是否近似相等

如果你按F1搜索is_equal_approx，可以看到很多內(nèi)置類型都自帶了一個(gè)is_equal_approx方法，這些類型一般都是由幾個(gè)分量組成。

而在@GlobalScope中也存在一個(gè)is_equal_approx方法，用于比較兩個(gè)浮點(diǎn)數(shù)是否相近。

其他內(nèi)置類型is_equal_approx方法都是在其各個(gè)分量上調(diào)用@GlobalScope的is_equal_approx方法。

根據(jù)內(nèi)置文檔的說法is_equal_approx的精度與比較的數(shù)字本身的大小有關(guān)，數(shù)字越小，精度要求越高，數(shù)字越大，精度要求越低。
以下是我簡(jiǎn)單進(jìn)行的幾組測(cè)試：

print(is_equal_approx(0.9,1.0))     # flase
print(is_equal_approx(0.99,1.0))    # flase
print(is_equal_approx(0.999,1.0))   # flase
print(is_equal_approx(0.9999,1.0))  # flase
print(is_equal_approx(0.99999,1.0)) # trueprint(is_equal_approx(9,10))           # flase
print(is_equal_approx(9.9,10))         # flase
print(is_equal_approx(9.99,10))        # flase
print(is_equal_approx(9.999,10))       # flase
print(is_equal_approx(9.9999,10))      # flase
print(is_equal_approx(9.99999,10))     # trueprint(is_equal_approx(9999,10000))           # flase
print(is_equal_approx(9999.9,10000))         # flase
print(is_equal_approx(9999.99,10000))        # true
print(is_equal_approx(9999.999,10000))       # trueprint(is_equal_approx(999999999,1000000000)) # true

因此在使用Color類型的is_equal_approx()，判定兩個(gè)顏色是否近似時(shí)，其判定為true的條件是非常嚴(yán)格的，就是每個(gè)分量的差值都要＜0.00001才行。

var c1 = Color(0,1,0,1)
var c2 = Color(0,0.9,0,1)
var c3 = Color(0,0.99,0,1)
var c4 = Color(0,0.999,0,1)
var c5 = Color(0,0.9999,0,1)
var c6 = Color(0,0.99999,0,1)
var c7 = Color(0,0.999999,0,1)show_color(c1)
show_color(c2)
show_color(c3)
show_color(c4)
show_color(c5)
show_color(c6)
show_color(c7)
print(c1.is_equal_approx(c2))   # false
print(c1.is_equal_approx(c3))   # false
print(c1.is_equal_approx(c4))   # false
print(c1.is_equal_approx(c5))   # false
print(c1.is_equal_approx(c6))   # false
print(c1.is_equal_approx(c7))   # true

這種近乎變態(tài)的近似判斷幾乎沒有實(shí)用意義，因此不如自己編寫一個(gè)函數(shù)來判斷兩個(gè)顏色的近似。

# 判斷兩個(gè)顏色是否相似，精度precision可以自定義，默認(rèn)0.1
func is_similar_color(color1:Color,color2:Color,precision:float = 0.1) -> bool:var bol:boolvar color_d = color1-color2  # 獲得顏色的差值var color_d_arr = []         # 存儲(chǔ)轉(zhuǎn)化為絕對(duì)值和特定精度的分量# 將分量轉(zhuǎn)換為特定精度的小數(shù)的絕對(duì)值for i in range(4):var d_val = snapped(absf(color_d[i]),precision) # 轉(zhuǎn)換為與precision小數(shù)位數(shù)一致的浮點(diǎn)數(shù)color_d_arr.append(d_val)# 比較每個(gè)分量的絕對(duì)值是否都達(dá)到精度值的要求if color_d_arr[0] <= precision and \color_d_arr[1] <= precision and \color_d_arr[2] <= precision and \color_d_arr[3] <= precision:bol = true# 或者所有有分量的差值之和小于3倍精度elif color_d_arr[0] + color_d_arr[1]+ color_d_arr[2] + color_d_arr[3] <= precision * 3:bol = trueelse:bol = falsereturn bol

var c1 = Color(0,1,0,1)
var c2 = Color(0,0.9,0,1)
var c3 = Color(0.1,0,0,1)
var c4 = Color(0.1,0.9,0,1)
var c5 = Color(0.2,0.9,0,1)
var c6 = Color(0.1,0.9,0.1,0.9)show_color(c1)
show_color(c2)
show_color(c3)
show_color(c4)
show_color(c5)
show_color(c6)
print(is_similar_color(c1,c2))  # true
print(is_similar_color(c1,c3))  # false
print(is_similar_color(c1,c4))  # true
print(is_similar_color(c1,c5))  # true
print(is_similar_color(c1,c6))  # true

顏色的運(yùn)算

顏色運(yùn)算這部分，可以完全類比顏色是一個(gè)Vector4，雖然GDScript中沒有這種數(shù)據(jù)類型，但運(yùn)算形式和運(yùn)算性質(zhì)幾乎和Vector2、Vector3如出一轍。

顏色相加

var c1 = Color.AQUAMARINE           
var c2 = Color.BLUE_VIOLET# 顯示顏色
show_color(c1)     # (0.498, 1, 0.8314, 1)
show_color(c2)     # (0.5412, 0.1686, 0.8863, 1)
show_color(c1+c2)  # (1.0392, 1.1686, 1.7176, 2)

可以看到一個(gè)Color值，類似與一個(gè)四分量向量，其加法就是各個(gè)分量值相加，這里兩個(gè)顏色相加的值為(1.0392, 1.1686, 1.7176, 2)，超出了Color所定義的顏色值的上限(1.0,1.0,1.0,1.0)，也就是白色，所以最終它是以白色顯示。

顏色相減

與顏色相加類似，兩個(gè)顏色之間也可以進(jìn)行相減運(yùn)算。同樣是RBGA四個(gè)通道的分量相減。

var c1 = Color.AQUAMARINE           
var c2 = Color.BLUE_VIOLET# 顯示顏色
show_color(c1)     # (0.498, 1, 0.8314, 1)
show_color(c2)     # (0.5412, 0.1686, 0.8863, 1)
show_color(c1-c2)  # (-0.0431, 0.8314, -0.0549, 0)

這里因?yàn)橄鄿p后Alpha通道值為0，所以顏色變?yōu)橥耆该鳌?/p>

顏色相乘

var c1 = Color.AQUAMARINE           
var c2 = Color.BLUE_VIOLET# 顯示顏色
show_color(c1)     # (0.498, 1, 0.8314, 1)
show_color(c2)     # (0.5412, 0.1686, 0.8863, 1)
show_color(c1*c2)  # (0.2695, 0.1686, 0.7368, 1)

CanvasItem的modulate屬性就是采用了顏色的乘法。其中比較特殊的就是：

• 白色為(1.0,1.0,1.0,1.0)，任何數(shù)乘以1都保持不變，所以任何顏色乘以白色，還是這個(gè)顏色本身。
• 黑色為(0.0,0.0,0.0,0.0)，任何數(shù)乘以0都會(huì)變成0，所以任何顏色乘以黑色，都會(huì)變成黑色。

顏色相除

var c1 = Color.AQUAMARINE           
var c2 = Color.BLUE_VIOLET# 顯示顏色
show_color(c1)     # (0.498, 1, 0.8314, 1)
show_color(c2)     # (0.5412, 0.1686, 0.8863, 1)
show_color(c1/c2)  # (0.9203, 5.9302, 0.9381, 1)

顏色乘以整數(shù)或浮點(diǎn)數(shù)

var c1 = Color(0.1,0.1,0.1)show_color(c1)
show_color(c1 * 0.5)  # (0.05, 0.05, 0.05, 0.5)
show_color(c1 * 1.2)  # (0.12, 0.12, 0.12, 1.2)
show_color(c1 * 2)    # (0.2, 0.2, 0.2, 2)
show_color(c1 * 0)    # (0, 0, 0, 0)

除以一個(gè)整數(shù)或浮點(diǎn)數(shù)類似。

顏色的混合

var yellow = Color.YELLOW  
var green = Color.GREEN  # 顯示顏色
show_color(yellow)   # (1, 1, 0, 1)
show_color(green)    # (0, 1, 0, 1)
show_color(yellow.blend(green)) # (0, 1, 0, 1)

var yellow = Color(Color.YELLOW,0.5)
var green = Color.GREEN  # 顯示顏色
show_color(yellow)  # (1, 1, 0, 0.5)
show_color(green)    # (0, 1, 0, 1)
show_color(yellow.blend(green)) # (0, 1, 0, 1)

可以看到：如果混合的第2個(gè)顏色alpha是1，也就是不帶透明度，會(huì)用后一個(gè)顏色覆蓋之前的顏色。

var yellow = Color(Color.YELLOW,0.5)
var green = Color(Color.GREEN,0.5)# 顯示顏色
show_color(yellow)
show_color(green)
show_color(yellow.blend(green))

只有當(dāng)?shù)?個(gè)顏色alpha小于1，也就是帶透明度，才可以看到混合的效果。

獲取反色

var green = Color.GREEN  # 顯示顏色
show_color(green)             # (0, 1, 0, 1)
show_color(green.inverted())  # (1, 0, 1, 1)

inverted()返回反色 (1-r,1-g,1-b,a)。

獲取顏色的灰度和亮度

godot4.2已經(jīng)刪除了Color的gray()方法，但我們根據(jù)其灰度值計(jì)算原理：(r + g + b) / 3?？梢宰约簶?gòu)造一個(gè)函數(shù)進(jìn)行代替

# 返回顏色的灰度值
func get_gray(color:Color) -> float:return (color.r + color.g + color.b)/3.0

get_luminance()返回該顏色的亮度，位于[0.0, 1.0]的范圍內(nèi)?？梢杂脕泶_定顏色是亮色還是暗色。一般認(rèn)為亮度小于0.5的顏色是暗色。

var green = Color.GREEN  # 顯示顏色
show_color(green)              # (0, 1, 0, 1)
print(green.get_luminance())   # 0.71520000696182
print(get_gray(green))         # 0.33333333333333

顏色插值

var green = Color.GREEN  
var red = Color.RED# 從0%到100%cha插值
for i in range(11):show_color(green.lerp(red,i * 0.1)) # 顯示顏色

查看輸出的數(shù)據(jù)，可以看到插值的整個(gè)過程：

(0, 1, 0, 1)
(0.1, 0.9, 0, 1)
(0.2, 0.8, 0, 1)
(0.3, 0.7, 0, 1)
(0.4, 0.6, 0, 1)
(0.5, 0.5, 0, 1)
(0.6, 0.4, 0, 1)
(0.7, 0.3, 0, 1)
(0.8, 0.2, 0, 1)
(0.9, 0.1, 0, 1)
(1, 0, 0, 1)

3.5的函數(shù)linear_interpolate4.x改名為lerp。

不同顏色表示形式之間的轉(zhuǎn)化

關(guān)于RGB模式：8位,16位,32位和64位色

• RGB色彩就是常說的光學(xué)三原色，R代表Red（紅色），G代表Green（綠色），B代表Blue（藍(lán)色）。自然界中肉眼所能看到的任何色彩都可以由這三種色彩混合疊加而成，因此也稱為加色模式。
• 現(xiàn)代的電子顯示器，包括電視、電腦、手機(jī)和平板等大都是采用了RGB顏色標(biāo)準(zhǔn)，在顯示器上，是通過電子槍打在屏幕的紅、綠、藍(lán)三色發(fā)光極上來產(chǎn)生色彩的，電腦一般都能顯示32位顏色，約有一百萬種以上的顏色。
• 在led 領(lǐng)域 利用三合一點(diǎn)陣全彩技術(shù)， 即在一個(gè)發(fā)光單元里由RGB三色晶片組成全彩像素。 隨著這一技術(shù)的不斷成熟，led顯示技術(shù)會(huì)給人們帶來更加豐富真實(shí)的色彩感受。
• 8位深（2的8次方）意味著有256種灰度或彩色組合，16位深（2的16次方）能表現(xiàn)65536種可能的顏色組合，24位深能夠表現(xiàn)約1670萬種不同的顏色。
• 32位圖像所含的信息多，所以表現(xiàn)的圖像更加細(xì)膩逼真，而16位圖像和8位圖像由于所含的圖像信息較少，所以表現(xiàn)的圖像畫質(zhì)不如32位的細(xì)膩。

—— photoshop RGB模式8位,16位,32位有什么不同?_百度知道 (baidu.com)

RGBA轉(zhuǎn)ABGR、ARGB等

Color類型提供了幾個(gè)顏色表示形式轉(zhuǎn)化的的函數(shù)，提供RGBA轉(zhuǎn)ABGR、ARGB等格式。抱歉我對(duì)ABGR、ARGB格式的使用了解較少。這里貼出內(nèi)置文檔源碼：

var color = Color(1, 0.5, 0.2)
print(color.to_abgr32()) # 輸出 4281565439
print(color.to_abgr64()) # 輸出 -225178692812801
print(color.to_argb32()) # 輸出 4294934323
print(color.to_argb64()) # 輸出 -2147470541
print(color.to_rgba32()) # 輸出 4286526463
print(color.to_rgba64()) # 輸出 -140736629309441

RGBA轉(zhuǎn)HTML16進(jìn)制顏色字符串

var color = Color(1, 1, 1, 0.5)
var s1 = color.to_html() # 返回 "7fffffff"
var s2 = color.to_html(false) # 返回 "ffffff"

判斷某個(gè)變量是否為Color類型

var color = Color(1, 1, 1, 0.5)print(color is Color)  # true
print(typeof(color) == TYPE_COLOR)  # true

批量存儲(chǔ)顏色

在Godot4.X中你可以用類型化數(shù)組Array[Color]形式或緊縮數(shù)組PackedColorArray來專門用于存儲(chǔ)多個(gè)顏色。

var colors:Array[Color]for i in range(360.0):colors.append(Color.from_hsv(i/360.0,1,1,1))

或者：

var colors:PackedColorArrayfor i in range(360.0):colors.append(Color.from_hsv(i/360.0,1,1,1))

聲明存儲(chǔ)多個(gè)顏色的導(dǎo)出變量

通過將導(dǎo)出變量類型設(shè)定為Array[Color]或PackedColorArray，就可以在檢視器面板設(shè)定多個(gè)顏色。

extends HFlowContainer@export var colors:PackedColorArray

聲明存儲(chǔ)多個(gè)顏色的自定義資源

可以自定義Resource，來存儲(chǔ)多個(gè)顏色。

# 調(diào)色板 - 存儲(chǔ)多個(gè)顏色
@tool
class_name ColorPalette extends Resource@export var colors:PackedColorArray

你可以在檢視器面板新建和編輯ColorPalette：

或者用代碼方式創(chuàng)建、編輯并保存

var p1 = ColorPalette.new()
p1.colors.append(Color.RED)
p1.colors.append(Color.GREEN)
p1.colors.append(Color.YELLOW)
p1.colors.append(Color.BLUE)
ResourceSaver.save(p1,"res://colors_p1.tres")

用PNG圖存儲(chǔ)調(diào)色板

利用Image類型，我們可以直接將顏色值存儲(chǔ)到一張png或jpg等形式的圖片上。

var img = Image.create(5,1,false,Image.FORMAT_RGBA8)
img.set_pixel(0,0,Color.RED)
img.set_pixel(1,0,Color.GREEN)
img.set_pixel(2,0,Color.YELLOW)
img.set_pixel(3,0,Color.BLUE)
img.set_pixel(4,0,Color.GOLD)
img.save_png("colos1.png")

輸出的圖片如下：

我們可以重新加載這張圖片，然后通過get_pixel來讀取其中的顏色信息。

參考資料

• 維基百科 - HSL和HSV色彩空間
• 百度百科 - 三原色