cocos creator学习7——基本组件

Sprite组件

---

在游戏开发中，显示的图片被称为精灵

精灵组件为cocos creator常用组件之一

Type属性	效果
simple	精灵最普通的模式, 选择该模式后,图片将缩放到指定的大小
Tiled	平铺模式, 图片以平铺的模式
Slice	九宫格模式，指定拉伸区域(九宫格的边角不会拉伸)
Filled	设置填充的方式(圆，矩形)，可以使用比例来裁剪显示图片(只显示的比例)

---

Button组件

图中的CustomEventData是往这个响应的函数中传入一个字符串
注：如果你在一个size为(0,0)大小的节点上挂载button组件是无法正常实现功能的

通过代码实现对button组件的添加

//获取按钮组件 
start:function(){
this.getbutton = this.node.getChildByName("while_button").getComponent("cc.Button");
//1、添加button组件
        this.red_button = this.node.getChildByName("red_button").addComponent(cc.Button);
        // 2、添加一个响应函数
        var click_event = new cc.Component.EventHandler();
        click_event.target = this.node;
        click_event.component = "game_scene";
        click_event.handler = "on_red_button_click";
        click_event.customEventData = "test";
        // this.red_button.clickEvents = [click_event];
        this.red_button.clickEvents.push(click_event);
 },
        // 代码触发按钮的响应事件，而不用自己去触摸
Test:function() {
            var click_events = this.red_button.clickEvents;
            for(var i = 0; i < click_events.length; i ++) {
                var comp_env_handle = click_events[i];
                // 通过emit传入参数
                comp_env_handle.emit(["", "test"]);
    },

Label组件

该组件是显示文字的组件

属性列表	说明
String	文本显示的内容
Horiznotal	水平对齐的方式: 左 右 居中
Vertial	上, 下, 居中, 字与行的排版
Font Size	字体大小
LineHeight	每行的高度
OverFlow	文字排版
None	没有任何特性
Clamp	截断
Shank	自动缩放到节点大小
Resize Height	根据宽度自动折行
Font	ttf字库文件, 位图字体字库文件
Font Family	字体家族,使用系统的哪种字库
Use System Font	是否使用系统字体

我们还能够通过对锚点的修改来改变文字的出现方式
这个组件还提供了让开发者自定义系统文字的属性——Font，这个属性栏只会识别ttf文件

在代码中获取label组件

获取组件的方式有很多种，一种是在properties中绑定cc.Label属性，然后再进行操作。以下代码之中也能实现相同效果

var M_label=this.node.getChildByName('Hello').getComponent(cc.Label);
M_label.string="Hello,world!";

RichText组件

它是一种特殊的label组件，它拥有比label更加丰富，灵活文本格式。

其拥有类似HTML语言的标签元素

元素的属性

标签元素	功能
<color=#00ff00>	可以指定文本属性
<img src=''>	可以插入图片
<u>	给文本加下划线
<i>	用斜体来渲染
<b>	用粗体来渲染
<size>	指定字体渲染大小，大小值必须是一个整数
<outline>	设置文本的描边颜色和描边宽度

以上都是Creator之中比较常见的实用组件介绍，多点尝试就能知道更多