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 をデザインしてみるのも面白そうですね。