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

Text

単純なテキストの表示

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 Parameter by yochans (@yochans) on CodePen.

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

add.text() setXxxx() 備考
fontSize setFontSize() テキストのフォントサイズ
fontFamily setFontFamily() テキストのフォントファミリー

初期値:Courier

backgroundColor setBackgroundColor() テキスト背景色

初期値:null

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

初期値:#FFFFF

初期値:0

fill setFill() 塗りつぶしの色
shadow setShadow() 影のスタイル

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();
影のスタイルの各個別指定
origin setOrigin() 基準値

origin: { x: 0.5, y: 0.5 }

setOrigin(0.5,0.5)

初期値:0,0

padding setPadding() パディング値

setPadding(左, 上, 右, 下)

text setText() 表示テキストの指定

動的にテキストを変更する場合に利用

tint setTint()  
lineSpacing setLineSpacing()
maxLines setMaxLines()
fixedSize setFixedSize() オブジェクトのサイズ

Text

Posted by Yousuke.U