A Löve2D Tutorial — Part 05 Animate!

This is the fith part of a Löve2D tutorial. This is part is based heavely (HEAVELY) in the tutorial available at the Löve2D Wiki. Take a look!

Space Ghost to the Rescue

Given all that we have seen so far, this might be a good moment to get into the animation topic. In most games, the characters, enemies and scenario have some kind of movement that makes the gaming experience so much more enjoyable. It might look very simple at first, but it actually involves a lot of theory and techniques in art, math and computer science which cannot be covered here, but we can touch the surface of it and explain how to create simple animations with love2d.

So, let’s create an animated “hero” and explain some key points about it:

So, what is the big idea here? To create a animated character in most game engines, you basically loads a big image (sprite sheet) composed of smaller images (sprites), maps the position of each sprite and shows them sequentially, changing them during the duration of the animation. Of course there are other techniques that can be used, but this one is quite resource aware and easy to implement. Therefore, we use it in our example.

Basically we create an animation loading function that loads our sprite sheet into a hero variable. The loaded animation knows how to draw itself and rotate between the available squads (objects that map where each sprite is in the sprite sheet).

As we know the size of each square where the sprite is contained (16, 18), we iterate over the total image size mapping each sprite to a squad. Then we define how long should it take to go over every mapped squad (the duration) and change the sprite that is showed on each fraction of the duration as time goes by.

I also thought it would be a good idea to make our hero look left when it is walking left. That is done using negative scale technique and rotation. You can see the final result by pressing left and right arrow keys with the example running, which should look like this:

If there is anything that is not clear about this example, leave a comment about. Thanks for reading.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store