cocos creator —基本组件

Sprite组件


在游戏开发中,显示的图片被称为精灵
精灵组件为cocos creator常用组件之一 
精灵组件

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



Button组件

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

通过代码实现对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"]);
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

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!";
  • 1
  • 2

RichText组件

它是一种特殊的label组件,它拥有比label更加丰富,灵活文本格式。 
richtext 
其拥有类似HTML语言的标签元素

元素的属性

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


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

猜你喜欢

转载自blog.csdn.net/cchgood/article/details/80930873