Flip sprite without change sprite position

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Jalkhov

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
Normal

When i walk
When flip

Sprite dimension
Sprite dimension

I am using an animated sprite node and individual images.

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

DigitalDrako | 2020-06-13 20:33

I can see them correctly men.

Jalkhov | 2020-06-13 20:40

I have changed the images host.

Jalkhov | 2020-06-13 20:46

:bust_in_silhouette: Reply From: DigitalDrako

Awesome, I can see the images now. The reason flip_h 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 flip_h. 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.

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.

Jalkhov | 2020-06-13 21:00

The idea is that all animations are in the center. Heres an example:
enter image description here

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:
enter image description here

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

DigitalDrako | 2020-06-13 21:07

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.

Jalkhov | 2020-06-13 21:17

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

DigitalDrako | 2020-06-13 21:18

:bust_in_silhouette: Reply From: Lisandro Lorea

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 flip_facing rather than flip_h

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.