引言

Cocos Creator是触控科技推出的最新的开发者工具，实现了彻底的脚本化、组件化、以及数据驱动的特点，当然还有一个更加好用的UI系统，

UI系统的基本组成部分和工作流程，所有UI界面的生产都是由最基本的UI元素拼装而成，下面就是UI系统的UI组件的介绍。

通常使用的UI场景

• 主菜单
• 导航按钮
• 伸缩的活动按钮组
• 顶部的状体栏
• 计时器的进度条
• 场景切换
• 场景切换动画
• 按钮点击动画
• 复杂的文字排版
• 复杂的组件排版
• 动态生成列表(从服务器获取数据、然后在显示)
• 。。。。

UI的组件

Canvas（画布）

Canvas（画布）组件能够随时获取设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放，场景中的Canvas同时只能有一个，并且所有UI和可渲染元素都设置为Canvas的子节点。

image

属性选项

Widget 组件

Widget（对齐挂件）是一个很常用的UI布局组件。它能使当前节点自动对齐到父物体的任意位置，或者约束尺寸，让你的游戏可以方便地适配不同的分辨率。

image

对齐挂件的脚本接口请参考 Widget API。

属性选项

为了更好的理解 Widget 组件，在 Canvas 下新建一个 sprite ，在 sprite 节点上添加一个 Widget 组件

在 sprite 中就创建一个 Widget 的组件

边界对齐

上对齐，上边距为100px

上对齐、左对齐，上边距为100px、左边距为100px

下对齐、右对齐，上边距为0px、左边距为0px

居中对齐

约束尺寸

跟Xcode中的Xib一样，如果左右同时对齐，或者上下同时对齐，那么在相应方向上的尺寸就会被拉伸，下面创建两个 sprite 一个为白色背景spriteBg，另外一个是这个spriteImg，来验证说明的问题

设置垂直居中、左右边距固定死10px这样会拉伸图片

在 Spritte 中Type 属性可以设置成 Sliced 模式，在这个模式下，保证图片四个角不会拉伸，只有中间会拉伸，这样设计只需要做一套图就能够设配所有的按钮、适用于按钮、进度条类的控件

首先将图片添加到项目中，设置图片的border的边角，就是图片拉伸的时候：拉伸的地方、忽略拉伸的地方

设置Sprite 的Type Sliced 约束上下边距，

这样就达到了我们在一些特殊需求的地方只拉伸中间位置，而不拉伸边角

Button（按钮）组件

Button 组件可以相应用户的点击操作，当用户点击Button 时，Button 自身会有状态变化。另外，Button 还可以让用户在完成点击操作后相应一个自定义的行为。

点击 属性检查器 下面的添加组件按钮，然后从添加 UI 组件中选择Button，即可添加 Button 组件到节点上。

在Cocos Creator 中创建按钮的方式：

第一种方式创建Button

所有的空间都是基于节点Node这个概念，所以创建一个新的节点，自定义button

• 在空节点上面创建新的sprite
  • 设置SpriteFrame的图片，我的设置是在ps中创建一个像素为2*2的白色的背景图
  • 我尝试在node、sprite、button中设置默认的颜色，都是透明的颜色，所以只能在重新添加一个新的纯色图片 2*2
• 在向这个空节点添加Button
  • 设置Button 的Transition = COLOR
• 想这个新的节点添加widget，对齐挂件

这种按钮的创建方式的好处、特点

• 自定义程度高、灵活
• 满足一些特殊需求（当我们在特殊需要，让这个按钮不显示，那么使用这种方式在你需要的区域覆盖一层node使用 等等...）

缺点

• 创建相对麻烦(自己自定义封装一个Button包，以后直接调用这个包，也就不是大的问题)

第二种方式创建Button

大部分按钮都是显式存在的，所以我们只要添加一个Sprite 在这个sprite基础上进行封装也是可以完成我们对于按钮的需求。

在层级管理器中我们要做的事情

• 添加一个Sprite ，并在这个sprite上面添加一个图

• 在Sprite 的属性检查器上添加 Button 属性块，设置Button的属性

• 添加widget 对齐挂件

好了一个新鲜出炉的Button出现。

第三种方式创建Button

这种方式也就是Cocos Creator 中添加的Button，他会在所有常见的Button的属性都会默认自动生成，哥们只要选择需要的内容添加删除

• 自带Sprite 属性块， 并且属性中有个默认图片，像素为2*2的白色背景图片
• 自动Label 控件
• 在Button、Label中添加widget，设置对齐方式

其实还有很多中组合方式来创建Button，不管是什么UI控件只要能够在属性检查器中添加成功Button 这个属性块都可能成为 Button

Button的属性

注意：当 Transition 为 SPRITE 且 disabledSprite 属性有关联一个 spriteFrame 的时候，此时不会使用内置 shader 来变灰

Button Transition

Button 的 Transition 用来指定当用户点击 Button 时的状态表现。目前主要有 NONE，COLOR，SPRITE 和 SCALE。

Color Transition

image

Sprite Transition

Scale Transition

image

Button 事件

详细说明

Button 目前只支持 Click 事件，即当用户点击并释放 Button 时才会触发相应的回调函数。

添加脚本组件

Button的响应事件，在脚本中添加一个方法去响应这个点击事件

• 在 资源管理器 中添加一个脚本文件，这个脚本文件只是做一个回调的函数，让按钮的点击事件响应

脚本代码如下

cc.Class({
    extends: cc.Component,

    properties: {
    },
    
    callback: function (event, customEventData) {
        //这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
        var node = event.target;
        var button = node.getComponent(cc.Button);
        alert(customEventData);
    }
    
});

• 在你的Button 节点属性检查器中 点击 添加组件 或将这个脚本文件拖到选中的Button 属性检查器中

通过代码添加回调

方法一

cc.Class({
    extends: cc.Component,
    properties: {

    },
    onLoad () {

        var clickEventHandler = new cc.Component.EventHandler();
        clickEventHandler.target = this.node; //这个 node 节点是你的事件处理代码组件所属的节点
        clickEventHandler.component = "BtnScript";//这个是代码文件名
        clickEventHandler.handler = "callback";
        clickEventHandler.customEventData = "foobar";

        var button = this.node.getComponent(cc.Button);
        button.clickEvents.push(clickEventHandler);


    },

    callback: function (event, customEventData) {
        //这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
        var node = event.target;
        var button = node.getComponent(cc.Button);
        //这里的 customEventData 参数就等于你之前设置的 "foobar"
        alert(customEventData);
    }
});

方法二

方法二中有个缺点就是点击的事件获取不到，也就获取不到点击事件所在的坐标点

cc.Class({
    extends: cc.Component,

    properties: {
       button: cc.Button
    },

    onLoad: function () {
       this.button.node.on('click', this.callback, this);
    },

    callback: function (button) {
       //do whatever you want with button
       //另外，注意这种方式注册的事件，也无法传递 customEventData
    }
});

扩展

cocos creator libpng warning: iCCP: known incorrect sRGB profile

需告诉设计师，需要严格的PNG格式的图片

原因：libpng加强了对png格式检测导致
解决方法:
在PS中 编辑->颜色设置 修改一下内容
保存并替换原有图片OK