Unity開(kāi)啟篇(十七) —— Unity UI簡(jiǎn)介(四)

版本記錄

版本號(hào) 時(shí)間
V1.0 2019.01.28 星期一

前言

Unity是由Unity Technologies開(kāi)發(fā)的一個(gè)讓玩家輕松創(chuàng)建諸如三維視頻游戲、建筑可視化、實(shí)時(shí)三維動(dòng)畫(huà)等類型互動(dòng)內(nèi)容的多平臺(tái)的綜合型游戲開(kāi)發(fā)工具,是一個(gè)全面整合的專業(yè)游戲引擎。Unity類似于Director,Blender game engine, Virtools 或 Torque Game Builder等利用交互的圖型化開(kāi)發(fā)環(huán)境為首要方式的軟件。其編輯器運(yùn)行在Windows 和Mac OS X下,可發(fā)布游戲至WindowsMacWii、iPhoneWebGL(需要HTML5)、Windows phone 8和Android平臺(tái)。也可以利用Unity web player插件發(fā)布網(wǎng)頁(yè)游戲,支持Mac和Windows的網(wǎng)頁(yè)瀏覽。它的網(wǎng)頁(yè)播放器也被Mac 所支持。網(wǎng)頁(yè)游戲 坦克英雄和手機(jī)游戲王者榮耀都是基于它的開(kāi)發(fā)。
下面我們就一起開(kāi)啟Unity之旅。感興趣的看下面幾篇文章。
1. Unity開(kāi)啟篇(一) —— Unity界面及創(chuàng)建第一個(gè)簡(jiǎn)單的游戲 (一)
2. Unity開(kāi)啟篇(二) —— Unity界面及創(chuàng)建第一個(gè)簡(jiǎn)單的游戲 (二)
3. Unity開(kāi)啟篇(三) —— 一款簡(jiǎn)單射擊游戲示例 (一)
4. Unity開(kāi)啟篇(四) —— 一款簡(jiǎn)單射擊游戲示例 (二)
5. Unity開(kāi)啟篇(五) —— 一款簡(jiǎn)單射擊游戲示例 (三)
6. Unity開(kāi)啟篇(六) —— Unity動(dòng)畫(huà)簡(jiǎn)介 (一)
7. Unity開(kāi)啟篇(七) —— Unity動(dòng)畫(huà)簡(jiǎn)介 (二)
8. Unity開(kāi)啟篇(八) —— Unity聲音簡(jiǎn)介(一)
9. Unity開(kāi)啟篇(九) —— Unity聲音簡(jiǎn)介(二)
10. Unity開(kāi)啟篇(十) —— Unity粒子系統(tǒng)簡(jiǎn)介(一)
11. Unity開(kāi)啟篇(十一) —— Unity粒子系統(tǒng)簡(jiǎn)介(二)
12. Unity開(kāi)啟篇(十二) —— Unity腳本簡(jiǎn)介(一)
13. Unity開(kāi)啟篇(十三) —— Unity腳本簡(jiǎn)介(二)
14. Unity開(kāi)啟篇(十四) —— Unity UI簡(jiǎn)介(一)
15. Unity開(kāi)啟篇(十五) —— Unity UI簡(jiǎn)介(二)
16. Unity開(kāi)啟篇(十六) —— Unity UI簡(jiǎn)介(三)

Displaying Dialog on Button Click

禁用Animator組件,以便通過(guò)將isHidden的默認(rèn)值設(shè)置為true,它不會(huì)在開(kāi)始時(shí)播放動(dòng)畫(huà)。 單擊Animator窗口中的一些空白區(qū)域,然后將isHidden設(shè)置為true

當(dāng)您現(xiàn)在運(yùn)行場(chǎng)景時(shí),對(duì)話框不會(huì)立即顯示 - 這很好 - 但是,即使單擊設(shè)置按鈕也不會(huì)顯示。 這個(gè)不好。

打開(kāi)UIManagerScript并添加以下實(shí)例變量:

public Animator dialog;

然后將以下代碼添加到OpenSettings的末尾:

public void OpenSettings() 
{
    //..skipped..

    dialog.SetBool("isHidden", false);
}

這將啟用Animator組件并為isHidden參數(shù)設(shè)置正確的值。

最后添加一個(gè)名為CloseSettings的新方法,如下所示:

public void CloseSettings() 
{
    startButton.SetBool("isHidden", false);
    settingsButton.SetBool("isHidden", false);
    dialog.SetBool("isHidden", true);
}

這將返回按鈕并隱藏對(duì)話框。 您將立即添加調(diào)用此方法的UI元素。

保存UIManagerScript并切換回Unity編輯器。

Hierarchy中選擇UIManager,然后將Dlg_Settings拖到Inspector中的Dialog字段中。

運(yùn)行場(chǎng)景,然后單擊Settings按鈕,查看對(duì)話框滑入時(shí)按鈕如何滑出。

那更好,但你無(wú)法關(guān)閉對(duì)話框。

要解決此問(wèn)題,您需要在對(duì)話框中添加某種關(guān)閉按鈕。


Adding the Close Button

選擇GameObject \ UI \ Button以創(chuàng)建按鈕。 將此新按鈕重命名為Btn_Close并將其拖動(dòng)到層次結(jié)構(gòu)中的Dlg_Settings上,以將其添加為子對(duì)象。 此外,此按鈕上沒(méi)有文本,因此刪除嵌套在Btn_Close中的Text對(duì)象。

這是您在層次結(jié)構(gòu)中應(yīng)該具有的內(nèi)容:

現(xiàn)在選擇Btn_Close并按照以下步驟操作:

  • 1) 將錨點(diǎn)設(shè)置為top-right。
  • 2) 將Pos XPos Y都設(shè)置為0。
  • 3) 在“項(xiàng)目”窗口中打開(kāi)Menu文件夾,然后將settings_btn_close拖到“檢查器”中的Source Image字段中。
  • 4) 單擊Set Native Size。

這是對(duì)話框現(xiàn)在在Scene視圖中的外觀:

注意:這次,您將使用另一種方法突出顯示按鈕的圖像(Button腳本中的Transition屬性),稱為ColorTint,這是默認(rèn)的過(guò)渡類型。 您將執(zhí)行此操作,而不是添加另外兩個(gè)圖像來(lái)表示突出顯示和按下的按鈕狀態(tài)。

按鈕看起來(lái)很棒,但它什么也沒(méi)做。 幸運(yùn)的是,您已經(jīng)添加了此按鈕需要調(diào)用的方法。

在Hierarchy中選擇Btn_Close,向下滾動(dòng)到On Click()列表并單擊+。 將UIManager從Hierarchy拖動(dòng)到新項(xiàng)目,然后在下拉列表中選擇UIManagerScript \ CloseSettings()方法。

選擇File / Save Scenes以保存到目前為止的工作,然后Run the scene。 單擊Settings按鈕,在對(duì)話框滑入場(chǎng)景后單擊Close關(guān)閉場(chǎng)景。

嘿,你做得很好。 那看起來(lái)不錯(cuò)!


Adding Sound Settings

保持無(wú)意義的設(shè)置對(duì)話框沒(méi)有多大意義,因此,是時(shí)候向它添加一些實(shí)際設(shè)置了。 在此對(duì)話框中,player將控制菜單場(chǎng)景中音樂(lè)的音量。

音樂(lè)? 是的,沒(méi)有音樂(lè)的游戲有什么樂(lè)趣?

1. Adding Music to the Menu Scene

您可以在文件周圍搜索合適的剪輯,但是您不必這樣做,因?yàn)樵擁?xiàng)目已包含一個(gè)活潑的音樂(lè)曲目。 你需要做的就是播放它。

在層次結(jié)構(gòu)中選擇Main Camera,然后添加Audio Source組件。 然后,在Project window窗口中,打開(kāi)Audio文件夾并將音樂(lè)拖動(dòng)到“檢查器”中的Audio Clip字段。

啟用Play On Awake。

2. Toggling Music On and Off

要打開(kāi)和關(guān)閉音樂(lè),您將使用切換控制。 選擇GameObject \ UI \ Toggle將切換UI元素添加到場(chǎng)景中。

切換控件由附加了Toggle腳本的根對(duì)象和幾個(gè)子對(duì)象組成:

  • Background:始終可見(jiàn)的圖像(即處于打開(kāi)和關(guān)閉狀態(tài))
  • Checkmark:僅在切換激活(ON)時(shí)可見(jiàn)的圖像。
  • Label:切換旁邊顯示的標(biāo)簽。

這次您不需要標(biāo)簽,因此請(qǐng)刪除嵌套的Label。 然后重命名切換到Tgl_Sound并將其拖到Dlg_Settings上以將其放入對(duì)話框中。 這是您在完成后應(yīng)在層次結(jié)構(gòu)中看到的內(nèi)容:

在層次結(jié)構(gòu)中選擇Tgl_Sound。 將其錨點(diǎn)設(shè)置為middle-left,Pos X設(shè)置為115,Pos Y設(shè)置為-10。

注意:還記得如何相對(duì)于父級(jí)設(shè)置錨點(diǎn)和位置嗎? 這就是為什么首先將tgl_sound添加為dlg_settings的子元素并且僅在設(shè)置其位置之后才重要。

請(qǐng)記住,更改錨點(diǎn)和樞軸不會(huì)更改UI元素位置,而是將位置字段(例如Pos X,Pos Y,Left,Right)更新為通過(guò)使用新錨點(diǎn)和pivot將元素定位在同一位置的值。 首先設(shè)置它們,然后使用它們來(lái)設(shè)置正確的位置。

此外,在Toggle(Script)組件下,取消選中Is On復(fù)選框。

現(xiàn)在,您需要為BackgroundCheckmark子對(duì)象指定圖像。 就像您完成其他圖像一樣,您將從Menu folder中獲取它們,因此在Project窗口中打開(kāi)該文件夾。

你需要兩張圖片:

  • settings_btn_sound為背景
  • checkmarksettings_btn_sound_checkmark

選擇層次結(jié)構(gòu)中tgl_sound中包含的背景,并將“項(xiàng)目”窗口中的settings_btn_sound拖動(dòng)到Inspector中的Source Image。 然后單擊Set Native Size。

然后選擇Checkmark并重復(fù)前面的步驟,但這次使用Project窗口中的settings_btn_sound_checkmark圖像。

這是您應(yīng)該在Scene View中看到的內(nèi)容:

注意:如您所見(jiàn),根對(duì)象(寬矩形)的大小與背景圖像不匹配。 你可以調(diào)整它的大小,但這樣就好了。


Muting the Music

關(guān)于UI元素的事件處理程序的好處是,有時(shí)你可以在不編寫任何代碼的情況下進(jìn)行。 相反,您可以設(shè)置UI元素以更改屬性,或僅使用Unity的界面直接調(diào)用附加到對(duì)象的組件的函數(shù)。

以下是如何更改附加到MainCameraAudio Source組件的靜音(mute)屬性。

Hierarchy中選擇Tgl_Sound,然后在Inspector中找到On Value Changed(Boolean)列表。 單擊+以添加新項(xiàng)目。

MainCamera從層次結(jié)構(gòu)拖動(dòng)到新添加的項(xiàng)目。 打開(kāi)功能選擇下拉列表,從頂部的Dynamic bool部分選擇AudioSource \ mute。

注意:仔細(xì)查看函數(shù)選擇選項(xiàng)時(shí),您將看到兩個(gè)mute屬性:一個(gè)在Dynamic bool部分,另一個(gè)在Static Parameters中。

差異非常小。如果在Dynamic bool部分中選擇靜音,則每次切換時(shí),其值都將設(shè)置為切換的Active屬性的當(dāng)前值。

如果從Static Parameters部分中選擇mute屬性,則會(huì)出現(xiàn)新的輸入字段,您可以將其在Inspector中的值設(shè)置為某個(gè)常量值。

當(dāng)然,在Dynamic bool部分中,只有屬性和方法采用bool值,因?yàn)?code>toggle的激活屬性類型是bool。由于您可以將任何值指定為靜態(tài)參數(shù),因此Static Parameters部分包含所有公共屬性和方法。

因此,當(dāng)切換處于激活狀態(tài)時(shí)(例如,等于true),它將AudioSourcemute屬性設(shè)置為true并使音樂(lè)靜音。

選擇File / Save Scenes以保存到目前為止的工作,然后run the scene,打開(kāi)設(shè)置對(duì)話框并嘗試打開(kāi)和關(guān)閉音樂(lè)。


Using Slider to Regulate the Volume

切換開(kāi)關(guān)可以將其ONOFF狀態(tài)與其他組件的某個(gè)字段同步,這真的很酷,但如果您有一系列值,該怎么辦? 在這種情況下,您可以使用Slider UI元素。

選擇GameObject \ UI \ Slider添加滑塊。 將其重命名為Sdr_Volume并將其放在Dlg_Settings中。

Hierarchy中選擇Sdr_Volume并將其錨點(diǎn)設(shè)置為middle-right。 然后將其錨點(diǎn)設(shè)置為(1,0.5),以便您可以使用其右邊緣的中間點(diǎn)來(lái)定位它。

最后將其Pos X設(shè)置為-20,將Pos Y設(shè)置為-10,將Width設(shè)置為270,將Height設(shè)置為35。

這就是Settings對(duì)話框現(xiàn)在應(yīng)該如何顯示的方式:

如果您查看層次結(jié)構(gòu),您將看到滑塊控件的部件不僅僅包含切換開(kāi)關(guān)或按鈕。 以下是主要部分:

  • Background:圖像顯示滑塊的邊界及其內(nèi)部區(qū)域未填充時(shí)(即手柄一直向左)。
  • Handle:手柄的圖像。 您拖動(dòng)它以更改滑塊的值。
  • Fill:拉伸以顯示滑塊值的圖像。

實(shí)際上,填充圖像不是唯一可以拉伸的部分,因此通常最好對(duì)所有三個(gè)部分使用9-scale images。

Project窗口中打開(kāi)Menu文件夾,找到與滑塊各部分對(duì)應(yīng)的三個(gè)圖像:slider_backgroundslider_fillslider_handle。

對(duì)于每個(gè)圖像,在Inspector中打開(kāi)Sprite Editor,并將Border的所有值設(shè)置為8,單擊Apply

現(xiàn)在您需要為滑塊的每個(gè)部分設(shè)置相應(yīng)的圖像:

  • 1) 選擇Background并在檢查器中將slider_background拖動(dòng)到Source Image。
  • 2) 選擇Fill(不是 Fill Area)并將slider_fill拖動(dòng)到Source Image。
  • 3) 選擇Handle并將slider_handle拖動(dòng)到Source Image。

如果現(xiàn)在運(yùn)行場(chǎng)景并打開(kāi)Settings對(duì)話框,您應(yīng)該會(huì)看到如下內(nèi)容:


Changing the Volume of the AudioSource Component

使用滑塊更改音樂(lè)音量類似于您使用切換開(kāi)關(guān)(toggle)所做的操作。

在層次結(jié)構(gòu)中選擇Sdr_Volume。 在Inspector中,向下滾動(dòng)以查看On Value Changed(Single)列表,然后單擊+以添加新項(xiàng)目。

MainCameraHierarchy拖動(dòng)到列表中的新項(xiàng)目,打開(kāi)函數(shù)選擇下拉列表,然后在Dynamic float部分中選擇AudioSource \ volume。

選擇File / Save Scenes以保存到目前為止的工作,然后run the scene,打開(kāi)設(shè)置對(duì)話框并更改滑塊的值。 拖動(dòng)滑塊手柄時(shí),您應(yīng)該聽(tīng)到音量上下移動(dòng)。 就個(gè)人而言,我發(fā)現(xiàn)它是一個(gè)非常棒的功能。

下一篇,您將學(xué)習(xí)高級(jí)技術(shù),包括使用mask組件創(chuàng)建滑動(dòng)菜單。 此外,您將創(chuàng)建更多動(dòng)畫(huà)并學(xué)習(xí)如何將舊GUI代碼遷移到Unity UI。

后記

本篇主要講述了Unity UI簡(jiǎn)介,感興趣的給個(gè)贊或者關(guān)注~~~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評(píng)論 6 546
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,814評(píng)論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事?!?“怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 178,980評(píng)論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 64,064評(píng)論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,779評(píng)論 6 414
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 56,109評(píng)論 1 330
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評(píng)論 3 450
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 43,287評(píng)論 0 291
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,799評(píng)論 1 338
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,515評(píng)論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,750評(píng)論 1 375
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評(píng)論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,933評(píng)論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 35,327評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 36,667評(píng)論 1 296
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,492評(píng)論 3 400
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,703評(píng)論 2 380

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