NGUI學習筆記(一)UILabel介紹


來個前言:

作為一個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:

字體渲染的顏色。

好啦,今天就先總結到這里了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM