Siv3D | GUI に便利なアイコン集

これは Siv3D Advent Calendar 2021 の参加記事です。

OpenSiv3D v0.6.3 から、SimpleGUI のテキストで U"\U000F0493 Setting" のようにアイコンコードを使うことで、テキスト内にアイコンを表示できるようになりました。

使えるアイコンは 7,000 種類以上（Typeface::Icon_MaterialDesign + Typeface::Icon_Awesome_Solid）あります。この記事では、ゲームやアプリで使えそうなアイコンと、そのプログラムを紹介します。

# include <Siv3D.hpp> // OpenSiv3D v0.6.3

void Main()
{
	Scene::SetBackground(ColorF{ 0.8, 0.9, 1.0 });

	const Font iconFont{ FontMethod::MSDF, 40, Typeface::Icon_MaterialDesign };
	const Texture faceEmoji{ U"🐱"_emoji };

	double volume = 1.0;
	int32 up = 0, down = 0;

	while (System::Update())
	{
		SimpleGUI::Button(U"\U000F0009 アカウント", Vec2{ 20, 20 }, 220);
		SimpleGUI::Button(U"\U000F01F0 お知らせ", Vec2{ 20, 60 }, 220);
		SimpleGUI::Button(U"\U000F01DA ダウンロード", Vec2{ 20, 100 }, 220);
		SimpleGUI::Button(U"\U000F01A5 最高記録", Vec2{ 20, 140 }, 220);
		SimpleGUI::Button(U"\U000F0193 保存", Vec2{ 20, 180 }, 220);
		SimpleGUI::Button(U"\U000F1268 Copy to clipboard", Vec2{ 20, 220 }, 220);
		SimpleGUI::Button(U"\U000F0189 メッセージ", Vec2{ 20, 260 }, 220);
		SimpleGUI::Button(U"\U000F0493 設定", Vec2{ 20, 300 }, 220);
		SimpleGUI::Button(U"\U000F1398 中断する", Vec2{ 20, 340 }, 220);
		SimpleGUI::Button(U"\U000F0E1E OK", Vec2{ 20, 380 }, 220);
		SimpleGUI::Button(U"\U000F0639 カードを配る", Vec2{ 20, 420 }, 220);
		SimpleGUI::Button(U"\U000F0240 領土を広げる", Vec2{ 20, 460 }, 220);
		SimpleGUI::Button(U"\U000F02A1 プレゼントする", Vec2{ 20, 500 }, 220);
		SimpleGUI::Button(U"\U000F02DA 履歴", Vec2{ 20, 540 }, 220);

		// 音量調整
		SimpleGUI::Slider((0.5 < volume) ? U"\U000F057E"
			: (0.0 < volume) ? U"\U000F0580" : U"\U000F0581", volume, Vec2{ 260, 20 }, 30, 170);

		// Undo / Redo
		SimpleGUI::Button(U"\U000F054C", Vec2{ 260, 60 }, 40);
		SimpleGUI::Button(U"\U000F044E", Vec2{ 310, 60 }, 40);

		// upvote
		if (SimpleGUI::Button(U"\U000F0513  {}"_fmt(up), Vec2{ 260, 100 }, 90))
		{
			++up;
		}

		// downvote
		if (SimpleGUI::Button(U"\U000F0511  {}"_fmt(down), Vec2{ 370, 100 }, 90))
		{
			++down;
		}

		SimpleGUI::Button(U"公式サイト \U000F0327", Vec2{ 260, 140 }, 200);
		SimpleGUI::Button(U"\U000F0544 公式 Twitter", Vec2{ 260, 180 }, 200);
		SimpleGUI::Button(U"\U000F018C 任務一覧", Vec2{ 260, 220 }, 200);
		SimpleGUI::Button(U"\U000F0982 マップ", Vec2{ 260, 260 }, 200);
		SimpleGUI::Button(U"\U000F034E 現在地", Vec2{ 260, 300 }, 200);
		SimpleGUI::Button(U"\U000F0A7A 削除", Vec2{ 260, 340 }, 200);
		SimpleGUI::Button(U"\U000F05B7 修繕", Vec2{ 260, 380 }, 200);
		SimpleGUI::Button(U"\U000F0349 検索", Vec2{ 260, 420 }, 200);
		SimpleGUI::Button(U"\U000F0432 QR 作成", Vec2{ 260, 460 }, 200);
		SimpleGUI::Button(U"\U000F0433 QR 読み込み", Vec2{ 260, 500 }, 200);
		SimpleGUI::Button(U"\U000F04E6 同期", Vec2{ 260, 540 }, 200);

		// ハート
		iconFont(U"\U000F02D1\U000F02D1\U000F02D1\U000F06DF").draw(500, 20, ColorF{ 0.8, 0.2, 0.2 });

		// サイコロ
		iconFont(U"\U000F037D\U000F030C\U000F0297").draw(500, 80, ColorF{ 0.25 });

		// 操作方法
		iconFont(U"\U000F114A\U000F114B\U000F114C\U000F114D\U000F114E\U000F114F").draw(500, 140, ColorF{ 0.25 });

		// 動画の再生
		Rect{ 500, 200, 240, 160 }.draw(ColorF{ 0.6 });
		iconFont(U"\U000F040C").drawAt(80, 620, 280, ColorF{ 1.0 });

		// セリフアイコン
		faceEmoji.scaled(0.75).drawAt(560, 440);
		iconFont(U"\U000F1170").drawAt(50, 630, 400, ColorF{ 0.1 });

		// 拡大縮小
		Circle{ 540, 530, 30 }.draw();
		iconFont(U"\U000F06EC").drawAt(50, 540, 530, ColorF{ 0.1 });
		Circle{ 620, 530, 30 }.draw();
		iconFont(U"\U000F06ED").drawAt(50, 620, 530, ColorF{ 0.1 });
	}
}