【Unity】IconFont - Masamune framework

Masamune framework是Unity3D的扩展资产。

IconFont - Masamune framework

「IconFont - Masamune framework」是「Masamune framework」系列中的1个。

所谓Masamune framework

「Masamune framework」系列支持与Unity3D合作制作游戏。

它支持Unity的各个细节,包括UI创建,任务管理和数据管理,通过引入它,您可以显着提高游戏制作的速度。

该系列的每个阵容都是独立的,但它们是独立的,即使您引入了一个资产或引入了所有资产,它们也不会竞争或引起问题。通过仅引入您希望支持的插件,您可以获得更好的成本和性能。

您可以从以下页面查看当前阵容。

此外,「UIElements Expansions」系列也可以在「Masamune framework」中使用。

此「IconFont - Masamune framework」主要支持以下功能。

• 在Unity运行时支持图标字体
• Unity编辑器中的图标字体支持
• 图标搜索窗口
• 添加新图标字体

在Unity运行时支持图标字体

使用「IconFont - Masamune framework」,可以在Unity运行时使用图标字体,即使用Unity创建的游戏。

图标字体是在字体中添加图标而不是字符。

它在Web上被广泛使用,例如FontAwesome,非常方便,只需从字体中预先包含的许多图标中进行选择,而无需费心准备图像。

「IconFont - Masamune framework」提供了一个组件,允许您通过将其与UnityUI(uGUI)的Text组件一起使用来显示图标,因此您可以非常轻松地在游戏的UI上显示图标字体。

Unity编辑器中的图标字体支持

在「IconFont - Masamune framework」中,您可以使用UIElements在Unity编辑器上使用图标字体。

我们提供了一些标签,用于在UXML标签上显示图标,您可以轻松地在编辑器窗口或检查器中显示图标。

它也可以与「UIElements Expansions」系列一起使用。(在「UIElements Expansions」系列中,有些资产从一开始就随IconFont一起提供)

图标搜索窗口

在「IconFont - Masamune framework」中,您可以使用图标的搜索窗口功能轻松选择图标。

还有一个搜索表单,您可以快速找到所需的图标。

添加新图标字体

默认情况下,「IconFont - Masamune framework」允许您使用FontAwesome图标字体。

您还可以通过编写脚本使用其他图标字体 (如Game Icon Font) 。

由于也可以使用自己创建的图标字体,因此也可以使用这些图标字体而不是UI图像。

利用方法

导入

请从Unity Asset Store购买。

购买后可从「我的资产」导入。

在Unity运行时支持图标字体

Unity运行时目前支持UnityUI(uGUI)的Text组件。

让我们首先将「Text」组件添加到要放置图标的游戏对象中。

然后将名为「TextIconApplicator」的组件放置在与之前添加的「Text」组件相同的游戏对象上。

通过在「TextIconApplicator」的「Icon」项目中输入要显示的图标的「图标ID」来显示图标。

对于「图标ID」,单击「TextIconApplicator」中的「Search icon」按钮以显示「图标搜索窗口」。

当您从中单击目标图标时,图标ID将保存在剪贴板中,因此请将其粘贴到「icon」项目中。

只需修改「Text」组件中的「Font Size」和「Color」等项目即可。

使用脚本

「TextIconApplicator」可以看到源代码(Assets/Masamune/Modules/unity.style.icon/Scripts/TextIconApplicator.cs)

public class TextIconApplicator : MonoBehaviour {
    /// <summary>
    /// The text
    /// </summary>
    [SerializeField]
    public UnityEngine.UI.Text text;

    /// <summary>
    /// Gets or sets the icon.
    /// </summary>
    /// <value>The icon.</value>
    public string icon {
       get => this._icon;
       set {
          this._icon = value;
          this.Repaint( );
       }
    }
    [SerializeField]
    private string _icon;

    /// <summary>
    /// Awakes this instance.
    /// </summary>
    private void Awake( ) {
       if( this.text == null ) this.text = this.GetComponent<UnityEngine.UI.Text>( );
       this.Repaint( );
    }
    /// <summary>
    /// Called when [validate].
    /// </summary>
    private void OnValidate( ) {
       this.Repaint( );
    }

    /// <summary>
    /// Repaints this instance.
    /// </summary>
    public void Repaint( ) {
       if( this.text == null || this.icon.IsNullOrEmpty( ) ) return;
       Icon icon = Icon.Get( this.icon );
       if( icon == null ) return;
       this.text.font = icon;
       this.text.text = icon;
    }
}

如果您参考此「Repaint」方法,它也可以用于其他组件等。

public void Repaint( ) {
    if( this.text == null || this.icon.IsNullOrEmpty( ) ) return;
    Icon icon = Icon.Get( this.icon );
    if( icon == null ) return;
    this.text.font = icon;
    this.text.text = icon;
}

通过「Icon.Get("Icon ID")」获取Icon类型的对象。(如果没有指定的图标ID,则返回null)

Icon类型包含用于显示图标的字体数据和字符代码,并且可以分别转换为Font和string类型。将这些数据放入组件的指定属性中。

请注意,如果不同时设置字体和文字的话,就可能无法正常显示。

Unity编辑器中的图标字体支持

在Unity编辑器中,可以使用UIElements显示图标。

您可以使用以下UXML标记。

请像使用其他UXML标签一样使用它。

图标搜索窗口

图标搜索窗口也可从「TextIconApplicator」的检查器获得,但如果您想在UIElements中使用它,可以从Unity编辑器的窗口菜单「Masamune」->「IconFont」获得。

添加新图标字体

关于添加图标字体,您可以在源代码中看到它,该源代码添加默认随附的FontAwesome。(Assets/Masamune/Modules/com.fontawesome/Scripts/FontAwesomeInfo.cs)

public sealed class FontAwesomeInfo : ScriptableObject {
    [RuntimeInitializeOnLoadMethod( RuntimeInitializeLoadType.SubsystemRegistration )]
    private static void FactoryRegistry( ) => Initialize( );
    /// <summary>
    /// Gets the instance.
    /// </summary>
    /// <value>The instance.</value>
    public static FontAwesomeInfo Instance {
       get {
          if( _instance == null ) {
             FontAwesomeInfo[] resources = Resources.LoadAll<FontAwesomeInfo>( "FontAwesomeInfo" );
             if( resources != null && resources.Length > 0 ) _instance = resources[0];
          }
          return _instance;
       }
    }
    private static FontAwesomeInfo _instance;

    /// <summary>
    /// Factories the registry.
    /// </summary>
    public static void Initialize( ) {
       if( Instance == null ) return;
       foreach( TextAsset textAsset in Instance.iconJson ) {
          if( textAsset == null || textAsset.text.IsNullOrEmpty( ) ) continue;
          if( !Utils.Json.TryDeserializeAsDictionary( textAsset.text, out Dictionary<string, dynamic> output ) ) continue;
          foreach( KeyValuePair<string, dynamic> tmp in output ) {
             if( tmp.Key.IsNullOrEmpty( ) || !( tmp.Value is Dictionary<string, dynamic> detail ) ) continue;
             string id = "fa-" + tmp.Key;
             if( UnityEngine.Icon.Contains( id ) ) continue;
             if( !( detail["styles"] is List<dynamic> styles ) ) continue;
             FontAwesome font = Instance?.iconFont?.Find( item => styles.Contains( item.ID ) );
             if( font == null ) continue;
             UnityEngine.Icon.Add( id, detail["unicode"], font.font );
          }
       }
    }

    /// <summary>
    /// Gets the icon json.
    /// </summary>
    /// <value>The icon json.</value>
    public List<TextAsset> iconJson { get => this._iconJson; }
    [SerializeField]
    private List<TextAsset> _iconJson = List.Create<TextAsset>( );

    /// <summary>
    /// Gets or sets the localize font.
    /// </summary>
    /// <value>The localize font.</value>
    public List<FontAwesome> iconFont { get => this._iconFont; }
    [SerializeField]
    private List<FontAwesome> _iconFont = List.Create<FontAwesome>( );
      
    /// <summary>
    /// Class FontAwesome.
    /// </summary>
    [System.Serializable]
    public sealed class FontAwesome : SerializableBehaviour {
       /// <summary>
       /// The identifier
       /// </summary>
       [SerializeField]
       public string ID;
       /// <summary>
       /// The font
       /// </summary>
       [SerializeField]
       public Font font;
    }
}

使用「Initialize()」方法添加图标。

public static void Initialize( ) {
    if( Instance == null ) return;
    foreach( TextAsset textAsset in Instance.iconJson ) {
       if( textAsset == null || textAsset.text.IsNullOrEmpty( ) ) continue;
       if( !Utils.Json.TryDeserializeAsDictionary( textAsset.text, out Dictionary<string, dynamic> output ) ) continue;
       foreach( KeyValuePair<string, dynamic> tmp in output ) {
          if( tmp.Key.IsNullOrEmpty( ) || !( tmp.Value is Dictionary<string, dynamic> detail ) ) continue;
          string id = "fa-" + tmp.Key;
          if( UnityEngine.Icon.Contains( id ) ) continue;
          if( !( detail["styles"] is List<dynamic> styles ) ) continue;
          FontAwesome font = Instance?.iconFont?.Find( item => styles.Contains( item.ID ) );
          if( font == null ) continue;
          UnityEngine.Icon.Add( id, detail["unicode"], font.font );
       }
    }
}

在这里,我们分析桌面版FontAwesome中包含的json文件,并获得「图标ID」,「图标Unicode」和「与图标对应的字体文件」。

最后,「Icon.Add」方法将每个文件添加到库中。

UnityEngine.Icon.Add( "Icon ID", "Icon unicode", Font );

总结

通过使用「IconFont - Masamune framework」,您可以获得以下支持。

• 在Unity运行时支持图标字体
• Unity编辑器中的图标字体支持
• 图标搜索窗口
• 添加新图标字体

上述支持将产生以下优点。

• 通过使用图标字体和Unity编辑器的UI构建在游戏中变得容易

请介绍「Masamune framework」并享受舒适的游戏制作生活！

如果您有兴趣,请务必考虑一下,因为它在资产商店出售！