前言
在phaser学习总结之phaser入门教程中，我们已经入门了phaser，对phaser也有所了解但是我们并没有对phaser中的每个对象的属性和方法进行详解，本章将对phaser中的Text文本对象进行详细介绍。
参数详解
参考资料：https://photonstorm.github.io/phaser-ce/Phaser.Text.html#height
语法：game.add.text(x,y,text,style)
| Name | Type | Description |
| x | number | 新文本对象的X位置 |
| y | number | 新文本对象的Y位置 |
| text | String | 将要写入的实际文本 |
| style | object | 要在文本上设置的样式属性 |
样式style可选
| Name | Type | argument | Default | Description |
| font | string | 可选 | 'bold 20pt Arial' | 文本字体 |
| fontStyle | string | 可选 | 继承字体 | 字体样式 |
| fontVariant | string | 可选 | 继承字体 | 字体变体 |
| fontWeight | string | 可选 | 继承字体 | 字体粗细 |
| fontSize | string|number | 可选 | 继承字体 | 字体大小 |
| backgroundColor | string | 可选 | null | 背景颜色 |
| fill | string | 可选 | black | 字体颜色 |
| align | string | 可选 | left | 对齐方式 |
| boundsAlignH | string | 可选 | left | 文本在内的水平对齐 |
| boundsAlignV | string | 可选 | top | 文本在内的垂直对齐 |
| wordWrap | boolean | 可选 | false | 指示是否应使用自动换行 |
| wordWrapWidth | number | 可选 | 100 | 文本将要换行的宽度（以像素为单位) |
| maxLines | number | 可选 | 0 | 换行显示的最大行数 |
(1)：font
设置字体，也可以是字体的属性集合
(2)：fontStyle
设置字体样式，默认继承自字体，可选normal， italic， oblique
(3)：fontVariant
设置字体变体，默认继承自字体，可选normal，small-caps
(4)：fontWeight
设置字体粗细，默认继承自字体
(5)：fontSize
设置字体大小，默认继承自字体
(6)：backgroundColor
设置背景颜色，默认为null
(7)：fill
设置字体的颜色，默认black
(8)：align
设置字体的对齐方式，默认left(左对齐),可选left，right，center
(9)：boundsAlignH
设置文本在内的水平对齐,默认值left,可选left，center，right
(10)：boundsAlignV
设置文本在内的垂直对齐,默认值top,可选top，millde，bottom
(11)：wordWrap
设置指示是否应使用自动换行,默认值false
(12)：wordWrapWidth
文本将要换行的宽度（以像素为单位)，默认值100
(13)：maxLines
换行显示的最大行数，默认值0
案例解析
(1):简单的文本案例入门
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本基础例子title>
head>
<body>
<script src="../js/phaser.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
function preload(){}
function create(){
var style={font:'65px Arial',fill:'#ff0044',align:'center',backgroundColor:'#fff'} //设置显示文本的样式
var text=game.add.text(game.world.centerX,game.world.centerX,'你好',style);
text.anchor.set(0.5);
}
function update(){}
script>
body>
html>
(2):设置文本居中
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文本居中title>
head>
<body>
<script src="../js/phaser.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
function preload(){}
function create(){
var text;
var style={font:'bold 32px Arial',fill:'#fff',boundsAlignH:'center',boundsAlignV:'middle'}
text=game.add.text(0,0,'你好',style);
text.setShadow(3, 3, '#f40', 2);//设置文字阴影
text.setTextBounds(0,0,800,600);
}
function update(){}
script>
body>
html>
(3):改变文本的例子
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改变文本的例子title>
head>
<body>
<script src="../js/phaser.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
function preload(){
}
var text;
var count=0;
function create(){
text=game.add.text(game.world.centerX,game.world.centerY,'你好',{fill:'#fff',align:'center'});
text.anchor.setTo(0.5,0.5);
}
function update(){
game.input.onDown.addOnce(updateText, this);
}
function updateText() {
count++;
text.setText("你点击了"+count+"次");
}
script>
body>
html>
总结
本章主要讲解了phaser中文本对象的相关属性，文本对象的属性远远不止这些，参考文档我已经给出，有需要的可以根据参考文档来学习，当然Text文本对象也有方法，只是我没有写出来而已。
资源下载：https://coding.net/u/kk_1/p/phaser_group/git