本日は MRTK の小ネタ枠です。
MRTKでボタンのIconSetを作成してアイコンの見た目を変更する手順を記事にします。
ボタンのアイコンセット
MRTK 2.4 以降では、ボタンのスタイルをテンプレートから選んで変更するアイコンセットの機能が利用できます。
microsoft.github.io
以下、上記ページの引用です。
アイコンセットは、ButtonConfigHelperコンポーネントによって使用されるアイコンアセットの共有セットです。 以下の3つのアイコンスタイルがサポートされています。 ・クアッドアイコン クワッドアイコンは、MeshRenderer を使用して四角形にレンダリングされます。 これはデフォルトのアイコンスタイルです。 ・スプライトアイコン スプライトアイコンは、SpriteRenderer を使用してレンダリングされます。 これはアイコンをスプライトシートとしてインポートする場合、またはアイコンアセットを UnityUI コンポーネントと共有する場合に役立ちます。 このスタイルを使用するには、Sprite Editor パッケージをインストールする必要があります。 （Windows-> Package Manager-> 2D Sprite） ・文字アイコン 文字アイコンは、TextMeshPro コンポーネントを使用してレンダリングされます。 これはアイコンにフォントを使用する場合に役立ちます。 HoloLens でアイコンフォントを使用するには TextMeshPro フォントアセットを作成する必要があります。
サンプル画像の取得
今回はクアッドアイコンのアイコンセットを作成してみます。
サンプルとなるアイコン用の画像を以下のページから取得しました。
icooon-mono.com
こちらのサイトでは画像のサイズやカラー、画像フォーマットを指定してダウンロードすることができます。
今回は 256px のサイズの PNG 形式で、6つの画像をダウンロードしました。
クアッドアイコンのアイコンセットを作成する
初めに、アイコンの見た目に利用するテクスチャを Unity にインポートします。
今回取り込んだ画像は背景に透明度が設定されているので、透明度を有効にしておきます。
画像の Inspector ビューを開き、[Alpha Is Transparency]にチェックを入れて[Apply]で反映します。
次にアイコンセットを作成します。
MRTK をインポートしていると、右クリックから[Create -> MixedRealityToolkit -> IconSet]で作成できます。
作成されたアイコンセットを選択して、Inspector ビューを開きます。
クアッドアイコン、スプライトアイコン、文字アイコンの設定はここから行えます。
今回は6つのクアッドアイコンを設定するので[Quad Icons]欄の[Size]に[6]を入力します。
すると、テクスチャを設定するための[Element]項目が追加されるので、[Select]ウィンドウを開いて取り込んだ画像を指定します。
同じ手順で、全ての[Element]項目に画像を指定します。
これでアイコンセットの作成は完了です。
アイコンセットを利用する
Scene に追加した Button オブジェクトを選択して、Inspector ビューを開きます。
最下部の[Button Config Helper]の[Icon]パネルからアイコンセットを指定できます。
[Icons Set]項目で[Select]ウィンドウを開くと、先ほど作成したアイコンセットが選択できます。
アイコンセットの一覧が表示されるので、利用したいアイコンを選択します。
これで Button に自作のアイコンセットのアイコンを設定することができました。
