Flip sprite without change sprite position

Question

Good community, I'm trying to do a flip_h to a sprite when I walk, but the image I'm using has the characteristic that the "idle" animation has an extra space, because the other animations, like the attack one, occupy that space when they are executed, so when I do the flip_h my player is like this:

Idle state

When i walk

Sprite dimension

I am using an animated sprite node and individual images.

Comments

It's hard to visualize the problem as I can't see the images, at least not on my end. Could you make sure the images are set properly? If you can see them fine, then it may be an issue with my browser

---

I can see them correctly men.

---

I have changed the images host.

Answer 1

Awesome, I can see the images now. The reason fliph changes the position of the sprite is because it doesn't flip just the sprite, but the entire node. Since your sprite is located in the bottom right corner, it's flipped over to the bottom left corner when you use fliph. In order to fix this, you have to make sure the sprite is in the center of the frame (little orange box), so I would open my pixel editor and move him to the center. If you need the extra space for animation room, make the canvas larger so there's still enough room while the sprite is in the center.

Comments

And wouldn't it affect the animation when, say, he attacks? Because if the idle state image is in the center, when the attack animation comes, it will be in the corner, and although I haven't tried it, I can imagine that there will be some kind of position change between the attack state and the idle state. That is to say, state in idle state will be in the center, when it attacks it will return to the corner, when it finishes attacking it will return to the center.

---

The idea is that all animations are in the center. Heres an example:

This is my base sprite. He's smaller than yours, but he still shows that the canvas he residesin is much larger than he is. This is so the attack animations have room to animate. Here's my attack animation:

the attack animation takes up significantly more space than the base sprite, so the canvas is sized to make up for that fact. So for your sprite, you'd make the canvas large enough so he can still attack while being in the center of the frame

---

Ok ok I understand, that's a great idea, is that what happens is that the sprite sheet is taken from the internet, then I would have to modify it based on the png. Thanks a lot, now I know what to look for when using sprites.

---

Yeah! And if you're looking for some free pixel editors, check out https://www.piskelapp.com/

Answer 2

You can add the following code to your sprite:

tool
extends AnimatedSprite

export(bool) var flip_facing = false setget set_flip_facing

func set_flip_facing(val):
    if flip_h != val:
        offset.x = -offset.x
    flip_h =val
    flip_facing = val

Then you can use the pivot to mark the center of the character and animate flipfacing rather than fliph

Another option is to have the sprite be a child of a Node2D, offset it and then use scale.x = -1 on the node2d to flip it.