Animating a character from a spritesheet

Post your own tutorials, guides and demos.

Post » Wed Aug 08, 2012 10:22 pm

Cheers,

finally a contribution from Schade Studios.

I`ve been tinkering around with spritesheets lately and it comes down to the fact that Tiled Background really is an alternative if you need dynamically loading textures for all kinds of game assets. It is really flexible, especially if you want to charge up new gfx at runtime. On top of that, proper usage can save a whoppin' amount of V-RAM.
Why?
Let`s say, you use the ordinary sprite for animation of your game`s main character. The character sprite is most of the time around 70-80p in both width and height, thats already a sh*t if you have let`s say 50 frames in total. Construct will reserve 3,2 MB of VRAM (128x128 for the next power of two size * 4 byte * 50 frames) at just to display this single character. Things can add up quickly if you have more of those characters at hand.

With the proper technique, you can squeeze all 50 frames of 70x70s or whatever on one single 512x512 image, let`s say with 1 pixel margin and address them through construct. A 512x512 will use only 1 MB of V-RAM. In that example it would be a saving of around 2 MBs of V-RAM, that`s something like... well... PROFIT!!!111oneoneeleven.

It comes at some cost, though, namely CPU time. Since we cannot use Construct`s built-in cycling through image banks, we must use our own routine to find the correct sprites on the sheet, animate them, and so on.

No blatant advertising intended, but I found TexturePacker (code-and-web.de) to be the perfect tool to create Spritesheets. It also exports to various formats of Game Development frameworks. Unfortunately, Construct Classic doesn`t come with a routine for spritesheets, but what I did is that I used the general XML export of TexturePacker and wrote my own.

Basically, TP does all the dirty work, you just have to provide the following:

1. A folder containing your sprites with a proper enumeration in the filename (e.g. fire_1.png, fire_2.png and so on)
2. After trimming and all that stuff, TP has to generate a power-of-two image out of all of your sprites, and a Generic XML.

That XML contains the following:

-Some, for our purposes, more ore less useless header stuff
-And the meta data, it looks like:

<Image Name="Crossbow 1" Height="70" Width="77" YPos="1658" XPos="871"/>

Image Name=the original filename (useful for later reference)
Height=Absolute Height of the sprite
Width=Absolute width
XPos=X Position of the sprite on the sheet
YPos=Y position

That`s the basics. TP is also able to output the original frame size of the single images, allowing pixel-perfect size the sprite later on and offsetting it from the original size, so the animation boundaries don`t cause the sprite to jerk around whilst being animated.

I will get to that tomorrow, it`s pretty late already.

I have created a basic example on how to load a sprite sheet and address it in order to animate a game character with it.
Grab it HERE.
Props, slops and comments welcome ;)

Cheers
The Colonel
Image
B
13
S
4
G
1
Posts: 113
Reputation: 1,712

Post » Mon Oct 15, 2012 1:50 am

Thanks Colonel!
B
1
Posts: 1
Reputation: 227

Post » Sun Nov 11, 2012 1:01 am

this is interesting, so it is possible to have animations with tiled textures but you seem to be loading them with events somehow.

this interests me because i need a way of having water and duplicating tonnes of tiles seems wasteful, i've resorted to stretching the pictures a bit which is loosing my 16x16 art style a bit.

You wouldn't be able to guide me towards a texture sheet type implementation would you? Is it feesable to have the frames as seperate png's still (i have 4 water frames)? I I like the idea of external resources it's getting messy xD


EDIT **i got what i needed from Sprite.LoadFrameFromFile("Picture.png")   ... it's a little less flexible than what you're doing but suitable for my needsDarkShroom2012-11-11 14:46:01
B
4
Posts: 31
Reputation: 412

Post » Wed Dec 05, 2012 8:38 pm

Whoopsy, I was off a while.
I don`t hope you are animating your water with loading a different .png for each frame at runtime in a backdrop object or sprite with a single animation frame, that would mean loads of hard disk activity and greatly lower your game perfomance.

If you need further advise, just pm me since I tend to... overlook things ;)

Cheers,
the Colonel
Image
B
13
S
4
G
1
Posts: 113
Reputation: 1,712

Post » Sat Dec 08, 2012 2:25 pm

actually in the end i decided just copy my frames in as i don't really have many frames, with python i can go:

"Sprite.LoadFrameFromFile("Picture.png")

but i don't think i can load into other animation frames so it's pointless as yeah like you're pointing out i don't want to be constantly loading data
B
4
Posts: 31
Reputation: 412


Return to Your tutorials & example files

Who is online

Users browsing this forum: No registered users and 0 guests