NGUI簡單的UI功能操作
阿新 • • 發佈:2018-12-31
按鈕的相關操作:
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;