前言
在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={ 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={ 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={ 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文本对象也有方法，只是我没有写出来而已。