【正文】 archy視圖中的Content與Scrollbar分別拖掛到這兩屬性值框中即完成了對(duì)象的指定工作。試運(yùn)行程序并拖動(dòng)滑動(dòng)條，發(fā)現(xiàn)Content中4個(gè)按鈕圖片確實(shí)能隨著滑動(dòng)條的移動(dòng)而移動(dòng)了，如圖： 但這還不完美，如果能隱藏多余的內(nèi)容，只顯示特定區(qū)域的內(nèi)容，就象網(wǎng)頁(yè)中的滾動(dòng)條那樣就好了，如下圖所示：要達(dá)到此功能，還要為已添加了ScrollRect組件的對(duì)象增添Image、Mask（遮罩）兩個(gè)組件，其添加方法與上一致。至此，組裝ScrollRect的3個(gè)組件ScrollRect、Image、Mask ，2個(gè)屬性：ScrollRect中的Content、ScrollRect中的Horezontal Scrollbar已完備，但當(dāng)我們運(yùn)行時(shí)，其效果仍然與前面相同，不能隱藏多余部分。如果在Hierarchy視圖中我們把Content拖到ScrollRect上，使Content成為ScrollRect的子對(duì)象，就可達(dá)到我們想要的效果了。其原因是，我們所添加的Image與Mask是在ScrollRect上，那么用圖像去遮罩的對(duì)象是ScrollRect，所以我們要把Content作為ScrollRect的子對(duì)象才能達(dá)到此效果。十四、高級(jí)控件 標(biāo)簽頁(yè)面TabPage 如圖，當(dāng)我們點(diǎn)擊頂部不同的標(biāo)簽時(shí)，下部的內(nèi)容區(qū)域會(huì)顯示對(duì)應(yīng)的內(nèi)容版面。在畫布上創(chuàng)建一個(gè)空對(duì)象，命名為L(zhǎng)able，創(chuàng)建一個(gè)Image，布局上Lable在上面，Image在下面，如下圖：在Lable中創(chuàng)建三個(gè)子控件，它們均為Toggle，命名為ToggleToggleToggle3，并調(diào)整它們的Background與Checkmark，使其看起來(lái)像按鈕：調(diào)整方法：Background是背景，是未被選中時(shí)表現(xiàn)出來(lái)的圖景。首先在場(chǎng)景視圖中將其大小調(diào)大，使其與整個(gè)按鈕形狀一樣大，然后在其Inspector視圖中的Image組件里設(shè)置Source Image或Color屬性值，這里為了簡(jiǎn)便，我們將其Color值設(shè)為較暗的灰度色，用于它未被選中時(shí)展現(xiàn)出來(lái)的顏色。Checkmark是選中時(shí)表現(xiàn)出來(lái)的圖景，默認(rèn)是一個(gè)對(duì)鉤，同理首先在場(chǎng)景視圖中將其大小調(diào)大，使其與整個(gè)按鈕形狀一樣大，這樣一來(lái)，Checkmark與Background一樣大，兩個(gè)重疊起來(lái)了，當(dāng)未選中時(shí)，表現(xiàn)出來(lái)的是Background的景象，選中后表現(xiàn)出來(lái)的是Checkmark的景象。對(duì)于Checkmark的調(diào)整，然后在其Inspector視圖中的Image組件里設(shè)置Source Image或Color屬性值，這里為了簡(jiǎn)便，將Image組件里的Source Image屬性設(shè)為空None，即去掉那個(gè)對(duì)鉤圖像，并將其Color值設(shè)為較亮的灰度色，用于它被選中時(shí)展現(xiàn)出來(lái)的顏色。這三個(gè)按鈕狀的Toggle按設(shè)計(jì)思路應(yīng)該為單選，所以按以前所學(xué)的知識(shí)，需設(shè)置它們的Group屬性值為L(zhǎng)able，同時(shí)，對(duì)于它們的Is On屬性，第一個(gè)Toggle的保持勾選，另兩個(gè)去掉勾選，即使開(kāi)始時(shí)，第一個(gè)處于默認(rèn)選中狀態(tài)。在Image上創(chuàng)建三個(gè)為空的子控件，分別命名為PagePagePage3，并調(diào)整它們的大小，使其與Image一樣大，位置上與Image重疊。再在PagePagePage3上各自創(chuàng)建一個(gè)Text子控件，也調(diào)整它們的大小大致與Image相當(dāng)，且位置上也與Image重疊，并分別輸入要顯示的文本內(nèi)容。這三個(gè)Text是重疊在一起的，顯示時(shí)，其內(nèi)容也會(huì)重疊，如果我們只勾選第一個(gè)Text的父控件Page1的，另兩個(gè)去掉勾選，那么顯示時(shí)會(huì)默認(rèn)顯示第一個(gè)，另兩個(gè)處于未激活狀態(tài)，不會(huì)顯示出來(lái)，自然就不會(huì)發(fā)生顯示的重疊了。最后一步我們來(lái)實(shí)現(xiàn)當(dāng)我們點(diǎn)擊頂部不同的標(biāo)簽時(shí)，下部的內(nèi)容區(qū)域會(huì)顯示對(duì)應(yīng)的內(nèi)容版面。也許你會(huì)認(rèn)為這要用到腳本，實(shí)際上有更簡(jiǎn)便的方法，當(dāng)然會(huì)離不開(kāi)事件處理機(jī)制的。下面以Toggle1為例，選中它，在其Inspetctor視圖中，單擊：中的“+”號(hào)，為其添加事件，如下圖：委托事件處理對(duì)象，這里我們把Page1拖給如下圖：指定事件處理方法：雖然我們沒(méi)有編寫自己的腳本，但Unity有內(nèi)置的許多方法的，這里我們選擇第二項(xiàng)GameObject：選擇上邊的動(dòng)態(tài)方法：SetActive，設(shè)置結(jié)果如下圖：這個(gè)事件的運(yùn)行機(jī)理是：當(dāng)Toggle1的選中狀態(tài)發(fā)生改變時(shí)（注意是狀態(tài)發(fā)生改變，選中時(shí)會(huì)產(chǎn)生事件，那么由選中到取消選中，也會(huì)產(chǎn)生事件），所掛接的對(duì)象Page1會(huì)被激活或失效。根據(jù)這個(gè)原理，Toggle2的事件委托對(duì)象為Page2，Toggle3的事件委托對(duì)象為Page3，這樣就實(shí)現(xiàn)了當(dāng)我們點(diǎn)擊頂部不同的標(biāo)簽時(shí)，下部的內(nèi)容區(qū)域會(huì)顯示對(duì)應(yīng)的內(nèi)容版面了，如下圖：十五、大型游戲案例UI開(kāi)發(fā)結(jié)構(gòu)搭建在Project中建立一些文件夾我們這里先把一些貼圖導(dǎo)進(jìn)Sprits中，并把它們轉(zhuǎn)化為Sprint，其轉(zhuǎn)化方法請(qǐng)參見(jiàn)前面的Image控件中的圖像精靈。配置Canvas參數(shù)在Hierarchy中創(chuàng)建UI畫布Canvas，其Inspector中的Canvas、Canvas Scaler(Script)設(shè)置如下：Canvas：Render Mode：渲染模式設(shè)為Screen Space – Came，這種模式可在畫布與攝像機(jī)之間放三維物體，做出更絢麗的界面。Render Camera：既然渲染模式為Screen Space – Came，那么在此處就需為此設(shè)置渲染所用的攝像機(jī)了，我們把Hierarchy中的主攝像機(jī)更名為UICamera后并拖到此處，為此指定渲染所用的攝像機(jī)。Plane Distance：直譯過(guò)來(lái)為“平面距離”，這里表示的是畫布距攝像機(jī)的距離，默認(rèn)為100個(gè)單位，雖然距離越大，在畫布與攝像機(jī)之間所放的三維物體越多，但一般設(shè)成200個(gè)單位，這里我們?cè)O(shè)成200。Canvas Scaler(Script)：Ui Scale Mode：選第2項(xiàng)，自適應(yīng)屏幕寬。Reference Resolution：參考分辨率，應(yīng)根據(jù)應(yīng)用情況而定，這里我們?cè)O(shè)成800600，即畫布的大小寬為800像素，高為600像素。Screen Match Mode：屏幕自適應(yīng)模式，選第1項(xiàng)，自適應(yīng)寬或高。創(chuàng)建背景在畫布上創(chuàng)建一個(gè)Image控件，命名為Background，并為其賦值一個(gè)Sprits貼圖作為背景圖：此圖看起來(lái)會(huì)是朦朧的，究其原因是因其默認(rèn)為半透明狀，將其設(shè)為不透明，即可解決。方法為單擊：，會(huì)彈出： 其中的R、G、B表示紅綠藍(lán)顏色，最后一項(xiàng)A代表的就是透明度，將其滑塊拖到最右，如上圖右，即設(shè)成了不透明，返回后其效果如下圖：創(chuàng)建供滑動(dòng)用的系列面板再在畫布上建立一個(gè)Image父控件，命名為Sliderpanel，并在其下建立5個(gè)Panel，其結(jié)構(gòu)與命名如下：調(diào)整這5個(gè)panel，使它們向右平鋪開(kāi)來(lái)，如下圖。我們這樣做的目的是想創(chuàng)建一個(gè)滑動(dòng)效果，就像手機(jī)上的滑屏效果。這5個(gè)面板默認(rèn)是重疊在一起的，要像上圖那樣把它們向右平鋪開(kāi)來(lái)，其位置的調(diào)整，除用鼠標(biāo)手工拖動(dòng)外，其實(shí)有更精確的方法。第1個(gè)面板MainPanel在原位，是不需調(diào)整的。第2個(gè)面板Panel1應(yīng)緊排在第1個(gè)面板的右邊，我們選中Panel1，在其Inspector中的Rect Transform中設(shè)置Left為800，Right為800，即可將Panel1精確地調(diào)整到MainPanel的右邊第一個(gè)位置上。這里的Left、Right的值800、800怎樣理解？我們以下列三個(gè)系列圖來(lái)說(shuō)明這個(gè)問(wèn)題：下圖中的第1個(gè)，我們是在畫布Canvas上創(chuàng)建一個(gè)面板Panel，并調(diào)整它的大小，使這個(gè)Panel的Left、Top、Right、Bottom分別為200、100、2120，從圖示就可看出它們分別表示子控件Panel的邊與父控件Canvas相對(duì)應(yīng)邊之間的距離，這個(gè)距離的單位為像素。如果畫布設(shè)置的參考分辨率為800600，即寬800像素，高600像素，那么大家就可從子控件與父控件各邊之間的距離（即空白距離）算出子控件的大小了。 圖1 圖2 圖3圖2與圖3均是在Canvas的子控件Panel上創(chuàng)建的一個(gè)子子控件Panel，不過(guò)圖2中的Canvas上的子控件Panel與Canvas一樣大，圖3中的Canvas上的子控件Panel比Canvas小，各邊留空100，它們的子子控件Panel的Left、Top、Right、Bottom都是150像素，然而因父控件的大小不同，它們的大小也就不同了。從這個(gè)例子可看出，Lest、Top、Right、Bottom指的是本控件的邊與父控件相對(duì)應(yīng)的邊之間的空白距離。上例情況應(yīng)該是好理解的。然而，這些值為負(fù)值時(shí)，又該怎樣理解呢？我們還是先從正值理解起，Left為150，表示子控件的左邊緣在父控件左邊緣的向右方向150像素處。同理，Right為150，表示子控件的右邊緣在父控件右邊緣的向左方向150像素處。反之，Right為150，則表示子控件的右邊緣在父控件右邊緣的向右方向150像素處，即負(fù)表示反方向。根據(jù)上面所講原理，繼續(xù)設(shè)置游戲界面，那么PanelPanelPanel4的Left分別為1600、2400、3200，Right分別為1600、2400、3200，這樣那5個(gè)面板就向右邊并排排列開(kāi)來(lái)了。（這里展示的是加上貼圖后的效果，其貼圖大家可自行完成）根據(jù)前面的創(chuàng)建，從結(jié)構(gòu)上可看出有兩個(gè)圖像控件backguound與Sliderpanel，Sliderpanel上有5個(gè)Panel控件，backguound上有貼圖，Sliderpanel作為父控件以便對(duì)其中的5個(gè)Panel統(tǒng)一移動(dòng)、旋轉(zhuǎn)等處理，其本身是沒(méi)有貼圖的，而那5個(gè)Panel中是有貼圖的，總共有6個(gè)貼圖存在，那么在其Scene或Game視圖中，也許我們認(rèn)為應(yīng)該看到6個(gè)畫面，而實(shí)際上在2D的Scene視圖中看到的是：在Game視圖中看到的只有MainPanel的畫面：如果我們單擊Scene視圖上方中的，即可觀察到3D模式下的狀態(tài)：這里好像也只有5個(gè)，沒(méi)有6個(gè)，實(shí)際上這是因background與MainPanel在位置上是重疊的，而MainPanel又在background的前面，所以就看不到background了。 選中background，將其Pos Z的值由0設(shè)為600，如下圖：此設(shè)置的結(jié)果是將background沿Z軸正方向即向前推600個(gè)像素，那么在3D視圖中為： 從這點(diǎn)上可看出，看不見(jiàn)，并不代表它不存在。這時(shí)雖然在3D模式下的Scene視圖中能觀察到，但因Canvas的渲染模式為Screen Space – Camera，在Game視圖中又由于MainPanel的遮擋，其background仍不見(jiàn)，但如果以后實(shí)現(xiàn)了滑動(dòng)功能，MainPanel被滑開(kāi)后就可見(jiàn)了，這樣做的好處至少不會(huì)因MainPanel的滑開(kāi)而露出一個(gè)空白底子。這充分體現(xiàn)了Screen Space – Camera渲染模式下的3D設(shè)計(jì)，2D顯示的功能。Screen Space – Camera這是我們目前最常用的渲染模式。雖然我們可以放置一些3D模型，但顯示總是2D的，你是不能看到它的側(cè)面的。既然是這樣，那么攝像機(jī)就用不著再使用透視Perspective模式了，可將其設(shè)置為Orthographic（正交），即選擇第2項(xiàng)，其Scene視圖的表現(xiàn)將由：變?yōu)椋杭匆暰€為2D正交狀，更有利于2D表現(xiàn)。設(shè)計(jì)主界面上的元素1個(gè)Text，顯示文字“英雄救美”，采用富文本：英雄color=redsize=50救/size/color美；3個(gè)按鈕，左下角喇叭貼圖的按鈕用于調(diào)節(jié)音量；中間水晶球貼圖的按鈕用于開(kāi)始游戲；右上角錢幣貼圖的按鈕用于查看金幣數(shù)量；2個(gè)3D模型，1個(gè)美女3D模型，1個(gè)小汽車模型。3D模型導(dǎo)入后，可能出現(xiàn)兩種情況，一個(gè)是運(yùn)行游戲時(shí)不可見(jiàn)；二個(gè)是其貼圖丟失，造成白模。第一種情況的原因是，當(dāng)我們查看渲染的攝像機(jī)的Culling Mask屬性時(shí)將發(fā)現(xiàn)其值為UI，即只有UI層才被渲染，故我們應(yīng)將該模型的Layer設(shè)為UI。那么為什么我們所添加的象Button、Text…等UI控件不需設(shè)置此步就可見(jiàn)呢，我們單擊選中或任意創(chuàng)建一個(gè)UI控件，再查看其Layer將發(fā)現(xiàn)它們會(huì)被自動(dòng)設(shè)置為UI，如下圖：所以就不需我們?cè)俅稳ピO(shè)定了。而3D模型添加到場(chǎng)景后，其Layer默認(rèn)為Default，如果不手工改成UI就不能顯示出來(lái)了。第二種情況的解決辦法，我們可以先將模型所用的材質(zhì)貼圖先復(fù)制到該工程項(xiàng)目中的一個(gè)文件夾內(nèi)，并在3DMAX中將其對(duì)應(yīng)的材質(zhì)貼圖的路徑也改成該工程項(xiàng)目的那個(gè)文件夾中對(duì)應(yīng)的材質(zhì)貼圖文件，然后把該模型直接導(dǎo)出為FBX格式到該工程項(xiàng)目中的一個(gè)模型文件夾中，這樣它會(huì)自動(dòng)對(duì)應(yīng)到相應(yīng)的材質(zhì)貼圖，再在場(chǎng)景中使用這個(gè)模型時(shí)就不會(huì)出白模情況了。另外，當(dāng)我們單擊選中已導(dǎo)入Project中的3D模型時(shí)，在其Inspector視圖中，選中Model選項(xiàng)卡，將發(fā)現(xiàn)Scale ，如下圖所示：3D模型導(dǎo)入U(xiǎn)nity時(shí)默認(rèn)是縮小100倍的，在3DMAX中，其單位往往默認(rèn)是英尺英寸，而Unity是米，如果我們把MAX的單位設(shè)成米，并把“系統(tǒng)單位設(shè)置”里的系統(tǒng)單位比例也設(shè)成米，如下圖： 這樣制作出來(lái)的模型導(dǎo)入到Unity中時(shí)，就可將Scale Factor設(shè)成1，即1：1導(dǎo)入，就不會(huì)出現(xiàn)大小不合適的情況了。實(shí)現(xiàn)面板滑動(dòng)我們先給出滑動(dòng)用的腳本：using UnityEngine。using 。using 。 //UI命名空間using 。