Phaser 3 Extended update sprite bug

by mrklein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.16.2/phaser.js"></script>

Babel + JSX

class MyScene extends Phaser.Scene {

    constructor (config)
    {
        super(config);
    }

    preload ()
    {
    }

    create ()
    {
    		/* Create dynamic sized text and background */
        const text = this.add.text(0, 0, 'AWESOME', { font: "32px Arial Black", fill: "#0000ff" });
        const w_text = text.getBounds().width + 20;
        const h_text = text.getBounds().height + 20;
        const bg_graphic = this.add.graphics().fillStyle(0xffff00, 1).fillRoundedRect(0, 0, w_text, h_text, 30);
        
        /* Problem 1: Align text in horizontal and vertical center of background */
 				// Phaser.Display.Align.In.Center(text, background) // try 1: Why does this not work?
 				// text.setOrigin(0.5); bg_graphic.setOrigin(0.5); // try 2: Why can't I set the origin of a graphic?
        text.setOrigin(0.5); text.x = w_text / 2; bg_graphic.y -= h_text / 2; // Calculate manually
        
				/* Create a container */        
        this.word = this.add.container(0, 50).setSize(w_text,h_text).add([bg_graphic, text]);

        /* Problem 2: Center container in top of the page */
        // this.word.x = game.config.width; this.word.setOrigin(0.5) // try 1: Why can't a container do setOrigin ?
        // Phaser.Display.Align.In.Center(this.word, this.add.zone(0, 0, 800, 600)); // try 2: Why does align not work?
        this.word.x = game.config.width / 2 - w_text / 2; // Calculate manually

        /* Make draggable */
        this.word.setInteractive();
        this.input.setDraggable(this.word);  
        
        /* Problem 3: Drag left and right */
        // Only left hand side is draggable
        this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
          gameObject.x = dragX;
        });
    }

}

var config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: MyScene
};

var game = new Phaser.Game(config);