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

2019-01-102020-09-14Phaser 3 テキスト,Phaser 3

単純なテキストの表示

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()の第四因数にパラメータを与える方法は他要素とセットで指定可能です。

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

また、fontSizeとfontFamilyのキー名は省略した記述も可能です。

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

テキストオブジェクトに対して、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");

繋げて指定する記述は、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.

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