0 votes

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.

asked Jun 13 in Engine by Jalkhov (35 points)
edited Jun 13 by Jalkhov

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.

2 Answers

+1 vote
Best answer

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.

answered Jun 13 by DigitalDrako (108 points)
selected Jun 13 by Jalkhov

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:
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

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/

0 votes

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.

answered Jun 14 by Lisandro Lorea (112 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read How to use this Q&A? before posting your first questions.