Text gets overlapped in Pixi.js

Question

I am using PIXI.js, i want to increment a counter and display it on the screen. However, the text overlaps.

var count=0;
count++;


var text = new PIXI.Text(count, {font:"50px Arial", fill:"red"});
    text.x = stageWidth / 2 - text.width / 2;
    text.y = stageHeight / 2;

    stage.addChild(text);

How can i prevent this from happening.

Answer 1

Make sure you only create one PIXI.Text instance and then update the count. That way the old text will be replaced with the new value and you'll save a lot on performance by creating less instances:

var count = 0;

var text = new PIXI.Text(count, {font:"50px Arial", fill:"red"});
    text.x = stageWidth / 2 - text.width / 2;
    text.y = stageHeight / 2;

    stage.addChild(text);

function incrementCount() {
    count++;
    text.setText(count);
}

incrementCount();