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