关闭

怎样实现一个潮流的开关按钮

标签: uiunity编辑器游戏界面flash
627人阅读 评论(0) 收藏 举报
分类:

FairyGUI Editor是一个所见即所得的游戏UI编辑器,无需编写代码和编写任何配置文件,即可构建各种复杂的游戏界面,支持Unity,Egret(HTML5),Flash,Starling等多个常见游戏平台。
FairyGUI并没有提供大而全的组件库,也没有设计复杂的接口让程序员扩展,而是把发挥的空间留给了设计师。下面我们演示一下怎样制作一个现在移动设备上常用的开关按钮。

就是这货,截图自微信的设置界面


首先准备好需要的三张图片素材

2015-11-20_124800

第一张图是未选中时的背景,第二图是选中时的背景,第三种图就是中间的白色滑块。


从编辑菜单中选择“新建按钮”:


2015-11-20_125249


点击创建,得到一个初步的按钮。接着放置白色图片到舞台中,从效果视频可以看到,白色图片在按钮选中和不选中时的位置不相同,我们很容易想到“位置控制器”。设置白色图片的位置控制器如下:


2015-11-20_125540


这表示白色图片在按钮控制器不同页面下的位置不相同,勾选缓动表示我们希望有一个动态的变化过程。

接下来我们就可以调整白色图片的位置:up页面和over页面设置在同一个位置,down和selectedOver页面设置在同一个位置。


2015-11-20_125919

2015-11-20_125927


这样就做好了,直接在编辑器预览就可以看到效果了。


等等,好像还差点什么,是的,仔细观察视频,或者拿起手机微信看看,可以发现切换过程中绿色背景和灰色背景不是突然消失和出现的,有一个渐变的过程。虽然上面的效果用到游戏里已经足够了,我们不是要做APP是不?但动几下鼠标就能实现了我想你是不会拒绝的。我们为显示层次在上面的绿色图片设置外观控制器,如下:


2015-11-20_141055


然后切换button控制器到up和over页面,把绿色图片透明度设为0。再预览一下,看看是不是多了一个渐变的效果了^_^


本文例子下载:ButtonTest

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1127次
    • 积分:19
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档