GUI のテーマカラーと背景を変更する

Siv3D Advent Calendar 2013, 12 日目の記事です。
今日は GUI のビジュアルを変更する機能を紹介します。

GUI の見た目は GUISkin で設定します。
GUISkin は設定項目が多いので、通常は GUISkin::Default(Color) 関数を使って初期化します。このときの Color がテーマカラーになります。


デフォルトは青色です。

# include <Siv3D.hpp>

void Main()
{
	GUI gui(GUISkin::Default());

	gui.addButton(L"PlayButton", { L"Play" });

	gui.addButton(L"PauseButton", { L"Pause" });

	gui.addButton(L"OpenButton", { L"Open" });

	gui.addNewLine();

	gui.addSlider(L"Slider", { 0.0, 1.0, 0.3, 500 });

	gui.addNewLine();

	gui.addSpace({ 50, 200 });

	while (System::Update())
	{
	
	}
}


チョコレート色に

	GUI gui(GUISkin::Default({ 120, 40, 10 }));


緑色に

	GUI gui(GUISkin::Default({ 40, 140, 50 }));

GUISkin の backgroundTexture プロパティに Texture を、repeatBackgroundTexture プロパティに繰り返しマッピングの有無を指定して、おしゃれな背景の GUI を作ることができます。

# include <Siv3D.hpp>

void Main()
{
	GUISkin skin = GUISkin::Default(Dialog::GetColor({ 0, 140, 220 }));

	skin.backgroundTexture = Dialog::OpenTexture();

	skin.repeatBackgroundTexture = true;

	GUI gui(skin);

	gui.addButton(L"PlayButton", { L"Play" });

	gui.addButton(L"PauseButton", { L"Pause" });

	gui.addButton(L"OpenButton", { L"Open" });

	gui.addNewLine();

	gui.addSlider(L"Slider", { 0.0, 1.0, 0.3, 500 });

	gui.addNewLine();

	gui.addSpace({ 50, 150 });

	while (System::Update())
	{
	
	}
}

森をイメージした GUI デザインのサンプル。

宇宙をイメージした GUI デザインのサンプル。

GUI のカスタマイズ可能な項目は今後も増やしていく予定です。
自分のゲームだけの GUI をデザインしてみるのも面白そうですね。