三開(kāi)發(fā)設(shè)計(jì)及案例講解

Unity4.6UGUI開(kāi)發(fā)設(shè)計(jì)及案例講解Unity4.6跟以前的版本的最大區(qū)別一方面在于在層級(jí)視圖中點(diǎn)鼠標(biāo)右鍵時(shí)出現(xiàn)的彈出菜單上，它把以前許多的菜單項(xiàng)進(jìn)行了歸類(lèi)，比如cubespherecapsule….等整合到“3DObject”子菜單中，并且多余一個(gè)UI子菜單，它就是UI組件了。

當(dāng)我們點(diǎn)擊UI->Canvas時(shí)，就會(huì)在場(chǎng)景視圖里創(chuàng)建一個(gè)畫(huà)布，但是視圖默認(rèn)是3D顯示方式，在Unity4.3以后，增長(zhǎng)了一個(gè)2D與3D轉(zhuǎn)換按鈕，單擊此按鈕可在3D與2D顯示樣式之間轉(zhuǎn)換。

UI是2D，為什么還要3D呢，在做一些比較復(fù)雜的項(xiàng)目時(shí)，給用戶看時(shí)是2D，但我們編輯時(shí)，有時(shí)還是要用到3D模式的。Canvas是畫(huà)布，所有的UI組件就是繪制在這個(gè)畫(huà)布里的，脫離畫(huà)布，UI組件就不能用。

創(chuàng)建畫(huà)布有兩方式。一是通過(guò)菜單直接創(chuàng)建，二是直接創(chuàng)建一個(gè)UI組件時(shí)，會(huì)在創(chuàng)建這個(gè)組件的同時(shí)自動(dòng)創(chuàng)建一個(gè)容納該組件的畫(huà)布出來(lái)。

不管那種方式創(chuàng)建出畫(huà)布時(shí)，系統(tǒng)都會(huì)自動(dòng)創(chuàng)建出一個(gè)EventSystem組件，這是UI的事件系統(tǒng)。一．Canvas組件Canvas組件的三種渲染模式在Canvas中有一RenderMode屬性，它有3個(gè)選項(xiàng)，分別相應(yīng)Canvas的三種渲染模式：ScreenSpace–Overlay、ScreenSpace–Camera、WorldSpaceScreenSpace–Overlay：

此模式不需要UI攝像機(jī)，UI將永遠(yuǎn)出現(xiàn)在所有攝像機(jī)的最前面（即在某個(gè)UI的前面是不能再添加其他組件的），就仿佛是給攝像機(jī)貼上了一層膜。它的最大好處是不需要攝像機(jī)，不需要燈光。ScreenSpace–Camera：此模式需要提供一個(gè)UICamera，它支持在UI前方顯示3D模型與粒子系統(tǒng)等內(nèi)容。

但是此模式下，就需在中給它掛一個(gè)攝像機(jī)。

當(dāng)掛上攝像機(jī)并選擇3D顯示模式時(shí)，我們選中這個(gè)攝像機(jī)，并移動(dòng)它，可發(fā)現(xiàn)畫(huà)布會(huì)跟隨攝像機(jī)的移動(dòng)而移動(dòng)，且Game視圖顯示的UI其位置與大小均保持不變，如下圖所示：

這種模式，雖然UI的顯示效果與第一種模式?jīng)]有什么兩樣，然而，因在畫(huà)布與攝像機(jī)之間可放置三維物體或粒子系統(tǒng)，那么就可做出許多絢麗的特效。這一項(xiàng)是設(shè)立Canvas與攝像機(jī)之間的距離，其值越大，可在畫(huà)布與攝像機(jī)之間放很多的三維物體，默認(rèn)是100，建議設(shè)立為100與200之間即可。WorldSpace：這個(gè)就是完全3D的UI，也就是把UI也當(dāng)成3D對(duì)象，如攝像機(jī)離UI遠(yuǎn)了，其顯示就會(huì)變小，近了就會(huì)變大。其它一些屬性：當(dāng)有多個(gè)畫(huà)布時(shí)，決定誰(shuí)在前，誰(shuí)先顯示。二．CanvasScaler畫(huà)布的大小UiScaleMode（大小模式）當(dāng)我們把Canvas中的RenderMode設(shè)為ScreenSpace–Overlay或ScreenSpace–Camera時(shí)，此CanvasScale中的UiScaleMode（大小模式）就可用，且其中有3個(gè)選項(xiàng)：ConstanPixelSize：固定像素尺寸ScaleWithScreenSize：以寬度為標(biāo)準(zhǔn)縮放（屏幕自適應(yīng)特性）ReferenceResolution：參考分辨率在不同分辨率下，控件顯示的大小有所不同，這要根據(jù)實(shí)際情況綜合考慮。ScreenMatchMode：屏幕匹配模式MatchWidthOrHeigt：匹配寬度或高度此模式下會(huì)出現(xiàn)Match調(diào)節(jié)滑桿，調(diào)節(jié)其控塊位置，也會(huì)影響UI元素顯示的大小。Expand：擴(kuò)展Shrink：收縮ConstantPhysicalSize：固定物理尺寸三．Panel面板當(dāng)我們初次創(chuàng)建Panel后，它會(huì)充滿整個(gè)畫(huà)布，如下左圖：此時(shí)通過(guò)拖動(dòng)該面板控件的4個(gè)角點(diǎn)或四條邊可調(diào)節(jié)面板的大小，如上右圖面板事實(shí)上就是一個(gè)容器，在其上可放置其他UI控件，當(dāng)移動(dòng)面板時(shí)，放在其中的UI組件就會(huì)跟隨移動(dòng)，這樣我們可以更加合理與方便的移動(dòng)與解決一組控件。也就是通過(guò)面板，我們可以把控件分組。一個(gè)功能完備的UI界面，往往會(huì)使用多個(gè)Panel容器控件。并且一個(gè)面板里還可套用其他面板。當(dāng)我們創(chuàng)建一個(gè)面板后，此面板會(huì)默認(rèn)包含一個(gè)Image(Script)組件：該組件中的SourceImage是設(shè)立面板的圖像。Color，可改變面板的顏色。四．EventSystem事件解決系統(tǒng)當(dāng)我們創(chuàng)建一個(gè)畫(huà)布時(shí)，Unity系統(tǒng)會(huì)自動(dòng)為我們創(chuàng)建一個(gè)EventSystem，該事件解決器中有3個(gè)組件：EventSystem：事件系統(tǒng)組件（事件）StandaloneInputModule：獨(dú)立輸入模塊（輸入）TouchInputModule：觸控輸入模塊（觸控）假如我們將EventSystem(Script)前的勾去掉，則管理整個(gè)場(chǎng)景的事件系統(tǒng)則不起作用了，此時(shí)運(yùn)營(yíng)程序，假如有Button，單擊它時(shí)就不會(huì)有反映了。五．Text控件在UGUI中，我們所創(chuàng)建的所有UI控件，它們都有一個(gè)UI控件特有的RectTransform組件：我們所創(chuàng)建的三維物體，是Transform，而UI控件是RectTransform，它是UI控件的矩形方位，其中的指的是UI控件在相應(yīng)軸上的偏移量。UI控件除了上面RectTransform控件外，每個(gè)UI控件都還一個(gè)組件，它是畫(huà)布渲染，一般不用管它，因它不能點(diǎn)開(kāi)的。Text控件的相關(guān)屬性：Character:（字符）Font：字體FontStyle：字體樣式FontSize：字體大小LineSpacing：行間距（多行）RichText：“富”文本。例如：U<b>G</b>U</i>I<volor=”yellow”>學(xué)</color>習(xí)Color：字體顏色Paragraph:（段落）：設(shè)立文本在Text框中的水平以及垂直方向上的對(duì)齊方式。：水平方向上溢出時(shí)的解決方式。它有兩種：Wrap隱藏；Overflow溢出。：垂直方向上溢出時(shí)的解決方式。它有兩種：Truncate截?cái)啵籓verflow溢出。隱藏了或截?cái)嗔耍畔@示不全當(dāng)然不好，但假如溢出又會(huì)破壞版面，想兩全齊美的話，就可選中：，假如文字多時(shí)，它會(huì)自動(dòng)縮小以適應(yīng)文本框的大小，當(dāng)選中該項(xiàng)后，在其下邊會(huì)出現(xiàn)MinSize與MaxSize兩輸入框，可設(shè)立字體變化時(shí)的最小與最大值。六．Image控件Image控件除了兩個(gè)公共的組件RectTransform與CanvasRenderer外，默認(rèn)的情況下就只有一個(gè)Image(Script)組件：SourceImage是要顯示的源圖像，但假如我們把一個(gè)普通的圖像往里拖放時(shí)，卻不能成功放入，認(rèn)真研究一下不難發(fā)現(xiàn)，放圖像的框中，除了None表達(dá)還沒(méi)有圖像外，尚有一個(gè)括號(hào)注釋的Sprite，它的意思是精靈，可理解為它是貼圖的一種特殊形式，它不具有其他功能，只給UI做顯示圖片用，故我們給它取了一個(gè)特殊的名字：精靈Sprite，所以在Unity4.6中，要想把一個(gè)圖片賦給Image，則需要把該圖片轉(zhuǎn)換成精靈格式，轉(zhuǎn)換方法為，在Project中選中要轉(zhuǎn)換在圖片，然后在Inspector檢視圖中，單擊TextureType（紋理類(lèi)型）右邊的下拉框，在彈出的菜單中，第三項(xiàng)EditorGUIandLegacyGUI是Unity4.6以前版本所用的，選中它時(shí)，圖片不會(huì)被拉伸，現(xiàn)在幾乎不用，是為了兼容，而第四項(xiàng)Sprite(2DandUI)，就是4.6版本所用的，它雖然比前一項(xiàng)合用的范圍更窄，但其效率更高。我們選中該選項(xiàng)Sprite(2DandUI)并點(diǎn)擊下方的Apply（應(yīng)用）按鈕就可把此圖片轉(zhuǎn)換成精靈格式，隨后就可拖放到Image的SourceImag中了，如下圖所示：另：當(dāng)我們把一個(gè)普通的圖片轉(zhuǎn)換成精靈格式后，在Project中，將發(fā)現(xiàn)該圖片將包含一個(gè)子對(duì)象如圖：，以后可以把一個(gè)圖片劃分為多個(gè)圖片。當(dāng)我們把精靈圖片賦給了Image后，其組件樣式如下圖：Color：可改變圖片的顏色；Material：材質(zhì)，這是針對(duì)一些復(fù)雜的貼圖使用。ImageType：貼圖的類(lèi)型，這是最重要的屬性。Simple：簡(jiǎn)樸PreserveAspect：翻譯過(guò)來(lái)是：維持外貌，選中該項(xiàng)后，該精靈圖片的長(zhǎng)寬比將保持原狀，當(dāng)調(diào)節(jié)圖片的大小時(shí)，它將在保持原長(zhǎng)寬比的前提下盡量鋪展到圖片框中，即不會(huì)拉伸或壓縮以適應(yīng)圖片框而鋪滿。SetNativeSize：本來(lái)的大小。假如調(diào)整后大小變亂了，單擊此按鈕，可將此圖片設(shè)立成本來(lái)的大小Sliced：片應(yīng)用該種類(lèi)型時(shí)，應(yīng)先將貼圖進(jìn)行“九宮格”解決后才可以應(yīng)用。否則其下會(huì)出現(xiàn)黃色的警告ThisImagedoesn’thaveaborder：這個(gè)圖片沒(méi)有邊框，如下圖：如何進(jìn)行九宮格的解決呢？先在Project中選中該圖片精靈，然后在其Inspector檢視圖中單擊“SpriteEditor”按鈕即可進(jìn)入九宮格解決SprinteEditor視窗中，如下兩個(gè)圖所示：在這個(gè)SprinteEditor視窗中，我們可以拖動(dòng)圖像四條邊上的綠色線，調(diào)節(jié)九宮格的布局大小，調(diào)好后單擊頂端的Apply按鈕應(yīng)用即可，回到Image的檢視圖中，我們將發(fā)現(xiàn)本來(lái)的警告消失了：在ImageType為Sliced時(shí)，當(dāng)對(duì)圖像進(jìn)行大小調(diào)節(jié)時(shí)，其中心會(huì)縮放以適合矩形，但邊界會(huì)保持不變，這樣當(dāng)你顯示不同尺度圖像時(shí)，不用緊張擴(kuò)大與縮小時(shí)其輪廓會(huì)發(fā)生變化。假如你只想要邊界，不要中心，可以禁用FillCenter（填充中心）屬性。Tiled：平鋪圖像保持其原始大小，反復(fù)多次填補(bǔ)空白。這往往用于做背景。Filled：填充圖像填充滿整個(gè)Image矩形區(qū)域，再結(jié)合FillAmount屬性，可做一些特效。當(dāng)圖片類(lèi)型為Filled時(shí)，其Image組件的屬性視圖如上圖所示，其FillMethod（填充方法）選擇框中有5種：Horizontal：水平填充，假如我們手動(dòng)拖動(dòng)FillAmount（填充數(shù)量）滑塊，就可看到圖片在水平方向上的填充變化（動(dòng)畫(huà)），如下圖列所示：Vertical：垂直填充，同理當(dāng)我們手動(dòng)拖動(dòng)FillAmount滑塊，就可看到圖片在垂直方向上的填充變化（動(dòng)畫(huà)），如下圖列所示：Radial90：徑向90度填充，同理當(dāng)我們手動(dòng)拖動(dòng)FillAmount滑塊，就可看到圖片在90度方向上的填充變化（動(dòng)畫(huà)），如下圖列所示，默認(rèn)是以左下角為圓心，順時(shí)針90度填充。Radial180：徑向180度填充，同理當(dāng)我們手動(dòng)拖動(dòng)FillAmount滑塊，就可看到圖片在180度方向上的填充變化（動(dòng)畫(huà)），如下圖列所示，默認(rèn)是以底邊中點(diǎn)為圓心，順時(shí)針180度填充。Radial300：徑向180度填充，同理當(dāng)我們手動(dòng)拖動(dòng)FillAmount滑塊，就可看到圖片在360度方向上的填充變化（動(dòng)畫(huà)），如下圖列所示，默認(rèn)是以圖片的中心點(diǎn)為圓心，順時(shí)針360度填充。假如我們使用腳本來(lái)控制FillAmount的值，就可制造出這五種動(dòng)畫(huà)來(lái)，為特效的制作增長(zhǎng)了一些有效的手段。七．Button控件當(dāng)我們創(chuàng)建一個(gè)Button后，其Inspector視圖如下：除了公共的RectTransform與CanvasRenderer兩個(gè)UI組件外，Button還默認(rèn)擁有Image(Script)與Button(Script)兩個(gè)組件。組件Image(Script)里的屬性與前面所講的Image控件的Image(Script)組件里的屬性是同樣的，例如SourceImage的圖像類(lèi)型仍為一個(gè)Sprite（精靈），通過(guò)為此賦值，就可改變此Button的外觀了，假如你為屬性賦值了圖片精靈，那么此Button的外觀就與此精靈一致了。Button是一個(gè)復(fù)合控件，它中還包含一個(gè)Text子控件：，通過(guò)此子控件可設(shè)立Button上顯示的文字的內(nèi)容、字體、樣式、字大小、顏色等，與前面所講的Text控件是同樣的。Button(Script)組件里的屬性：Interactable：是否啟用（交互性）假如你把其后的對(duì)勾去掉，此Button在運(yùn)營(yíng)時(shí)將點(diǎn)不動(dòng)，即失去交互性了。Transition：過(guò)渡方式它有四個(gè)選項(xiàng)，默認(rèn)為ColorTint（顏色色彩）None：沒(méi)有過(guò)渡方式。ColorTint：顏色過(guò)渡TargetGraphic：目的圖像NormalColor：正常顏色HighlightedColor：通過(guò)高亮色PressedColor：點(diǎn)擊色DisabledColor：禁用色ColorMultiplier：顏色倍數(shù)FadeDuration：變化過(guò)程時(shí)間SpriteSwap：精靈互換。需要使用相同功能不同狀態(tài)的貼圖。TargetGraphic：目的圖像HighlightedSprite：鼠標(biāo)通過(guò)時(shí)的貼圖PressedSprite：點(diǎn)擊時(shí)的貼圖DisabledSprite：禁用時(shí)的貼圖Animation：動(dòng)畫(huà)。最復(fù)雜，效果最絢麗。其中的NormalTrigger、HighlightedTrigger、PressedTrigger、DisabledTrigger等屬性是不能賦值的，它們是自動(dòng)生成的。當(dāng)單擊“AutoGenerateAnimation”（自動(dòng)生成動(dòng)畫(huà)）按鈕時(shí)，系統(tǒng)會(huì)為你打開(kāi)一個(gè)NewAnimationContoller（新建動(dòng)畫(huà)控制器）窗口，規(guī)定你選擇動(dòng)畫(huà)存放的途徑，所以我們要先在Project中新建一個(gè)文獻(xiàn)夾，專(zhuān)門(mén)用來(lái)存放動(dòng)畫(huà)，比如此文獻(xiàn)夾取名為_(kāi)Animator，此時(shí)就可選中此文獻(xiàn)夾，并給此動(dòng)畫(huà)取名（動(dòng)畫(huà)的名默認(rèn)為該Button的名字，當(dāng)然其擴(kuò)展名為controller），創(chuàng)建成功后，會(huì)在Project中的_Animator文獻(xiàn)夾中可看到剛才創(chuàng)建的動(dòng)畫(huà)文獻(xiàn)（動(dòng)畫(huà)的名默認(rèn)為該Button的名字），且在這個(gè)Button的Inspector檢視圖中可看到會(huì)為此Button增長(zhǎng)一個(gè)Animator組件：此組件的Controller的屬性值就為剛才創(chuàng)建的動(dòng)畫(huà)，雙擊它即可打開(kāi)該動(dòng)畫(huà)的Animator窗口，其中記錄的有四個(gè)動(dòng)畫(huà)：Normal、Highlighted、Pressed、Disabled（通常狀態(tài)、鼠標(biāo)通過(guò)狀態(tài)、按下?tīng)顟B(tài)、失效狀態(tài)），如下圖所示：其實(shí)這個(gè)動(dòng)畫(huà)還沒(méi)有，要做出這個(gè)動(dòng)畫(huà)，需先選中這個(gè)Button，然后點(diǎn)擊系統(tǒng)菜單Window->Animation（注意不是Animator），就會(huì)打開(kāi)一個(gè)Animation動(dòng)畫(huà)編輯窗口：我們以此工具先來(lái)做一個(gè)簡(jiǎn)樸的幀動(dòng)畫(huà)，在幀數(shù)框上單擊一下，本來(lái)的0便會(huì)選中，此時(shí)輸入數(shù)字1，表達(dá)對(duì)第1幀做動(dòng)畫(huà)，此時(shí)的錄制按鈕以及系統(tǒng)的播放按鈕和動(dòng)畫(huà)編輯窗中的幀數(shù)線均會(huì)變紅，表達(dá)現(xiàn)在處在記錄模式，你所做的操作會(huì)記錄成動(dòng)畫(huà)的動(dòng)作，如下圖所示：假設(shè)我們想使它在第一幀時(shí)，該按鈕變大一點(diǎn)，我們就在Inspector中的RectTransformr的Scale中操作，比如在x與y軸向上均增大到本來(lái)的1.05倍（因UI是在x-y平面上顯示，故不需設(shè)立Z值），如下圖所示：同理，當(dāng)?shù)谝粠O(shè)立完后，我們?cè)趲瑪?shù)框中直接輸入數(shù)字2，就可編輯第2幀的動(dòng)畫(huà)了，比如在x與y軸向上均增大到本來(lái)的1.1倍，再繼續(xù)設(shè)立第3幀在x與y軸向上均增大到本來(lái)的1.15倍，假設(shè)我們現(xiàn)在就只做這3幀動(dòng)畫(huà)，已經(jīng)完畢了，那么我們點(diǎn)擊一下那個(gè)處在紅色暈光狀態(tài)下的錄制按鈕，結(jié)束錄制，再保存一下場(chǎng)景，就會(huì)發(fā)現(xiàn)在Project視圖中_Animator/Button1下會(huì)增長(zhǎng)4個(gè)動(dòng)畫(huà)文獻(xiàn)Disabled、Highlighted、Normal、Pressed（假如不保存將看不到這4個(gè)動(dòng)畫(huà)文獻(xiàn)），這四個(gè)動(dòng)畫(huà)剪輯就是源于我們剛才的錄制，雖然剛才我們只錄制了一次，而系統(tǒng)會(huì)為我們自動(dòng)產(chǎn)生這四個(gè)動(dòng)畫(huà)文獻(xiàn)。動(dòng)畫(huà)成功制作出來(lái)了，可運(yùn)營(yíng)起來(lái)看看效果了，但當(dāng)我們運(yùn)營(yíng)起來(lái)時(shí)，就會(huì)發(fā)現(xiàn)那個(gè)按鈕會(huì)自動(dòng)無(wú)限次地播放那個(gè)動(dòng)畫(huà)，看起來(lái)就是不斷地顫動(dòng)，那么是什么因素呢？我們?cè)赑roject視圖中，選中任意的一個(gè)動(dòng)畫(huà)剪輯比如Disabled，在其Inspector視圖中可看到它的LoopTime屬性是處在選中狀態(tài)，意思是循環(huán)播放，那么我們把它去掉即可。而這里，假如我們只去掉Disabled的LoopTime還是不行的，當(dāng)然把這4個(gè)動(dòng)畫(huà)剪輯的LoopTime全去掉是能成功的，那么到底是那個(gè)剪輯在起作用呢？事實(shí)上是Normal，所以我們只需去掉Normal的LoopTime即可。其因素請(qǐng)看下列敘述。我們先在Hierarchy視圖中選中那個(gè)做了動(dòng)畫(huà)的Button，再單擊系統(tǒng)菜單Window->Animation（注意不是Animator），就會(huì)打開(kāi)剛才的動(dòng)畫(huà)編輯窗口：?jiǎn)螕羝渲械腘ormal框，會(huì)出現(xiàn)下拉選擇：從這下拉選擇列表中可看出Normal前邊有個(gè)勾，這說(shuō)明我們剛才所做的動(dòng)畫(huà)是Normal。那么根據(jù)此原理，我們可分別做出鼠標(biāo)通過(guò)該Button的Highlighted、該Button按下的Pressed、以及該Button失效的Disabled動(dòng)畫(huà)了。NavigationNone：沒(méi)有Horizontal：水平Vertical：垂直Automatic：自動(dòng)Explicit：明確的Visualize：顯現(xiàn)OnClick()在Button組件的下方有一個(gè)OnClick()選項(xiàng)，這就是Button控件解決事件的重要機(jī)制。OnClick()意思為當(dāng)該按鈕被點(diǎn)擊時(shí)所發(fā)生的事件，而此事件在UI中是委托機(jī)制，要理解這個(gè)機(jī)制，我們先做一些準(zhǔn)備工作。建立腳本文獻(xiàn)假設(shè)此腳本文獻(xiàn)被命名為ButtonEventusingUnityEngine;usingSystem.Collections;publicclassButtonEvent:MonoBehaviour{ //Usethisforinitialization voidStart(){ } //Updateiscalledonceperframe voidUpdate(){ }}這是系統(tǒng)默認(rèn)的文獻(xiàn)內(nèi)容，現(xiàn)在我們要把它應(yīng)用于UI，故必須引入U(xiǎn)I的命名空間，即腳本的首部增長(zhǎng)一行：usingUnityEngine.UI;。假設(shè)我們單擊一個(gè)按鈕后，讓系統(tǒng)在后臺(tái)顯示一句話：點(diǎn)擊了Button！，那么我們可以在此腳本中增長(zhǎng)一個(gè)方法，該方法為公共的public，假設(shè)方法名為DisplayInfo：PublicvoidDisplayInfo(){ Print(“點(diǎn)擊了Button！”);}此時(shí)整個(gè)腳本文獻(xiàn)的內(nèi)容如下：usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;publicclassButtonEvent:MonoBehaviour{ //Usethisforinitialization voidStart(){ } PublicvoidDisplayInfo(){ Print(“點(diǎn)擊了Button！”);} //Updateiscalledonceperframe voidUpdate(){ }}在Hierarchy視圖的Canvas中創(chuàng)建一個(gè)空對(duì)象，并假設(shè)命名為Event，并把上面的腳本作為組件掛到這個(gè)空對(duì)象上，那么這個(gè)對(duì)象是具有事件解決能力的object了。為某個(gè)按鈕添加其事件解決的委托對(duì)象我們?cè)趯蛹?jí)面板中選中要產(chǎn)生單擊事件的按鈕比如Button1，然后拖動(dòng)其Inspector面板右邊的滾動(dòng)條，使其Button(Script)組件下的OnClick()顯現(xiàn)出來(lái)：此時(shí)其事件列表為空：ListisEmpty，我們單擊其下的“+”按鈕為其添加一個(gè)事件：此時(shí)事件雖被添加了，但其委托的事件解決對(duì)象為空：None(Object)，當(dāng)然連事件解決對(duì)象都沒(méi)有，其事件解決方法自然也就為空：NoFunction。（RuntimeOnly此項(xiàng)我們可先不管它，以后用屆時(shí)再講）那么如何委托事件解決對(duì)象與選擇事件解決方法呢？很簡(jiǎn)樸，我們把層級(jí)面板中剛才建好的并已掛上了事件解決腳本的Event對(duì)象拖放到None(Object)框中即可，此時(shí)此框中顯示的內(nèi)容即為委托的此事件解決對(duì)象的名稱了：Event，有了事件解決對(duì)象了，然后使用該對(duì)象的什么方法來(lái)解決事件呢？這還需我們給它指定，其方法是單擊顯示內(nèi)容為NoFunction的那個(gè)事件方法框，會(huì)彈出菜單列表：當(dāng)我們的鼠標(biāo)指向最后一項(xiàng)ButtonEvent時(shí)會(huì)繼續(xù)展開(kāi)，其中就有我們?cè)谀_本中編寫(xiě)的事件解決方法：DiaplayInfo()，選中它即可，這樣就完畢了事件的委托，當(dāng)我們運(yùn)營(yíng)時(shí)，單擊那個(gè)Button，就會(huì)在后臺(tái)里打印出“點(diǎn)擊了Button！”。一個(gè)按鈕可以有多個(gè)解決事件。下面我們采用另一種顯示信息的方式。我們先在場(chǎng)景中的畫(huà)布上增長(zhǎng)一個(gè)Text控件，同時(shí)設(shè)立好相關(guān)的顯示樣式，然后在那個(gè)腳本中增長(zhǎng)一個(gè)公共變量：publicTextTxt_Info，回到場(chǎng)景視圖中，在層級(jí)面板中選中掛有該腳本的對(duì)象Event，在其Inspector視圖的ButtonEvent腳本組件里就會(huì)出現(xiàn)剛才增設(shè)的公共變量名：Txt_Info（腳本需保存且界面需刷新），我們可把增長(zhǎng)的那個(gè)Text拖到此處即可為此變量賦值了，接下來(lái)我們就可通過(guò)腳本修改這個(gè)文本框控件的Text屬性，讓打印在后臺(tái)的信息顯示在這個(gè)文本框上了。其腳本文獻(xiàn)內(nèi)容如下：usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;publicclassButtonEvent:MonoBehaviour{ publicTextTxt_Info; //Usethisforinitialization voidStart(){ } //Updateiscalledonceperframe voidUpdate(){ } publicvoidDisplayInfo(){ print("點(diǎn)擊了Button！"); } publicvoidDisplayInfoText(){ Txt_Info.text="Button被點(diǎn)擊！"; }}然后再給那個(gè)Button增長(zhǎng)一個(gè)單擊事件（委托的事件對(duì)象仍為Event，方法則設(shè)為DisplayInfoText()）：再次運(yùn)營(yíng)程序，單擊按鈕時(shí)，后臺(tái)輸出“點(diǎn)擊了Button！”的同時(shí)，場(chǎng)景中的Text文本框的內(nèi)容內(nèi)變?yōu)椋築utton被點(diǎn)擊了！。八Anchor錨點(diǎn)與屏幕自適應(yīng)每個(gè)控件都有下Anchor的屬性，其作用是當(dāng)改變屏幕分辨率的時(shí)候，當(dāng)前控件做如何的位置變換。即控件的屏幕自適應(yīng)。當(dāng)我們創(chuàng)建一個(gè)Canvas后，在層級(jí)視圖中選中它后，我們將發(fā)現(xiàn)這個(gè)Canvas在場(chǎng)景視圖中的樣式如下圖所示：這個(gè)Canvas除四邊、四個(gè)角點(diǎn)外，其中心尚有一個(gè)藍(lán)色的小圓圈，這個(gè)小圓圈即為這個(gè)Canvas的中心點(diǎn)。假如此時(shí)我們?cè)诖薈anvas上創(chuàng)建一個(gè)Button，如下圖所示：Button同理也有四條邊、四個(gè)角點(diǎn)、一個(gè)中心點(diǎn)，此時(shí)我們選中Button，在Canvas中心點(diǎn)位置會(huì)出現(xiàn)一個(gè)小雪花圖案，這就是Button在Canvas上的錨點(diǎn)，可用鼠標(biāo)拖動(dòng)它，且拖動(dòng)的過(guò)程中會(huì)實(shí)時(shí)顯示此錨點(diǎn)距上、下、左、右的比例，如下圖所示：并且在Button的Inspector面板中，單擊RectTransform中按鈕，會(huì)打開(kāi)一個(gè)Anchorpresets錨點(diǎn)調(diào)整窗，如下圖所示：假如我們單擊時(shí)，其錨點(diǎn)就會(huì)跑到Canvas的右上角，如下圖所示：同理單擊其他位置時(shí)，也就把錨點(diǎn)調(diào)整到相應(yīng)的位置上，即可把此錨點(diǎn)調(diào)整到畫(huà)布的中心點(diǎn)上、四個(gè)角上、四條邊的中點(diǎn)上。以上是錨點(diǎn)整體移位。事實(shí)上，我們還可以拖動(dòng)小雪花中的任意一個(gè)花瓣，使其分散成四個(gè)錨點(diǎn)，如下圖所示：當(dāng)我們單擊這個(gè)窗中的最右邊或最下邊中一些按鈕可將錨點(diǎn)分散在兩邊或上下或四個(gè)角點(diǎn)上。本來(lái)這個(gè)雪花狀的錨點(diǎn)是由四個(gè)錨點(diǎn)組成的復(fù)合體。說(shuō)了這么多，那它到底有什么用途呢？?jī)蓚€(gè)字，定位。如圖：，當(dāng)屏幕大小發(fā)生改變時(shí)，Button的四個(gè)角點(diǎn)與相應(yīng)的4個(gè)錨點(diǎn)的距離會(huì)保持不變，從而保證布局不會(huì)隨著屏幕大小或者分辨率的改變而改變，可相對(duì)有效地保證布局不會(huì)混亂，以達(dá)成屏幕自適應(yīng)的目的。但要注意，控件的錨點(diǎn)總是相對(duì)于自己的上一級(jí)來(lái)定義的。例如，我們?cè)僭谶@個(gè)Canmas中創(chuàng)建一個(gè)Panel并調(diào)小它的大小，在Panel中創(chuàng)建一個(gè)Text，我們?nèi)フ{(diào)節(jié)這個(gè)Text的錨點(diǎn)時(shí)我們將會(huì)發(fā)現(xiàn)這個(gè)錨點(diǎn)總是相對(duì)于Text的上一級(jí)Panel來(lái)定義與變換位置的。九、應(yīng)用：登錄界面在畫(huà)布上：兩個(gè)Text控件，分別命名為：Tex_UserName與txt_Password，其Text值分別為“用戶名稱：”與“登錄密碼：”兩個(gè)InputField控件，分別命名為：Inp_UserName與Inp_Password。這兩個(gè)輸入域控件是前面還沒(méi)有介紹的新控件，在其層級(jí)Hierarchy視圖將其展開(kāi)，可發(fā)現(xiàn)它也為一個(gè)復(fù)合控件，在主控件上還包含兩個(gè)子控件，一個(gè)為Placeholder與Text，其Text就是前面所介紹的文本控件，程序運(yùn)營(yíng)時(shí)用戶所輸入的內(nèi)容就保存在這個(gè)Text中，而Placeholder是占位符，它表達(dá)程序運(yùn)營(yíng)時(shí)在用戶還沒(méi)有輸入內(nèi)容時(shí)顯示給用戶的提醒信息，在這里我們把它設(shè)立為“請(qǐng)輸入…”，設(shè)立方法是在層級(jí)視圖中展開(kāi)這個(gè)InputField控件，選中其子控件Placeholder，在Inspecter視圖中可發(fā)現(xiàn)其Text(Sript)組件，修改其值為“請(qǐng)輸入…”即可，如下圖所示：InputField控件與其他控件同樣，也有Image(Script)組件，自身組件InputField(script)中也有變換Transition屬性，其默認(rèn)值也為顏色變換，除此之外，它有一個(gè)重要的屬性：ContentType（內(nèi)容類(lèi)型），有10個(gè)選項(xiàng)，如下圖：Standard：標(biāo)準(zhǔn)的Autocorrected：自動(dòng)修正IntegerNumber：整數(shù)DecimalNumber：十進(jìn)制小數(shù)Alphanumeric：字母數(shù)字Name：人名EmailAddress：郵箱Password：密碼Pin：Custom：定制的據(jù)此，我們把第一個(gè)InputField的內(nèi)容類(lèi)型設(shè)為第5個(gè)Alphanumeric：字母數(shù)字，第二個(gè)InputField的內(nèi)容類(lèi)型設(shè)為第8個(gè)Password：密碼，這樣程序就可啟用其自動(dòng)驗(yàn)證功能，例如在用戶名稱輸入框中假如你輸入的不是字母或數(shù)字則不能輸入進(jìn)去，第二個(gè)密碼框中輸入密碼時(shí)它會(huì)默認(rèn)以*號(hào)占位輸入的密碼。3、創(chuàng)建一個(gè)Text，用于顯示登錄是否成功等提醒信息用，在其Inspector視圖中，去掉其默認(rèn)顯示的內(nèi)容，即讓其才開(kāi)始運(yùn)營(yíng)時(shí)不顯示任何內(nèi)容，并把其BestFit勾選上，讓其提醒信息自適應(yīng)文本框的大?。?、最后創(chuàng)建一個(gè)提交按鈕，其整個(gè)界面如下圖所示：5、創(chuàng)建腳本（紅色部分為新增內(nèi)容）：usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;publicclassLogonSystem:MonoBehaviour{ publicTextTxt_DisplayInfo; publicInputFieldInp_Username; publicInputFieldInp_Password; //Usethisforinitialization voidStart(){ } publicvoidDisplayInfo(){ stringstrUserName=Inp_Username.text; stringstrPW=Inp_Password.text; if(CheckLogonInfo(strUserName,strPW)){ Txt_DisplayInfo.text="登錄成功!"; }else{ Txt_DisplayInfo.text="用戶名稱或登錄密碼錯(cuò)誤請(qǐng)重新輸入!"; } } privateboolCheckLogonInfo(stringstrUserName,stringstrPW){ boolReturnFlag=false; if(strUserName!=null&&strPW!=null){ if(strUserName.Trim().Equals("Admin")&&strPW.Trim().Equals("123456")){//兩個(gè)輸入框中的內(nèi)容去掉前后空格，假如用戶名稱為Admin、登錄密碼為123456時(shí)，則表達(dá)登錄，將ReturnFlag標(biāo)記為真true。 ReturnFlag=true; } } returnReturnFlag;}}腳本創(chuàng)建好了后，我們?cè)贖ierarchy中創(chuàng)建一個(gè)空對(duì)象，命名為_(kāi)LogonSystemEvent，對(duì)把這個(gè)腳本掛在它身上，并且在其Inspector視圖中，為其3個(gè)公共變量賦值（把相應(yīng)控件拖放到相應(yīng)變量的值框中）：運(yùn)營(yíng)程序，假如用戶名稱或密碼錯(cuò)誤，提醒信息框中會(huì)顯示：用戶名稱或登錄密碼錯(cuò)誤請(qǐng)重新輸入!，否則顯示：登錄成功！，如下圖所示：十、Toggle控件動(dòng)態(tài)事件Toggle：開(kāi)關(guān)，當(dāng)我們創(chuàng)建它后，可發(fā)現(xiàn)它也為一個(gè)復(fù)合型控件，它有Background與Label兩個(gè)子控件，而B(niǎo)ackground控件中尚有一個(gè)Checkmark子子控件，假如我們將其拖散可清楚地看見(jiàn)，Background是一個(gè)圖像控件，而其子控件Checkmark也是一個(gè)圖像控件，其Label控件是一個(gè)文本框，它們與我們所講的控件是一致的，我們通過(guò)改變它們所擁有的屬性值，即可改變Toggle的外觀，如顏色、字體等等。下面來(lái)看看Toggle的一些重要屬性。IsOn：目前是處在開(kāi)還是關(guān)。當(dāng)我們運(yùn)營(yíng)起來(lái)，用鼠標(biāo)點(diǎn)擊那個(gè)Toggle按鈕，將發(fā)現(xiàn)其中的對(duì)勾符號(hào)會(huì)在出現(xiàn)與不出現(xiàn)之間切換，同時(shí)與之相相應(yīng)的，在其Inspector面板中，屬性InOn后面的對(duì)勾也在勾選與不勾選之間切換。Graphic：圖像事實(shí)上，用鼠標(biāo)點(diǎn)擊那個(gè)Toggle按鈕，其對(duì)勾符號(hào)會(huì)在出現(xiàn)與不出現(xiàn)之間切換，它的原理就是控制那個(gè)對(duì)勾圖像出現(xiàn)與不出現(xiàn)而實(shí)現(xiàn)的，這個(gè)Graphic就是設(shè)立這個(gè)屬性值的，你可點(diǎn)擊最后那個(gè)設(shè)立按鈕，在出現(xiàn)的窗體中選擇此外的圖像如Background，同時(shí)將中的TargetGraphic的值設(shè)為Checkmark，即將它們兩者的值互換，將發(fā)現(xiàn)，當(dāng)我們點(diǎn)擊Toggle按鈕時(shí)，其對(duì)勾不會(huì)消失與出現(xiàn)，而是背景消失與出現(xiàn)。這樣做雖然沒(méi)有多大實(shí)用價(jià)值，但說(shuō)明Unity可以方便地控制這個(gè)按鈕的外觀。Group：組（單選框功能）在Hierarchy面板中，選中我們剛才創(chuàng)建的Toggle，然后按鍵盤(pán)Ctrl+D兩次，就可復(fù)制出兩個(gè)Toggle了，并在場(chǎng)景視圖中拖動(dòng)它們的位置，使它們都可見(jiàn)，運(yùn)營(yíng)，我們將發(fā)現(xiàn)這個(gè)三個(gè)都可選中，即它們是復(fù)選框。那么如何做出單選的效果呢？前面所創(chuàng)建的按鈕是獨(dú)立的，互不關(guān)聯(lián)，當(dāng)然就可獨(dú)自地選與不選。假如我們把這三個(gè)組成一個(gè)組，讓它們關(guān)聯(lián)，就可做成單選了。從Group屬性可看出它需要一個(gè)ToggleGroup。我們先在畫(huà)布上建立一個(gè)空對(duì)象，并命名為_(kāi)ToggleGroup，在其Inspector中單擊這個(gè)按鈕，為其添加組件，在彈出的菜單中選擇UI，在后續(xù)彈出菜單中選擇“ToggleGroup”，這樣我們就為此對(duì)象添加了ToggleGroup組件了。在Hierarchy中同時(shí)選中要成組的那3個(gè)Toggle，把已添加了ToggleGroup組件的_ToggleGroup拖到Inspector的中即可，這樣我們便把這3個(gè)Toggle成組了，于是它們3個(gè)就只能單選其中一個(gè)了。為了更完美，一方面調(diào)整空對(duì)象_ToggleGroup的位置與大小，讓其包含那3個(gè)Toggle控件，然后在Hierarchy中，把3個(gè)Toggle選中并拖到_ToggleGroup中成為子物體，這樣在邏輯上與外觀上均完備，且移動(dòng)父物體時(shí)子物體也會(huì)跟著移動(dòng)。Toggle控件動(dòng)態(tài)事件OnValueChanged(Boolean)這是Toggle的事件解決，它與Button的事件有所不同，下面來(lái)看看如何給Toggle添加事件。我們把Toggle的標(biāo)簽改成裝備名稱，再在場(chǎng)景中增長(zhǎng)一個(gè)顯示選取的裝備名的文本框：編寫(xiě)腳本：usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;publicclass_ToggleEvent:MonoBehaviour{ publicTextDisplay; privatestringinfo; //Usethisforinitialization voidStart(){ } publicvoidToggle1(boolisclik){ if(isclik){ info="屠龍寶刀"; Display.text=info; } } publicvoidToggle2(boolisclik){ if(isclik){ info="倚天劍"; Display.text=info; } } publicvoidToggle3(boolisclik){ if(isclik){ info="降龍十八掌"; Display.text=info; } }}在Canvas中創(chuàng)建一個(gè)空對(duì)象，把此腳本掛接到此對(duì)象上，并把場(chǎng)景中的Text賦給publicTextDisplay這個(gè)變量，然后分別選中那3個(gè)Toggle，在其檢視圖中單擊事件下的“+”號(hào)：，單擊后就為該控件添加了事件，如下圖：然而，事件要委托給一對(duì)象，現(xiàn)在還沒(méi)有，顯示的是，此時(shí)把已經(jīng)掛接上了腳本的那個(gè)空對(duì)象拖放到此處，便委托事件解決對(duì)象了，如下圖所示：有了事件解決對(duì)象，但還沒(méi)有指定方法，此時(shí)單擊會(huì)出現(xiàn)下圖所示的菜單：鼠標(biāo)指向我們?yōu)榇藢?duì)象所掛的腳本名_ToggleEvent時(shí)就會(huì)繼續(xù)展開(kāi)一個(gè)菜單，其中就有我們?cè)诖四_本中編寫(xiě)的方法Toggle1(bool)、Toggle2(bool)、Toggle3(bool)。這個(gè)菜單與Button的有所不同了，Button的如下圖所示：比較這兩個(gè)菜單可發(fā)現(xiàn)Toggle多了上面的那部分：下面的是靜態(tài)方法，上面的是動(dòng)態(tài)事件，是系統(tǒng)自動(dòng)生成，其bool型參數(shù)已被封裝在其中了，此時(shí)我們不能象Button那樣去選擇其靜態(tài)方法了，而要選擇與之相應(yīng)的動(dòng)態(tài)事件才可正常運(yùn)營(yíng)了。Toggle與Button在事件解決上的的區(qū)別不只是上面所談到的那一點(diǎn)，尚有其他區(qū)別，如：Button事件組件面板的上部顯示的是Toggle事件組件面板的上部顯示的是Button是當(dāng)Button被單擊時(shí)發(fā)生，Toggle是當(dāng)Toggle選中與不選中（即其值發(fā)生改變）時(shí)發(fā)生，且尚有一個(gè)布爾型參數(shù)，選中時(shí)傳進(jìn)給參數(shù)的值為真，反之為假，所以在前面腳本編寫(xiě)中，其方法里我們要設(shè)立相應(yīng)的布爾型參數(shù)來(lái)接受這個(gè)值： publicvoidToggle1(boolisclik){ if(isclik){ info="屠龍寶刀"; Display.text=info; } }根據(jù)上面的分析可知，Toggle選中與取消選中時(shí)都會(huì)產(chǎn)生事件，那么在一組單選按鈕組中，當(dāng)我們點(diǎn)選另一個(gè)按鈕同時(shí)會(huì)取消前一個(gè)按鈕的選擇，那么這兩個(gè)按鈕就都會(huì)產(chǎn)生事件，為了證明這一點(diǎn)，我們將前面的腳本稍作改變： publicvoidToggle1(boolisclik){ print("屠龍寶刀");if(isclik){ info="屠龍寶刀"; Display.text=info; } } publicvoidToggle2(boolisclik){ print(倚天劍");if(isclik){ info="倚天劍"; Display.text=info; } } publicvoidToggle3(boolisclik){print(“降龍十八掌"); if(isclik){ info="降龍十八掌"; Display.text=info; } }以前的代碼是當(dāng)選中即isclik為真時(shí)才顯示相關(guān)信息，而取消選中，雖然事件也產(chǎn)生，但因isclik為假，所以不會(huì)顯示信息，所以我們便覺(jué)察不出來(lái)，而現(xiàn)在加上了一個(gè)print語(yǔ)句，這樣只要事件發(fā)生了，就都會(huì)在后臺(tái)里打印出相關(guān)信息來(lái)，如下圖所示：這是初次運(yùn)營(yíng)選中“屠龍寶刀”時(shí)的情況。接著我們選中“倚天劍”時(shí)，“屠龍寶刀”也被取消，“倚天劍”與“屠龍寶刀”都產(chǎn)生了事件，所以會(huì)打印出各自的信息。再在這基礎(chǔ)上選中“降龍十八掌”，“倚天劍”被取消，同時(shí)“倚天劍”與“降龍十八掌”均產(chǎn)生了事件，所以倚天劍與降龍十八掌相關(guān)信息都會(huì)打印出來(lái)。以上就是Toggle的事件解決機(jī)制，假如我們Toggle不是單選而是復(fù)選，那么我們又如何在那個(gè)文本框中顯示出多選信息呢？這個(gè)問(wèn)題看似很難，事實(shí)上很簡(jiǎn)樸，代碼如下： publicvoidToggle1(boolisclik){if(isclik){ info+="屠龍寶刀"; Display.text=info; } } publicvoidToggle2(boolisclik){if(isclik){ info+="倚天劍"; Display.text=info; } } publicvoidToggle3(boolisclik){ if(isclik){ info+="降龍十八掌"; Display.text=info; } }把info的賦值符號(hào)=變成+=，這樣就把info的值累加起來(lái)了，也就記錄下了多選值了。這雖然簡(jiǎn)樸，但不完善，假如先選中，然后又去掉，但先添加進(jìn)去的值卻不會(huì)去掉，這需要進(jìn)一步地解決才行。事件運(yùn)營(yíng)模式在事件組件面板中，第一個(gè)選項(xiàng)框中的值我們?cè)贐utton時(shí)就是一直使用的是其默認(rèn)值：RuntimeOnly，如下圖所示：當(dāng)我們單擊該選項(xiàng)時(shí)，出現(xiàn)的下拉菜單如下：Off：關(guān)閉事件解決功能；EditorAndRuntime：編輯與運(yùn)營(yíng)時(shí)，其事件解決功能均起作用；RuntimeOnly：僅在運(yùn)營(yíng)時(shí)，其事件解決功能才起作用。我們假設(shè)把Toggle1方法改成如下所示：publicvoidToggle1(boolisclik){ print("屠龍寶刀"); info="屠龍寶刀"; Display.text=info; }然后把第一個(gè)Toggle的事件解決對(duì)象及方法置空，并把事件運(yùn)營(yíng)模式變?yōu)镋ditorAndRuntime，此時(shí)再為它添加事件對(duì)象及方法，我們將發(fā)現(xiàn)在添加結(jié)束后，其事件便立即發(fā)揮作用了，如下圖所示，當(dāng)然程序運(yùn)營(yíng)時(shí)也能發(fā)揮其功效的，這就是“編輯與運(yùn)營(yíng)時(shí)，其事件解決功能均起作用”的意思。此功能可認(rèn)為我們程序員提供預(yù)覽、事前先知的功能，方便我們編輯。十一、Slider控件（滑動(dòng)條）Slider也是一個(gè)復(fù)合控件，Background是背景，默認(rèn)顏色是白色，我們保持不變；FillArea是填充區(qū)域，其子控件Fill中只有一個(gè)Image(Script)專(zhuān)有組件，假設(shè)我們將其顏色改為紅色；HandleSliceArea中的子控件Handle（手柄）中也只有一個(gè)Image(Script)專(zhuān)有組件，假設(shè)我們將其顏色改為黃色，那么Slider的外觀為：當(dāng)我們?cè)贖ierarchy中選中Slider控件，其Inspector中的Slider(Script)屬性面板如下圖所示：上部的Interactable、Transition與前面介紹的控件是差不多的，下面談?wù)勊赜械囊恍傩裕篎illRect：填充矩形區(qū)域HandleRect：手柄矩形區(qū)域Direction：Slider的擺放方向，可以從左到右、從右到左、從上到下、從下到上MinValue：最小數(shù)值MaxValue：最大數(shù)值WholeNumbers：整數(shù)數(shù)值。假設(shè)我們將MinValue設(shè)為1，MaxValue設(shè)為100，那么調(diào)節(jié)手柄時(shí)，相應(yīng)的值在1到100之間，并且是一個(gè)小數(shù)，如55.67，有時(shí)我們希望它是整數(shù)，那么選中該項(xiàng)即可。上面的后4項(xiàng)Direction、MinValue、MaxValue、WholeNumbers都比較好理解，而前2項(xiàng)FillRect與HandleRect較困難，下面我們做一個(gè)實(shí)驗(yàn)便可知其意義了。我們?cè)賱?chuàng)建一個(gè)Slider控件并命名為Slider2，并把其所有子控件的名字改成在其默認(rèn)名后加2的名字，再把先前的那個(gè)Slider改名為Slider1，也把其所有子控件的名字改成在其默認(rèn)名后加1的名字，如下圖：此時(shí)我們先選中Slider2，然后把Slider1的子子控件Fill1拖到Slider2的FillRect中，如圖：運(yùn)營(yíng)程序，當(dāng)我們調(diào)節(jié)Slider2的手柄時(shí)，我們將發(fā)現(xiàn)Slider1的填充區(qū)域在發(fā)生變化，為什么呢？由于默認(rèn)情況下Slider2的FillRect是它自己的Fill2，而我們現(xiàn)在把Slider1的Fill1賦給了它，作為它現(xiàn)在的FillRect對(duì)象，所以就會(huì)出現(xiàn)此種情況，這就是FillRect的功效。在上面的實(shí)驗(yàn)中，我們把Slider1用來(lái)做顯示，Slider2用來(lái)控制，假如能把Slider1中黃色手柄隱藏起來(lái)就更好了：這也是能做到的，我們選中Slider1的子子控件Handle1，在其Inspector視圖中，將其Image(Script)前面的對(duì)勾去掉，這樣就不會(huì)顯示那個(gè)手柄了：3、Slider的動(dòng)態(tài)事件假設(shè)我們想在拖動(dòng)手柄的時(shí)候，讓其值顯示在右邊的一個(gè)文本框中，如下圖所示：這就要用到Slider的動(dòng)態(tài)事件了指的是Slider的滑塊滑動(dòng)其值發(fā)生改變時(shí)而產(chǎn)生的動(dòng)態(tài)事件，它有一個(gè)參數(shù)Single：?jiǎn)尉?，事?shí)上這里指的是float，整個(gè)事件的機(jī)理是，當(dāng)滑動(dòng)滑塊時(shí)，其值發(fā)生改變，事件產(chǎn)生，并且會(huì)實(shí)時(shí)將滑塊所相應(yīng)的值傳給此事件，保存在這個(gè)參數(shù)中，供程序使用。根據(jù)此原理，我們建立下列腳本SliderDemo：usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;publicclassSliderDemo:MonoBehaviour{ publicTextTxt_diaplayValues; //Usethisforinitialization voidStart(){ } publicvoidDisplaySliderNumber(floatfloValues){ Txt_diaplayValues.text=floValues.ToString(); }}然后在場(chǎng)景中創(chuàng)建一個(gè)空對(duì)象，把此腳本作為組件掛在這個(gè)空對(duì)象上，再在場(chǎng)景中創(chuàng)建一個(gè)文本框，并賦給 publicTextTxt_diaplayValues變量。最后一步就是注冊(cè)事件了，單擊中的“+”按鈕，為其添加事件，把前面創(chuàng)建的并已掛上腳本的那個(gè)空對(duì)象拖到中為其委托事件解決對(duì)象，再指定事件方法，單擊：選擇腳本名SliderDemo中的方法DisplaySliderNumber，但是這里不能選擇DisplaySliderNumber(float)，而要選上面的DisplaySliderNumber動(dòng)態(tài)事件（其因素請(qǐng)見(jiàn)前一節(jié)的敘述）。運(yùn)營(yíng)程序就可達(dá)成規(guī)定了。十二、ScrollBar控件（滾動(dòng)條）其屬性：與前面的Slider差不多，動(dòng)態(tài)事件也是同樣的，這里就只談其特有的屬性：Value：當(dāng)拖支滑塊時(shí)，其值是在0到1之間變化的Size：是滑塊的大小，假如把它改成0.5，滑塊就會(huì)大到占滑條的一半大。NumberOfSteps：數(shù)值的環(huán)節(jié)。假設(shè)設(shè)定為5，那么就會(huì)把Value提成5個(gè)值，調(diào)節(jié)滑塊時(shí)其值就在這5個(gè)值中變化。十三、一個(gè)簡(jiǎn)樸的游戲主界面右邊藍(lán)底色中的“生化危機(jī)”為T(mén)ext；開(kāi)始、設(shè)立、結(jié)束為Button，并加上簡(jiǎn)樸的幀動(dòng)畫(huà)Highlighted（HYPERLINK見(jiàn)前面的動(dòng)畫(huà)過(guò)渡）左邊淡黃底色區(qū)域?yàn)槊姘錺anel，它為父控件，其中所包含的所有控件均為它的子控件，游戲難度下的三個(gè)選擇鈕為單選按鈕組，其設(shè)立方法請(qǐng)HYPERLINK參見(jiàn)前面Group。這個(gè)面板，通常情況下是不可見(jiàn)的，當(dāng)單擊“設(shè)立”按鈕時(shí)面板從左外側(cè)滑入而可見(jiàn)，進(jìn)行設(shè)立后單擊面板中的“擬定”按鈕后，面板又滑出到左外側(cè)處在不可見(jiàn)狀態(tài)。這是一個(gè)動(dòng)畫(huà)，其設(shè)立方法與Button動(dòng)畫(huà)相似，但它不是運(yùn)用Button那種自動(dòng)生成動(dòng)畫(huà)的方法而建立的。下面我們先來(lái)建立面板的動(dòng)畫(huà)過(guò)程：一方面，在Hierarchy面板中選中要建立動(dòng)畫(huà)的Panel，單擊主菜單Window中的Animation（注意不是Animator）出現(xiàn)Animation窗口：此時(shí)單擊頂端最左側(cè)紅色按鈕，它為動(dòng)畫(huà)錄制按鈕，會(huì)彈出一個(gè)對(duì)話框，規(guī)定為將要錄制的動(dòng)畫(huà)選擇保存位置與動(dòng)畫(huà)的名稱，如下圖：假設(shè)我們將此動(dòng)畫(huà)保存在Assets下的_Animation文獻(xiàn)夾中，并取名為ShowPanel.anim，單擊保存后，其界面如下：錄制的動(dòng)畫(huà)是面板從不可見(jiàn)到可見(jiàn)的顯示動(dòng)畫(huà)，那么在第0幀時(shí)面板是不見(jiàn)的，所以此時(shí)把面板水平向左拖動(dòng)到畫(huà)布的左外側(cè)，如下圖所示：動(dòng)畫(huà)錄制機(jī)會(huì)記錄下此時(shí)對(duì)象的位置，其Inspector面板中的RectTransform參數(shù)會(huì)發(fā)生改變：，即在第0幀時(shí)，面板在X：-140，Y：-1.3751e-05處。接下來(lái)我們把幀數(shù)框中的幀數(shù)改為60幀，即設(shè)立第60幀時(shí)面板的位置（設(shè)為60幀的因素是，面板從第0幀的位置變化到第60幀的位置時(shí)其動(dòng)畫(huà)時(shí)間大約為1秒鐘），此時(shí)錄制面板中的那條紅色豎線將移動(dòng)到1:00處，如下圖：根據(jù)動(dòng)畫(huà)設(shè)計(jì)規(guī)定，此時(shí)面板應(yīng)當(dāng)是完全可見(jiàn)的，所以我們把面板水平向右拖到畫(huà)布中，動(dòng)畫(huà)錄制機(jī)同樣會(huì)記錄下此時(shí)面板的位置，其設(shè)立窗口如下圖：我們還可發(fā)現(xiàn)，在現(xiàn)在位置的紅線處會(huì)出現(xiàn)象0幀處的關(guān)鍵幀圖標(biāo)：。我們?cè)谏蠁螕粢幌拢湔归_(kāi)圖如下：展開(kāi)的那兩項(xiàng)分別表達(dá)在此過(guò)程中，對(duì)象在X軸上位移了131，Y軸上為0。從底部的處可見(jiàn)，現(xiàn)在的視圖是DopeSheet（關(guān)鍵幀清單），當(dāng)點(diǎn)擊Curves（曲線）時(shí)，會(huì)轉(zhuǎn)換為曲線視圖，如下圖假如曲線過(guò)大顯示不全或過(guò)小看不清時(shí)，可調(diào)節(jié)鼠標(biāo)中鍵滑輪，縮放曲線到適當(dāng)大小。圖中水平綠色線所包含的區(qū)域即為動(dòng)畫(huà)區(qū)域，曲線上的紅色點(diǎn)為關(guān)鍵幀點(diǎn)，可看出此動(dòng)畫(huà)只有兩個(gè)關(guān)鍵幀，用鼠標(biāo)單擊關(guān)鍵幀時(shí)，Scene視圖中的面板就會(huì)移動(dòng)到所設(shè)立的位置上。設(shè)立好后，單擊紅色的錄制按鈕一下，即可停止錄制且保存動(dòng)畫(huà)。這是顯示面板的動(dòng)畫(huà)，下面我們來(lái)設(shè)計(jì)隱藏面板的動(dòng)畫(huà)。單擊已經(jīng)顯示出剛才錄制的動(dòng)畫(huà)名為ShowPanel這個(gè)框右邊的按鈕，彈出：?jiǎn)螕鬧CreateNewClip]，創(chuàng)建一個(gè)新的動(dòng)畫(huà)剪輯，此時(shí)會(huì)同樣彈出一個(gè)規(guī)定你為新動(dòng)畫(huà)取名以及選擇保存途徑的對(duì)話窗，假設(shè)我們?yōu)榇藙?dòng)畫(huà)取名為HidePanel.anim，途徑與前一個(gè)動(dòng)畫(huà)相同，其后的動(dòng)畫(huà)設(shè)計(jì)與前邊同樣，只但是第0幀時(shí)，面板在畫(huà)布上，第60幀時(shí)，面板在畫(huà)布外。動(dòng)畫(huà)創(chuàng)建結(jié)束后，即可直接關(guān)閉錄制窗體，系統(tǒng)會(huì)自動(dòng)保存動(dòng)畫(huà)文獻(xiàn)?；氐较到y(tǒng)界面下，在Project視圖中的我們事先設(shè)定的保存動(dòng)畫(huà)的_Animator文獻(xiàn)夾下將會(huì)新增三個(gè)文獻(xiàn)：，并且在Hierarchy視圖中選中已設(shè)立了動(dòng)畫(huà)的控件Panel，在其Inspector視圖中將發(fā)現(xiàn)系統(tǒng)會(huì)為其自動(dòng)增長(zhǎng)動(dòng)畫(huà)組件Animator。好了，萬(wàn)事具有，運(yùn)營(yíng)程序，但發(fā)現(xiàn)那個(gè)面板的顯示動(dòng)畫(huà)會(huì)不斷地反復(fù)播放，其因素是其LoopTime的屬性值為T(mén)rue，假如設(shè)為False即可去掉其默認(rèn)的自動(dòng)播放特性。方法為，在Project視圖中選中動(dòng)畫(huà)，然后在其Inspector視圖中，把后的鉤去掉即可（同理，其HidePanel動(dòng)畫(huà)也做這樣的解決），但程序運(yùn)營(yíng)時(shí)，面板雖不會(huì)反復(fù)播放顯示動(dòng)畫(huà)了，但它會(huì)播放一次，這與我們的設(shè)計(jì)初衷不符，我們的初衷是程序運(yùn)營(yíng)時(shí)不顯示面板，當(dāng)我們點(diǎn)擊設(shè)立按鈕后才會(huì)顯示面板，點(diǎn)擊面板中的擬定按鈕后，隱藏面板。要達(dá)成這種功能，就要設(shè)立動(dòng)畫(huà)狀態(tài)機(jī)中的一些屬性以及配合使用腳本才干完畢。一方面，讓動(dòng)畫(huà)不自動(dòng)播放。在Hierarchy視圖中選中設(shè)立了動(dòng)畫(huà)的控件Panel，可發(fā)現(xiàn)其Inspector視圖中Animator組件中的第一個(gè)屬性Controller（控制器，也稱動(dòng)畫(huà)狀態(tài)機(jī)）的值為前邊錄制的動(dòng)畫(huà)：Panel，如圖：，單擊其后的設(shè)立按鈕可更改為其他動(dòng)畫(huà)，但是這里是不需更改的，我們雙擊動(dòng)畫(huà)框中的已有的動(dòng)畫(huà)Panel，會(huì)打開(kāi)Animator窗口：其中有兩個(gè)按鈕代表的就是按鈕文字所指示的動(dòng)畫(huà)剪輯：ShowPane、HidePanel，即現(xiàn)在這個(gè)Panel動(dòng)畫(huà)里有兩個(gè)動(dòng)畫(huà)剪輯。我們?cè)诿姘宓目瞻椎胤絾螕羰髽?biāo)右鍵：，選擇第一項(xiàng)CreateState中的Empty，創(chuàng)建一個(gè)空動(dòng)畫(huà)，其默認(rèn)名為NewState，如圖：在NewState上點(diǎn)右鍵，在彈出的中選第二項(xiàng)SetAsDefault，即設(shè)立這個(gè)空動(dòng)畫(huà)為默認(rèn)播放的動(dòng)畫(huà)，既然為空動(dòng)畫(huà)，自然就不會(huì)播放動(dòng)畫(huà)，經(jīng)此設(shè)立后的窗口如下圖所示：比較設(shè)立前后兩圖可發(fā)現(xiàn)，代表默認(rèn)動(dòng)畫(huà)的按鈕的顏色為黃紅色。即哪個(gè)按鈕為黃紅色，那個(gè)動(dòng)畫(huà)剪輯就是當(dāng)前動(dòng)畫(huà)播放時(shí)的狀態(tài)位置，動(dòng)畫(huà)狀態(tài)機(jī)的命名來(lái)源也許就是這個(gè)因素。經(jīng)此設(shè)立后，再次運(yùn)營(yíng)程序，就不會(huì)有動(dòng)畫(huà)播放了。但也許你會(huì)發(fā)現(xiàn)那個(gè)面板仍然顯示出來(lái)了，出現(xiàn)這種情況，不是動(dòng)畫(huà)導(dǎo)致的，因現(xiàn)在雖然沒(méi)有動(dòng)畫(huà)，但那個(gè)面板本來(lái)是存在的，當(dāng)然要顯示出來(lái)，假如想要它一開(kāi)始就不顯示，我們只需在場(chǎng)景編輯視圖中將其位置拖到畫(huà)布之外即可達(dá)成目的，如下圖：通常情況下，一個(gè)動(dòng)畫(huà)里有許多的動(dòng)畫(huà)剪輯，到底播放哪個(gè)動(dòng)畫(huà)，是動(dòng)畫(huà)狀態(tài)機(jī)來(lái)決定的。這個(gè)界面就是動(dòng)畫(huà)狀態(tài)機(jī)界面，它表達(dá)現(xiàn)在的動(dòng)畫(huà)播放的是它中的哪個(gè)動(dòng)畫(huà)剪輯。那么，我們有什么辦法來(lái)控制動(dòng)畫(huà)狀態(tài)，或者說(shuō)讓動(dòng)畫(huà)在不同的剪輯中交替轉(zhuǎn)換呢？我們?cè)凇癗ewState”上單擊鼠標(biāo)右鍵，選擇第一項(xiàng)MakeTransition（設(shè)立轉(zhuǎn)換），然后直接移動(dòng)鼠標(biāo)，將會(huì)出現(xiàn)一個(gè)帶前頭的連線，再在”ShowPanel”上單擊鼠標(biāo)左鍵，即可在這兩個(gè)動(dòng)畫(huà)剪輯上建立轉(zhuǎn)換聯(lián)接：，這個(gè)連線表達(dá)，當(dāng)滿足某個(gè)條件時(shí)，就可由播放剪輯NewState變成播放剪輯ShowPanel，即使ShowPanel處在播放狀態(tài)。這個(gè)條件又在哪里設(shè)立呢？單擊右邊的“+”按鈕，在彈出的中選Bool，即設(shè)立一個(gè)布爾型參數(shù)，并把此參數(shù)假設(shè)命名為IsDiaplay，如圖。設(shè)立好參數(shù)后，用鼠標(biāo)單擊那根連接線，它將變成藍(lán)色，表達(dá)選中，如圖：接下來(lái)，在其Inspector視圖中的Conditions設(shè)立條件變量為剛才建立的IsDiaplay，條件值為true，如下圖：其意思為，當(dāng)IsDiaplay為真true時(shí)，動(dòng)畫(huà)播放狀態(tài)由NewState轉(zhuǎn)變?yōu)镾howPanel。同理，可設(shè)立由HidePanel到ShowPanel轉(zhuǎn)變條件也為當(dāng)IsDiaplay為真true時(shí)。這兩步設(shè)立的結(jié)果我們可以這樣理解，當(dāng)IsDiaplay為真true時(shí)，動(dòng)畫(huà)播放狀態(tài)處在NewState或HidePanel時(shí)，都將轉(zhuǎn)到去播放ShowPanel。依此類(lèi)推，當(dāng)IsDiaplay為假false時(shí)，動(dòng)畫(huà)播放狀態(tài)假如處在ShowPanel時(shí)，將轉(zhuǎn)到去播放HidePanel。這樣其動(dòng)畫(huà)狀態(tài)我們就設(shè)定完了，如下圖：接下來(lái)我們運(yùn)用腳本去改變那個(gè)變量的值，就可實(shí)時(shí)控制動(dòng)畫(huà)的播放了。腳本內(nèi)容如下（紅色部分為增長(zhǎng)的腳本內(nèi)容）：usingUnityEngine;usingSystem.Collections;publicclassSettingPanelDisplay:MonoBehaviour{ publicAnimatorAni_SetPanel; voidStart(){ } publicvoidShowPanel(){ Ani_SetPanel.SetBool("IsDiaplay",true); } publicvoidHidePanel(){ Ani_SetPanel.SetBool("IsDiaplay",false); }}在場(chǎng)景中創(chuàng)建一個(gè)空對(duì)象，把腳本掛在它身上，并在Inspector視圖中把Hierarchy中的Panel賦給Ani_SetPanel，如圖：。腳本中Ani_SetPanel變量是Animator類(lèi)型，為什么可以把控件Panel賦值給它呢？道理是Panel控件已有了Animator組件，程序會(huì)自動(dòng)抽取其中的Animator出來(lái)賦值給變量Ani_SetPanel。Ani_SetPanel.SetBool("IsDiaplay",true);其中的IsDiaplay就是在狀態(tài)機(jī)中增設(shè)的參數(shù)，其拼寫(xiě)必須與狀態(tài)機(jī)中的完全一致，否則不能運(yùn)營(yíng)。最后設(shè)定“設(shè)立”與“擬定”兩個(gè)按鈕的委托事件，具體設(shè)定過(guò)程請(qǐng)參見(jiàn)前面的HYPERLINKButton事件。至此，這個(gè)簡(jiǎn)樸的游戲主界面便創(chuàng)建竣工，可運(yùn)營(yíng)程序查看效果了。十三、高級(jí)控件滑動(dòng)區(qū)域ScrollRect滑動(dòng)區(qū)域控件ScrollRect是在一個(gè)較社區(qū)域顯示較多內(nèi)部控件的一種機(jī)制。在UI系統(tǒng)中，這種控件的原型是沒(méi)有的，它是我們開(kāi)發(fā)者運(yùn)用UI系統(tǒng)里已有的基本控件組合而成的。但是在UI系統(tǒng)里有ScrollRect這個(gè)類(lèi)，即它是一個(gè)組件，不是控件?？丶c組件有什么區(qū)別呢？簡(jiǎn)樸地說(shuō)，在一個(gè)控件里可以添加組件，如在Button上可添加Animator組件。有些控件在創(chuàng)建時(shí)，它會(huì)默認(rèn)自帶一些組件，如Panel會(huì)自帶Image組件，如圖：，其帶括號(hào)的Script就表達(dá)這個(gè)Image是組件，因在UI系統(tǒng)里有Image這個(gè)基本控件的，故加上一個(gè)帶括號(hào)的Script來(lái)區(qū)別控件與組件，說(shuō)明此處的Image是組件而不是控件。同理，當(dāng)我們創(chuàng)建一個(gè)Button控件時(shí)，默認(rèn)情況下我們可以在其Inspector視圖里發(fā)現(xiàn)它帶有Image與Button兩個(gè)組件的，如下圖：因在UI系統(tǒng)里有Image、Button這些基本控件，這里加上(Script)說(shuō)明這個(gè)Image、Button不是控件而是組件。這仿佛有點(diǎn)混，怎么Button控件里具有Button組件呢？事實(shí)上我們可以這樣理解，組件是一個(gè)腳本，是一個(gè)類(lèi)，控件是這個(gè)類(lèi)的實(shí)例化對(duì)象，是一個(gè)具體實(shí)現(xiàn)，所以Button控件里具有Button組件就好理解了。再一個(gè)，類(lèi)之間可以繼承，所以一個(gè)控件可以包含多個(gè)不同類(lèi)型的組件。根據(jù)上面的敘述，ScrollRect是待開(kāi)發(fā)者自己去建立的控件，我們姑且把它稱作隱形控件。下面我們來(lái)創(chuàng)建這個(gè)控件。創(chuàng)建一個(gè)畫(huà)布Canvas，在畫(huà)布上創(chuàng)建兩個(gè)空對(duì)象，其中一個(gè)命名為ScrollRect，另一個(gè)命名為Content，再創(chuàng)建一個(gè)Scrollbar。調(diào)整它們的大小與位置，大體如下：CanvasContentScrollbarScrollRectCanvasContentScrollbarScrollRect在Content上創(chuàng)建幾個(gè)子對(duì)象，這里我們創(chuàng)建4個(gè)Button，并調(diào)整它們的位置，使它們平鋪在Content中，同時(shí)設(shè)立Button的Image的SourceImage的值（掛上圖片，普通圖像掛不上，應(yīng)轉(zhuǎn)換成精靈，請(qǐng)參見(jiàn)HYPERLINK前面的Image）。組裝ScrollRect：3個(gè)組件2個(gè)屬性添加ScrollRect組件：選中空對(duì)象ScrollRect，在其Inspector視圖中單擊“AddComponent”按鈕，選擇UI中的ScrollRect，這樣便為這個(gè)空對(duì)象添加上了ScrollRect組件。此組件里有2個(gè)重要屬性Content、HorezontalScrollbar，其功能簡(jiǎn)樸說(shuō)是用滑動(dòng)條的滑動(dòng)去控制內(nèi)容區(qū)域的移動(dòng)。根據(jù)此原理我們把Hierarchy視圖中的Content與Scrollbar分別拖掛到這兩屬性值框中即完畢了對(duì)象的指定工作。試運(yùn)營(yíng)程序并拖動(dòng)滑動(dòng)條，發(fā)現(xiàn)Content中4個(gè)按鈕圖片的確能隨著滑動(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中的HorezontalScrollbar已完備，但當(dāng)我們運(yùn)營(yíng)時(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ì)顯示相應(yīng)的內(nèi)容版面。1、在畫(huà)布上創(chuàng)建一個(gè)空對(duì)象，命名為L(zhǎng)able，創(chuàng)建一個(gè)Image，布局上Lable在上面，Image在下面，如下圖：2、在Lable中創(chuàng)建三個(gè)子控件，它們均為T(mén)oggle，命名為T(mén)oggle1、Toggle2、Toggle3，并調(diào)整它們的Background與Checkmark，使其看起來(lái)像按鈕：調(diào)整方法：Background是背景，是未被選中時(shí)表現(xiàn)出來(lái)的圖景。一方面在場(chǎng)景視圖中將其大小調(diào)大，使其與整個(gè)按鈕形狀同樣大，然后在其Inspector視圖中的Image組件里設(shè)立SourceImage或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è)立SourceImage或Color屬性值，這里為了簡(jiǎn)便，將Image組件里的SourceImage屬性設(shè)為空None，即去掉那個(gè)對(duì)鉤圖像，并將其Color值設(shè)為較亮的灰度色，用于它被選中時(shí)展現(xiàn)出來(lái)的顏色。這三個(gè)按鈕狀的Toggle按設(shè)計(jì)思緒應(yīng)當(dāng)為單選，所以按以前所學(xué)的知識(shí)，需設(shè)立它們的Group屬性值為L(zhǎng)able，同時(shí)，對(duì)于它們的IsOn屬性，第一個(gè)Toggle的保持勾選，另兩個(gè)去掉勾選，即使開(kāi)始時(shí)，第一個(gè)處在默認(rèn)選中狀態(tài)。3、在Image上創(chuàng)建三個(gè)為空的子控件，分別命名為Page1、Page2、Page3，并調(diào)整它們的大小，使其與Image同樣大，位置上與Image重疊。再在Page1、Page2、Page3上各自創(chuàng)建一個(gè)Text子控件，也調(diào)整它們的大小大體與Image相稱，且位置上也與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ā)生顯示的重疊了。4、最后一步我們來(lái)實(shí)現(xiàn)當(dāng)我們點(diǎn)擊頂部不同的標(biāo)簽時(shí)，下部的內(nèi)容區(qū)域會(huì)顯示相應(yīng)的內(nèi)容版面。也許你會(huì)認(rèn)為這要用到腳本，事實(shí)上有更簡(jiǎn)便的方法，當(dāng)然會(huì)離不開(kāi)事件解決機(jī)制的。下面以Toggle1為例，選中它，在其Inspetctor視圖中，單擊：中的“+”號(hào)，為其添加事件，如下圖：委托事件解決對(duì)象，這里我們把Page1拖給如下圖：指定事件解決方法：雖然我們沒(méi)有編寫(xiě)自己的腳本，但Unity有內(nèi)置的許多方法的，這里我們選擇第二項(xiàng)GameObject：選擇上邊的動(dòng)態(tài)方法：SetActive，設(shè)立結(jié)果如下圖：這個(gè)事件的運(yùn)營(yíng)機(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ì)顯示相應(yīng)的內(nèi)容版面了，如下圖：十五、大型游戲案例UI開(kāi)發(fā)1、結(jié)構(gòu)搭建在Project中建立一些文獻(xiàn)夾我們這里先把一些貼圖導(dǎo)進(jìn)Sprits中，并把它們轉(zhuǎn)化為Sprint，其轉(zhuǎn)化方法請(qǐng)參見(jiàn)前面的HYPERLINKImage控件中的圖像精靈。2、配置Canvas參數(shù)在Hierarchy中創(chuàng)建UI畫(huà)布Canvas，其Inspector中的Canvas、CanvasScaler(Script)設(shè)立如下：Canvas：RenderMode：渲染模式設(shè)為ScreenSpace–Came，這種模式可在畫(huà)布與攝像機(jī)之間放三維物體，做出更絢麗的界面。RenderCamera：既然渲染模式為ScreenSpace–Came，那么在此處就需為此設(shè)立渲染所用的攝像機(jī)了，我們把Hierarchy中的主攝像機(jī)更名為UICamera后并拖到此處，為此指定渲染所用的攝像機(jī)。PlaneDistance：直譯過(guò)來(lái)為“平面距離”，這里表達(dá)的是畫(huà)布距攝像機(jī)的距離，默認(rèn)為100個(gè)單位，雖然距離越大，在畫(huà)布與攝像機(jī)之間所放的三維物體越多，但一般設(shè)成200個(gè)單位，這里我們?cè)O(shè)成200。CanvasScaler(Script)：UiScaleMode：選第2項(xiàng)，自適應(yīng)屏幕寬。ReferenceResolution：參考分辨率，應(yīng)根據(jù)應(yīng)用情況而定，這里我們?cè)O(shè)成800×600，即畫(huà)布的大小寬為800像素，高為600像素。ScreenMatchMode：屏幕自適應(yīng)模式，選第1項(xiàng)，3、創(chuàng)建背景在畫(huà)布上創(chuàng)建一個(gè)Image控件，命名為Background，并為其賦值一個(gè)Sprits貼圖作為背景圖：此圖看起來(lái)會(huì)是朦朧的，究其因素是因其默認(rèn)為半透明狀，將其設(shè)為不透明，即可解決。方法為單擊：，會(huì)彈出：其中的R、G、B表達(dá)紅綠藍(lán)顏色，最后一項(xiàng)A代表的就是透明度，將其滑塊拖到最右，如上圖右，即設(shè)成了不透明，返回后其效果如下圖：4、創(chuàng)建供滑動(dòng)用的系列面板再在畫(huà)布上建立一個(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中的RectTransform中設(shè)立Left為800，Right為-800，即可將Panel1精確地調(diào)整到MainPanel的右邊第一個(gè)位置上。這里的Left、Right的值800、-800如何理解？我們以下列三個(gè)系列圖來(lái)說(shuō)明這個(gè)問(wèn)題：下圖中的第1個(gè)，我們是在畫(huà)布Canvas上創(chuàng)建一個(gè)面板Panel，并調(diào)整它的大小，使這個(gè)Panel的Left、Top、Right、Bottom分別為200、100、220、120，從圖示就可看出它們分別表達(dá)子控件Panel的邊與父控件Canvas相相應(yīng)邊之間的距離，這個(gè)距離的單位為像素。假如畫(huà)布設(shè)立的參考分辨率為800×600，即寬800像素，高600像素，那么大家就可從子控件與父控件各邊之間的距離（即空白距離）算出子控件的大小了。圖1圖2圖3圖2與圖3均是在Canvas的子控件Panel上創(chuàng)建的一個(gè)子子控件Panel，但是圖2中的Canvas上的子控件Panel