前言

在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

phaser学习总结之Text对象详解的更多相关文章

  1. JavaWeb学习----JSP内置对象详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  2. hibernate学习（2）——api详解对象

    1   Configuration 配置对象 /详解Configuration对象 public class Configuration_test { @Test //Configuration 用户 ...

  3. dom对象详解--document对象(二)

       dom对象详解--style对象 style对象 style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中所有style对象的集合,这里讲解的 ...

  4. Window 对象详解 转自 http://blog.csdn.net/jcx5083761/article/details/41243697

    详解HTML中的window对象和document对象 标签: HTMLwindowdocument 2014-11-18 11:03 5884人阅读 评论(0) 收藏 举报 分类: HTML& ...

  5. dom对象详解--document对象(一)

     document对象 Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在. Document对象是window对象的一 ...

  6. jQuery的deferred对象详解（一）

    最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...

  7. [转] jQuery的deferred对象详解

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...

  8. jQuery的deferred对象详解（转）

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...

  9. [转]ajQuery的deferred对象详解

    来自:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html 作者:  ...

随机推荐

  1. 一张图了解.Net Core和.NetFx和.Net Standard和Xamarin关系

    一张图了解 .Net Core和.Net Framework和.Net Standard和Xamarin关系 总结 .NET Standard是一项API规范,每一个特定的版本,都定义了必须实现的基类 ...

  2. 听说你不会调参？TextCNN的优化经验Tricks汇总

    前言:本篇是TextCNN系列的第三篇,分享TextCNN的优化经验 前两篇可见: 文本分类算法TextCNN原理详解(一) TextCNN代码详解(附测试数据集以及GitHub 地址)(二) 调优模 ...

  3. yzoj P2343 & 洛谷 P1437 [HNOI2004]敲砖块

    题意 在一个凹槽中放置了N层砖块,最上面的一层油N块砖,从上到下每层一次减少一块砖.每块砖都有一个分值,敲掉这块砖就能得到相应的分值,如图所示. 如果你想敲掉第i层的第j块砖的话,若i=1,你可以直接 ...

  4. Navicate for mysql如何导入一个sql文件

    我在做的项目是宜立方商城的项目,现在需要把见表的sql文件导入到navicate中去,步骤如下: ①新建一个数据库,如下: ②在数据库名字上右键,选择运行sql文件 ③选择如下sql文件 ④刷新之后:

  5. C#中将表示颜色的string转换成Color

    场景 在Winform中需要存储某控件的Color属性,存储的是string字符串, 然后再对控件进行赋值时需要将string转换成Color. 实现 myPane.YAxis.Color = Sys ...

  6. apache ignite系列（九）：使用ddl和dml脚本初始化ignite并使用mybatis查询缓存

    博客又断了一段时间,本篇将记录一下基于ignite对jdbc支持的特性在实际使用过程中的使用. 使用ddl和dml脚本初始化ignite 由于spring-boot中支持通过spring.dataso ...

  7. HDFS原理及操作

    1 环境说明 部署节点操作系统为CentOS,防火墙和SElinux禁用,创建了一个shiyanlou用户并在系统根目录下创建/app目录,用于存放 Hadoop等组件运行包.因为该目录用于安装had ...

  8. ubuntu上vritualbox为系统分配硬盘空间

    VBoxManage是virtualbox 在ubuntu上提供的管理virtualbox的命令行命令 VBoxManage modifyhd windowsDevEnv --resize VBoxM ...

  9. IO流——File类（文件流类）

    java语言的输入输出操作是借助于输入输出包java.io来实现的,按传输方向分为输入流与输出流,从外设传递到应用程序的流为输入流,将数据从应用程序输入到外设的流为输出流. File类的构造方法: 1 ...

  10. ckeditor中 config.js等通过ckeditor.js引入文件手动修改方法

    因为除了ckeditor.js之外的引用文件是通过ckeditor.js自动添加<script>或<link>标签实现文件的引入,引入的根目录是展示页面的地址.有时需要手动修改 ...