♣️

Siv3D | Material Design Icons を使ってアイコンを表示する

2021/01/19に公開

アイコンの描画

OpenSiv3D にはデフォルトのアイコンセットや絵文字が用意されていますが、それ以外のアイコンセットも使うことができます。この記事では Material Design Icons を Font として読み込み、アイコンを描画する方法を説明します。

Material Design Icons からダウンロードしたアイコンフォントのうち、materialdesignicons-webfont.ttf をアプリケーションのフォルダに配置します。

このフォントファイルは、通常の Font として読み込んで .draw() できますが、描画する文字列は、テキストの代わりに、一つ一つのアイコンを表現する専用の 16 進数コードを記述します。例えば mdi-car-outline のアイコンのコードは F14ED なので、U\xF14ED という char32_t 型の要素 1 つ (String の 1 要素) を文字列中に記述します。以下のサンプルに出てくる文字列 icons には 6 種類のアイコンを記述しています。

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

void Main()
{
	Scene::SetBackground(ColorF{ 0.95 });
	const Font fontL{ 120, U"materialdesignicons-webfont.ttf" };
	const Font fontM{ 60, U"materialdesignicons-webfont.ttf" };
	const Font fontS{ 30, U"materialdesignicons-webfont.ttf" };

	if (!fontL || !fontM || !fontS)
	{
		throw Error{ U"フォントの読み込みに失敗しました。" };
	}

	// 各アイコンに固有の Hex コードが割り当てられている
	const String icons = U"\xF14ED\xF0610\xF04E5\xF01E7\xF00E8\xF08BC";

	while (System::Update())
	{
		fontL(icons).draw(Vec2{ 40, 40 }, ColorF{ 0.25 });
		fontM(icons).draw(Vec2{ 40, 200 }, ColorF{ 0.2, 0.4, 0.6 });
		fontS(icons).draw(Vec2{ 40, 300 }, ColorF{ 0.0, 0.4, 0.2 });
	}
}

アイコンの描画

Discussion