Phaser显示对象（文字）

昨天学习了Phaser显示对象是啥意思，有哪些，今天具体学习Phaser中的文字显示对象吧 哈哈~~每天进步一小点

 

创建文字对象

var text = game.add.text(x,y,str,{fill:’#fff’});

text.fill=’#fff’;

text.style.fill = ‘#fff’//文字颜色

text.font=’微软雅黑’//默认是宋体

text.fontSize=60//文字大小

text.fontWeight=’normal’//值得注意，创建的文字对象会默认加粗，设置fontWeight为normal才会变成正常粗细

text.style.backgroundColor=’#0f0’//值得注意，文字背景颜色必须通过style来设置

Text.stroke=’#0f0’//文字描边，设置了描边必须设置描边粗细，否则无效果

Text.strokeThickness=10//描边宽度，默认0

text.wordWrap=true//文字自动换行。值得注意，换行目前还不支持中文

text.wordWrapWidth=150//超过150自动换行，必须与上一属性一起设置

 

特殊字体的实现

webFont、BitmapText、RetroFont。其中后两者功能相同

1.webFont

先通过css3的@font-face引入字体文件，值得注意的是，通过css的fontface引入的字体文件在canvas中使用时，必须先激活一下才会去加载那个字体文件。也就是说光引入是不够的，还得这样做：.text{font-family:”text”;} <div class=’text’>激活字体文件</div>

只有使用了引入的字体，浏览器才会去加载这个字体文件，否则是不会加载的。我们在canvas中使用特殊字体，必须先用div使用一下，激活它！

Text.anchor.set(0.5,0.5);//设置文字锚点，居中

2.BitmapText

称呼它为图片文字或图片字体。它更像是精灵对象，因为它是把我们需要的文字都放到一个图片中，要显示哪个文字它就显示图片对应的部分。使用BitmapText时，必须先在preload方法中加载它

preload方法中：game.load.bitmapFont(key,textureURL,atlasURL,atlasData,xSpacing,ySpacing)

Key 资源名称

textureURL存放文字的图片位置

atlasURL 数据文件存放的位置，重要！通常设置了这个就不用设置atlasData了

atlasData,xSpacing,ySpacing不常使用，后两个是定义文字间隔

create方法中：game.add.bitmapText(x,y,font,text,size,group);

font资源名称，对应key

text文字内容

size文字大小

值得注意的是：BitmapText是需要工具来制作的，官方文档中介绍了几个工具，如下

BMFont (Windows, free): http://www.angelcode.com/products/bmfont/ 

Glyph Designer (OS X, commercial): http://www.71squared.com/en/glyphdesigner 

Littera (Web-based, free): http://kvazars.com/littera/

第三个在线生成Bitmap的工具真心强大！功能惊呆本宝宝了！

BitmapText的优势真强大，有了它，不需要加载特殊文字的字体，只要把我们需要的那些字生成为一张图片即可！要注意，我们所使用的文字必须确保在图片上存在，并且数据文件不可缺失。Bitmap的缺陷是特殊字体不能改颜色了，图片上是什么颜色就什么颜色。所以还是根据项目需要酌情考虑用bitmap还是webFont吧。

文档：http://g.vsene.cn/phaser/docs/Phaser.BitmapText.html

顺便说一句文档真心强大，可惜没有中文版。。