cc.Button和Label组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了cc.Button和Label组件相关的知识,希望对你有一定的参考价值。

cc.Button


1.添加按钮的方法

直接添加带Button组件的节点

先创建节点,再添加组件



2.过渡效果

普通状态, 鼠标滑动到物体上,按下状态,禁用状态.

这个就是过渡效果,可以有这几种方式.

(1)不设置过渡,只响应事件;

(2)颜色过渡.过渡效果中使用颜色,

(3)精灵过渡,使用图片过渡;




在这里选择过渡效果,

技术分享图片

(1) COLOR颜色过渡

Normal普通状态

Pressed按下状态

Hover鼠标悬停状态

Disabled禁用状态

Duration 过渡时间,也就是改变状态的时间

技术分享图片



(2)SPRITE 使用精灵来过渡

只要把对应的精灵放到对应的地方即可

技术分享图片


(3)按缩放过渡

第一个是时间

然后是缩放的大小

技术分享图片



3.Enable Auto Gray Effect

也就是你勾选上的时候

如果你的按钮是被禁用状态,他会再内部把这个

精灵渲染成灰色/


技术分享图片

技术分享图片




4.按钮添加响应事件

技术分享图片

按钮添加响应事件-->到节点-->代码组件的响应函数

    //响应函数
    on_button_click: function(){
    console.log("领取成功");
    },

这个代码组件挂在哪个节点上,就要通过这个节点才能调用响应.
技术分享图片


选择代码组件

技术分享图片


选择响应函数

技术分享图片

技术分享图片


如果这个函数每次进来要传递参数.应该怎么弄呢?

使用这个进行传递,
这个参数是一个字符串

技术分享图片

    on_button_click: function(e,str){
    //第一个参数是event
    //第二个是闯进来的参数 字符串
    console.log("领取成功");
    console.log(str);
    },








5.在代码里面使用cc.Button

(1)首先你要添加或者获取这个cc.button组件

通过代码获取

    //获取子节点
    var btn_rev = this.node.getChildByName("btn_receive_0");
       //通过这个节点获取 cc.Button组件
       this.button_rev = btn_rev.getComponent(cc.Button);
       
       
     换一种写法
    this.button_rev = this.node.getChildByName("btn_receive_0").getComponent(cc.Button);


再代码里添加button组件

 this.button_rev = this.node.getChildByName("btn_receive_0").addComponent(cc.Button);



(2)代码添加响应函数

他有一个响应事件列表,也就是多个响应事件

也就是在clickEvents里面加入一个元素



技术分享图片






数组的类型是Component.EventHandler

他有4个属性

技术分享图片


    onLoad: function () {
    //获取子节点
       //通过这个节点获取 cc.Button组件
       this.button_rev = this.node.getChildByName("btn_receive_0").getComponent(cc.Button);
       console.log(this.button_rev );
       //创建响应handle
       var click_event = new cc.Component.EventHandler;
       //找到目标节点 
       click_event.target = this.node;
       //找到目标组件名 就是这个脚本
       click_event.component = "HelloWorld";
       //找到组件的响应函数
       click_event.handler =  "on_re_button_click";
       //自定义数据 参数 字符串类型
       click_event.customEventData = "hello";
       //添加到响应事件列表
       this.button_rev.clickEvents.push(click_event);
    },
    on_re_button_click: function(e,str){
    console.log("领取成功"+str);
    },


Button响应这个触摸点击,所以Button所挂在的节点,

一定要有大小,如果挂再一个大小为0的节点上,按钮响应不到.



6.主动触发事件,有时候这个事件是由用户点击触发,有时候系统触发

比如用户3分钟没有点击返回主菜单,这时候要系统自动触发返回就行了.

使用emit 触发指定 handler 函数,该参数是回调函数的参数值(可不填)。


       //5秒后自动触发
       this.scheduleOnce(function(){
       //通过代码触发响应事件
       //首先获取触摸事件列表
       var click_e = this.button_rev.clickEvents;
       //遍历事件列表
       for(var i =0;i<click_e.length;i++){
       //获取事件
       var comp_handler = click_e[i];
       //主动触发
       comp_handler.emit(["","aaa"]);
       }
       
       }.bind(this),5);







cc.Label


1.String 要显示的内容

技术分享图片


2.文字水平对齐模式 

左对齐

技术分享图片

居中

技术分享图片

右边



3.Line Height 文字行高,以point为单位

也就是以行的高度,不管你字体大小.

技术分享图片


这个node的高度是行数*(乘以)行高 来计算的

技术分享图片







4.Vertical Align 文字垂直对齐模式

TOP在一行的最顶上 对齐

技术分享图片


CENTER 中间

技术分享图片


BOTTOM底边

技术分享图片





6.FontSize 字体大小尺寸



7.Overflow 文字排版模式

如果文字排版超出范围怎么办?

(1)CLAMP 范围之外的文字被裁剪掉

技术分享图片

(2)SHRINK 自动根据点击约束框缩小文字

技术分享图片

(3)RESIZE 根据文本内容更新节点height属性

类似自动换行





8.是否默认使用系统字体,Use SystemFont

Font Family:字体家族,你要使用系统的哪种字库

如果你不用系统字体,那么他就不显示.




9.Font 自定义字库, 使用自己的字体资源

自定义字体有两种:

(1)准备好字体文件.ttf矢量字库

使用矢量字体,优点:灵活方便,缺点:字库文件占用资源,



(2)使用字体制作工具生成的位图,使用位图字体;

fnt是这个位图字库 描述文件:有对应的图片的位置、大小偏移

优点:速度快,文件小, 缺点: 支持的字符个数是有限的;


技术分享图片

只有里面元素有的图片才能显示出来.

技术分享图片



总结:

上面两种自定义ttf字库和位图字库,都是用来个性化我们的字体的.

自定义ttf字库,字符不受限制,你这个字库里有多少个字符,都会支持

,灵活, 但是占用空间比较大

位图字库 他的字符个数有限的图片里有的才有,他比较省空间



10.锚点 Label的锚点 是个重要的属性

如果你的锚点是中心也就是0.5那么他添加字体往两边增加、

技术分享图片

如果锚点为0,就是往右边增加

技术分享图片





11.代码中使用cc.Label

获取组件两种办法,还是一样

(1)就是通过编辑器来指定

bmp_font:{

default: null,

type: cc.Label,

}

(2)通过代码来获取

    var zLabe = this.node.getChildByName("my_labell");
    //获取label
    this.bmp_font = zLabe.getComponent(cc.Label);
    //设置内容
    this.bmp_font.string = "hhh111";

技术分享图片







12.RichText组件

(1)添加富文本组件

(2)设置富文本的字符内容;

<color=#0fffff>text</color>指定文字的颜色

<img src='cow1_1/'>img标签,文本插入图片,图片要在指定的图集里

u:给文本加下划线,i:用斜体来渲染,b:用粗体来渲染.

size:指定字体渲染大小,大小值必须是一个整数<size=30>aa mm</size>

outline:设置文本的描边颜色和描边宽度<outline color=red width=4>

A label with</outline>


如果你要放图片 这里放图集Image Atlas

也就是你用的图片都会在这里.

技术分享图片


技术分享图片


这样就能显示图片了

技术分享图片



以上是关于cc.Button和Label组件的主要内容,如果未能解决你的问题,请参考以下文章

为什么Android导航组件无法返回上一个片段?

iOS开发CGRectGetMidX. CGRectGetMidY.CGRectGetMinY. CGRectGetMaxY. CGRectGetMinX. CGRectGetMaxX的使用(代码片段

iOS开发CGRectGetMidX. CGRectGetMidY.CGRectGetMinY. CGRectGetMaxY. CGRectGetMinX. CGRectGetMaxX的使用(代码片段

CocosCreator 代码添加点击事件函数

CocosCreator 代码添加点击事件函数

GUI的最终选择 Tkinter:Label和Button组件