数百個のアイコンが格納されているフォント「Font Awesome」を使ってアイコンを表示する方法です。
これを上手く使うと、アイコン探さなくてもすぐに仮素材できるのではと思い試してみました。
もくじ
フォントのダウンロード
下記からダウンロード
解凍。
fontawesome-free-5.0.2\use-on-desktopに3種のフォントが格納されています。
Unityで表示する方法
チートシートから、アイコンをコピーし
uGUIのTextへ、ペーストすれば表示されます。
下記はロックアイコンfa-lock []
のところのアイコン部分をコピー
Unicodeで表示する方法
InspectorのTextエリアには何も表示されないまま、使うのはあれなので、Unicodeで文字を表示してみます。
下記のスクリプトを作成します。
TextUnicode.cs
/// <summary> /// Courtesy of Leo Carneiro, Unity3d /// http://forum.unity3d.com/threads/image-fonts-fontawesome.281746/#post-1862245 /// Patched version. Works in Unity 5.3.4x /// </summary> using System; using System.Collections.Generic; using System.Text.RegularExpressions; using System.Globalization; namespace UnityEngine.UI { public class TextUnicode : Text { private bool disableDirty = false; private Regex regexp = new Regex(@"\x(?<Value>[a-zA-Z0-9]{4})"); protected override void OnPopulateMesh(VertexHelper toFill) { string cache = this.text; disableDirty = true; this.text = this.Decode( this.text ); base.OnPopulateMesh(toFill); this.text = cache; disableDirty = false; } private string Decode(string value) { return regexp.Replace(value, m => ((char)int.Parse(m.Groups["Value"].Value, NumberStyles.HexNumber)).ToString()); } public override void SetLayoutDirty() { if (disableDirty) { return; } base.SetLayoutDirty(); } public override void SetVerticesDirty() { if (disableDirty) { return; } base.SetVerticesDirty(); } public override void SetMaterialDirty() { if (disableDirty) { return; } base.SetMaterialDirty(); } } }
引用
表示方法
uGUIのTextコンポーネントは外し、代わりにTextUnicode.csをアタッチします。
あとは先程のチートシートから、Unicodeを打ち込めばOK
例えば、ロックアイコンであれば、fa-lock []
をいう表記を探して、\xf023と打ち込む
参考
Unity3D UI Typography: Font Awesome – Unity3D UI Typography: Font Awesome – appmixable