开发游戏，那就赶快来挤进来学习— Coocs Creater 之UI 组件Button

1.前言

其实对于我来说一直想要开发一个游戏，在大二的时候就在尝试自己做一些游戏，那个时候哪里知道引擎这一说，一切从零开始，就自己想着把游戏开发的一整套流程都搞下来。

哪里有那么容易哦，后来自己游戏做自闭了，就选择去用引擎，我可是个货真价实的小白呀。

哪里知道引擎的好坏，就在Untiy,Cocos里面挑选到了Cocos,哈哈，说道这里就提到一下，博主我呢，大学学校没有开设关于游戏开发的课程，就是很常见的软件开发专业，网上好多人说学习Cocos-2dx，需要学习 C++，我想着这个倒也合适，反正我学习过C语言，所以呢，就买了本C++的书，老厚一本开始啃了。

大概几周后对C++差不多啃得完了，就开始学习Cocos-2dx引擎,不是说光当时的环境配置就花了我几天，实在没辙，我就到处找学习视频，各大学习APP，QQ群之类的。

然后阴差阳错的进去了一个Cocos Creater的群，在老师免费的视频劝导下就开始了Cocos Creater的学习了，有一说一Cocos Creater的配置超级简单。

而且Cocos Creater编程语言和JavaScripts很相似，我也乘机补习了几周的JS,一箭双雕嘛。

废话结束，STOP，今天就给大家带来了，UI组件中的Button。

下面给大家讲讲如何运用Button的常见用途

2.准备工作

首先创建一个工程，名字无所谓了，进入项目工程后，在左上角就会看到属性编译器，会默认给你创建一个Canves的桌布，也就是最大的面板，其下的有一个Main camera照相机先不讲，这个就是初始的状态。
我们则是需要鼠标右键在Canves节点上选择一个Node节点来（双击更名为BaseView），用来支撑我们待会的 所有其他button节点，此时这个BaseView也可以称为场景。

然后在点击BaseView节点右键选择 创建节点->创建UI节点->button按钮，创建一个New Button(同样双击重命名为Button1)。

这里就结束准备工作了。

3.改变图片颜色

现在我们分析，button1节点下自动创建了Background节点，Background节点下又生成Label节点。前者提供button1的背景图片，后者是button1上的字符标签。

但是其button1自己还有一个默认的图片，background只是作为子节点覆盖了父节点的图片而已。

要改变图片的颜色，就是在button1状态发生变化时（状态有，未进入：Normal，点击:pressed，按住:Hover，失效:Diasbled），把图片不同颜色进行改变。

博主更换了原来的默认图片，换成了一个play的图片，如何更换自己的图片,不想使用系统的图片呢，首先在资源管理器中，新建文件夹（用来保存项目图片），选择在资源浏览器中打开，然后导入外部的图片，再点击button1节点的background节点,最后引擎界面右边属性选择器Sprite Frame默认图片修改就可以了。
配置完button1节点的background节点后，再点击到button1上将右边的属性选择器中的Normal,Pressed,Hover,Disabled,颜色修改成喜欢的样子就可以了。

然后点击界面中间位置最上方的运行按钮。

浏览器将会显示最终的结果。

下面这两个图片就是颜色的对比。

点击前
点击后

可以明显看到右边图片颜色变亮了。

4.更换图片种类

更改图片种类，其实当button状态改变时，我们不去改变一张图片的颜色了，而是换成了另一张图片。

首先我们新建一个button2节点，然后点击button2，再在属性选择器中选择Transition种类换成SPRITE, 最后将下方的Normal,Pressed,Hover,Disabled状态换为喜欢的图片即可。

但是当我们的button2按钮大小不合适，图片加载后失真了，咋办，我们首先在资源管理器中查看到图片的大小，图片的长宽会显示在右下角。

然后在属性管理器中将button2节点的大小调整为之前图片大小即可。

然后在浏览器中显示就会出现图片转换的效果

鼠标没进入时

鼠标点击时

鼠标按住时

是不是感觉挺有趣的哈。

5.缩放图片大小

最后呢，就说一下图片的缩放，同样我们还是创建 一个新Button,，重命名为button3,然后将默认的图片换成了这个木乃伊。

其实很简单，就是将新建的button3节点在属性选择器中将Transition转化为SCALE就可以实现缩放了，重点说明的就是，下面的两个属性，Duration,Zoom Scale ，前者是缩放比例所用的时间，后者是缩放的比例。

下面就是在浏览器中的展示结果。

没缩放时

缩放后

嘻嘻，是不是觉得Button很有趣，并且很快乐就学习完了。