Unity學(xué)習(xí)筆記 - uGUI

uGUI就是Unity原生自帶的UI制作系統(tǒng),unity 4.6之后才有的。據(jù)說比NGUI好用,畢竟是unity親生的嘛~

學(xué)習(xí)目標(biāo):

1. UI圖片的擺放與正常顯示

2. 按鈕 ?- ?點擊按鈕動畫;點擊后界面跳轉(zhuǎn);點擊后觸發(fā)腳本中設(shè)定的功能

3. 窗口 ?- ?窗口彈出/消失動畫

4. 屏幕適配

5. 美術(shù)資源規(guī)劃與性能優(yōu)化


一. UI圖片的擺放與正常顯示


1. 創(chuàng)建UI圖片

引自:http://blog.csdn.net/u012999985/article/details/50865335

點擊菜單欄的GameObject標(biāo)簽——UI——Image

建立之后我們就能看到在左邊的場景實體列表(Hierarchy)新生成了三個實體

Canvas:畫布,相當(dāng)于一個呈現(xiàn)界面UI素材的容器。

Canvas下的子實體Image:每個UI控件都是由美工設(shè)計的圖片構(gòu)成,這個就Image是放自己設(shè)計的圖片的實體

EventSystem:監(jiān)聽UI相關(guān)的事件實體,用來支持點擊觸碰等。

Set Native Size 恢復(fù)圖片原始尺寸

2. Canvas基本設(shè)置

Canvas - Render mode:Screen Space Camera

Canvas - Render Camera:Main Camera?

Canvas Scaler - UI Scale Mode:Scale with screen size


二、按鈕

1. 點擊按鈕的動畫

按鈕會自帶懸停、按下效果,在Button - Transition中可設(shè)置

ColorTink: 點擊效果靠顏色與Alpha透明度來調(diào)節(jié)

SpriteSwap:不同狀態(tài)使用不同圖片

Animation:利用Unity的動畫系統(tǒng)來制作按鈕的動畫效果

關(guān)于Animation:

點擊auto generate?animation,創(chuàng)建animation controller文件;

選中加動畫的button,打開Animation窗口,點擊剛才創(chuàng)建的controller,這時Animation窗口中就可以看到4個動畫狀態(tài)了;

點擊Add property就可以加動畫效果了(或者點擊紅色錄制按鈕)。

* Image - Raycast Target 要勾選點擊才會有效

2. 點擊后界面跳轉(zhuǎn)

新建一個空的Game Object,比如叫Menu Ctrl

在Menu Ctrl上添加腳本MenuCtrl:

? ? public void LoadScene(string sceneName)

? ? {

? ? ? ? SceneManager.LoadScene(sceneName);

? ? }

On Click()下面點擊加號新建事件

將Menu Ctrl拖入,選中函數(shù)MenuCtrl.LoadScene,并輸入需要跳轉(zhuǎn)到的場景名

三、彈出窗口


創(chuàng)建panel,添加animator組件;

選中panel,打開animation窗口,新建動畫。


四、屏幕適配

1. 關(guān)于Anchor四葉草

參考:http://m.itdecent.cn/p/5a11073e2b77

四葉草是Anchor,Button是子矩形,灰色面板是父矩形

Anchor四角和父矩形四角的距離為比例固定;

子矩形四角和Anchor四角的距離為絕對距離固定;

Anchor四角合攏即Anchor大小永遠(yuǎn)為0,則父矩形大小變化時,子矩形大小不變,僅位置移動;

Anchor四角分開則父矩形大小變化時,Anchor大小隨之變化,子矩形大小也同樣變化;

調(diào)整Anchor四角的位置可使子矩形隨父矩形形變的幅度有所不同(總之是會有各種不同的效果,數(shù)學(xué)不好原理似懂非懂,反正試試就知道了)。

下圖這種將Anchor合攏置于父矩形左上角,則子矩形大小不會變,相對于左上角的絕對距離不會變

現(xiàn)在只是知道uGUI屏幕適配的大概,有待進一步學(xué)習(xí)和嘗試。


五. 美術(shù)資源規(guī)劃與性能優(yōu)化

這篇文章寫的挺好:http://m.itdecent.cn/p/061e67308e5f


補充資料:

遮罩效果(Mask

http://www.mamicode.com/info-detail-526038.html

Mask貌似比較廢,少用為好。

動態(tài)創(chuàng)建uGUI(感覺會用的上):

Unity進階技巧 - 動態(tài)創(chuàng)建UGUI


后記:因為unity不支持prefab嵌套,所以UI該怎么組織是個問題

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容