how to draw Sprites that turned to the left.

Newbie & Debugging Questions
#1

I know it sounds like a cryptic question but it’s been bothering for a while now.

I’m making some game, and the player has different Images that i use to give the illusion of Animation (when he walks, I rotate between 3 images, etc).

let’s say that now my player wants to attack to the right, attacking means extending the arm of the player to whatever desired location, (really its just using an image with the dude’s arm extended), naturally, since he’s extending his arm, i am now using a wider image.

(this is an example spritesheet so you can see what i’m talking about http://spritedatabase.net/files/nes/193/Sprite/TrevorC3.png)

if the dude’s attacking to the right, the arm is extended to the right, but there’s no problem, since i draw to the canvas from the top left coordinate of the Image (x coordinate).

however, if the dude’s attacking to the left, the arm is extended to the left, but there’s a problem, since i draw to the canvas from the top left coordinate of the Image (x coordinate), now the “body” of the dude is drawn a bunch of pixels to the right instead of staying where it was, it’s as if i were to try to punch something in front of me, but as i extend my arm, i walk backwards…

I’m not sure if i explained the problem… but can i get some help on this? I can clarify further if need be.

I kind of “fixed” this issue, essentially what i did was i looked at which animation image was displaying for that particular tick, and if it was one that made it extend its arm to the left i drew the character a few x pixels to the left… but it seems like a hack to me rather than a legit fix…

Thanks!

#2

Try flipping the image instead of using different left/right images.

#3

You should have additional data that goes alongside that sprite sheet, defining the bounds for each frame (and possibly separate collision bounds too).
For rotating or flipping you’ll want each frame to have an anchor point defined too, around which the operations are performed.

How you store that additional data is up to you; artists tend to like using paint packages, so having the bounds & anchor points defined as additional layers in the same image file can be a neat solution. (though obviously needs a little pre-processing in your code to extract the numerical offsets of the various pixel flags)

#4

I’m not sure I understand.

do you mean that my spritesheet should have some sort of x and y offset that should be used whenever i draw?

for example, if i extend my arm to the left, the x offset would be at like -30 or something, which would draw the entire image to the left.

I’m pretty sure that wasn’t what you were talking about at all, but that actually seems a lot better than the “fix” that i have now… cool!

#5

Here’s how I do it.

When making a sheet, make a set frame width/height before putting it together (make sure it can hold all of the animations) So, when you’re working on the sheet, be sure to center the sprites in the frames. That way when it animates, they aren’t jittery.

To solve your left and right problem, if the character is symmetrical you could always flip the image horizontally. If you animated it right, the center alignment won’t be messed up.

If you need an example I can throw one together.

Good luck bud.

EDIT:
To reiterate, each frame would be equal in width and height. Every sprite would go in a frame of the same size. So, a sheet would have 3x3, 16x16 frames. The first set containing an idle animation, the second running, and the third attacking. They would all be centered, so making an individual offset would no longer be necessary. Just be sure the frames are large enough to fit ALL potential sprites later or you may run into trouble.

#6

If you save/set a direction variable each time you move (e.g. with a key release/press left arrow key), your direction stays put when you stop. It still is set to the last direction you were moving in. Then check your direction variable when painting/drawing your char, if it is, say “left” (in Java: if (direction == “left”) { drawleftplayer image(x-20,…) }, then you can draw -20 to the left for the right shooting/clubbing image. As simple as that :slight_smile:

#7

ofc the easiest way is to just make all images the same width

#8

ohhh… yeah yeah that’s fucking brilliant.

My game was fucking up because i was using the dimensions of the actual Image as the collision hitbox, rather than having a separate invisible rectangle that represents the hitbox, so whenever the image changed dimensions it would fuck my game up (if i was beside a wall or something).

but yes, that seems like a really really good fix, (it seems so easy too, i’m stupid as fuck for never thinking of it).

Thanks a bunch!

#9

No problem man. I’m glad I could help you out with your problems.