CocosCreator UI Components

Canvas

In the Canvas, and alignment programs can set the resolution, the screen is changed when the phone, the phone will automatically adapting, in accordance with a width and length adapted according to two strategies adaptation.

Widget

• Can automatically align the current node to the parent object of an arbitrary position or size constraints, make your game can be easily adapted to different resolutions.
  
• As shown, provided to the UI interface, wherein the value may be in units of%, and may be in units of px, when both left and right sides of the data image will be stretched.

Layout

• Layout is a container assembly, the container can be opened automatic layout function to automatically arrange all child objects in accordance with specifications, the production user list, page etc.
  

Label

• Label component is used to display a text, the text may be a system font, TrueType font or font BMFont and digital art. Additionally, Label also has a layout function.
  

• Typesetting:

• Label component layout nodes is also based on the size (Size), that is, the range of the bounding box (Bounding Box) specified.
• Label the following attributes determine the location of the text that appears in the constraint box:
  • Horizontal Align(Horizontal alignment): alignment guidelines text box horizontal direction bound can be selected from the Left, Right, Center in three positions.
  • Vertical Align(Vertical alignment): text alignment guidelines constraint box in the vertical direction may be selected from the Top, Bottom, Center in three positions.
• Size and line height
  • Font Size(Character size) determines the size of the text display unit is Point (also referred to as a "pound")
  • Line Height(Line height) determines the height of the space when multiple lines of text to occupy each line of text, the unit is also a Point
  • If Font Size Line Height and set to the same value, the text just occupy most of the space height of a line.
  • If Font Size is smaller than the Line Height, will increase the interval between multiple lines of text
  • If greater than Font Size Line Height, between multiple lines of text spacing will be reduced, even in the case of overlapping text appears.
• Layout mode:
  • Overflow (layout mode) 属性，决定了文字内容增加时，如何在约束框的范围内排布。共有 NONE、CLAMP、SHRINK、RESIZE_HEIGHT 四种模式，而只有在后面三种模式下才能通过编辑器左上角的 矩形变换工具 或者修改 属性检查器 中的 Size 大小或者添加 Widget 组件 来调整约束框的大小。
  • Clamp：截断模式下，文字首先按照对齐模式和尺寸的要求进行渲染，而超出约束框的部分会被隐藏（截断）
  • Shrink：自动缩小模式下，如果文字按照原定尺寸渲染会超出约束框时，会自动缩小文字尺寸以显示全部文字。
  • Resize Height：自动适应高度模式会保证文字的约束框贴合文字的高度，不管文字有多少行。这个模式非常适合显示内容量不固定的大段文字，配合 ScrollView 组件可以在任意 UI 区域中显示无限量的文字内容。
• 自动换行
  • Enable Wrap Text 可以切换文字的自动换行开关。在自动换行开启的状态下，不需要在输入文字时手动输入回车或换行符，文字也会根据约束框的宽度自动换行。
• 截断（Clamp）模式自动换行
  • 截断模式开启自动换行后，会优先在约束框允许的范围内换行排列文字，如果换行之后仍无法显示全部文字时才发生截断。

• 文字节点的锚点

  • 文字节点的锚点和文字在约束框中的对齐模式是需要区分的两个概念。在需要靠文字内容将约束框撑大的排版模式中（如 Resize Height），要正确设置锚点位置，才能让约束框向我们期望的方向调整。
  • 例如，如果希望文字约束框向下扩展，需要将锚点（Anchor）的 y 属性设为 1。

Sprite

• Sprite（精灵）是 2D 游戏中最常见的显示图像的方式，在节点上添加 Sprite 组件，就可以在场景中显示项目资源中的图片。
  
• 添加 Sprite 组件之后，通过从 资源管理器 中拖拽 Texture 或 SpriteFrame 类型的资源到 Sprite Frame 属性引用中，就可以通过 Sprite 组件显示资源图像。
• 如果拖拽的 SpriteFrame 资源是包含在一个 Atlas 图集资源中的，那么 Sprite 的 Atlas 属性也会被一起设置。

• 渲染模式

  • Sprite 组件支持五种渲染模式：
  • 普通模式（Simple）：按照原始图片资源样子渲染 Sprite，一般在这个模式下我们不会手动修改节点的尺寸，来保证场景中显示的图像和美术人员生产的图片比例一致。
  • 九宫格模式（Sliced）：图像将被分割成九宫格，并按照一定规则进行缩放以适应可随意设置的尺寸(size)。通常用于 UI 元素，或将可以无限放大而不影响图像质量的图片制作成九宫格图来节省游戏资源空间。详情点这里
  • 平铺模式（Tiled）：当 Sprite 的尺寸增大时，图像不会被拉伸，而是会按照原始图片的大小不断重复，就像平铺瓦片一样将原始图片铺满整个 Sprite 规定的大小。
  • 填充模式（Filled）：根据原点和填充模式的设置，按照一定的方向和比例绘制原始图片的一部分。经常用于进度条的动态展示。
  • 网格模式（Mesh）：必须使用 TexturePacker 4.x 以上版本并且设置 ploygon 算法打包出的 plist 文件才能够使用该模式。
• 填充模式属性
  

Button

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

• Button 属性

• Button Transition

  • Button 的 Transition 用来指定当用户点击 Button 时的状态表现。目前主要有 NONE，COLOR，SPRITE 和 SCALE。
  • Color：用于设定 Button 在不同状态下的颜色
  • Sprite：用于设定 Button 在不同状态下的 SpriteFrame
  • Scale：用于设定 Button 在不同状态下的缩放

• Button 事件

  • Button 只支持 click 类型的事件

• button.node.on ( 'click', ...) (impossible parameter passing)

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
    }
});

• Construction cc.Component.EventHandler

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

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

        var button = 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"
    }
});

• Add a listener in the Property inspector

• Note: Set the monitor in the Property inspector, it is more convenient than the script settings, but also has its limitations. We pass the parameters can only be a string. So when we need to dynamically pass a class, we need to register the listener with the script, and then packaged in JSON object into a string, and then pass the object solved using JSON.