Skip to content

名前入力画面

Jump to bottom
Reputeless edited this page Dec 6, 2016 · 3 revisions

1. 文字のボタン

# include <Siv3D.hpp>

void Main()
{
	Graphics::SetBackground(Palette::Skyblue);

	FontAsset::Register(L"Button", 15, Typeface::Medium);

	const Rect rect(23, 200, 44, 44);

	bool pressed = false;

	while (System::Update())
	{
		if (rect.leftClicked)
		{
			pressed = true;
		}
		else if (pressed && !rect.mouseOver)
		{
			pressed = false;
		}
		else if (pressed && rect.leftReleased)
		{
			pressed = false;
		}

		const Color color(pressed ? 220 : rect.mouseOver ? 240 : 255);

		RoundRect(rect, 4).draw(color);

		FontAsset(L"Button")(L"A").drawAt(rect.center, Palette::Black);
	}
}

2. クラスにまとめる

# include <Siv3D.hpp>

class CharButton
{
private:

	String m_text;

	Rect m_rect;

	bool m_pressed = false;

public:

	CharButton() = default;

	CharButton(const String& text, const Rect& rect)
		: m_text(text)
		, m_rect(rect) {}

	bool update()
	{
		if (m_rect.leftClicked)
		{
			m_pressed = true;
		}
		else if (m_pressed && !m_rect.mouseOver)
		{
			m_pressed = false;
		}
		else if (m_pressed && m_rect.leftReleased)
		{
			m_pressed = false;

			return true;
		}

		return false;
	}

	void draw() const
	{
		const Color color(m_pressed ? 220 : m_rect.mouseOver ? 240 : 255);

		RoundRect(m_rect, 4).draw(color);

		FontAsset(L"Button")(m_text).drawAt(m_rect.center, Palette::Black);
	}
};

void Main()
{
	Graphics::SetBackground(Palette::Skyblue);

	FontAsset::Register(L"Button", 15, Typeface::Medium);

	CharButton button(L"A", Rect(23, 200, 44, 44));

	while (System::Update())
	{
		button.update();

		button.draw();
	}
}

3. 入力したテキストを表示する

# include <Siv3D.hpp>

class CharButton
{
private:

	String m_text;

	Rect m_rect;

	bool m_pressed = false;

public:

	CharButton() = default;

	CharButton(const String& text, const Rect& rect)
		: m_text(text)
		, m_rect(rect) {}

	bool update()
	{
		if (m_rect.leftClicked)
		{
			m_pressed = true;
		}
		else if (m_pressed && !m_rect.mouseOver)
		{
			m_pressed = false;
		}
		else if (m_pressed && m_rect.leftReleased)
		{
			m_pressed = false;

			return true;
		}

		return false;
	}

	void draw() const
	{
		const Color color(m_pressed ? 220 : m_rect.mouseOver ? 240 : 255);

		RoundRect(m_rect, 4).draw(color);

		FontAsset(L"Button")(m_text).drawAt(m_rect.center, Palette::Black);
	}

	const String& getText() const
	{
		return m_text;
	}
};

void Main()
{
	Graphics::SetBackground(Palette::Skyblue);

	FontAsset::Register(L"Name", 30);

	FontAsset::Register(L"Button", 15, Typeface::Medium);

	String name;

	const size_t maxNameLength = 18;

	CharButton button(L"A", Rect(23, 200, 44, 44));

	while (System::Update())
	{
		if (button.update())
		{
			if (name.length < maxNameLength)
			{
				name.append(button.getText());
			}
		}

		button.draw();

		RoundRect(23, 80, 594, 80, 8).draw(Color(240, 250, 255));

		FontAsset(L"Name")(name).draw(40, 90, Color(20));
	}
}

4. 複数の文字を扱う

# include <Siv3D.hpp>

class CharButton
{
private:

	String m_text;

	Rect m_rect;

	bool m_pressed = false;

public:

	CharButton() = default;

	CharButton(const String& text, const Rect& rect)
		: m_text(text)
		, m_rect(rect) {}

	bool update()
	{
		if (m_rect.leftClicked)
		{
			m_pressed = true;
		}
		else if (m_pressed && !m_rect.mouseOver)
		{
			m_pressed = false;
		}
		else if (m_pressed && m_rect.leftReleased)
		{
			m_pressed = false;

			return true;
		}

		return false;
	}

	void draw() const
	{
		const Color color(m_pressed ? 220 : m_rect.mouseOver ? 240 : 255);

		RoundRect(m_rect, 4).draw(color);

		FontAsset(L"Button")(m_text).drawAt(m_rect.center, Palette::Black);
	}

	const String& getText() const
	{
		return m_text;
	}
};

void Main()
{
	Graphics::SetBackground(Palette::Skyblue);

	FontAsset::Register(L"Name", 30);

	FontAsset::Register(L"Button", 15, Typeface::Medium);

	String name;

	const size_t maxNameLength = 18;

	const String chars = L"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!?'-_#";

	Array<CharButton> buttons;

	for (auto i : step(chars.length))
	{
		const int32 x = (i % 12) * 50 + 23;
		const int32 y = (i / 12) * 50 + 200;
		buttons.emplace_back(String(1, chars[i]), Rect(x, y, 44, 44));
	}

	while (System::Update())
	{
		for (auto& button : buttons)
		{
			if (button.update())
			{
				if (name.length < maxNameLength)
				{
					name.append(button.getText());
				}

				break;
			}
		}

		for (const auto& button : buttons)
		{
			button.draw();
		}

		RoundRect(23, 80, 594, 80, 8).draw(Color(240, 250, 255));

		FontAsset(L"Name")(name).draw(40, 90, Color(20));
	}
}

5. 大きさの違うボタンとバックスペース

# include <Siv3D.hpp>

class CharButton
{
private:

	String m_text;

	Rect m_rect;

	bool m_pressed = false;

public:

	CharButton() = default;

	CharButton(const String& text, const Rect& rect)
		: m_text(text)
		, m_rect(rect) {}

	bool update()
	{
		if (m_rect.leftClicked)
		{
			m_pressed = true;
		}
		else if (m_pressed && !m_rect.mouseOver)
		{
			m_pressed = false;
		}
		else if (m_pressed && m_rect.leftReleased)
		{
			m_pressed = false;

			return true;
		}

		return false;
	}

	void draw() const
	{
		const Color color(m_pressed ? 220 : m_rect.mouseOver ? 240 : 255);

		RoundRect(m_rect, 4).draw(color);

		FontAsset(L"Button")(m_text).drawAt(m_rect.center, Palette::Black);
	}

	const String& getText() const
	{
		return m_text;
	}
};

void Main()
{
	Graphics::SetBackground(Palette::Skyblue);

	FontAsset::Register(L"Name", 30);

	FontAsset::Register(L"Button", 15, Typeface::Medium);

	String name;

	const size_t maxNameLength = 18;

	const String chars = L"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!?'-_#";

	Array<CharButton> buttons;

	for (auto i : step(chars.length))
	{
		const int32 x = (i % 12) * 50 + 23;
		const int32 y = (i / 12) * 50 + 200;
		buttons.emplace_back(String(1, chars[i]), Rect(x, y, 44, 44));
	}

	buttons.emplace_back(L" ", Rect(6 * 50 + 23, 3 * 50 + 200, 144, 44));

	buttons.emplace_back(L"[BS]", Rect(9 * 50 + 23, 3 * 50 + 200, 94, 44));

	while (System::Update())
	{
		for (auto& button : buttons)
		{
			if (button.update())
			{
				if (button.getText() == L"[BS]")
				{
					if (!name.isEmpty)
					{
						name.pop_back();
					}
				}
				else if (name.length < maxNameLength)
				{
					name.append(button.getText());
				}

				break;
			}
		}

		for (const auto& button : buttons)
		{
			button.draw();
		}

		RoundRect(23, 80, 594, 80, 8).draw(Color(240, 250, 255));

		FontAsset(L"Name")(name).draw(40, 90, Color(20));
	}
}

6. ボタンを押せる場合はカーソルを手の形にする

# include <Siv3D.hpp>

class CharButton
{
private:

	String m_text;

	Rect m_rect;

	bool m_pressed = false;

public:

	CharButton() = default;

	CharButton(const String& text, const Rect& rect)
		: m_text(text)
		, m_rect(rect) {}

	bool update()
	{
		if (m_rect.leftClicked)
		{
			m_pressed = true;
		}
		else if (m_pressed && !m_rect.mouseOver)
		{
			m_pressed = false;
		}
		else if (m_pressed && m_rect.leftReleased)
		{
			m_pressed = false;

			return true;
		}

		return false;
	}

	void draw() const
	{
		const Color color(m_pressed ? 220 : m_rect.mouseOver ? 240 : 255);

		RoundRect(m_rect, 4).draw(color);

		FontAsset(L"Button")(m_text).drawAt(m_rect.center, Palette::Black);
	}

	const String& getText() const
	{
		return m_text;
	}

	const Rect& getRect() const
	{
		return m_rect;
	}
};

void Main()
{
	Graphics::SetBackground(Palette::Skyblue);

	FontAsset::Register(L"Name", 30);

	FontAsset::Register(L"Button", 15, Typeface::Medium);

	String name;

	const size_t maxNameLength = 18;

	const String chars = L"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!?'-_#";

	Array<CharButton> buttons;

	for (auto i : step(chars.length))
	{
		const int32 x = (i % 12) * 50 + 23;
		const int32 y = (i / 12) * 50 + 200;
		buttons.emplace_back(String(1, chars[i]), Rect(x, y, 44, 44));
	}

	buttons.emplace_back(L" ", Rect(6 * 50 + 23, 3 * 50 + 200, 144, 44));

	buttons.emplace_back(L"[BS]", Rect(9 * 50 + 23, 3 * 50 + 200, 94, 44));

	while (System::Update())
	{
		for (auto& button : buttons)
		{
			if (button.update())
			{
				if (button.getText() == L"[BS]")
				{
					if (!name.isEmpty)
					{
						name.pop_back();
					}
				}
				else if (name.length < maxNameLength)
				{
					name.append(button.getText());
				}

				break;
			}
		}

		for (const auto& button : buttons)
		{
			button.draw();
		}

		RoundRect(23, 80, 594, 80, 8).draw(Color(240, 250, 255));

		FontAsset(L"Name")(name).draw(40, 90, Color(20));

		bool handCursor = false;

		for (const auto& button : buttons)
		{
			if (button.getRect().mouseOver)
			{
				handCursor = true;
				break;
			}
		}

		Cursor::SetStyle(handCursor ? CursorStyle::Hand : CursorStyle::Default);
	}
}

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