先来看一下官网的API:http://developer.egret.com/cn/apidoc/index/name/eui.Button
看过之后你会发现里面好像并没有介绍什么太多内容。说白了其实就两个公共属性icon,lable外加一堆事件。我们先来说下两个公共属性,然后再去扩展一下。
先来说一下Lable:要在按钮上显示的文本
![0878bd322aec8f087394362bdf5edde9.png](https://img-blog.csdnimg.cn/img_convert/0878bd322aec8f087394362bdf5edde9.png)
我们在exml里面创建的按钮:主要注意一下标红的位置。
![e4f2bb22e53603e202ffba1c7dc1d342.png](https://img-blog.csdnimg.cn/img_convert/e4f2bb22e53603e202ffba1c7dc1d342.png)
![1e4bb966d07220920f64ec988cfb5a84.png](https://img-blog.csdnimg.cn/img_convert/1e4bb966d07220920f64ec988cfb5a84.png)
代码注释很详细了,通过ID来获得想要改变的按钮,然后更改lable“kaishi”为“开始”。
看一下效果:
![44516cb4c947f195bc4aaf6d39244879.png](https://img-blog.csdnimg.cn/img_convert/44516cb4c947f195bc4aaf6d39244879.png)
这个很简单没有什么好说的,而且用的不是很多。多数情况下都是美术将图片和文字合为一体了。我说的是多数情况下,也有个别例外,不要纠结字眼。
现在我们来说一下icon:要在按钮上显示的图标数据。
官方API里面并没有告诉我们怎么使用icon去更改图片。我们来看看代码:
![0df63281669b48f822cda54f5d7bbe06.png](https://img-blog.csdnimg.cn/img_convert/0df63281669b48f822cda54f5d7bbe06.png)
看看效果改变了没有:
![dc6dce65c8084983e1da0f2a531e655d.png](https://img-blog.csdnimg.cn/img_convert/dc6dce65c8084983e1da0f2a531e655d.png)
看到的效果是并没有变化,这是为什么?我们首先想到的是没有找到资源,或者资源路径不对,你是不是也是这样考虑的。那让我们来看一下资源。
this.button.icon = RES.getRes("egret_icon_png");
这是不是代码不对啊,以前加载资源的时候不都是以“.png”结束吗。这里资源的名字是不是不对啊?在这里我要说一下资源的名字是对的,为什么要这么写我们来看一下:
![71e630893001f8f3daf48e9338d35728.png](https://img-blog.csdnimg.cn/img_convert/71e630893001f8f3daf48e9338d35728.png)
资源是在default.res.json文件里面,这个之前有讲过,你可以翻看第一篇就知道了。
既然是名称和路径都没有问题,那会是什么问题呢?
答案即将揭晓,我们先来看两张图片:
![c57595c4a8e13b01c374e89512150133.png](https://img-blog.csdnimg.cn/img_convert/c57595c4a8e13b01c374e89512150133.png)
![7845caf2e9285ba044a78b98aa192ee6.png](https://img-blog.csdnimg.cn/img_convert/7845caf2e9285ba044a78b98aa192ee6.png)
根据这两张图我们可以猜想,按钮的三种状态都设置了图片资源,在去单独改变icon就没有起到作用的。会不会是父与子的关系,难道说三种状态的图片资源会覆盖了icon的资源或者两者直接有什么相互干扰。我们来大胆的尝试一下,把三种状态的资源去掉,在去改变icon看看会不会起到作用。
![52b52ad9be4b3d45193e979e996de3f1.png](https://img-blog.csdnimg.cn/img_convert/52b52ad9be4b3d45193e979e996de3f1.png)
我们将三种状态资源去掉了,在来看看结果:
![e56520fde2424f74354340a46a7f2901.png](https://img-blog.csdnimg.cn/img_convert/e56520fde2424f74354340a46a7f2901.png)
代码并没有改变,还是这一句。this.button.icon = RES.getRes("egret_icon_png");
只是将exml里面按钮的三种状态资源删掉了就可以了,那这是不是就证明了我们猜想的是对的。
看效果按钮背后有一张蓝色的背景图,这个先不用管它。
有人会说这并不是我想要的效果,我想的效果是将按钮三个状态都换掉,这才是我想要的。
那们我来继续看下面代码:
![1a9d21cbf811def999c8df84709f6ed3.png](https://img-blog.csdnimg.cn/img_convert/1a9d21cbf811def999c8df84709f6ed3.png)
上面代码虽说有注释,但是看不太懂是吧。一会我带大家一起去看API。我们先来看效果;
![bb1fb19670e2fa4a8ebfb9d20532defc.png](https://img-blog.csdnimg.cn/img_convert/bb1fb19670e2fa4a8ebfb9d20532defc.png)
效果已经达到了我们想要的。
我们先来解释一下第一局代码,随便看一下效果。有的人会说不是三种状态吗,正常、按下、禁用。没有看出来效果啊,我们来改动一下代码更直观的看一下啊。
我们来改一下第一句:var image: eui.Image = <eui.Image>this.button.getChildAt(0);
改成真个样子:var image: eui.Image = <eui.Image>this.button.getChildAt(1);
看一下效果:
![41525efd6a202124517dfa5adebf39ee.png](https://img-blog.csdnimg.cn/img_convert/41525efd6a202124517dfa5adebf39ee.png)
这样是不是就非常的明显了。
var image: eui.Image = <eui.Image>this.button.getChildAt(0);
var image: eui.Image = <eui.Image>this.button.getChildAt(1);
以上两句代码的不同在结合效果,应该不难理解了吧。分别获取不同状态,去改变资源。
我们去看一下关键的这两句代码:
var property: eui.SetProperty =<eui.SetProperty> this.button.skin.states[1].overrides[0];
property.value = image.source;
虽然都有注释,但还不是很了解,这样我们去看一下官网的API。
首先是:eui.SetProperty
![7890428bc895eb868a694bd19bcffa59.png](https://img-blog.csdnimg.cn/img_convert/7890428bc895eb868a694bd19bcffa59.png)
在看一下这句:eui.skin (this.button.skin)
![560e9a458949adc62a605862aaec95b5.png](https://img-blog.csdnimg.cn/img_convert/560e9a458949adc62a605862aaec95b5.png)
然后是eui.states:
![cd22870d2d0c699cde8c7854bfe8d398.png](https://img-blog.csdnimg.cn/img_convert/cd22870d2d0c699cde8c7854bfe8d398.png)
var property: eui.SetProperty =<eui.SetProperty> this.button.skin.states[1].overrides[0];
property.value = image.source;
这两句以上就都有介绍了,不要光看截图啊,要点击下面的连接进去看看,里面内容还是比较多的。
下面我们在去给这个按钮关联一个事件:
![1471ed46727144d62d25afaa11623c35.png](https://img-blog.csdnimg.cn/img_convert/1471ed46727144d62d25afaa11623c35.png)
代码注释很详细了,不多说,看效果:
![640688f56c1dde2e0de4e9651923bcfd.png](https://img-blog.csdnimg.cn/img_convert/640688f56c1dde2e0de4e9651923bcfd.png)
之前说过按钮的标签很少会手动去改变,一般都是美术把标签和图片合在一起了,之所以做了一个点击按钮更换“开始”“暂停”这个功能。说明还是可以去手动做一些lable的操作的。
按钮的注册类型会有好多,如图下:
![691af88e080c022fa7e21a5248ababfa.png](https://img-blog.csdnimg.cn/img_convert/691af88e080c022fa7e21a5248ababfa.png)
欢迎大家关注、点赞、提意见。我会虚心接受,努力提升自己的文字表述能力,思维逻辑能力。
下一章节我们就可以点击按钮,进入游戏页面了。然后开始做游戏了。
那就让我们一起做一个小游戏来练练手吧!