Cocos2d-JS中的cc.LabelTTF

cc.LabelTTF是使用系统中的字体,它是最简单的标签类。cc.LabelTTF类图如下图所示,可以cc.LabelTTF继承了cc.Node类,具有cc.Node的基本特性。

LabelTTF类图

如果我们要展示如图所示的Hello World文字,我们可以使用cc.LabelTTF实现。

cc.LabelTTF实现的Hello World文字

cc.LabelTTF实现的Hello World文字主要代码如下:

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();
			……
        var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38); 					①
        helloLabel.x = size.width / 2;
        helloLabel.y = 0;

        this.addChild(helloLabel, 5);
	      ……
        return true;
    }
});

上述代码第①行是创建一个cc.LabelTTF对象,cc.LabelTTF类的构造函数定义如下:
ctor(text, fontName, fontSize, dimensions, hAlignment, vAlignment)
text参数是要显示的文字,fontSize参数是字体,它可以是系统字体名,例如本例中的Arial,也可以是自定义的字体文件,字体文件应该放在res文件夹或子文件夹中,如下图所示,我们的TTF字体文件是Marker Felt.ttf,使用Marker Felt.ttf字体的代码如下:
var helloLabel = new cc.LabelTTF("Hello World", "Marker Felt", 38);
Marker Felt是与Marker Felt.ttf字体文件对于的字体文件名,该名称是我们在src/resource.js文件中定义的,src/resource.js代码如下:

var g_resources = [
    //fonts
    {
        type: "font",													①
        name: "Marker Felt",												②
        srcs: ["res/fonts/Marker Felt.ttf"]										③
    }

];

g_resources数组变量是用来保存需要加载的资源集合,字体文件也是一种资源文件,也需要在场景启动时候加载,代码第①~③行是创建字体资源加载项目,其中第①行代码是指定加载项目的类型,第②行是字体文件名,这个名字是程序中使用的名字,我们上面的实例就使用了这个名字,第③行是字体文件的路径,一个字体可以能由多个字体文件构成,因此srcs配置项是一个数组。
注意  自定义的字体文件不能在JSB本地方式运行中正常显示,而系统字体(只要是运行的操作系统安装了该字体)可以在Web浏览器方式运行和JBS本地方式运行中正常显示。

TTF字体文件位置

参数dimensions标签内容大小,如果标签不能完全显示在指定的大小内,标签将被截掉部分,默认值为cc.size(0,0),它表示标签刚好显示在指定的大小内。参数hAlignment 表示标签在dimensions指定大小内水平对齐的方式,默认值是cc.TEXT_ALIGNMENT_LEFT,表示水平右对齐。参数vAlignment表示标签在dimensions指定大小内垂直对齐的方式,默认值是cc.VERTICAL_TEXT_ALIGNMENT_TOP,表示垂直顶对齐。

更多内容请关注最新Cocos图书《Cocos2d-x实战:JS卷——Cocos2d-JS开发》

本书交流讨论网站:http://www.cocoagame.net

欢迎加入Cocos2d-x技术讨论群:257760386

更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com

智捷课堂现推出Cocos会员,敬请关注:http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&categoryId=0

《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:

京东:http://item.jd.com/11659698.html

欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息

时间: 2024-08-04 02:09:35

Cocos2d-JS中的cc.LabelTTF的相关文章

cocos2d JS 中的数组拼接与排序

1 var arrA = [];//创建三个局部变量的新数组 2 var arrB = []; 3 var arrC = []; 4 var newCards = this.MyMahjong;//创建一个新的局部变量等于一个全局变量的数组:并把里面的内容依次拆开再全部拼接 5 for(var t=0;t<newCards.length;t++){ 6 var char = newCards[t].charAt(0); 7 if(char == "a"){ 8 arrA.push

cocos2d js ClippingNode 制作标题闪亮特效

1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似的效果. 顺便给我公司的游戏打下广告.https://itunes.apple.com/cn/app/kuang-zhan-san-guo/id691116157? mt=8 2.效果原理 很easy.就是一张白色两边羽化的图片在标题上从左往右移动.可是普通的移动会穿帮.我们须要以标题作为模板来截取白色的图片

cocos2d JS 本地缓存存储登陆记住账号密码-&gt;相当于C++中的UserDefault

在cocos-js 3.0以上的版本中,当我们用到本地存储的时候,发现以前用到的UserDefault在JS中并没有导出,而是换成了LocalStorage. 在LocalStorage.h文件中我们查看了一下源码,使用方法就是设置Key-Value的方式 存储数据:cc.sys.localStorage.setItem("key","value") 获取数据:cc.sys.localStorage.getItem("key") 移除数据:cc.

Cocos2d-JS中的cc.LabelAtlas

cc.LabelAtlas是图片集标签,其中的Atlas本意是"地图集"."图片集",这种标签显示的文字是从一个图片集中取出的,因此使用cc.LabelAtlas需要额外加载图片集文件.cc.LabelAtlas 比cc.LabelTTF快很多.cc.LabelAtlas 中的每个字符必须有固定的高度和宽度.cc.LabelAtlas类图如下图所示,cc.LabelAtlas间接地继承了cc.Node类,具有cc.Node的基本特性,它还直接继承了cc.AtlasN

cc.LabelTTF使用注意,ttf字体使用注意

在使用字体的时候.我们通常都会忘记将ttf字体放入resource中预加载,这样的话,字体是无法被使用的. 所以需要按如下格式在resource.js添加后.再使用字体相关内容{        type:"font",        name:"Thonburi",        srcs:["res/fonts/Thonburi.eot", "res/fonts/Thonburi.ttf"]    } 代码中使用var l

JS中 toString() &amp; valueOf()

原文链接: http://www.cnblogs.com/imwtr/p/4392041.html 数据的转换 所有对象继承了两个转换方法: 第一个是toString(),它的作用是返回一个反映这个对象的字符串 第二个是valueOf(),它的作用是返回它相应的原始值 toString() toString()可以看做是把一个数据转换成了相应字符串的形式,安照这个转换规则中 使用样例: //返回相应的字符串 console.log( ({x:1, y:1 }).toString() ); //

简述JS中 appy 和 call 的详细用法

Apply 和 Call 两个老生常言的方法,使用过程的一些细节还是有很大的异同,具体使用情况可以参照下面例子详细回顾一下. 区别和详解:js中call()和apply()的用法 1.关于call()和apply()的疑点: apply和call的区别在哪里 什么情况下用apply,什么情况下用call apply的其他巧妙用法(一般在什么情况下可以使用apply) 2.语法和参数分析: apply和call都能继承另外一个对象的方法和属性:Function.apply(obj,args)方法能

js中call方法的使用介绍

js call call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对

JS中parseInt()、Numer()深度解析

JS中字符串转换为数字有两种方式: 1.parseInt函数 定义:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt 语法:parseInt(string [ , radix]) 参数: string:要被解析的值.如果参数不是一个字符串,则将其转换为字符串.字符串开头的空白符将会被忽略. radix:一个2到36之间的整数值,用于指定转换中采用的基数. 如果省略该参