前言
在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文本對象也有方法，只是我沒有寫出來而已。