制作按钮(Button)
按钮的核心作用
1.按钮能接收单击并触发响应事件。
2.按钮被单击时能同时触发多个响应事件。
3.按钮可以有普通、悬停、单击、禁用等多个状态的不同表现。
4.广泛的说,按钮的核心在于接收事件,任何可以接收用户操作事件的,都可以称之为按钮。
创建按钮
1.创建一个Sprite,这个Sprite将会是按钮的外形。
2.选中创建的这个Sprite,然后在Unity顶部菜单中选择NGUI->Attach->Collider。
3.选中创建的这个Sprite,然后在Unity顶部菜单中选择NGUI->Attach->ButtonScript。
可以用Label、Texture等其他控件来代替Sprite去制作一个按钮,方法一模一样。
如果需要在创建好的这个按钮上写上文字,例如,"确定"、"取消"等,只需要选中这个按钮,然后再它下面创建一个Label,并写上"确定"即可,注意,Label的深度要高于这个按钮的深度,这样就完成一个"确定"的按钮。
小提示,创建出来的Sprite记得单击Snap,让它回归到原尺寸大小,然后再去等比例调整它的大小,这样可以尽量减少图片的形变。
核心组件BoxCollider
BoxCollider是一个屋里组件,准确地说是一个物体碰撞盒,所有的需要接收外部输入事件的(如单击、拖动等)UI,都需要拥有一个BoxCollider,这个BoxCollider代表的是响应事件的范围。如果没有BoxCollider,那么这个控件无论如何都无法接收到外部事件,这是NGUI的一个底层原则。
既然BoxCollider代表的是接收事件的响应范围,那么,如果将一个按钮的BoxCollider大小设为全凭,则单击屏幕上任何一个地方,都相当于单击了这个按钮。
可以通过Attach方法自动生成一个BoxCollider,也可以通过Inspector面板中单击AddComponent手动附加一个BoxCollider,区别在于:通过NGUI菜单Attach的BoxCollider的大下坡,会自动刚好包围控件的范围,而手动创建的BoxCollider,大小需要手动去调整。
BoxCollider的包围框是个绿框。只要在Inspector面板中展开BoxCollider的组件,就能看到这个绿框,如果Inspector面板中BoxCollider组件的设置菜单被收起来了,则不会出现这个绿框。
BoxCollider设置:
1.Is Trigger
是否打开触发器,这个设置对于NGUI没什么用,它打开的作用是可以通过物理碰撞触发事件(如相撞爆炸等)。
2.Material
材质设定,这里设定的是物理材质,对于NGUI也没有什么用,它的作用是为这个碰撞盒包围的物体设定一个物理的表面,例如,一块地面时草地、还是木板、还是金属。
3.Center
中心位置的偏移。BoxCollider都有一个中心点,这里的Center就是设置它的中心点相对于控件的中心点的偏移,是一个相对量,所以需要注意一点:BoxCollider的这个Center会受到控件本身的Pivot中心点设置的影响。
4.Size
尺寸设置。经常配合Center设置一起使用,以此来调用控件响应区域的大小和位置。例如,做一款手机游戏,在屏幕中有一个很小的关闭按钮,经常导致玩家点不中它,就可以依靠设置Size来将它的响应区域变大,这样玩家只要单击到关闭按钮周围的区域,都能触发关闭按钮的响应时间。值得注意的是,这里Size的Z轴在UI中是几乎没有用的,X和Y的值都是以像素为单位。
需要注意的是,BoxCollider一般需要依赖于一个非空的、实质的物体,例如,如果这个BoxCollider物体身上没有控件(Sprite、Label、Texture等),只有一个BoxCollider,那么在大部分情况下,这个BoxCollider是无法接收事件的。
核心组件UI Button
首先要明确的是,UI Button并不是一个按钮的必须组件,也就是说,没有UI Button时,也能完成一个按钮。只要这个按钮上有BoxCollider,就可以在脚本中通过OnClick()、OnHover()等事件监听函数去触发一个响应事件。
UI Button有以下一些重要的用途:
1.可以设置不同状态下的颜色。
2.可以设置不同状态下的图片。
3.可以很方便地被动态赋予响应时间并分发事件。也就是说,可以临时地在A物体上的脚本里动态让B按钮拥有一个或者多个完全不同的响应事件。
UI Button的设置:
1.TweenTarget
动画目标,默认为按钮自己。按钮在光标悬停时变色、被单击时变换图片等,都是动画。绝大部分情况下,这个设置都需要设为自己(默认就是按钮自己)。
2.DragOver
拖动结束事件,默认为Do Nothing。这里有两个选项:DoNothing和Press。之所以有这个选项,是因为按钮在被拖动时,有一个事件的交叉:如果拖动一个按钮,那么不仅仅拖动了它,同时也按下了它。这个设置的目的就是,定义它被拖动结束后,是否还执行按下事件。
3.Transition
过渡时间。这里是动画过渡的时间。例如,设定按钮在鼠标光标滑过时,要变黑,这个设置就是设置它在光标滑过时由正常到变黑的时间。
4.Colors模块
这里是改变颜色,可以设置在不同状态下按钮的颜色和透明度。一共提供了4中状态可设置:普通状态、按钮被鼠标光标滑过时的状态、按钮被按下的状态、按钮不可单击时(BoxCollider被禁用)的状态。
5.Sprites模块
这里是精灵设置模块。值得注意的是,如果制作按钮时不时使用一个精灵控件作为基础制作的,那么将不会有这个模块。
在这里可以设置按钮在不同的状态下显示什么样的图片。一共支持4中状态:普通状态、按钮被鼠标光标滑过时的状态、按钮被按下的状态、按钮不可单击时(BoxCollider被禁用)的状态。
当通过Sprite制作一个按钮时,创建的Sprite会默认出现在Normal设置中,然后任何状态下,按钮图片都是这个精灵不会再改变。
如果需要按钮在不同状态下进行变化,可以分别对每个状态需要显示的精灵进行设置,设置的方法为单击状态名称的按钮,会弹出图集中所有精灵的预览(图集是Normal状态显示的精灵所属的图集)。
如果要取消一个状态下显示精灵的设置,可以单击该状态后面的小减号。但是,普通状态下的精灵无法被取消,当其他状态没有设置精灵时,将会默认显示普通状态的精灵。
PixelSnap是指保持原像素尺寸,当设置了不同状态下显示不同的Sprite时,只有勾选了这个框,才会让显示的不同的Sprite都以原像素尺寸显示。如果不勾选,则所有状态下的Sprite都会统一以这个按钮控件(制作按钮时所用的Sprite)的尺寸大小进行显示。
6.OnClick
这是设置按钮响应单击事件的地方。设置按钮响应事件时可以通过以下操作。
将该按钮要响应的事件函数的脚本所在的物体拖入到Notify中,然后该物体的名称就会出现在Notify的设置框中,会自动出现该物体下所有脚本中的Public函数,然后选择要按钮响应的那个函数即可。
也就是说,在这里可以让按钮响应任何一个物体身上的、任何一个脚本的、任何一个Public函数。
在这里当你设置了第一个响应事件之后,会自动弹出第二个响应事件的设定,也就是说,通过这里的设置,可以让按钮被单击之后响应任何多个事件。
制作按钮的缩放动画
如果希望单击按钮时,按钮会有一个缩放动画,可以单击AddComponent、选择NGUI->Interaction,在里面找到ButtonScale脚本,附加到按钮物体上。
ButtonScale的核心作用就是控制按钮的缩放动画,它的设置:
1.Script
这个是它所调用的脚本,我们不用管,它会自动定位好。
2.TweenTarget
这个是它所控制的动画作用的目标物体,我们不用管。在运行时,它会自动设定为当前所属的按钮物体。
3.Hover
当鼠标光标划过时,按钮控件的大小变化。
4.Pressed
当按钮按下时,按钮控件的大小变化。
5.Duration
完成缩放动画的时间,以秒为单位,默认为0.2秒完成。
需要注意的是,这个组件一般只用于按钮。
制作按钮的偏移动画
如果希望按钮有一个偏移动画,例如,单击按钮时按钮会向右下方蹦一下,可以为按钮制作一个偏移动画。选择NGUI->Interaction->ButtonOffset,附加到按钮上。
ButtonOffset的设置:
1.Hover
按钮在鼠标光标滑过时的位置偏移,这里偏移的是相对坐标。
2.Pressed
按钮在按下时的位置偏移,这里也是相对坐标。
3.Duration
持续时间。
制作按钮的旋转动画
如果希望按钮在被单击时能旋转一下,就可以为按钮制作一个旋转动画,选择NGUI->Interaction->ButtonRotation。
添加按钮单击音效
在AddComponent中,选择NGUI->Interaction->PlaySound附加到按钮上。
PlaySound的设置:
1.AudioClicp
音效的源文件,将音效文件拖到此处即可。
2.Trigger
触发模式,就是在什么情况下触发音效,默认为OnClick。这里给了以下几种模式:OnClick(单击)、OnMouseOver(鼠标光标移上来)、OnMouseOut(鼠标光标移开触发)、OnPress(按下触发)、OnRelease(释放触发)、Custom(自定义触发,即脚本中控制触发)。
3.Volume
音量大小,为0到1之间的一个浮点数。
4.Pitch
音调,也为0到1之前的一个浮点数。
制作按钮(Button)的更多相关文章
- 关于bootstrap--表单(按钮<button>效果、大小、禁用)
1.各种标签实现按钮效果: <button class="btn btn-default" type="button">button标签按钮< ...
- 在jQuery ajax中按钮button和submit的区别分析
在使用jQuery ajax的get方法进行页面传值,不能用submit,否则无刷新获取数据展示 点击submit提交按钮,sendPwd.php通过$_POST接收传过来的值,然后echo一段数据. ...
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
- Android 自定义控件 EditText输入框两边加减按钮Button
自己封装的一个控件:EditText两边放加减按钮Button来控制输入框的数值 Demo 下载地址: 第一版:http://download.csdn.net/detail/zjjne/674086 ...
- cocos creator 重写源码按钮Button点击音频封装
(function(){ var Super = function(){}; Super.prototype = cc.Button.prototype; //实例化原型 Super.prototyp ...
- 前端表单中有按钮button自动提交表单
问题描述 在设计表单时,表单内有一个按钮<button>,该按钮是用来获取其他数据或执行其他操作的.并不是让他提交表单. 解决方案 1) 设置 form 的 onsubmit='retur ...
- Android 按钮 Button和ImageButton
Button -- 按钮ImageButton -- 图片按钮Button和ImageButton特征1.共有的特征都可以作为一个按钮产生点击事件2.不同点: (1)Button有text属性,Ima ...
- 36种漂亮的CSS3网页按钮Button样式
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- Bootstrap历练实例:按钮(Button)插件单个切换
单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...
随机推荐
- GWT 中日期格式化 ,处置Date
GWT的view中不能用java原生的DateFormat 必须使用gwt封装的格式化方法,方法如下 import com.google.gwt.i18n.client.DateTimeFormat; ...
- 如何使用MVP模式搭建我们的Android应用?
听到很多人在讨论MVVM,我自己早些时候也写过一篇介绍MVVM的文章(玩转Android之MVVM开发模式实战,炫酷的DataBinding!),实际上,在Android开发领域中,除了MVVM之外, ...
- Java基础知识强化之网络编程笔记18:Android网络通信之 使用HttpClient的Post / Get 方式读取网络数据(基于HTTP通信技术)
使用HttpClient进行Get方式通信,通过HttpClient建立网络链接,使用HttpGet方法读取数据,并且通过Response获取Entity返回值. 使用HttpClient进行Post ...
- Android_listView_BaseAdapter
layout.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x ...
- ubuntu on win VS ubuntu(virtual box)VS Cygwin
执行命令粗略估计执行时间: date --rfc-3339='ns';seq 100000000 | grep 8 | wc -w; date --rfc-3339='ns' ubuntu 14.04 ...
- lshw 命令(查看硬件信息)
帮助 $ lshw -h Hardware Lister (lshw) - B.02.16 usage: lshw [-format] [-options ...] lshw -version -ve ...
- fedora 23中配置tftp-server
fedora 23中配置tftp-server */--> fedora 23中配置tftp-server Table of Contents 1. 简介 2. tftp安装 3. 启动和允许 ...
- We~ˇsay~~ˇ
拂弹每一个音符 与心相印 行走每一段风景 和路缠绵 花开的声音 只能用心倾听 无论曾经如何艰难 我依然在最初的起点 默念歌唱 等你 携手
- JavaScript - Base64 编码解码
以下代码摘自:http://cryptojs.altervista.org/encoding/Base64.html function base64_encode(str) { if (window. ...
- ASP伪静态页面(不需要通过iis+ISAPI_Rewrite)
很简单的教程,献给喜欢SEO的朋友们. 不需要通过iis+ISAPI_Rewrite做基于IIS的url rewrite 一.数据库很简单使用ACCESS,Data.mdb建立一个表Article,三 ...