How to change Origin of animation/frames?

Phaser 3
1

Hello, I have some trouble with .flipX with an animation. The origin of the image should be changed but it doesn’t work the way I think it should work…

Walk001

In preload I load some images:
this.load.image(‘walk01’, ‘assets/walk001.png’)
this.load.image(‘walk02’, ‘assets/walk002.png’)
this.load.image(‘walk03’, ‘assets/walk003.png’)
this.load.image(‘walk04’, ‘assets/walk004.png’)
…

The image ‘walk001’ has a Dino but its not centered. The dino is positioned to the left of the origin. The same with the other images.

In create I make the animation:

this.anims.create({
key: ‘walking’,
frames: [{
key: ‘walk01’
},
{
key: ‘walk02’
},
{
key: ‘walk03’
},
{
key: ‘walk04’
},
…
],
frameRate: 6,
repeat: -1,
})

Then also in create I place the dino with the animation:

    dino = this.physics.add.sprite(320, 43, 'walk01')

    dino.play('walking')
        .setScale(0.25)
        .setSize(420, 420, 0, 0)
        .setOffset(0, 0)

The setSize/setOffset is there to place the colliding box at the right place (as its normally the same as the image borders, which are incorrect with this image files).

This works. The dino animates ‘walking’ and I can give it some velocity.

But when I call flipX:

   dino.setVelocityX(value)
        if (value < 0) {
            dino.flipX = true
        } else {
            dino.flipX = false
        }

it flips around the center of the image. The dino should flip around its own center (which is left from the image center).

My thought is to set the origin of the whole animation to the left, making a pivot point that is in de center of the dino. OR maybe I should set the origin of every single image?

Making the origin in the middle of the dino makes the x,y coordinates of the dino more useful too.

But I can’t get it working.
Not with .setOrigin, nor .setDisplayOrigin.

What (where?) is the best way to get this done?

2

Hi,

From the doc:
https://newdocs.phaser.io/docs/3.52.0/focus/Phaser.GameObjects.Sprite-flipX

Flipping always takes place from the middle of the texture and does not impact the scale value. If this Game Object has a physics body, it will not change the body. This is a rendering toggle only.

Just editing your dino with photoshop or gimp, is imo the best and easiest solution.

3

@BlunT76 I read that. Really. But it didn’t connect. Flipping around the origin is what I need so this flipping doc text didn’t make it for me. Thanks for pointing it out for me.

This means that I have to take another route. I’m thinking something like:

        dino.setVelocityX(value)
        if (value < 0) {
            dino.flipX = true
            dino.setOrigin(0.7,1)
        } else {
            dino.flipX = false
            dino.setOrigin(0.3,1)
        }

With flipping I also (re)set the origin.

Thanks!

4

As long as the dino body stay at the good position, it’s fine.
I prefer to center my sprites with an editor, this gives me flipX, flipY and rotation working with less logic.