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;

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值