Please review the following JSFiddle: /

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?

Please review the following JSFiddle: https://jsfiddle/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?

• javascript
• text
• pixi.js

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