本日は Unity の小ネタ枠です。
Unity で利用するアイコンの元画像を Material Design Icons から取得する手順です。
Material Design Icons
Material Design Icons はデザイナーと開発者のために公開されているオープンソースの画像サイトです。
開発で使用するためのアイコンとフォントライブラリが作成されています。
pictogrammers.com
アイコン画像をダウンロードする
試しにタイマーを示すアイコンを取得してみます。
[Icon & Fonts]のページを開き、[Material Design Icons]を選択します。
検索欄に[Timer]で検索を行い、タイマーのアイコンを検索します。
ダウンロードしたいアイコンをクリックします。
利用方式を選択するダイアログが表示されます。
今回は解像度を変更して画像ファイルとしてダウンロードしたいので、プルダウンから[Advanced PNG Export..]を選択します。
編集用のダイアログが表示されます。
各種ステータスを変更してから[DOWNLOAD PNG]をクリックすると画像ファイルとしてダウンロードできます。
色を白色にしておくと、後々 Unity 側のカラー設定で色を変更できるので便利です。
アイコン画像をUnityに取り込む
ダウンロードした画像負アイルを Unity プロジェクトにドラッグしてインポートします。
取り込んだ画像ファイルを選択して Inspector ビューから以下を変更します。
・[Texture Type]を[Sprite (2D and UI)]に変更する
・[Alpha Is Transparency]にチェックを入れる
Image コンポーネントの[Source Image]に画像ファイルを指定して利用します。
アイコンの色を変更する
アイコンの色を変更したい場合は編集用のマテリアルを Assets フォルダで右クリックから[Create -> Material]で作成します。
作成した Material の[Shader]に[UI/Default]を指定します。
作成したマテリアルを Image コンポーネントの[Material]にドラッグして適用します。
これで Material 項目の[Tint]でカラーを変更できます。
