typescriptreduxpixi.js

PIXI js text moving on redux state update


I made an element in my game class:

private winAmountText: PIXI.Text = new PIXI.Text('0')

I have below code in my constructor:

this.winAmountText.style = new PIXI.TextStyle({
    fill: 0xFFFFFF,
    fontSize: 86
})
this.setWinAmountText(0)
store.subscribe(() =>
    this.setWinAmountText(store.getState().winAmount)
)

and this is my function:

private setWinAmountText(value: number) {
    this.winAmountText.text = value.toString()
    this.winAmountText.x = this.width * 0.56 - this.winAmountText.width
    this.winAmountText.y = this.height * 0.905
}

when I open my page the win amount text is placed correctly. But when the state updates, the win amount moves to left top corner.

How can I fix this?


Solution

  • Fixed it: I had to wrap them in:

    requestAnimationFrame(() => {})
    

    so it looks like this:

    private setWinAmountText(value: number) {
        this.winAmountText.text = value.toString()
        requestAnimationFrame(() => {
            this.winAmountText.x = this.width * 2.4 - this.winAmountText.width
            this.winAmountText.y = this.height * 3.88
        })
    }