前言

在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/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留原文連結，否則将追究法律責任

微信掃一掃

關注公衆号