第12章UGUI開發(fā)

12.8按鈕（Button）12.9開關(guān)（Toggle）12.10滑動(dòng)條（Slider）

12.11滾動(dòng)條（Scrollbar）12.12輸入欄（InputField）

上一頁返回12.1畫布（Canvas）每個(gè)GUI控件必須是畫布的子對(duì)象。當(dāng)選擇菜單欄中GameObject→UI下的命令來創(chuàng)建一個(gè)控件時(shí)，如果當(dāng)前不存在畫布時(shí)將會(huì)自動(dòng)創(chuàng)建一個(gè)畫布，如圖12.1所示。UI元素的繪制順序依賴于它們?cè)贖ierarchy面板的順序。如果兩個(gè)UI元素重疊，后添加的UI元素會(huì)出現(xiàn)在之前添加的UI上面。如果要修改UI元素的順序，應(yīng)在Hierarchy視圖中進(jìn)行拖曳排序。對(duì)UI元素的排序也可以通過在腳本中調(diào)用Transform組件的SetAsFirstSibling、SetAsLastSibling、SetSiblingIndex等方法實(shí)現(xiàn)。RenderMode（渲染模式）有以下幾種。下一頁返回12.1畫布（Canvas）（1）ScreenSpace-Camera：如圖12.2所示，畫布以特定的距離放置在指定的攝像機(jī)前，UI元素被指定的相機(jī)渲染，相機(jī)設(shè)置會(huì)影響到UI的呈現(xiàn)。（2）ScreenSpace-Overlay：如圖12.3所示，使畫布拉伸以適應(yīng)全屏大小，并且使GUI控件在場(chǎng)景中渲染于其他物體的前方。如果調(diào)整屏幕大小或者改變分辨率，畫布將會(huì)自動(dòng)改變大小以適應(yīng)屏幕。（3）WorldSpace：如圖12.4所示，該選項(xiàng)使畫布渲染于世界空間。該模式使畫布在場(chǎng)景中像其他游戲物體一樣，可以通過手動(dòng)調(diào)整它的RectTransform來改變畫布的大小。GUI空間可能會(huì)渲染到其他物體的前方或后方。上一頁返回12.2RectTransform（矩形變換）RectTransform（矩形變換）是一種新的變換組件，適用于在所有GUI控件上代替原有的變換組件。矩形變換區(qū)別于原有變換的地方是在場(chǎng)景中Transform組件表示一個(gè)點(diǎn)。而RectTransform表示一個(gè)可容納UI元素的矩形，而且矩行變換還有錨點(diǎn)和軸心點(diǎn)的功能。Pos（x,y,z）：定義矩形相當(dāng)于錨點(diǎn)的軸心點(diǎn)位置。Width/Height：定義矩形的寬度和高度。Left、Top、Right、Bottom：定義矩形邊緣相對(duì)于錨點(diǎn)的位置，錨點(diǎn)分離時(shí)會(huì)顯示在Pos和Width/Height的位置。Anchors：定義矩形的左下、右上的錨點(diǎn)。Min：定義矩形左下角錨點(diǎn)，（0,0）對(duì)應(yīng)父物體的左下角，（1,1）對(duì)應(yīng)父物體的右上角。下一頁返回12.2RectTransform（矩形變換）Max：定義矩形右上角錨點(diǎn)，（0,0）對(duì)應(yīng)父物體的左下角，（1,1）對(duì)應(yīng)父物體的右上角。Pivot：定義矩形旋轉(zhuǎn)時(shí)圍繞的中心點(diǎn)坐標(biāo)。Rotation：定義矩形圍繞中心點(diǎn)的旋轉(zhuǎn)角度。Scale：縮放系數(shù)。上一頁返回12.3錨點(diǎn)（Anchors）矩形變換有一個(gè)錨點(diǎn)的布局概念。如果一個(gè)矩形變換的父對(duì)象也是一個(gè)矩形變換，作為子物體的矩形邊還可以通過多種方式固定在父物體的矩形變換上。例如，子物體可以固定在父物體的中心點(diǎn)；在固定錨點(diǎn)時(shí)也允許基于父對(duì)象的寬高按指定的百分比拉伸。下一頁返回12.3錨點(diǎn)（Anchors）在Scene視圖中，錨點(diǎn)以4個(gè)三角形手柄的形式表現(xiàn)。每一個(gè)手柄都對(duì)應(yīng)固定于相應(yīng)父物體的矩形的角，用戶可以單獨(dú)拖曳每一個(gè)錨點(diǎn)，當(dāng)它們?cè)谝黄鸬臅r(shí)候，也可以單擊其中心一起移動(dòng)它們。在Inspector視圖中，錨點(diǎn)預(yù)置按鈕（AnchorPresets）在矩形變換組件左上角。單擊該按鈕。上一頁返回12.4軸心點(diǎn)（Pivot）Pivot有很多種叫法，筆者覺得叫“重心點(diǎn)”比較合適，原因后面解釋，如圖12.7所示。圖12.7所示的中心的圓點(diǎn)就是所說的“重心點(diǎn)”，它對(duì)應(yīng)Unity中的字段是Pivot。取值范圍為0~1。X、Y都是0.5時(shí)就是圖12.7的中心位置。左下角是（0,0），右上角是（1,1），修改軸心點(diǎn)后旋轉(zhuǎn)效果如圖12.8和圖12.9所示，第一軸心點(diǎn)在（0.5,0.5）處，第二個(gè)在左下角是（0,0）效果明顯吧，旋轉(zhuǎn)是圍繞著軸心點(diǎn)，在物理世界中平衡都是圍繞著軸心點(diǎn)，所以這里把Pivot叫作重心點(diǎn)。下一頁返回12.5文本（Text）文本控件顯示非交互文本?？梢宰鳛槠渌鸊UI空間的標(biāo)題或者標(biāo)簽，也可以用于顯示指令或者其他文本，文本組件屬性如圖12.10所示。Text：控制顯示的文本。Font：用于顯示的文本字體。FontStyle：文本樣式，有粗體、斜體、粗斜體。FontSize：文本的字體大小。下一頁返回12.5文本（Text）LineSpacing：文本字體之間的垂直間距。RichText：是否為富文本。Alignment：文本的水平和垂直對(duì)齊方式。HorizontalOverFlow：用于處理文字太寬而無法適應(yīng)文本框的方法，選項(xiàng)包含自動(dòng)換行、溢出。VerticalOverFlow：用于處理文本太高而無法適應(yīng)文本框的方法，選項(xiàng)包含截?cái)?、溢出。BestFit：忽略大小屬性使文本適應(yīng)控件大小。Color：顏色。Material：渲染文本的材質(zhì)。上一頁返回12.6圖像（Image）圖像組件需要Sprite類型的紋理，原始圖像可以接受任何類型的紋理。SourceImage：表示要顯示的圖像紋理（類型必須為Sprite）。Color：應(yīng)用于圖像的顏色。Material：材質(zhì)。SetNativeSize：設(shè)置圖像框尺寸為原始圖像紋理的大小。圖像類型如下。Simple：默認(rèn)情況下適應(yīng)控件的矩形大小。如果啟用PreserveAspect選項(xiàng)，圖像的原始比例會(huì)被保存，剩余的未被填充的矩形部分會(huì)被空白填充。下一頁返回12.6圖像（Image）Silced：圖片被切成九宮格模式，圖片的中心被縮放以適應(yīng)矩形控件，邊界會(huì)仍然保持它的尺寸。禁用FillCenter選項(xiàng)后圖像的中心會(huì)被挖空。Tiled：圖像保持原始大小，如果控件的大小大于原始圖大小，圖像會(huì)重復(fù)填充到控件中；如果控件大小小于原始圖片，則圖片會(huì)被在邊緣處截?cái)唷illed：圖像被顯示為Simple類型，但是可以調(diào)節(jié)填充模式和參數(shù)使圖像呈現(xiàn)出從空白到完整的填充過程。上一頁返回12.7原始圖像（RawImage）原始圖像組件與圖像組件類似，但是它不具有圖像組件提供的動(dòng)畫控制和準(zhǔn)確填充控件矩形的功能。同時(shí)，原始圖像組件支持顯示任何類型的紋理，而圖像組件僅支持Sprite類型的紋理。Texture：表示要顯示的紋理。Color：應(yīng)用到圖像的顏色。Material：為圖像著色所使用的返回12.8按鈕（Button）UGUIButton可以說是真正的使用最廣泛、功能最全面、幾乎涵蓋任何模塊無所不用無所不能的組件，由Image和Text組成。Button組件的屬性和參數(shù)如圖12.15所示，下面簡(jiǎn)單介紹一下。Interactable（是否可用）：勾選，按鈕可用；取消勾選，按鈕不可用，并進(jìn)入Disabled狀態(tài)。Transition（過渡方式）：按鈕下一頁返回12.8按鈕（Button）在狀態(tài)改變時(shí)自身的過渡方式?！馛olorTint，顏色改變?！馭priteSwap，圖片切換?！馎nimation，執(zhí)行動(dòng)畫TargetGraphic（過渡效果作用目標(biāo)）：可以是任一Graphic對(duì)象。Navigation（按鈕導(dǎo)航）：假如有4個(gè)按鈕，當(dāng)單擊第一個(gè)時(shí)，第一個(gè)會(huì)保持選中狀態(tài)，然后通過按鍵盤上的方向鍵，會(huì)導(dǎo)航將選中狀態(tài)切換到下一個(gè)按鈕上。例如，第一個(gè)按鈕下方存在第二個(gè)按鈕，當(dāng)選中第一個(gè)方向鍵按下時(shí)，第一個(gè)按鈕的選中狀態(tài)取消，第二個(gè)按鈕進(jìn)入選中狀態(tài)，前提是這些按鈕都開啟了導(dǎo)航功能。上一頁下一頁返回12.8按鈕（Button）None（關(guān)閉）：關(guān)閉導(dǎo)航。Automatic（自動(dòng)導(dǎo)航）：自動(dòng)識(shí)別并導(dǎo)航到下一個(gè)控件。Horizontal（水平導(dǎo)航）：水平方向?qū)Ш降较乱粋€(gè)控件。Vertical（垂直導(dǎo)航）：垂直方向?qū)Ш降较乱粋€(gè)控件。Explicit（指定導(dǎo)航）：特別指定在按特定方向鍵時(shí)從此按鈕導(dǎo)航到哪一個(gè)控件。ColorTint（顏色改變過渡模式），如圖12.16所示。上一頁下一頁返回12.8按鈕（Button）NormalColor（默認(rèn)顏色）：初始狀態(tài)的顏色。HighlightedColor（高亮顏色）：選中狀態(tài)或是鼠標(biāo)靠近時(shí)顯示的顏色。PressedColor（按下顏色）：鼠標(biāo)單擊或是按鈕處于選中狀態(tài)時(shí)的顏色。DisabledColor（禁用顏色）：禁用時(shí)顏色。ColorMultiplier（顏色切換系數(shù)）：顏色切換速度，越大則顏色在幾種狀態(tài)間變化速度越快。FadeDuration（衰落延時(shí)）：顏色變化的延時(shí)時(shí)間，越大則變化越不明顯。上一頁下一頁返回12.8按鈕（Button）SpriteSwap（圖片切換過渡模式）。HighlightedSprite（高亮圖片）：選中狀態(tài)或是鼠標(biāo)靠近時(shí)顯示的圖片。PressedSprite（按下圖片）：鼠標(biāo)單擊或是按鈕處于選中狀態(tài)時(shí)顯示的圖片。DisabledSprite（禁用圖片）：禁用時(shí)圖片。Animation（播放動(dòng)畫過渡模式）。HighlightedTrigger（高亮觸發(fā)器）：選中狀態(tài)或是鼠標(biāo)靠近時(shí)會(huì)觸發(fā)。PressedTrigger（按下觸發(fā)器）：鼠標(biāo)單擊或是按鈕處于選中狀態(tài)時(shí)觸發(fā)。DisabledTrigger（禁用觸發(fā)器）：禁用時(shí)觸發(fā)。上一頁下一頁返回12.8按鈕（Button）AutoGenerateAnimation（生成動(dòng)畫片段）：?jiǎn)螕舸税粹o，會(huì)自動(dòng)生成一個(gè)包含以上4種狀態(tài)以及4種動(dòng)畫的Animation，然后選中此按鈕，按Ctrl+6組合鍵進(jìn)入動(dòng)畫編輯界面，分別對(duì)以上4種動(dòng)畫進(jìn)行調(diào)動(dòng)就可以了。上一頁返回12.9開關(guān)（Toggle）Toggle組合按鈕（單選鈕），可以將多個(gè)Toggle按鈕加入一個(gè)組，則它們之間只能有一個(gè)處于選中狀態(tài)（Toggle組合不允許關(guān)閉的話）。Toggle大部分屬性等同于Button組件，同為按鈕，不同的只是它自帶了組合切換功能，當(dāng)然這些用Button也是可以實(shí)現(xiàn)的。IsOn（選中狀態(tài)）：此為Toggle的選中狀態(tài)，設(shè)置或返回為一個(gè)Bool值。ToggleTransition（切換過渡）：None為無切換過渡，F(xiàn)ade為切換時(shí)Graphic所指目標(biāo)漸隱漸顯。下一頁返回12.9開關(guān)（Toggle）Group（所屬組合）：這里指向一個(gè)帶有ToggleGroup組件的任意目標(biāo)，將此Toggle加入該組合，之后此Toggle便會(huì)處于該組合的控制下，同一組合內(nèi)只能有一個(gè)Toggle可處于選中狀態(tài)，即便是初始時(shí)將所有Toggle都開啟IsOn，之后的選擇也會(huì)自動(dòng)保持單一模式OnValueChanged（狀態(tài)改變觸發(fā)消息）：當(dāng)此Toggle選中狀態(tài)改變時(shí)觸發(fā)一次此消息。帶有此組件的物體可以同時(shí)管理多個(gè)Toggle，將需要被管理的Toggle的Group參數(shù)指向此ToggleGroup便可。上一頁下一頁返回12.9開關(guān)（Toggle）AllowSwitchOff（是否允許關(guān)閉）：ToggleGroup組默認(rèn)有且僅有一個(gè)Toggle可處于選中狀態(tài)（其管轄的所有Toggle中），如果勾選此復(fù)選框，則ToggleGroup組的所有Toggle都可同時(shí)處于未選中狀態(tài)。上一頁返回12.10滑動(dòng)條（Slider）Slider有3個(gè)子控件：Background是滑動(dòng)條灰色背景底圖；FillArea→Fill是填充的紅色部分；HandleSlideArea→Handle是移動(dòng)的小圓滑塊?；瑒?dòng)條控件外觀如圖12.26所示。Slider組件如圖12.27所示。Direction是用來設(shè)置滑塊的方向的，有以下幾個(gè)選項(xiàng)。LeftToRight從左到右。RightToLeft從右到左。BottomToTop從下到上。TopToBottom從上到下。MinValue和MaxValue是控制滑塊移動(dòng)的范圍。下一頁返回12.10滑動(dòng)條（Slider）WholeNumbers用來控制滑塊值是否限定為整數(shù)數(shù)值。Value就是滑塊當(dāng)前的數(shù)值。OnValueChange每當(dāng)滑塊的數(shù)值由于拖動(dòng)被改變時(shí)調(diào)用，通過Slider組件onValueChanged.AddListener添加回調(diào)函數(shù)，如圖12.28所示。上一頁返回12.11滾動(dòng)條（Scrollbar）滾動(dòng)條允許用戶滾動(dòng)因圖像或者其他可視物體太大而不能完全看到的視圖。滾動(dòng)條與滑動(dòng)條的區(qū)別在于后者用于選擇數(shù)值而前者主要用于滾動(dòng)視圖。HandleRect（操作條矩形）：當(dāng)前值處于最小值與最大值之間比例的顯示范圍。Direction（方向）：滾動(dòng)條的方向。Value（值）：當(dāng)前滾動(dòng)條對(duì)應(yīng)的值。Size（操作條矩形長(zhǎng)度）：操作條矩形對(duì)應(yīng)的長(zhǎng)度。OnValueChanged：值改變時(shí)觸發(fā)消息。下一頁返回12.11滾動(dòng)條（Scrollbar）1．ScrollView組件ScrollView組件由三部分組成，Viewport：內(nèi)容區(qū)域；ScrollbarHorizontal：水平滾動(dòng)條；ScrollbarVertical：垂直滾動(dòng)條。2．ScrollRect組件ScrollRect組件如圖12.31所示。Content：滑動(dòng)的內(nèi)容（所有需要滑動(dòng)展示的內(nèi)容）。Horizontal：是否支持左右滑動(dòng)。Vertical：是否支持上下滑動(dòng)。MovementType：滑動(dòng)類型。上一頁下一頁返回12.11滾動(dòng)條（Scrollbar）Unrestricted：不受滑動(dòng)內(nèi)容邊界限制。Elastic：帶邊界回彈的（Elasticity彈力）。Clamped：邊界夾緊。Inertia：是否支持滑動(dòng)慣性（DecelerationRate減速率，筆者認(rèn)為就是慣性的大小）。ScrollSensitivity：滾動(dòng)的靈敏度。Viewport：視口（一般是Content的父物體，帶Mask遮罩后的展示區(qū)域）。HorizontalScrollbar：左右的滾動(dòng)條（連接的滾動(dòng)條必須放在ScrollView下）。上一頁下一頁返回12.11滾動(dòng)條（Scrollbar）Visibility：滾動(dòng)條可見性。Permanent：不變的（只有選擇這個(gè)關(guān)聯(lián)的Scrollbar才能隱藏）。AutoHide：自動(dòng)隱藏（如果內(nèi)容不需要滾動(dòng)就可以看到隱藏滾動(dòng)條）。AutoHideandExpandViewport：自動(dòng)隱藏并擴(kuò)展視圖（Spacing滑動(dòng)區(qū)域和滾動(dòng)條的間距）。上一頁返回12.12輸入欄（InputField）InputField為文本輸入控件，如圖12.32所示。TextComponent（文本組件）：此輸入域的文本顯示組件，任何帶有Text組件的物體。Text（文本）：此輸入域的初始值。CharacterLimit（字符數(shù)量限制）：限定此輸入域最大輸入的字符數(shù)，0為不限制。ContentType（內(nèi)容類型）：限定此輸入域的內(nèi)容類型，包括數(shù)字、密碼等，常用的類型如下：●Standard（標(biāo)準(zhǔn)類型）：什么字符都能輸入，只要是當(dāng)前字體支持的。下一頁返回12.1