WisdomSoft - for your serial experiences.

XNA Framework における色の取り扱いと Color 構造体について解説します。

三原色の組み合わせ

他の一般的なグラフィックス API と同じように、XNA Framework においても色は赤要素、緑要素、青要素の組み合わせによる加法混色で表現されます。加えて、アルファ要素による不透明度を設定できます。色情報を取引するには Microsoft.Xna.Framework.Color 構造体を用います。

Microsoft.Xna.Framework.Color 構造体
[TypeConverterAttribute(Microsoft.Xna.Framework.Design.ColorConverter, Microsoft.Xna.Framework, Version=4.0.0.0, Culture=neutral, PublicKeyToken=f48fa5f25d27e8ff)]
[SerializableAttribute]
public struct Color : IPackedVector<uint>, IPackedVector, IEquatable<Color>

この構造体のコンストラクタはオーバーロードされており、各色要素の初期値を指定できます。

Color 構造体のコンストラクタ
public Color (int r, int g, int b)
public Color (int r, int g, int b, int a)
public Color (float r, float g, float b)
public Color (float r, float g, float b, float a)
public Color (Vector3 vector)
public Color (Vector4 vector)

r パラメータには赤要素を、g パラメータには緑要素を、b パラメータには青要素を、a パラメータにはアルファ要素をそれぞれ指定します。int 型のパラメータの場合は 0 ~ 255 までの範囲で、float 型のパラメータの場合は 0.0F ~ 1.0F までの範囲で、各要素の強さを表します。

Vector3 型の vector パラメータは X 要素が赤要素、Y 要素が緑要素、Z 要素が青要素に対応するベクトルを指定します。Vector4 型の vector パラメータも同様で W 要素がアルファ要素に対応します。 

コード1
using System.Diagnostics;
using Microsoft.Xna.Framework;

public class TestGame : Game
{
    public static void Main(string[] args)
    {
        Color c1 = new Color();
        Color c2 = new Color(255, 255, 255);
        Color c3 = new Color(100, 100, 100, 255);
        Color c4 = new Color(1.0F, 0, 0);
        Color c5 = new Color(0.25F, 0.5F, 0.7F, 1.0F);
        Color c6 = new Color(Vector3.Right);
        Color c7 = new Color(Vector4.One);

        Debug.WriteLine("c1=" + c1);
        Debug.WriteLine("c2=" + c2);
        Debug.WriteLine("c3=" + c3);
        Debug.WriteLine("c4=" + c4);
        Debug.WriteLine("c5=" + c5);
        Debug.WriteLine("c6=" + c6);
        Debug.WriteLine("c7=" + c7);
    }
}
実行結果
コード1 実行結果

コード1Color 構造体の各コンストラクタから生成した色を出力しています。float 型やベクトル型のパラメータから指定する値は 0.0 ~ 1.0 までの範囲で色要素の強さを表すので注意してください。

色要素はプロパティから個別に設定または取得できます。アルファ要素は A プロパティ、赤要素は R プロパティ、緑要素は G プロパティ、緑要素は B プロパティによって表されます。

Color 構造体 A プロパティ
public byte A { get; set; }
Color 構造体 R プロパティ
public byte R { get; set; }
Color 構造体 G プロパティ
public byte G { get; set; }
Color 構造体 B プロパティ
public byte B { get; set; }

これらのプロパティの値は 0 が最も弱く 255 が最も強い状態を表します。例えば赤色であれば赤要素である R プロパティの値が高く、G プロパティと B プロパティの値は低い状態です。

A プロパティのアルファ要素は色の合成に用いられる値であり、通常は不透明度を表します。アルファ要素が最も高い 255 であれば不透明であることを表し、0 であれば完全な透明を表します。

コード2
using System.Diagnostics;
using Microsoft.Xna.Framework;

public class TestGame : Game
{
    public static void Main(string[] args)
    {
        Color c = new Color();
        c.A = 255;
        c.R = 200;
        c.G = 100;
        c.B = 50;

        Debug.WriteLine("A=" + c.A + ", R=" + c.G + ", G=" + c.B + ", B=" + c.B);
    }
}
実行結果
コード2 実行結果

コード2は Color 構造体の色要素をプロパティから設定しています。この構造体はフィールドを公開していないため、ローカル変数宣言で明示的に初期化しなければなりません。

定義済みの色

色要素の組み合わせで任意の色を作成できますが、黒や白、赤、青、緑といった標準的な色は静的な読み取り専用プロパティで提供されています。例えば黒色は Black プロパティ、白色は White プロパティから取得できます。 

Color 構造体 Black プロパティ
public static Color Black { get; }
Color 構造体 White プロパティ
public static Color White { get; }

Black プロパティからはアルファ要素のみが 255 で、それ以外の RGB 要素が 0 の Color 構造体の値を得られます。同様に White プロパティは全ての要素が 255 の Color 構造体の値を返します。

コード3
using System.Diagnostics;
using Microsoft.Xna.Framework;

public class TestGame : Game
{
    public static void Main(string[] args)
    {
        Debug.WriteLine("Black=" + Color.Black);
        Debug.WriteLine("White=" + Color.White);
    }
}
実行結果
コード3 実行結果

コード3は Black プロパティと White プロパティが返した Color 構造体の値を出力しています。

この他にも多くの色がプロパティで用意しています。赤色は Red、青色は Blue、緑色は Green、灰色は Gray、黄色は Yellow など、主要な色にはすべて名前がついています。表1はColor 構造体で名前が付けられている定義済みの色の一覧です。

表1 Color 構造体で定義済みの色
プロパティ
Transparent{R:0 G:0 B:0 A:0}
AliceBlue{R:240 G:248 B:255 A:255}
AntiqueWhite{R:250 G:235 B:215 A:255}
Aqua{R:0 G:255 B:255 A:255}
Aquamarine{R:127 G:255 B:212 A:255}
Azure{R:240 G:255 B:255 A:255}
Beige{R:245 G:245 B:220 A:255}
Bisque{R:255 G:228 B:196 A:255}
Black{R:0 G:0 B:0 A:255}
BlanchedAlmond{R:255 G:235 B:205 A:255}
Blue{R:0 G:0 B:255 A:255}
BlueViolet{R:138 G:43 B:226 A:255}
Brown{R:165 G:42 B:42 A:255}
BurlyWood{R:222 G:184 B:135 A:255}
CadetBlue{R:95 G:158 B:160 A:255}
Chartreuse{R:127 G:255 B:0 A:255}
Chocolate{R:210 G:105 B:30 A:255}
Coral{R:255 G:127 B:80 A:255}
CornflowerBlue{R:100 G:149 B:237 A:255}
Cornsilk{R:255 G:248 B:220 A:255}
Crimson{R:220 G:20 B:60 A:255}
Cyan{R:0 G:255 B:255 A:255}
DarkBlue{R:0 G:0 B:139 A:255}
DarkCyan{R:0 G:139 B:139 A:255}
DarkGoldenrod{R:184 G:134 B:11 A:255}
DarkGray{R:169 G:169 B:169 A:255}
DarkGreen{R:0 G:100 B:0 A:255}
DarkKhaki{R:189 G:183 B:107 A:255}
DarkMagenta{R:139 G:0 B:139 A:255}
DarkOliveGreen{R:85 G:107 B:47 A:255}
DarkOrange{R:255 G:140 B:0 A:255}
DarkOrchid{R:153 G:50 B:204 A:255}
DarkRed{R:139 G:0 B:0 A:255}
DarkSalmon{R:233 G:150 B:122 A:255}
DarkSeaGreen{R:143 G:188 B:139 A:255}
DarkSlateBlue{R:72 G:61 B:139 A:255}
DarkSlateGray{R:47 G:79 B:79 A:255}
DarkTurquoise{R:0 G:206 B:209 A:255}
DarkViolet{R:148 G:0 B:211 A:255}
DeepPink{R:255 G:20 B:147 A:255}
DeepSkyBlue{R:0 G:191 B:255 A:255}
DimGray{R:105 G:105 B:105 A:255}
DodgerBlue{R:30 G:144 B:255 A:255}
Firebrick{R:178 G:34 B:34 A:255}
FloralWhite{R:255 G:250 B:240 A:255}
ForestGreen{R:34 G:139 B:34 A:255}
Fuchsia{R:255 G:0 B:255 A:255}
Gainsboro{R:220 G:220 B:220 A:255}
GhostWhite{R:248 G:248 B:255 A:255}
Gold{R:255 G:215 B:0 A:255}
Goldenrod{R:218 G:165 B:32 A:255}
Gray{R:128 G:128 B:128 A:255}
Green{R:0 G:128 B:0 A:255}
GreenYellow{R:173 G:255 B:47 A:255}
Honeydew{R:240 G:255 B:240 A:255}
HotPink{R:255 G:105 B:180 A:255}
IndianRed{R:205 G:92 B:92 A:255}
Indigo{R:75 G:0 B:130 A:255}
Ivory{R:255 G:255 B:240 A:255}
Khaki{R:240 G:230 B:140 A:255}
Lavender{R:230 G:230 B:250 A:255}
LavenderBlush{R:255 G:240 B:245 A:255}
LawnGreen{R:124 G:252 B:0 A:255}
LemonChiffon{R:255 G:250 B:205 A:255}
LightBlue{R:173 G:216 B:230 A:255}
LightCoral{R:240 G:128 B:128 A:255}
LightCyan{R:224 G:255 B:255 A:255}
LightGoldenrodYellow{R:250 G:250 B:210 A:255}
LightGreen{R:144 G:238 B:144 A:255}
LightGray{R:211 G:211 B:211 A:255}
LightPink{R:255 G:182 B:193 A:255}
LightSalmon{R:255 G:160 B:122 A:255}
LightSeaGreen{R:32 G:178 B:170 A:255}
LightSkyBlue{R:135 G:206 B:250 A:255}
LightSlateGray{R:119 G:136 B:153 A:255}
LightSteelBlue{R:176 G:196 B:222 A:255}
LightYellow{R:255 G:255 B:224 A:255}
Lime{R:0 G:255 B:0 A:255}
LimeGreen{R:50 G:205 B:50 A:255}
Linen{R:250 G:240 B:230 A:255}
Magenta{R:255 G:0 B:255 A:255}
Maroon{R:128 G:0 B:0 A:255}
MediumAquamarine{R:102 G:205 B:170 A:255}
MediumBlue{R:0 G:0 B:205 A:255}
MediumOrchid{R:186 G:85 B:211 A:255}
MediumPurple{R:147 G:112 B:219 A:255}
MediumSeaGreen{R:60 G:179 B:113 A:255}
MediumSlateBlue{R:123 G:104 B:238 A:255}
MediumSpringGreen{R:0 G:250 B:154 A:255}
MediumTurquoise{R:72 G:209 B:204 A:255}
MediumVioletRed{R:199 G:21 B:133 A:255}
MidnightBlue{R:25 G:25 B:112 A:255}
MintCream{R:245 G:255 B:250 A:255}
MistyRose{R:255 G:228 B:225 A:255}
Moccasin{R:255 G:228 B:181 A:255}
NavajoWhite{R:255 G:222 B:173 A:255}
Navy{R:0 G:0 B:128 A:255}
OldLace{R:253 G:245 B:230 A:255}
Olive{R:128 G:128 B:0 A:255}
OliveDrab{R:107 G:142 B:35 A:255}
Orange{R:255 G:165 B:0 A:255}
OrangeRed{R:255 G:69 B:0 A:255}
Orchid{R:218 G:112 B:214 A:255}
PaleGoldenrod{R:238 G:232 B:170 A:255}
PaleGreen{R:152 G:251 B:152 A:255}
PaleTurquoise{R:175 G:238 B:238 A:255}
PaleVioletRed{R:219 G:112 B:147 A:255}
PapayaWhip{R:255 G:239 B:213 A:255}
PeachPuff{R:255 G:218 B:185 A:255}
Peru{R:205 G:133 B:63 A:255}
Pink{R:255 G:192 B:203 A:255}
Plum{R:221 G:160 B:221 A:255}
PowderBlue{R:176 G:224 B:230 A:255}
Purple{R:128 G:0 B:128 A:255}
Red{R:255 G:0 B:0 A:255}
RosyBrown{R:188 G:143 B:143 A:255}
RoyalBlue{R:65 G:105 B:225 A:255}
SaddleBrown{R:139 G:69 B:19 A:255}
Salmon{R:250 G:128 B:114 A:255}
SandyBrown{R:244 G:164 B:96 A:255}
SeaGreen{R:46 G:139 B:87 A:255}
SeaShell{R:255 G:245 B:238 A:255}
Sienna{R:160 G:82 B:45 A:255}
Silver{R:192 G:192 B:192 A:255}
SkyBlue{R:135 G:206 B:235 A:255}
SlateBlue{R:106 G:90 B:205 A:255}
SlateGray{R:112 G:128 B:144 A:255}
Snow{R:255 G:250 B:250 A:255}
SpringGreen{R:0 G:255 B:127 A:255}
SteelBlue{R:70 G:130 B:180 A:255}
Tan{R:210 G:180 B:140 A:255}
Teal{R:0 G:128 B:128 A:255}
Thistle{R:216 G:191 B:216 A:255}
Tomato{R:255 G:99 B:71 A:255}
Turquoise{R:64 G:224 B:208 A:255}
Violet{R:238 G:130 B:238 A:255}
Wheat{R:245 G:222 B:179 A:255}
White{R:255 G:255 B:255 A:255}
WhiteSmoke{R:245 G:245 B:245 A:255}
Yellow{R:255 G:255 B:0 A:255}
YellowGreen{R:154 G:205 B:50 A:255}

値から色を生成しても同じ結果を得られますが、数値から色を想像することは難しいので、コード内で色を扱う場合も名前から色を取得したほうが、何色を使っているのか読みやすくなります。