uGUI就是Unity原生自帶的UI制作系統(tǒng),unity 4.6之后才有的雄人。據(jù)說(shuō)比NGUI好用从橘,畢竟是unity親生的嘛~
學(xué)習(xí)目標(biāo):
1. UI圖片的擺放與正常顯示
2. 按鈕 ?- ?點(diǎn)擊按鈕動(dòng)畫(huà);點(diǎn)擊后界面跳轉(zhuǎn)础钠;點(diǎn)擊后觸發(fā)腳本中設(shè)定的功能
3. 窗口 ?- ?窗口彈出/消失動(dòng)畫(huà)
4. 屏幕適配
5. 美術(shù)資源規(guī)劃與性能優(yōu)化
一. UI圖片的擺放與正常顯示
1. 創(chuàng)建UI圖片
引自:http://blog.csdn.net/u012999985/article/details/50865335
點(diǎn)擊菜單欄的GameObject標(biāo)簽——UI——Image
建立之后我們就能看到在左邊的場(chǎng)景實(shí)體列表(Hierarchy)新生成了三個(gè)實(shí)體
Canvas:畫(huà)布阿弃,相當(dāng)于一個(gè)呈現(xiàn)界面UI素材的容器蹲姐。
Canvas下的子實(shí)體Image:每個(gè)UI控件都是由美工設(shè)計(jì)的圖片構(gòu)成,這個(gè)就Image是放自己設(shè)計(jì)的圖片的實(shí)體
EventSystem:監(jiān)聽(tīng)UI相關(guān)的事件實(shí)體,用來(lái)支持點(diǎ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. 點(diǎn)擊按鈕的動(dòng)畫(huà)
按鈕會(huì)自帶懸停纸淮、按下效果允趟,在Button - Transition中可設(shè)置
ColorTink: 點(diǎn)擊效果靠顏色與Alpha透明度來(lái)調(diào)節(jié)
SpriteSwap:不同狀態(tài)使用不同圖片
Animation:利用Unity的動(dòng)畫(huà)系統(tǒng)來(lái)制作按鈕的動(dòng)畫(huà)效果
關(guān)于Animation:
點(diǎn)擊auto generate?animation,創(chuàng)建animation controller文件码倦;
選中加動(dòng)畫(huà)的button企孩,打開(kāi)Animation窗口,點(diǎn)擊剛才創(chuàng)建的controller袁稽,這時(shí)Animation窗口中就可以看到4個(gè)動(dòng)畫(huà)狀態(tài)了勿璃;
點(diǎn)擊Add property就可以加動(dòng)畫(huà)效果了(或者點(diǎn)擊紅色錄制按鈕)。
* Image - Raycast Target 要勾選點(diǎn)擊才會(huì)有效
2. 點(diǎn)擊后界面跳轉(zhuǎn)
新建一個(gè)空的Game Object运提,比如叫Menu Ctrl
在Menu Ctrl上添加腳本MenuCtrl:
? ? public void LoadScene(string sceneName)
? ? {
? ? ? ? SceneManager.LoadScene(sceneName);
? ? }
On Click()下面點(diǎn)擊加號(hào)新建事件
將Menu Ctrl拖入蝗柔,選中函數(shù)MenuCtrl.LoadScene,并輸入需要跳轉(zhuǎn)到的場(chǎng)景名
三民泵、彈出窗口
創(chuàng)建panel癣丧,添加animator組件;
選中panel栈妆,打開(kāi)animation窗口胁编,新建動(dòng)畫(huà)。
四鳞尔、屏幕適配
1. 關(guān)于Anchor四葉草
參考:http://www.reibang.com/p/5a11073e2b77
Anchor四角和父矩形四角的距離為比例固定寥假;
子矩形四角和Anchor四角的距離為絕對(duì)距離固定市框;
Anchor四角合攏即Anchor大小永遠(yuǎn)為0,則父矩形大小變化時(shí)糕韧,子矩形大小不變枫振,僅位置移動(dòng)喻圃;
Anchor四角分開(kāi)則父矩形大小變化時(shí),Anchor大小隨之變化粪滤,子矩形大小也同樣變化斧拍;
調(diào)整Anchor四角的位置可使子矩形隨父矩形形變的幅度有所不同(總之是會(huì)有各種不同的效果,數(shù)學(xué)不好原理似懂非懂杖小,反正試試就知道了)肆汹。
下圖這種將Anchor合攏置于父矩形左上角,則子矩形大小不會(huì)變予权,相對(duì)于左上角的絕對(duì)距離不會(huì)變
現(xiàn)在只是知道uGUI屏幕適配的大概昂勉,有待進(jìn)一步學(xué)習(xí)和嘗試。
五. 美術(shù)資源規(guī)劃與性能優(yōu)化
這篇文章寫(xiě)的挺好:http://www.reibang.com/p/061e67308e5f
補(bǔ)充資料:
遮罩效果(Mask)
http://www.mamicode.com/info-detail-526038.html
Mask貌似比較廢伟件,少用為好硼啤。
動(dòng)態(tài)創(chuàng)建uGUI(感覺(jué)會(huì)用的上):
Unity進(jìn)階技巧 - 動(dòng)態(tài)創(chuàng)建UGUI
后記:因?yàn)閡nity不支持prefab嵌套,所以UI該怎么組織是個(gè)問(wèn)題