Posted at

【Egret無料ご相談室】テキストが中央揃えにならんのだけど


ご質問


いまいちテキストの中央揃えが反応してくれないかもです。



再現結果

image.png


再現するコード

            const label:egret.TextField = new egret.TextField();

this.addChild( label );
label.text = "なんでやねん";
label.textColor = 0x000000;
label.textAlign = egret.HorizontalAlign.CENTER;
label.verticalAlign = egret.VerticalAlign.MIDDLE;
label.x = 0;
label.y = 100;


回答

画面(Stage)全体に対してセンタリングしたいなら次のコードで

        {

const label:egret.TextField = new egret.TextField();
this.addChild( label );
label.text = "うごくねん";
label.textColor = 0x000000;
label.textAlign = egret.HorizontalAlign.CENTER;
label.verticalAlign = egret.VerticalAlign.MIDDLE;
label.x = 0;
label.width = this.stage.stageWidth;
label.y = 0;
label.height = this.stage.stageHeight;
}


こんな感じに

image.png


解説

textAlignverticalAlignは、egret.TextField自体の領域の中で、textをどこに整列させるか決めるプロパティです。デフォルトの状態では、egret.TextFieldの領域はtextにフィットしているので、xyプロパティで指定した位置に表示されます。

だから、egret.TextFieldの領域を画面全体まで広げるように、領域の左上を画面の左上にして、高さと幅を画面いっぱいに広げれば、意図した動作になります。


別解

個人的には下記のように位置を自分で指定してあげるのがいいかと思います

        {

const label:egret.TextField = new egret.TextField();
this.addChild( label );
label.text = "こっちがよくね?";
label.textColor = 0xff0000;
label.x = (this.stage.stageWidth-label.width) / 2;
label.y = (this.stage.stageHeight - label.height) / 2;
}

image.png