1. 程式人生 > >NGUI簡單的UI功能操作

NGUI簡單的UI功能操作

按鈕的相關操作:  1.放縮動畫(如突然變大並且蹦一下):ButtonScale  2.偏移動畫(如單擊時讓按鈕突然向右偏移一下):ButtonOffset  3.旋轉動畫(如單擊時讓按鈕旋轉一下):ButtonRotation  4.新增按鈕單擊音效:Component->NGUI->INteraction->PlaySound 建立進度條:  1:建立底槽Sprite,新增UISlider:Addcompent->NGUI->Interaction->NGUISlider  2:在底槽下建立進度條Sprite,尺寸吻合;  3:在底槽下建立滑動塊Sprite,在底槽Sprite上新增BoxCollider;4:底槽Sprite拖動到自身的UISlider元件的Background,進度條拖到foreground,滑動塊拖到Thumb上。  如果要顯示百分數,在滑塊下新增一個Label,把Label拖到底槽的UISlider的OnValue Change模組下的Notify,然後在出現的Method中選擇UILabel.SetCurrentPercent;  或者直接使用NGUI->Open->PrefabToolBar 製作輸入框:
 1.第一種方法:自己拼裝:建立一個Sprite作為底板,AddCompent->NGUI->UI->Input Field;然後為底板新增BoxCollider,再在Sprite下建立一個Label,將Label拖到Input元件中的Label選項中;  2.用Prefab ToolBar直接建立; 製作滾動檢視:  NGUI->Create->ScrollView;然後在SCrollView下建立Texture(我們可以在Texture裡新增一個大圖片),然後為Texture新增一個BoxCollider;  然後為texture新增Drag ScrollView,方法:Addcompent->NGUI->Interaction->Drag ScrollView; 製作複選框:
 第一種方式:直接在Prefabs ToolBar裡找就行了。  第二種方式:先建立一個底框Sprite,為其新增BoxCollider,然後為其新增一個核心元件:Addcompent->NGUI->Interaction->UIToggle;  然後再在底框下建立一個Sprite,表示選中狀態,比如一個勾,然後將表示選中狀態的Sprite拖到底框Sprite的UIToggle中的StateTransition下的Sprite選項中,,然後將StartingState勾選。 製作下拉選單:  第一種方法:Prefab TollBar中直接建立;  第二方法:建立一個Sprite,新增;Addcompent->NGUI->Interaction->PopupList;然後為Sprite新增BoxCollider元件,就可以在Options中新增選項;  如何顯示當前選項:在下拉選單下建立Label,將Label拉到下拉選單PopupList元件的On Value Change回撥中,選擇SetCurrentSeletion方法; UI動畫操作:
 1.漸隱漸現動畫:為UI新增一個TweenAlpha元件:AddCompent->NGUI->Tween->TweenAlpha;  2.顏色變化動畫:AddCompent->NGUI->Tween->TweenColor;  3.位置變化動畫:AddCompent->NGUI->Tween->TweenPosition;  4.旋轉變化動畫:AddCompent->NGUI->Tween->TweenRotation;  5.大小變化動畫:AddCompent->NGUI->Tween->TweenScale;  6.動畫控制組件UIPlayTween 和UIPlayAnimation; 使用Toggle製作標籤:  1.在UIRooot下建立倆個Sprite,命名為Button1,Button2;然後改為Sliced模式,分別為Button1,Button2新增BoxCollider,  2.分別在Button1和2下建立Label,用來寫上第一頁和第二頁,  3.分別在Button1和2下建立一個Sprite,用來表示選中後的顯示內容;  4.分別為Button1和2新增一個Toggle元件,將它們的Group改為1;並將Button1的Toggle的StartingState勾選,然後將表示頁籤狀態的Sprite分別拖到Toggle的Sprite選項中;  5.在表示狀態的Sprite下分別建立一個Label,(Label用來顯示內容),然後為倆個Button新增ToggleObjects,在Activate選項中,將Size設定為1,將Label拖到多出的Element(); 拖動攝像機來瀏覽超大介面:  1.首先我們為攝像機新增一個Component->NGUI->Interaction->Draggable Camera元件,為背景圖新增一個BoxCollider,然後為其新增DragCamera元件,  2.把要拖動的攝像機拖到DragCamera元件的DraggabbleCamera選項中; 使用Grid自動排列UI:  1.建立Grid有兩種方式:第一種選中要建立的UI節點,在Unity頂部的NGUI選單中Create —>Grid;第二種方式建立一個空物體到UI節點下,然後調整它的層和UI一樣,然後為這個空物體新增一個Grid元件;  新增方式Component->NGUI->Interaction->Grid  2.將要排列的UI拉到Grid下就可以了。。 使用DragObject直接拖動物體:  1.首先為UI物體新增BoxCollider,然後為其新增一個DragObject元件,把要拖動的UI物體拖到Target處就ok了; 讓玩家通過拖動自由改變控制元件的大小:  1.位UI物體新增BoxCollider,然後新增DragResize元件,把要操作的物體拖到Target處就行了,其他的自己設定; 製作序列幀精靈動畫:  我們可以為任何精靈賦予SpriteAnimation元件,然後徐讓這個精靈不聽的在圖集內按次序替換圖片,達到動畫效果。  1.我們要保證這個物體上有Sprite元件,然後新增Component->NGUI->UI->SpriteAnimation; 打字機效果:  TypeWriter Effect指令碼; 滑動條顏色漸變:  UISlider colors指令碼; 拖拽功能:  Drag Object;