Phaser 3 | 基準値を指定してテキストを中央に揃える方法

2019-01-102020-07-11Phaser 3 テキスト,Phaser 3

テキストを指定範囲内で中央揃えさせる方法は色々ありますがadd.text()でのoriginパラメータの指定やsetOrigin()で基準値を利用するのが簡単です

X軸とY軸で指定する基準値を変える場合はsetOrigin(0.5,1)での指定が可能です

originは0から1の間で指定可能で初期値は0,0になっており左上隅が基準値になっています

1を指定すると指定した表示位置の座標より左上に向かってテキストが表示されます

0.5とすることで基準値が中央になり、指定した表示位置の座標に対して中央から左右上下に向かって表示されます

add.text()パラメータでをoriginを指定する方法

add.text()の因数パラメータにてoriginを指定する方法です

let text = this.add.text(250, 150, 'Phaser 3',{fontSize: 30,fontFamily: "Arial",origin: 0.5});

テキストオブジェクトにsetOrigin()で指定する方法

作成したテキストオブジェクトに対してsetOrigin()を指定する方法です

let text = this.add.text(250, 150, 'Phaser 3').setFontSize(30).setFontFamily("Arial").setOrigin(0.5);

基準値を指定してテキストを中央に揃るサンプル

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