zoukankan      html  css  js  c++  java
  • 制作按钮(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之前的一个浮点数。

  • 相关阅读:
    源码阅读(18):Java中主要的Map结构——HashMap容器(中)
    源码阅读(17):红黑树在Java中的实现和应用
    java中创建文件并写入的方法
    源码阅读(16):Java中主要的Map结构——HashMap容器(上)
    源码阅读(15):Java中主要的Map结构——概述
    从源码分析:Java中的AQS
    源码阅读(14):Java中主要的Queue、Deque结构——PriorityQueue集合(下)
    源码阅读(13):Java中主要的Queue、Deque结构——PriorityQueue集合(中)
    java 归并排序与快速排序
    python中的容器、可迭代对象、迭代器、生成器
  • 原文地址:https://www.cnblogs.com/-soy/p/5855122.html
Copyright © 2011-2022 走看看