how to center a text object within it's containers local in PIXI.js

Question

Please review the following JSFiddle: https://jsfiddle.net/r4yfozsw/1/

var stage = new PIXI.Container(),
    renderer = PIXI.autoDetectRenderer(640, 480),
    loader = PIXI.loader,
    resources = loader.resources;

var menu = createMenu();

document.body.appendChild(renderer.view);
stage.addChild(menu);

//Render the stage
loop();


function loop(){
    setInterval(() => {
          renderer.render(stage);
      }, 1000/10 );
 }

function createMenu(){
    var buttons = new PIXI.Container();
    buttons.addChild(createButtonEndTurn());
    return buttons;
}

function createButtonEndTurn(){
    var buttonText = new PIXI.Text("End Turn",
                                   {
                                       fontFamily : 'Arial',
                                       fontSize: 24,
                                       fill : "white",
                                       align : 'right'
                                   });
    var buttonEndTurn = new PIXI.Graphics();

    buttonEndTurn.beginFill(0xFF2342);
    buttonEndTurn.drawRect(400,300,150,100);
    buttonEndTurn.endFill();
    buttonEndTurn.interactive = true;
    buttonEndTurn.on('mousedown', endTurnEvent);
    buttonEndTurn.addChild(buttonText);

    return buttonEndTurn;
}

function endTurnEvent(eventData){
    eventData.target.children[0].setText("End Turn" + turn);
    turn++;
    console.log("Turn " + turn + " finished!");
}

I added the Text object to my button rectangle as a child. I also added the option align for the text. I therefore expected the text to be centered within the buttons local - but it has been rendered to an arbitrary position in the canvas. Can you tell me what I'm not understand with the container system of PIXI.js here?

Answer 1

The reason your text doesn't appear inside the retangle is because of the way you've drawn your rectangle. Think of the Graphics object as a container. Within that container, you've drawn a rectangle at position {x:400, y:300} but the container itself is still sitting at position {x:0, y:0}. So when you add your text object, it also sits inside the container at position {x:0, y:0}. If you want your text to move within the rectangle, you need to move the position of the container.

buttonEndTurn.beginFill(0xFF2342);
buttonEndTurn.drawRect(0,0,150,100);
buttonEndTurn.endFill();
buttonEndTurn.x = 400;
buttonEndTurn.y = 300;

Now as for the alignment, you will have to manually set this up. Setting align : 'center'won't help here because that is only really useful for multi-line text. It doesn't align text within it's parent container; it just makes it so that each line in a multi-line text object will be aligned to the middle.

The easiest way to make the object center aligned within the parent container would be to set the anchor point: buttonText.anchor.x = 0.5;

Now the text will be anchored from it's mid point, but as you can see, it is not positioned correctly within the parent rectangle. So just move it over: buttonText.x = buttonEndTurn.width/2;

Here's the complete function:

function createButtonEndTurn(){

    var buttonEndTurn = new PIXI.Graphics();
    buttonEndTurn.x = 400;
    buttonEndTurn.y = 300;
    buttonEndTurn.beginFill(0xFF2342);
    buttonEndTurn.drawRect(0,0,150,100);
    buttonEndTurn.endFill();
    buttonEndTurn.interactive = true;
    buttonEndTurn.on('mousedown', endTurnEvent);
    var buttonText = new PIXI.Text("End Turn",
    {
        fontFamily : 'Arial',
        fontSize: 24,
        fill : "white",
        align : 'center'
    });
    buttonText.anchor.x = 0.5;
    buttonText.x = buttonEndTurn.width/2;
    buttonEndTurn.addChild(buttonText);
    return buttonEndTurn;
}