前言

在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		新文本对象的Y位置
text	String	将要写入的实际文本
style	object	要在文本上设置的样式属性

样式style可选

		argument	Default
font	string	可选	'bold 20pt Arial'	文本字体
fontStyle			继承字体	字体样式
fontVariant				字体变体
fontWeight				字体粗细
fontSize	string\|number			字体大小
backgroundColor			null	背景颜色
fill			black	字体颜色
align			left	对齐方式
boundsAlignH				文本在内的水平对齐
boundsAlignV			top	文本在内的垂直对齐
wordWrap	boolean		false	指示是否应使用自动换行
wordWrapWidth			100	文本将要换行的宽度（以像素为单位)
maxLines			换行显示的最大行数

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

phaser学习总结之Text详解

(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

作者：一只流浪的kk

出处：https://www.cnblogs.com/jjgw/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留原文链接，否则将追究法律责任

微信扫一扫

关注公众号