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

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嬉橙,Button是子矩形,灰色面板是父矩形

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)題

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末斧账,一起剝皮案震驚了整個(gè)濱河市谴返,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌咧织,老刑警劉巖嗓袱,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異习绢,居然都是意外死亡渠抹,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)闪萄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)梧却,“玉大人,你說(shuō)我怎么就攤上這事败去》藕剑” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵圆裕,是天一觀的道長(zhǎng)广鳍。 經(jīng)常有香客問(wèn)我,道長(zhǎng)吓妆,這世上最難降的妖魔是什么赊时? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮行拢,結(jié)果婚禮上祖秒,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好竭缝,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布狐胎。 她就那樣靜靜地躺著,像睡著了一般歌馍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上晕鹊,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天松却,我揣著相機(jī)與錄音,去河邊找鬼溅话。 笑死晓锻,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的飞几。 我是一名探鬼主播砚哆,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼屑墨!你這毒婦竟也來(lái)了躁锁?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤卵史,失蹤者是張志新(化名)和其女友劉穎战转,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體以躯,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡槐秧,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了忧设。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片刁标。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖址晕,靈堂內(nèi)的尸體忽然破棺而出膀懈,到底是詐尸還是另有隱情,我是刑警寧澤斩箫,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布吏砂,位于F島的核電站,受9級(jí)特大地震影響乘客,放射性物質(zhì)發(fā)生泄漏狐血。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一易核、第九天 我趴在偏房一處隱蔽的房頂上張望匈织。 院中可真熱鬧,春花似錦、人聲如沸缀匕。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)乡小。三九已至阔加,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間满钟,已是汗流浹背胜榔。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留湃番,地道東北人夭织。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像吠撮,于是被迫代替她去往敵國(guó)和親尊惰。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 前言 項(xiàng)目中有功能需要在代碼中動(dòng)態(tài)創(chuàng)建UGUI對(duì)象泥兰,但是在網(wǎng)上搜索了很久都沒(méi)有找到類(lèi)似的教程弄屡,最后終于在官方文檔中...
    Zui閱讀 30,966評(píng)論 11 63
  • This article is a record of my journey to learn Game Deve...
    蔡子聰閱讀 3,794評(píng)論 0 9
  • 背景和目的 本文的背景是《獨(dú)立防線(xiàn)》(Killer)項(xiàng)目已進(jìn)行到了一定階段。雖然之前定下了UI制作規(guī)范逾条,但中途也更...
    擁之則安H閱讀 1,305評(píng)論 0 18
  • 111. [動(dòng)畫(huà)系統(tǒng)]如何將其他類(lèi)型的動(dòng)畫(huà)轉(zhuǎn)換成關(guān)鍵幀動(dòng)畫(huà)琢岩? 動(dòng)畫(huà)->點(diǎn)緩存->關(guān)鍵幀 112. [動(dòng)畫(huà)]Unit...
    胤醚貔貅閱讀 13,065評(píng)論 3 90
  • 小云閉上眼睛,好像看到兩位姑姑师脂,還有故去的父親担孔,他們?cè)诨秀敝袇s清晰地閃現(xiàn)在眼前。小云睜開(kāi)眼睛不見(jiàn)了他們吃警,...
    田萍閱讀 397評(píng)論 0 5