Skip to content

GUI

Jump to bottom
Reputeless edited this page Mar 14, 2017 · 4 revisions

基本ウィジェット

# include <Siv3D.hpp>

void Main()
{
	Graphics::SetBackground(Color(160, 200, 100));

	const Texture texture(Image(L"Example/Windmill.png").scale(0.3));

	GUI gui(GUIStyle::Default);
	gui.setTitle(L"タイトル");

	// テキスト
	gui.add(GUIText::Create(L"テキストと画像"));

	// 画像
	gui.addln(GUITexture::Create(texture));

	// 水平線
	gui.add(L"hr", GUIHorizontalLine::Create(1));
	gui.horizontalLine(L"hr").style.color = Color(127);

	// ボタン
	gui.add(L"bt1", GUIButton::Create(L"OK"));
	gui.add(L"bt2", GUIButton::Create(L"キャンセル"));
	gui.add(L"bt3", GUIButton::Create(L"OK", false));
	gui.addln(L"bt4", GUIButton::Create(L"キャンセル", false));

	// トグルスイッチ
	gui.add(L"ts1", GUIToggleSwitch::Create(L"OFF", L"ON", false));
	gui.add(L"ts2", GUIToggleSwitch::Create(L"OFF", L"ON", true));
	gui.add(L"ts3", GUIToggleSwitch::Create(L"OFF", L"ON", false, false));
	gui.addln(L"ts4", GUIToggleSwitch::Create(L"OFF", L"ON", true, false));

	// スライダー
	gui.add(L"sl1", GUISlider::Create(0.0, 100.0, 30.0, 200));
	gui.addln(L"sl2", GUISlider::Create(0.0, 100.0, 30.0, 200, false));

	// チェックボックス
	gui.add(L"cb1", GUICheckBox::Create({ L"Red", L"Green", L"Blue" }, { 1u, 2u }, true));
	gui.add(L"cb2", GUICheckBox::Create({ L"Red", L"Green", L"Blue" }, { 1u, 2u }, false));

	// ラジオボタン
	gui.add(L"rb1", GUIRadioButton::Create({ L"Red", L"Green", L"Blue" }, none, true));
	gui.add(L"rb2", GUIRadioButton::Create({ L"Red", L"Green", L"Blue" }, 1u, true));
	gui.addln(L"rb3", GUIRadioButton::Create({ L"Red", L"Green", L"Blue" }, 2u, false));

	// テキストフィールド
	gui.add(L"tf1", GUITextField::Create(none));
	gui.addln(L"tf2", GUITextField::Create(none, false));

	// テキストエリア
	gui.add(L"ta1", GUITextArea::Create(2, 10));
	gui.addln(L"ta2", GUITextArea::Create(2, 10, none, false));

	while (System::Update())
	{

	}
}

GUI ウィンドウの位置と大きさ

# include <Siv3D.hpp>

void Main()
{
	Graphics::SetBackground(Color(160, 200, 100));

	GUI gui(GUIStyle::Default);
	gui.setTitle(L"タイトル");
	gui.add(L"bt1", GUIButton::Create(L"OK"));
	gui.add(L"bt2", GUIButton::Create(L"キャンセル"));
	gui.setCenter(Window::Center());

	while (System::Update())
	{
		ClearPrint();
		Println(gui.getPos());
		Println(gui.getRect());
	}
}

GUI のスタイルを変える

# include <Siv3D.hpp>

void Main()
{
	Graphics::SetBackground(Color(160, 200, 100));
	const Font font(20);

	GUIStyle style = GUIStyle::Default;
	style.font = font;
	style.borderRadius = 0;

	GUI gui(style);
	gui.setTitle(L"タイトル");

	WidgetStyle widgetStyle;
	widgetStyle.font = font;

	gui.add(L"bt1", GUIButton::Create(L"OK", widgetStyle));
	gui.add(L"bt2", GUIButton::Create(L"キャンセル", widgetStyle));
	gui.setCenter(Window::Center());

	while (System::Update())
	{

	}
}

テキスト

# include <Siv3D.hpp>

void Main()
{
	Graphics::SetBackground(Color(160, 200, 100));

	GUI gui(GUIStyle::Default);
	gui.setTitle(L"タイトル");
	gui.add(L"text", GUIText::Create(L"", 300));

	while (System::Update())
	{
		gui.text(L"text").text = Format(L"マウスカーソル: ", Mouse::Pos());
	}
}

ボタン

# include <Siv3D.hpp>

void Main()
{
	Graphics::SetBackground(Color(160, 200, 100));

	GUI gui(GUIStyle::Default);
	gui.setTitle(L"タイトル");
	gui.add(L"left", GUIButton::Create(L"左"));
	gui.add(L"right", GUIButton::Create(L"右"));

	int32 x1 = 320;
	int32 x2 = 320;

	while (System::Update())
	{
		if (gui.button(L"left").pushed)
		{
			x1 -= 10;
		}
		else if (gui.button(L"right").pushed)
		{
			x1 += 10;
		}

		if (gui.button(L"left").pressed)
		{
			x2 -= 10;
		}
		else if (gui.button(L"right").pressed)
		{
			x2 += 10;
		}

		Circle(x1, 300, 20).draw();

		Circle(x2, 360, 20).draw();
	}
}

トグルスイッチ

# include <Siv3D.hpp>

void Main()
{
	Graphics::SetBackground(Color(160, 200, 100));

	GUI gui(GUIStyle::Default);
	gui.setTitle(L"タイトル");
	gui.add(L"circle", GUIToggleSwitch::Create(L"非表示", L"表示", false));

	while (System::Update())
	{
		if (gui.toggleSwitch(L"circle").isRight)
		{
			Circle(Window::Center(), 50).draw();
		}
	}
}

スライダー

# include <Siv3D.hpp>

void Main()
{
	Graphics::SetBackground(Color(160, 200, 100));

	GUI gui(GUIStyle::Default);
	gui.setTitle(L"タイトル");
	gui.add(L"x", GUISlider::Create(0.0, 640.0, 320.0, 200));

	while (System::Update())
	{
		Circle(gui.slider(L"x").value, 240, 50).draw();
	}
}

チェックボックス

# include <Siv3D.hpp>

void Main()
{
	Graphics::SetBackground(Color(160, 200, 100));

	GUI gui(GUIStyle::Default);
	gui.setTitle(L"タイトル");
	gui.add(L"color", GUICheckBox::Create({ L"Red", L"Green", L"Blue" }));

	while (System::Update())
	{
		if (gui.checkBox(L"color").checked(0))
		{
			Circle(220, 300, 40).draw(Palette::Red);
		}

		if (gui.checkBox(L"color").checked(1))
		{
			Circle(320, 300, 40).draw(Palette::Green);
		}

		if (gui.checkBox(L"color").checked(2))
		{
			Circle(420, 300, 40).draw(Palette::Blue);
		}
	}
}

ラジオボタン

# include <Siv3D.hpp>

void Main()
{
	Graphics::SetBackground(Color(160, 200, 100));

	GUI gui(GUIStyle::Default);
	gui.setTitle(L"タイトル");
	gui.add(L"color", GUIRadioButton::Create({ L"Red", L"Green", L"Blue" }));

	while (System::Update())
	{
		if (gui.radioButton(L"color").checked(0))
		{
			Circle(220, 300, 40).draw(Palette::Red);
		}

		if (gui.radioButton(L"color").checked(1))
		{
			Circle(320, 300, 40).draw(Palette::Green);
		}

		if (gui.radioButton(L"color").checked(2))
		{
			Circle(420, 300, 40).draw(Palette::Blue);
		}
	}
}

テキストフィールド

# include <Siv3D.hpp>

void Main()
{
	Graphics::SetBackground(Color(160, 200, 100));

	GUI gui(GUIStyle::Default);
	gui.setTitle(L"タイトル");
	
	// 最大 6 文字に設定
	gui.add(L"text", GUITextField::Create(6));

	const Font font(30);

	while (System::Update())
	{
		font(gui.textField(L"text").text).drawCenter(Window::Center());
	}
}

カラーパレット

# include <Siv3D.hpp>

void Main()
{
	GUI gui(GUIStyle::Default);
	gui.setTitle(L"色の選択");
	gui.add(L"color", GUIColorPalette::Create(Color(255, 127, 0)));

	while (System::Update())
	{
		Graphics::SetBackground(gui.colorPalette(L"color").color);
	}
}

← 前の章へ戻る　|　- 目次 -　|　次の章へ進む →

Siv3D について

入門チュートリアル

  1. Siv3D の基本
  2. 図形を描く
  3. テクスチャを描く
  4. テキストを描く
  5. 文字列と数値の変換
  6. キーボード入力
  7. マウス入力
  8. サウンドの再生
  9. MIDI の再生
  10. ウィンドウと背景
  11. 図形のあたり判定
  12. 乱数
  13. ダイアログ
  14. ドラッグ & ドロップ
  15. アプリの状態
  16. テキストファイル
  17. INI, CSV, JSON
  18. バイナリファイル
  19. GUI
  20. アセット管理
  21. 画像編集
  22. Web カメラ
  23. マイク入力
  24. 経過時間の測定
  25. HSV カラー
  26. ファイルダウンロード
  27. 3D 描画
  28. 2D のレンダーステート
  29. 3D のレンダーステート
  30. パーティクル
  31. スクリーンショット
  32. アプリケーションの公開
  33. さらに学ぶには

学習コース

表現テクニック集

入出力デバイス

サンプル

開発のヒント

Clone this wiki locally