Phaser3 テキストの各パラメータ一覧と指定方法

2019-05-23PhaserPhaserテキスト

単純なテキストの表示

Phaser 3でテキストを表示するにはadd.text()を利用します。

let text = this.add.text(X座標, Y座標, 文字列);

必須因数として、第一因数にX座標、第二因数にY座標、第三因数に表示する文字列を指定します。

単純なテキストの表示サンプル

See the Pen Phaser 3 add text by yochans (@yochans) on CodePen.

テキストのフォントサイズ他パラメータの指定

Phaser 3で表示するテキストのサイズやフォントファミリー、テキスト色を指定するにはadd.text()の第四因数にパラメータを与える、またはテキストオブジェクトに対してsetXxxx()で指定する方法があります。

add.text()の第四因数にパラメータを与える方法
add.text()の第四因数にパラメータを与える方法は他要素とセットで指定可能です。

let text = this.add.text(5, 5, "text", {fontSize: 30,fontFamily: "Arial"});

また省略した記述も可能です。

let text = this.add.text(5, 5, "text", {font: '30px Arial'});

setXxxx()で指定する方法

テキストオブジェクトに対して、setXxxx()と指定する事で各パラメータを指定できます。

let text = this.add.text(5, 5, "text");
text.setFontSize(30);
text.setFontFamily("Arial");

繋げて指定する事も可能です。

let text = this.add.text(5, 5, "text");
text.setFontSize(30).setFontFamily("Arial");

setXxxxでの指定は、add.textに対しても有効です。

let text = this.add.text(5, 5, "text").setFontSize(30).setFontFamily("Arial");

パラメータ指定の表示サンプル

See the Pen Phaser 3 add text set parameter by yochans (@yochans) on CodePen.

指定可能なパラメータ一覧

fontSizesetFontSize()テキストのフォントサイズ
fontFamilysetFontFamily()テキストのフォントファミリー

初期値:Courier

backgroundColorsetBackgroundColor()テキスト背景色

初期値:null

strokesetStroke(枠色,太さ)テキストの枠色と太さ(fill,thickness)

初期値:#FFFFF初期値:0

fillsetFill()塗りつぶしの色
shadowsetShadow()影のスタイル
shadow:{offsetX: 0,offsetY: 0,color:’#000′,blur: 0,stroke: false,fill:false}

setShadow(x, y, color, blur, shadowStroke, shadowFill)

 setShadowOffset();
setShadowColor();
setShadowBlur();
setShadowStroke();
setShadowFill();
影のスタイルの各個別指定
originsetOrigin()基準値

origin: { x: 0.5, y: 0.5 }setOrigin(0.5,0.5)初期値:0,0

paddingsetPadding()パディング値
setPadding(左, 上, 右, 下)
textsetText()表示テキストの指定
動的にテキストを変更する場合に利用
tintsetTint() 
lineSpacingsetLineSpacing() 
maxLinessetMaxLines() 
fixedSizesetFixedSize()オブジェクトのサイズ

2019-05-23PhaserPhaserテキスト

Posted by Yousuke.U