phaser學習總結之Text詳解

時間 2019-11-05

標籤 phaser 學習總結 text 詳解欄目 HTML 简体版

原文原文鏈接

前言

在phaser學習總結之phaser入門教程中，咱們已經入門了phaser，對phaser也有所瞭解可是咱們並無對phaser中的每一個對象的屬性和方法進行詳解，本章將對phaser中的Text文本對象進行詳細介紹。javascript

參數詳解

參考資料：https://photonstorm.github.io/phaser-ce/Phaser.Text.html#heighthtml

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

Name	Type	Description
x	number	新文本對象的X位置
y	number	新文本對象的Y位置
text	String	將要寫入的實際文本
style	object	要在文本上設置的樣式屬性

樣式style可選git

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

設置字體，也能夠是字體的屬性集合github

(2)：fontStyle

設置字體樣式，默認繼承自字體，可選normal， italic， obliquepost

(3)：fontVariant

設置字體變體，默認繼承自字體，可選normal，small-caps學習

(4)：fontWeight

設置字體粗細，默認繼承自字體字體

(5)：fontSize

設置字體大小，默認繼承自字體this

(6)：backgroundColor

設置背景顏色，默認爲nullurl

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