虛擬現(xiàn)實(shí)開發(fā)基礎(chǔ)及實(shí)例 課件 第5章 虛擬現(xiàn)實(shí)開發(fā)工具5

第五章虛擬現(xiàn)實(shí)開發(fā)工具5

UGUI系統(tǒng)是從Unity4.6版本以后提供的新的UI系統(tǒng)，相較之前GUI系統(tǒng)，使用起來方便快捷，可視化效果好。UGUI系統(tǒng)提供了很多常用的組件，可以使用戶在不使用任何代碼的前提下，就可以簡(jiǎn)單快速的建立其一套UI界面。5.4.4UGUI每一個(gè)ui控件都需要放到Canvas（畫布），當(dāng)創(chuàng)建或沒有Canvas（畫布）系統(tǒng)會(huì)默認(rèn)或自動(dòng)創(chuàng)建一個(gè)Canvas（畫布）。Canvas（畫布）下有3個(gè)組件分別是：Canvas、CanvasScaler、GraphicRaycaster。Canvas組件下的RenderMode（渲染模式）一共有三種模式。1.CanvasScaleWithScreenSize模式（1）ConstantPixelSize模式使UI元素保持相同的像素大小，無(wú)論屏幕大小如何。（2）ScaleWithScreenSize模式，可以根據(jù)屏幕的大小進(jìn)行縮放，在此模式下有三種不同的縮放方式。（3）ConstantPhysicalSize模式使UI元素保持相同的物理大小，而不考慮屏幕大小和分辨率。1.Canvas

RectTransform組件是可以看看成Transform的2D版，物體上的Transform組件是不可以刪除的，但是RectTransform組件是可以刪除的，刪除之前，需要將該物體上所有UGUI相關(guān)的組件都刪掉，之后就可以刪除RectTransform，刪掉之后，會(huì)發(fā)現(xiàn)RectTransform變成了Transform。從這里可以看出RectTransform只是Transform在2D情況的一個(gè)變種。2.RectTransformPos(X,Y,Z)：相對(duì)于錨點(diǎn)點(diǎn)的位置。Width/Height：UI元素寬度和高度。Left,Top,Right,Bottom：Anchors：錨點(diǎn)矩形。Min：錨點(diǎn)矩形左下角位置，按屏幕的比例設(shè)置。Max：錨點(diǎn)矩形右上角位置，按屏幕的比例設(shè)置。Pivot:UI的中心點(diǎn)的位置，按自身UI的比例設(shè)置。Rotation:U旋轉(zhuǎn)，單位是角度。Scale:縮放。2.RectTransform非交互式文本框，主要用來顯現(xiàn)文本內(nèi)容。Text：文本。Font：字體。FontStyle：文本樣式。FontSize：顯示文本的大小。LineSpacing：行距。AlignbyGeometry是否使用字形大小的方式對(duì)齊。BestFit是否根據(jù)文本框大小來自適應(yīng)文字Color文本的顏色。3.Text(文本控制)簡(jiǎn)介Image(圖像)非交互式圖像。主要用于制作圖標(biāo)、背景等。SourceImage顯示的圖像，必須是Sprite（精靈）Color修改圖像的顏色。Material渲染圖像的材料。RaycastTarget是否可以進(jìn)行射線檢測(cè);ImageType顯示圖像的類型，選項(xiàng)包括Simple(標(biāo)準(zhǔn)圖片)、Sliced(九宮格切片)、Tille(背景平鋪)和Filled(旋轉(zhuǎn))。SetNativeSize將圖像的尺寸設(shè)置為圖像本身的像素;4.Image(圖像)如何將圖片變成精靈由于Image所支持的圖像格式都是Sprite格式，所有要將普通圖片轉(zhuǎn)換成精靈，找到要轉(zhuǎn)換的圖片文件并鼠標(biāo)單擊，然后找Inspector（屬性面板）下的TextureType里的Sprite,最后鼠標(biāo)單擊Apple完成。4.Image(圖像)

原始圖像和圖像很像它們都是向用戶顯示非交互式圖像。您可以將其用于裝飾或圖標(biāo)等目的，還可以將圖像從類更改為反映其他控件中的更改?？丶愃朴趫D像控件，但提供了更多的選項(xiàng)來動(dòng)畫圖像和精確填充控制矩形。然而，圖像控件要求其紋理為精靈，而原始圖像可以接受任何紋理。Texture顯示的圖像紋理。5.RawImage(原始圖像)

Button按鈕控件是在UGUI中最常用的一個(gè)組件之一，主要用來響應(yīng)用戶的鼠標(biāo)單擊，用于發(fā)起或確認(rèn)操作。Interactable（是否可用）：勾選，按鈕可用，取消勾選，按鈕不可用，并進(jìn)入Disabled狀態(tài)。該屬性在所有可交互組件中都有，之后不再描述。6.Button(按鈕)

Transition（過渡方式）：按鈕在狀態(tài)改變時(shí)自身的過渡方式：主要分為賽中狀態(tài)的變化，默認(rèn)狀態(tài)，高亮狀態(tài)（鼠標(biāo)懸停在Button上的狀態(tài)），點(diǎn)擊狀體（鼠標(biāo)點(diǎn)擊或選中后的狀態(tài)），不可點(diǎn)擊狀態(tài)（當(dāng)按鈕不可點(diǎn)擊的時(shí)候的狀態(tài)）。（1）ColorTint（顏色過度）（2）SpriteSwap（精靈過渡）（3）Animation（執(zhí)行動(dòng)畫）6.Button(按鈕)

Toggle大部分屬性等同于Button組件，同為按鈕，不同的只是他自帶了組合切換功能，當(dāng)然這些用Button也是可以實(shí)現(xiàn)的。IsOn（選中狀態(tài)）：此Toggle的選中狀態(tài)，設(shè)置或返回為一個(gè)bool。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ā)一次此消息。7.Toggle(單選)

帶有此組件的物體，可以同時(shí)管理多個(gè)Toggle，將需要被管理的Toggle的Group參數(shù)指向此ToggleGroup便可。AllowSwitchOff（是否允許關(guān)閉）：ToggleGroup組默認(rèn)有且僅有一個(gè)Toggle可處于選中狀態(tài)（其管轄的所有Toggle中），如果勾選此屬性，則ToggleGroup組的所有Toggle都可同時(shí)處于未選中狀態(tài)。8.ToggleGroup(單選管理器)

Slider（滑動(dòng)條）是一個(gè)主要用于形象的拖動(dòng)以改變目標(biāo)值的控件，他的最恰當(dāng)應(yīng)用是用來改變一個(gè)數(shù)值，最大值和最小值自定義，拖動(dòng)滑塊可在此之間改變，例如改變聲音大小。Direction（方向）：滑動(dòng)條的方向，從左至右，從上至下還是其他的。MinValue(最小值)：滑動(dòng)條的可變化最小值。MaxValue（最大值）：滑動(dòng)條的可變化最大值。WholeNumbers（變化值為整型）：勾選此項(xiàng)，拖動(dòng)滑動(dòng)條將按整型數(shù)（最小為1）進(jìn)行改變指定值。Value（值）：當(dāng)前滑動(dòng)條對(duì)應(yīng)的值。OnValueChanged：值改變時(shí)觸發(fā)消息。9.Slider(滑動(dòng)條)

Scrollbar（滾動(dòng)條）:是一個(gè)主要用于形象的拖動(dòng)以改變目標(biāo)比例的控件，他的最恰當(dāng)應(yīng)用是用來改變一個(gè)整體值變?yōu)樗闹付ò俜直壤畲笾?(100%)，最小值0（0%），拖動(dòng)滑塊可在此之間改變，例如改變滾動(dòng)視野的顯示區(qū)域。Direction（方向）：滾動(dòng)條的方向，從左至右，從上至下還是其他的。Value(值)：當(dāng)前滾動(dòng)條對(duì)應(yīng)的值。Size（操作條矩形長(zhǎng)度）：操作條矩形對(duì)應(yīng)的縮放長(zhǎng)度。NumbersOfSteps（指定可滾動(dòng)的位置數(shù)量）：滾動(dòng)條可滾動(dòng)的位置數(shù)目，為0和1時(shí)不生效。OnValueChanged：值改變時(shí)觸發(fā)消息。10.Scrollbar(滾動(dòng)條)Dropdown(下拉菜單)可以讓用戶從選項(xiàng)列表中選擇一個(gè)選項(xiàng)。CaptionText：保存當(dāng)前選中選項(xiàng)的文本。(可選)CaptionImage：保存當(dāng)前選中選項(xiàng)的圖像。(可選)ItemText：下拉框選項(xiàng)里的文字。ItemImage：下拉框選項(xiàng)里的圖片。Value：當(dāng)前選中選項(xiàng)下標(biāo)。0代表第一個(gè)選項(xiàng)，1表示第二個(gè)，以此類推。Options：可選的選項(xiàng)的列表。每個(gè)選項(xiàng)可以指定text和imageOnValueChanged：當(dāng)用戶鼠標(biāo)選中的一個(gè)選項(xiàng)時(shí)，一個(gè)事件會(huì)被調(diào)用。11.Dropdown(下拉菜單)Text（文本）：文本初始內(nèi)容。CharacterLimit（字符數(shù)量限制）：文本輸入字?jǐn)?shù)限制。Standard（標(biāo)準(zhǔn)類型）：什么字符都能輸入，默認(rèn)設(shè)置。IntegerNumber（整數(shù)類型）：只能輸入整數(shù)。 DecimalNumber（十進(jìn)制數(shù)）：能輸入整數(shù)或小數(shù)。 Alphanumeric（文字和數(shù)字）：能輸入數(shù)字和字母。 Name（姓名類型）：能輸入英文及其他文字，（首字母大寫）。 Password（密碼類型）：輸入的字符隱藏為星號(hào)。Placeholder（位置標(biāo)示)：文字提示框，OnValueChanged：當(dāng)數(shù)值改變時(shí)調(diào)用方法。EndEdit：結(jié)束編輯時(shí)調(diào)用方法。12.InputField(輸入文本框)

當(dāng)需要在一個(gè)小區(qū)域中顯示占用大量的內(nèi)容時(shí)，可以使用滾動(dòng)矩形。滾動(dòng)矩形提供了在此內(nèi)容上滾動(dòng)的功能。通常，滾動(dòng)矩形要和蒙版組件配合，為了創(chuàng)建滾動(dòng)視圖，其中只有滾動(dòng)矩形內(nèi)的可滾動(dòng)內(nèi)容是可見的。Horizontal：是否可以左右滾動(dòng)Vertical：是否可以上下滾動(dòng)MovementType：拖動(dòng)的約束。分別有無(wú)限制的，彈性的或限制的。Unrestricted：無(wú)限制的，可以任意滾動(dòng)。Elasticity：當(dāng)內(nèi)容到達(dá)滾動(dòng)矩形的邊緣時(shí)，將對(duì)內(nèi)容進(jìn)行反彈Clamped：強(qiáng)制內(nèi)容保持在滾動(dòng)矩形的范圍內(nèi)。13.ScrollRect(滾動(dòng)界面)

Mask(遮罩)不是一個(gè)可見的UI控件，而是一種修改控件子元素外觀的方法。因此，如果子元素比父元素圖像大，那么只能看到子元素中適合父元素的部分。該組件，我們?cè)谥v解RawImage時(shí)，曾經(jīng)用過。用于顯示圓形的畫面，這里的遮罩和我們?nèi)粘Ｉ钪姓趽跻馑颊孟喾?，這里的遮罩是遮住什么地方就顯示什么地方。ShowGraphicMask：是否顯示遮罩層的圖像。14.Mask(遮罩)

布局組件是UGUI的一個(gè)特色組件，用來調(diào)整UGUI在自動(dòng)布局時(shí)的UI的大小。IgnoreLayout當(dāng)啟用時(shí)，忽略此布局。MinWidth應(yīng)有的最小寬度。MinHeight應(yīng)有的最小高度。PreferredWidth首選寬度。PreferredHeight首選高度。FlexibleWidth瓜分剩余橫向空間的比例。FlexibleHeight瓜分剩余縱向空間的比例。LayoutPriority布局優(yōu)先級(jí)。15.LayoutElement(布局)

ContentSizeFitter組件主要是用來設(shè)置自身UI的長(zhǎng)寬（這個(gè)自身時(shí)包含子UI的寬、高）。HorizontalFit:寬度的控制Unconstrained：不根布局組件調(diào)整，可手動(dòng)修改寬度值。 MinSize：按布局組件最小值來調(diào)整，不能手動(dòng)修改寬度值。PreferredSize：按布局組件首選值來調(diào)整，不能手動(dòng)修改寬度值。VerticalFit：高度的控制和寬度的類似，不再描述。這個(gè)組件的應(yīng)用一定要配合LayoutElement組件，否則無(wú)效。16.ContentSizeFitter根據(jù)比例自動(dòng)調(diào)整自身UI的大小;None：不使用適合的縱橫比。WidthControlsHeight：讓Height隨著Width自動(dòng)調(diào)節(jié)。HeightControlsWidth：讓W(xué)idth隨著Height自動(dòng)調(diào)節(jié)。FitInParent：寬度、高度、位置和錨點(diǎn)都會(huì)被自動(dòng)調(diào)整，以使得該矩形擬合父物體的矩形內(nèi)，同時(shí)保持寬高比例。EnvelopeParent：寬度、高度、位置和錨點(diǎn)都會(huì)被自動(dòng)調(diào)整，以使得該矩形覆蓋父物體的整個(gè)區(qū)域，同時(shí)保持寬高比。17.AspectRatioFitter

水平布局組件通常和LayoutElement配合使用，將其子UI橫向并依次放在一起。子UI的大小根據(jù)自身的LayoutElement組件的值進(jìn)行設(shè)置。Padding：布局的邊界大小。Spacing：行距。ChildAlignment：對(duì)齊方式.ControlChildSize：是否控制其子布局元素的寬度和高度。ChildForceExpand：是否填充額外的可用空間。18.HorizontalLayoutGroup

垂直布局與水平布局除了方向都是一樣的。19.VerticalLayoutGroupGridLayoutG