來個前言:
作為一個U3D程序員,自然要寫一寫U3D相關的內容了。想來想去還是從UI開始搞起,可能這也是最直觀同時也最重要的部分之一了。U3D自帶的UI系統,也許略坑,也沒有太多介紹的價值,那么從今天開始就記錄一下主流的UI插件-NGUI吧。
NGUI版本:
v3.6.8
學習筆記一
假定大家都已經將ngui導入到了項目中,這里需要注意,插件(.package)的存放路徑不能有中文,否則會導致解壓失敗。
導入之后可以看到幾個文件夾咯,Editor,Examples,Resources,Scripts,辣么,作為剛剛接觸U3D或者NGUI的小伙伴們,就可以去Examples的Scenes目錄下去看看相應的例子,都是一些完成好的場景哦~
打開場景之后,可以看到已經完成的UI,但是這時候默認的都是3D場景,而一般的UI都是2D的,所以記得在Scene視窗中把2D選項點上。這樣看起來就是2D的UI了。
創建UIRoot
OK,光說不練假把式,下面我們自己來創建一個Scene,來制作自己的第一個UI。
創建好新的場景之后,在菜單欄的NGUI選項中可以發現Options-->Reset Prefab Toolbar,點擊之,可以發現NGUI預設的一些控件出現了。這就是方便我們創建UI控件的地方。
那么為了滿足承載NGUI的UI的需求,我們需要一個UIRoot來作為承載UI容器。那么如何創建呢?很簡單,直接把Prefab Toolbar中的控件拖入場景中,你會發現在Hierarchy中出現了一個UIRoot。UIRoot創建成功,打開可以發現其自帶了一個Camera,作為UI的攝像機來渲染UI元素。
選中Scene中的UIRoot,右鍵,可以看到菜單上出現了Create用來創建各種UI元素的選項,Attach添加滾動視野,屬性綁定等的選項,Tween添加動畫選項。
創建UILabel
UILabel,顧名思義,用來顯示文字。右鍵UIRoot,Create,UILabel。注意,如果右鍵UIRoot控件,沒有菜單彈出,則看下右側UIRoot的Inspector中的腳本是否沒有展開,若沒有展開則無法運行相應的功能。
創建玩Label之后,點中它,可以看到在屏幕右側的Inspector。我們的關注點就在Inspector中UILabel腳本中的各個屬性。
Font:
首先是字體屬性Font,可以看到有2種字體第一種是NGUI第二種是Unity,選擇NGUI則意味着使用的是我們通過NGUI創建的字體(在菜單欄NGUI下拉菜單中選擇Open->FontMaker來創建NGUI字體,之后會介紹),
選擇Unity,可以發現默認情況下其只有一個Arial字體,辣么一目了然咯,Unity字體其實就是動態字體.TTF。我們可以通過下載TTF字體放到項目目錄,再通過Unity字體來使用。
Font Size:
下面介紹下Font Size咯,就是字號,默認20。那么我們將字號設為100,為何發現字體沒有相應的變大呢?這是由於Label控件本身還有一個Size的問題,就是一個容器和容器內容的關系,容器內容不可能比承載它的容器大。那么只要設置Widget的Size屬性就可以調節大小了。當Label控件的尺寸足夠大,則字體會按照設定的Font Size來顯示。當然字體顯示的方式,還與下面介紹的Overflow屬性有關。
Overflow:
和字體顯示相關一個屬性,相當於一個字體顯示的策略。包括4種策略,即ShrinkContent, ClampContent, ResizeFreely, ResizeHeight4種。下面來分別介紹。
ShrinkContent:即默認的策略,文字顯示的大小與Label的Size自動適應,Label控件的Size不足以顯示字體的大小時,字體的尺寸會去適應Label控件的大小。
ClampContent:如字面意思,就是裁剪掉無法顯示的字體內容。字體內容會按照Font Size設定的大小來顯示,但是當Label控件的大小不足以盛放字體內容時,相應的字體內容被裁剪掉不會顯示。
ResizeFreely:與第一種策略相對應,這時是Label控件的大小去適應字體內容的大小。
ResizeHeight:同字面意思,Label控件的高度無法手動調節,而是隨着字體內容的大小需求去適配字體內容,只能手動調節Label控件的寬度。
Alignment:
對齊方式選項。包括5種策略,比如常見的自動對齊,左中右對齊,還有一個較為特殊的Justified對齊方式。
Justified:即自動擴展,使文字與Label控件的寬度保持一致。不過有一點需要注意,該對齊方式只對英文有效。中文就不要使用了。。。
Gradient:
字體顏色漸變的設置。包括Top和Bottom,即從Top色變到Bottom色。
Effect:
效果,無需贅述,包括描邊(outline)和陰影(Shadow)。
Color Tint:
字體渲染的顏色。
好啦,今天就先總結到這里了。