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

2019年4月11日Phaser

単純なテキストの表示

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年4月11日PhaserPhaserテキスト

Posted by ヨウスケ