🎨

Siv3D | ColorMul, ColorAdd の使い方

2020/12/04に公開

描画する図形やテクスチャの色を操作する

ScopedColorMul2D と ScopedColorAdd2D を使うと、図形やテクスチャを描くときに、本来の色に RGBA 成分を乗算・加算して描くことができます。

入力の色を c とし、ScopedColorMul2D で設定された色を cM, ScopedColorAdd2D で設定された色を cA とすると、出力の色は c * cM + cA で求められます。（ここからさらにブレンドステートに基づいてアルファ透過などが計算されて最終的に書き込まれる色が決定しますが、本記事では説明を省きます）

例

Rect{ 100 }.draw(ColorF{ 0.6, 0.8, 1.0 }); で図形を描画するとき
cM = ColorF{ 0.8, 0.7, 0.6, 1.0 }
cA = ColorF{ 0.2, 0.3, 0.4, 0.0 }

であれば、ColorF{ (0.6 * 0.8 + 0.2), (0.8 * 0.7 + 0.3), (1.0 * 0.6 + 0.4), (1.0 * 1.0 + 0.0) }, つまり ColorF{ 0.68, 0.86, 1.0, 1.0 } の色で描画されることになります。

特に設定しない場合、cM = ColorF{ 1.0, 1.0, 1.0, 1.0 }, cA = ColorF{ 0.0, 0.0, 0.0, 0.0 } がデフォルト値になっています。

プログラム例

ScopedColorMul2D と ScopedColorAdd2D オブジェクトが存在する間、設定が適用されます。プログラム中の一部の描画にだけ適用したい場合、その部分を { } によるスコープで囲みます。

# include <Siv3D.hpp> // OpenSiv3D v0.4.3

void Main()
{
	Scene::SetBackground(ColorF{ 0.4, 0.8, 0.6 });

	const Array<Texture> textures =
	{
		Texture{Emoji{U"🐕"}},
		Texture{Emoji{U"🐤"}},
		Texture{Emoji{U"🐄"}},
		Texture{Emoji{U"🐧"}},
	};

	ColorF cM{ 1.0, 1.0, 1.0, 1.0 };
	ColorF cA{ 0.0, 0.0, 0.0, 0.0 };

	while (System::Update())
	{
		SimpleGUI::Headline(U"Mul", Vec2{ 20, 20 });
		SimpleGUI::Slider(cM.r, Vec2{ 20, 60 });
		SimpleGUI::Slider(cM.g, Vec2{ 20, 100 });
		SimpleGUI::Slider(cM.b, Vec2{ 20, 140 });

		SimpleGUI::Headline(U"Add", Vec2{ 20, 200 });
		SimpleGUI::Slider(cA.r, Vec2{ 20, 240 });
		SimpleGUI::Slider(cA.g, Vec2{ 20, 280 });
		SimpleGUI::Slider(cA.b, Vec2{ 20, 320 });

		{
			ScopedColorMul2D colorMul{ cM };
			ScopedColorAdd2D colorAdd{ cA };

			for (auto [i, texture] : Indexed(textures))
			{
				texture.drawAt(260 + i * 140, 200);
			}
		}
	}
}