cocos creator —基本组件 - 好文

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"
]); },
* 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根据宽度自动折行
Fontttf字库文件, 位图字体字库文件
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更加丰富，灵活文本格式。

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

<>元素的属性

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

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

热门工具换一换