前言

在phaser学习总结之phaser入门教程中，我们已经入门了phaser，对phaser也有所了解但是我们并没有对phaser中的每个对象的属性和方法进行详解，本章将对phaser中的Text文本对象进行详细介绍。

参数详解

参考资料：https://photonstorm.github.io/phaser-ce/Phaser.Text.html#height

语法：game.add.text(x,y,text,style)

样式style可选

(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>

phaser学习总结之Text对象详解-LMLPHP

(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>