OpenSiv3D | ColorMul, ColorAdd の使い方

公開:2020/12/04
更新:2020/12/04
2 min読了の目安(約2400字TECH技術記事

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

ScopedColorMul2DScopedColorAdd2D を使うと、図形やテクスチャを描くときに、本来の色に 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 } がデフォルト値になっています。

プログラム例

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

# 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);
			}
		}
	}
}

色の設定例

半分の明るさにする場合(同じ効果は texture.draw(ColorF{ 0.5 }) でも得られます)

  • cM = ColorF{ 0.5, 0.5, 0.5, 1.0 }
  • cA = ColorF{ 0.0, 0.0, 0.0, 0.0 }

黒いシルエットにする場合

  • cM = ColorF{ 0.0, 0.0, 0.0, 1.0 }
  • cA = ColorF{ 0.0, 0.0, 0.0, 0.0 }

水色のシルエットにする場合

  • cM = ColorF{ 0.0, 0.0, 0.0, 1.0 }
  • cA = ColorF{ 0.0, 1.0, 1.0, 0.0 }

白色のシルエットにする場合

  • cM = ColorF{ 0.0, 0.0, 0.0, 1.0 }
  • cA = ColorF{ 1.0, 1.0, 1.0, 0.0 }