UGUI


Text:

RichText:在文本框中輸入“My name is <color="red">MrZivChu</color>”,可以看出如下效果:

此時,我們來改變下文本的顏色,可以看出嵌入在html語法中的文字沒變色,不受影響,只受html語法控制,而沒嵌入的文字變了色:

Horizontal Overflow:值為wrap表示輸入的文字會根據輸入框的大小自動換行來填充文本框,超出的文字將會隱藏:

值為overflow表示只在一行顯示,超出的文字也顯示

Vertical Overflow 垂直方向同理!

一般這兩個選項選擇第一個值即可!

Best Fit表示讓輸入的文字自適應文本框的大小,也就是說在文本框內輸入的文字過多的時候,文字的字體大小會縮小,以保證所有文字都能顯示出來!

使用Best Fit的前提是Horizontal(wrap)和Vertical(Truncate) Overflow都選擇第一個值!

上面的例子都是文本框固定大小的,是改變字體大小來適應輸入框的!

下面的例子會提到用Content Size Fitter組件來改變輸入框的大小來適應文字,保證文字字體的大小不改變!

Image:

如果圖片需要使用到shader,那么可以給圖片添加材質,但是材質的紋理屬性將會被疏略,Unity提供了許多能被UI系統使用的shader

1、Scene場景下,配合鼠標,並使用下面的鍵來縮放圖片:

按住ctrl鍵:通過改變圖片的寬高來保持圖片的面積不變

按住shift鍵:圖片進行等比例縮放

按住alt鍵:拖拽圖片左/右邊框,圖片會進行左右同大小的縮放,圖片上下不變,拖拽圖片上/下邊框同理

2、Perserve Aspect 不管怎么縮放圖片,都保持圖片寬高比不變

3、Set Native Aspect 應用圖片原本的大小

4、不改變圖片的邊框的大小的方法:

(1)把圖片的模式設為Sliced

(2)在圖片的屬性面板中點擊Sprite Editor,打開精靈編輯面板,設置好border區域即可!

Sliced意味着圖片會以九宮格的方式顯示,九宮格精靈會被分成9個方格,方格外部片段不會被拉伸,僅拉伸中間部分,使得拉伸的時候邊緣不會失真!這些片段在SpriteEditor中Border組可以設置

5、創建帶alpha透明通道的圖片

6、Fill Center(只在圖片模式是Sliced,Tiled下才有):表示是否顯示九宮格的中心區域,不顯示的話,那么就可以只顯示精靈的border

  

7、Clockwise(只在圖片模式在Filled,並且Fill Method為Radial才有),當勾選與不勾選時的效果如下:表示順時針還是逆時針

Image Type:

Simple:簡單圖片形式

Sliced:邊框不變,內容放大,用於不改變圖片邊框的大小

Tiled:平鋪

Filled:用於旋轉圖片,90°,180°,360°

Button:

Interactable:使按鈕變灰,以示此按鈕不可點

Disabled Sprite:一直不明白什么時候才觸發不可用圖片的顯示呢?原來是當Interactable選中的時候就出發了!

color multiplier:彩色乘法器(只在Transition為Color Tint下才有),數值越高,按鈕的顏色越淡,反之,越深

Transition為Animation時,點擊Auto Generate Animatior就可以自動創建四個動畫文件,然后自己就可以編輯動畫了

Fade Duration:為漸變時間,就是說假如按鈕正常狀態下是白色,高亮設置的是紅色,Fade Duration設置的是0.1s,那么當鼠標移到鼠標上去,按鈕會從白色變為紅色的時間為0.1s

錨點、中心點:

存在全局空間和本地空間上的編輯的區別:

當在本地空間上編輯UI元素時,矩形和柄與UI元素對齊

在全局空間下,矩形與柄全局方式對齊,矩形表示UI元素的邊界

 另一知識點:

Left、Top、Right、Bottom分別表示的值是什么呢?

 

49、70、61、69這四個數值表示的是藍線的長度

比如Top的值表示的是上錨線和矩形上邊框的距離

通常錨線有四條,但只有一條時,情況就不同了

 

此時、RectTranform也是不同的

PosY表示的是上錨線與UI中心點的距離,Left和Right則表示的是左右錨線與UI左右邊框的距離(雖然此時的左右錨線長度為0)

多數情況下,每個UI元素將被錨定到父對象,也就是說,當一個對象被創建時,此對象錨點的位置是基於其父對象的區域來設置的,錨點的位置是不會超過父對象的矩形區域的!

錨點

UI元素的父對象都會擁有RectTransform組件,並且UI元素會以某種方式相對父對象錨定位置

什么是錨點?

創建一張圖片,如下

四個紅色箭頭指向的三角形形狀的東西就是錨點,我們可以隨意拖動錨點,那么錨點有什么用呢?用一張圖來表示吧

控件左上頂點對於左上錨點,左下頂點對於左下錨點,右上頂點對於右上錨點,右下頂點對於右下錨點

控件的每個頂點與對應的錨點之間的距離長度(不是比率)不隨屏幕尺寸而變化

直接上個例子,使其更加了解錨點的作用

從上面的動畫可以看出,當我們的屏幕高度發生變化時(變窄),圖片的下半身區域被遮擋了,這是由於錨點的作用引起的,

可以看出無論我們怎么改變屏幕的尺寸,控件的四個頂點與對應的錨點之間的距離長度(不是比率)是不變的!

當我們屏幕的高度變窄時,為了保證四個頂點與對應錨點的距離長度(不是比率)不變,必然會造成被遮擋,

我們可以改變錨點的位置,無論屏幕尺寸怎么變,控件都不會遮擋

可以看出,圖片進行了相應的縮放來保證四個頂點與對應錨點的距離長度(不是比率)不變

這一作用可以用於背景圖片的自適應:

通常控件的錨點初始的時候是放在自己父對象的中心點位置的,向下面這樣錨點在中心位置是無法自適應屏幕的:

只要這樣就可以了:

新建一個按鈕控件,可以看到按鈕下的Text控件的錨點是分布在按鈕Button的四個頂點上的,為的就是使Text控件適應Button控件的大小的!

錨點設置:

1、第一種方式(比較麻煩)

這四個值控制的是錨點在其父對象中的位置的,四個值都為0.5,表示錨點在父對象中心的位置,是百分比形式,歸一化展示

Min(x,y):控制的是左下角錨點的位置    Max(x,y):控制的是右上角錨點的位置

2、我們也可以通過下面這個來直接設置錨點(比較快速,都是常見的錨點設置選項)

另外:

 

UI元素的錨點是和其父對象的矩形之間的距離是成比率進行縮放的

而UI元素的錨點和其自身的矩形之間的距離是按具體距離進行定位的,而不是比率

如果四個錨點聚集在一個點上時,那么此UI元素的大小不會隨着屏幕的尺寸變化而變化的,保持原大小

如果四個錨點分開,那么UI元素的大小會隨着屏幕的尺寸進行縮放,具體看錨點的擺放位置

但只要記住UI元素的錨點和其父對象矩形的邊框之間的距離是成比率的關系以及元素錨點和自身矩形之間的距離為一個固定值的關系就可以了!

一般把四個錨點放在UI元素相對應的四個頂點上就可以使UI元素自適應於父對象了!為此,我們做個自適應的登陸界面:

問題:當分辨率非常小的時候,文字會無法顯示,因為文字不會自動縮放,

解決方案:勾選Text組件下的BestFit,設置MinSize為3,MaxSize為40即可!就可以做到文字自適應了!

中心點

解決中心點無法拖拽的問題?

這樣設即可!

中心點並不一定要設置在UI元素的矩形內,可以放在矩形的外面從而實現特殊的效果,但並不常見

中心點設置的是如下的值

當我中心點設置為(0,0)的時候,那么中心點會位於控件的左下角的位置,此時我們旋轉圖片,可以看到圖片是繞着左下角的中心點來旋轉的,具體就不演示了!

如果中心點設置為(0,0.5)的時候,我們改變控件的scale的x值,可以發現控件是朝右進行拉伸,改變scale的y值,控件卻是朝上下兩邊拉伸的,效果如下:

另一個例子,新建一個Text控件,附個Content Size Fitter組件,並設置Vertical Fit為Preferred Size,也就是垂直方向自適應,

那么此組件就會自動調整文本框垂直方向的大小來適應文本框內的文字,此時也會提示“一些值被此組件所控制”,由於控制的垂直方向,

所以錨點只會對控件的x軸方向進行控制,y軸方向就不會控制了!

如果中心點的位置為(0.5,0.5)的話,那么Text里面的文字多的時候,會向上下兩邊擴充,而中心點位置為(0.5,1)的話,就會往下邊擴充,效果圖如下:

   

還有個例子,通常一個對象的自身坐標是在此對象的中心位置那,如果有這樣一個需求,一個轉盤上的箭頭繞轉盤中心點旋轉,但是箭頭的自身坐標點在自己的中心點,

那么transform.Rotate(Vector3.forward * Time.deltaTime * 50);這樣的話,只會使箭頭繞自己的中心點轉,而不會使箭頭繞轉盤的中心點轉,

解決方案就是:改變箭頭的中心點Pivot,把Pivot設為(0.5,0)即可!

 這兩個的作用分別如下(個人認為基本上用不着):

Canvas:

所有UI元素都必須是Canvas的子物體,同一個場景允許存在多個Canvas

Receive Events:表示此UI是否接受事件檢測

Sorting Layer和Order in Layer:用於控制場景里面多個Canvas之間的渲染順序

Render Mode:

Screen Space - Overlay:表示UI不受任何攝像機影響,即使攝像機不存在也沒事,照樣顯示,UI會覆蓋整個場景,所有的UI元素會在場景的最上層渲染輸出

                                    在這個模式下,UI會自動填充整個場景,同時也會隨着場景試圖大小變化而變化,也就是說,無論你選擇哪種分辨率,UI都會自適應

                                    Canvas會影響整個RectTransform,RectTransform處於不可編輯狀態,Canvas會自動修改RectTranform的值使之自動填充整個場景

                                    Pixel Perfect:選中表示UI元素渲染輸出時,會自動吸附到最近的像素點,在某些情況下,會增強UI的展示效果

                                    適合於做玩家的血條和魔法條等UI

Screen Space - Camera:要指定一個渲染的攝像機,那么UI就受此攝像機的影響了,如果攝像機關閉了,UI也就不會顯示了!

                                    此模式也是Canvas會影響整個RectTransform,RectTransform處於不可編輯狀態,Canvas會自動修改RectTranform的值使之自動填充整個場景

                                    如果Render Camera為null的話,Canvas就會默認以Screen Space - Overlay的模式來渲染這個Canvas

                                    Plane Distance可用來調整攝像機與UI的距離,但是這個值必須在攝像機的渲染氛圍內

                                    此時的攝像機會和UI保持一段的距離,在此距離內可以放置一些粒子效果,來增強UI的炫目感

                                    適合於做帶有例子特效的絢麗UI

World Space:會把UI當成一個3D的游戲物體來對待,那么當我們移動攝像機的位置后,UI是不會移動的!

                     並不像前兩者那樣,移動攝像機,UI跟着移動,從而能夠一直看到UI,相當於UI是攝像機的子物體一樣

                     Canvas不再影響RectTransform,Canvas可以位於世界坐標系下的任意位置

                     但這有一個好處,可以造成3D的UI效果,如下:

拖拽所觸發的事件:

獲取RectTransform的寬高,只能在此對象創建之后的下一幀去獲取才能獲取到、有時候sizeDelta獲取不到,可以通過Layout Group組件的preferredHeight屬性來獲取即可!


免責聲明!

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



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