为什么UI节点命名需要规范化

  • 时间长了看不懂自己写的代码
  • 客户端、服务器命名不同意,特别是通信协议字段(隐藏着各种隐式转换,易出错,效率低下)
  • 命名不统一,与美术、策划沟通效率低下(有时大家说的是同一个事物,但名称不相同,可能会出现不必要的分歧)
  • 方便在代码中知道当前引用是什么组件和功能。
  • 方便后面资源本地化和资源命名规范的进行,同时节约大量拼UI的时间。
  • 在预览Prefab时明确知道哪些节点在伪代码中引用并使用。

怎么样给UI节点命名

  • 以功能组件命名
  • 以渲染组件命名

节点命名参考

cc.Label_labXXXcc.RichText_rctXXX
cc.Button_btnXXXcc.Sprite_spXXX
cc.Mask_maskXXXXcc.MotionStreak_mskXXX
cc.TiledMap_tmpXXXcc.TiledTile_tmtXXX
sp.Spine_spXXXXcc.Graphics_grpXXX
cc.Animation_aniXXXcc.WebView_webViewXXX
cc.EditBox_editBoxXXXcc.ScrollView_scrollXXX
cc.VideoPlayer_videoXXXcc.ProgressBar_progressXXX
cc.PageView_pageXXXXcc.Slider_sliderXXX
cc.Toggle(单选)_rbtnXXXcc.Toggle(复选)_checkBoxXXX

为什么需要UI自动绑定

  • 现象一 通过界面引用UI节点

一个UI脚本组件可能会有很多UI节点和资源的引用,这样的东西多了往往看起来眼花缭乱,也相应的增加了一个Prefab描述文件的大小。也导致这个Prefab加载速度很慢

  • 现象二 代码中通过getChildByName,getComponent等函数来获取相应的节点

getChildByName,getComponent等函数都是遍历查找相关的UI节点和组件,大量使用这种方式会对性能造成一定的影响。

  • 现象三 混合使用现象一和二

这种现象更比前面两种现象更差,维护起来不方便。


UI自动绑定和命名规范

1. 文字显示本地化规则(通过特殊的命名规则实现半自动文本显示本地化)

节点命名规则(节点名字 + $ + "本地化符号(建议由数字组成)")

例如: _labTitle$1001

下划线(_) 表示这个节点参与UI自动绑定

lab 代表这个是一个以Label渲染组件为主的一个节点

Title描述的这个以Label组件为主的渲染节点表达一个什么样的事物

$ 表示这个Label组件参与语言本地化

1001 表示语言本地化代码。


2. 资源本地化命名规则

想要UI界面本地化前提条件是对UI界所用到的资源进行整理,并按照UI界面资源本地化相应的规则去命名资源。

资源命名规则(资源名字 + _ + 本地化代码)

例如: rankbgen

rank_bg 表示这张纹理名字

en 表示资源本地化代码


3. 节点资源本地化规则

一个UI界面(结构相同)在不同的国家或者地区,可能会有某一个或者某几个节点所用到的资源不同。

节点命名规则(节点名字 + 字符“L”)

例如:_spRankBgL

下划线(_) 表示这个节点参与UI自动绑定

sp 表示这是一个以Sprite组件为主的渲染节点

RankBg 表示这是一个以Sprite组件为主的渲染节点渲染一个什么样的内容

L 表示这个节点参与UI界面资源本地化


4. UI界面(Prefab)本地化规则

一个功能相同在不同国家或者地区UI界面去不相同(结构不同),UI界面本地化。

Prefab命名规则(Prefab名字 + 本地化代码)

例如 RankItem_en

RankItem 表示这个Prefab的功能en 表示这个Prefab的本地化代码