Table of contents
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标记。
タグ名 | 概要 | 利用例 |
---|---|---|
engine:Icon | engine:Label的图标版 | <engine:Icon icon="Icon ID" /> |
engine:IconButton | engine:Button的图标版 | <engine:IconButton icon="Icon ID" /> |
editor:BindableIcon | 图标版本的editor:BindableLabel(UIElements Expansion常见功能添加的标签) | <editor:BindableIcon icon="Icon ID" binding-path="path" /> |
editor:BindableIconButton | 图标版本的editor:BindableButton(UIElements Expansion常见功能添加的标签) | <editor:BindableIconButton icon="Icon ID" binding-path="path" /> |
请像使用其他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, object> output ) ) continue;
foreach( KeyValuePair<string, object> tmp in output ) {
if( tmp.Key.IsNullOrEmpty( ) || !( tmp.Value is Dictionary<string, object> detail ) ) continue;
string id = "fa-" + tmp.Key;
if( UnityEngine.Icon.Contains( id ) ) continue;
if( !( detail["styles"] is List<object> styles ) ) continue;
FontAwesome font = Instance?.iconFont?.Find( item => styles.Contains( item.ID ) );
if( font == null ) continue;
UnityEngine.Icon.Add( id, detail["unicode"] as string, 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, object> output ) ) continue;
foreach( KeyValuePair<string, object> tmp in output ) {
if( tmp.Key.IsNullOrEmpty( ) || !( tmp.Value is Dictionary<string, object> detail ) ) continue;
string id = "fa-" + tmp.Key;
if( UnityEngine.Icon.Contains( id ) ) continue;
if( !( detail["styles"] is List<object> styles ) ) continue;
FontAwesome font = Instance?.iconFont?.Find( item => styles.Contains( item.ID ) );
if( font == null ) continue;
UnityEngine.Icon.Add( id, detail["unicode"] as string, 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」并享受舒适的游戏制作生活!
如果您有兴趣,请务必考虑一下,因为它在资产商店出售!