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

ご質問

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

再現結果

再現するコード

            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;
        }

こんな感じに

解説

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

だから、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;
        }