Using Sprites for Animation

Exclusive offer: get 50% off this eBook here
LÖVE for Lua Game Programming

LÖVE for Lua Game Programming — Save 50%

Master the Lua programming language and build exciting strategy-based games in 2D using the LÖVE framework with this book and ebook

£11.99    £6.00
by Darmie Akinlaja | October 2013 | Open Source

This article, created by Darmie Akinlaja, the author of LÖVE for Lua Game Programming, takes you through drawing a 2D object, moving objects, and animating a game character.

(For more resources related to this topic, see here.)

Sprites

Let's briefly discuss sprites. In gaming, sprites are usually used for animation sequences; a sprite is a single image in which individual frames of a character animation are stored. We are going use sprites in our animations.

If you already have knowledge of graphics design, it's good for you because it is an edge for you to define how you want your game to look like and how you want to define animation sequences in sprites. You can try out tools such as Sprite Maker for making your own sprites with ease; you can get a copy of Sprite Maker at http://www.spriteland.com/sprites/sprite-maker.zip. The following is an sample animation sprite by Marc Russell, which is available for free at http://opengameart.org/content/gfxlib-fuzed you can find other open source sprites at http://opengameart.org/content/platformersidescroller-tiles:

The preceding sprite will play the animation of the character moving to the right. The character sequence is well organized using an invisible grid, as shown in the following screenshot:

The grid is 32 x 32; the size of our grid is very important in setting up the quads for our game. A quad in LÖVE is a specific part of an image. Because our sprite is a single image file, quads will be used to specify each of the sequences we want to draw per unit time and will be the largest part part of our animation algorithm.

Animation

The animation algorithm will simply play the sprite like a tape of film; we'll be using a basic technique here as LÖVE doesn't have an official module for that. Some members of the LÖVE forum have come up with different libraries to ease the way we play animations. First of all let us load our file:

function love.load() sprite = love.graphics.newImage "sprite.png" end

Then we create quads for each part of the sprite by using love.graphics. newQuad(x, y, width, height, sw, sh), where x is the top-left position of the quad along the x axis, y is the top-left position of the quad along the y axis, width is the width of the quad, height is the height of the quad, sw is the sprite's width, and sh is the sprite's height:

love.graphics.newQuad(0, 0, 32, 32, 256, 32) --- first quad love.graphics.newQuad(32, 0, 32, 32, 256, 32) --- second quad love.graphics.newQuad(64, 0, 32, 32, 256, 32) --- Third quad love.graphics.newQuad(96, 0, 32, 32, 256, 32) --- Fourth quad love.graphics.newQuad(128, 0, 32, 32, 256, 32) --- Fifth quad love.graphics.newQuad(160, 0, 32, 32, 256, 32) --- Sixth quad love.graphics.newQuad(192, 0, 32, 32, 256, 32) --- Seventh quad love.graphics.newQuad(224, 0, 32, 32, 256, 32) --- Eighth quad

The preceding code can be rewritten in a more concise loop as shown in the following code snippet:

for i=1,8 do love.graphics.newQuad((i-1)*32, 0, 32, 32, 256, 32) end

As advised by LÖVE, we shouldn't state our quads in the draw() or update() functions, because it will cause the quad data to be repeatedly loaded into memory with every frame, which is a bad practice. So what we'll do is pretty simple; we'll load our quad parameters in a table, while love.graphics.newQuad will be referenced locally outside the functions. So the new code will look like the following for the animation in the right direction:

local Quad = love.graphics.newQuad function love.load() sprite = love.graphics.newImage "sprite.png" quads = {} quads['right'] ={} quads['left'] = {} for j=1,8 do quads['right'][j] = Quad((j-1)*32, 0, 32, 32, 256, 32); quads['left'][j] = Quad((j-1)*32, 0, 32, 32, 256, 32); -- for the character to face the opposite direction, the quad need to be flipped by using the Quad:flip(x, y) method, where x and why are Boolean. quads.left[j]:flip(true, false) --flip horizontally x = true, y = false end end

Now that our animation table is set, it is important that we set a Boolean value for the state of our character. At the start of the game our character is idle, so we set idle to true. Also, there are a number of quads the algorithm should read in order to play our animation. In our case, we have eight quads, so we need a maximum of eight iterations, as shown in the following code snippet:

local Quad = love.graphics.newQuad function love.load() character= {} character.player = love.graphics.newImage("sprite.png") character.x = 50 character.y = 50 direction = "right" iteration = 1 max = 8 idle = true timer = 0.1 quads = {} quads['right'] ={} quads['left'] = {} for j=1,8 do quads['right'][j] = Quad((j-1)*32, 0, 32, 32, 256, 32); quads['left'][j] = Quad((j-1)*32, 0, 32, 32, 256, 32); -- for the character to face the opposite direction, the quad need to be flipped by using the Quad:flip(x, y) method, where x and why are Boolean. quads.left[j]:flip(true, false) --flip horizontally x = true, y = false end end

Now let us update our motion; if a certain key is pressed, the animation should play; if the key is released, the animation should stop. Also, if the key is pressed, the character should change position. We'll be using the love.keypressed callback function here, as shown in the following code snippet:

function love.update(dt) if idle == false then timer = timer + dt if timer > 0.2 then timer = 0.1 -- The animation will play as the iteration increases, so we just write iteration = iteration + 1, also we'll stop reset our iteration at the maximum of 8 with a timer update to keep the animation smooth. iteration = iteration + 1 if love.keyboard.isDown('right') then sprite.x = sprite.x + 5 end if love.keyboard.isDown('left') then sprite.x = sprite.x - 5 end if iteration > max then iteration = 1 end end end end function love.keypressed(key) if quads[key] then direction = key idle = false end end function love.keyreleased(key) if quads[key] and direction == key then idle = true iteration = 1 direction = "right" end end

Finally, we can draw our character on the screen. Here we'll be using love.graphics.drawq(image, quad, x, y), where image is the image data, quad will load our quads table, x is the position in x axis and y is the position in the y axis:

function love.draw() love.graphics.drawq(sprite.player, quads[direction][iteration], sprite.x, sprite.y) end

So let's package our game and run it to see the magic in action by pressing the left or right navigation key:

Summary

That is all for this article. We have learned how to draw 2D objects on the screen and move the objects in four directions. We have delved into the usage of sprites for animations and how to play these animations with code.

Resources for Article:


Further resources on this subject:


LÖVE for Lua Game Programming Master the Lua programming language and build exciting strategy-based games in 2D using the LÖVE framework with this book and ebook
Published: October 2013
eBook Price: £11.99
Book Price: £18.99
See more
Select your format and quantity:

About the Author :


Darmie Akinlaja

Darmie Akinlaja is a physicist and software developer who actively develops and contributes to the architecture of RubiQube—a cross-platform mobile application that gives users access to a variety of innovative HTML5 applications based on their location. He serves as the Head of Mobile at MobiQube Ltd., a software company located in the city of Lagos, Nigeria, where he's dedicated to developing rich mobile applications for clients.

In 2008, Darmie supported his college best friend in developing a social network, which enjoyed its moment of fame at the Federal University of Technology, Akure. In 2011, his interest in video games and animations deepened, so he founded a video game production start-up, Gigaware Enterprise, with the goal of creating the best quality and fun games with local African contexts.

Darmie's passion for technology began at the age of 7 when he had his first encounter with a computer system; ever since, his curiosity has helped him discover a lot about technology and also helped him learn everything by himself.

Books From Packt


CryENGINE 3 Game Development: Beginner's Guide
CryENGINE 3 Game Development: Beginner's Guide

AndEngine for Android Game Development Cookbook
AndEngine for Android Game Development Cookbook

Corona SDK Mobile Game Development: Beginner's Guide
Corona SDK Mobile Game Development: Beginner's Guide

XNA 4.0 Game Development by Example: Beginner's Guide – Visual Basic Edition
XNA 4.0 Game Development by Example: Beginner's Guide – Visual Basic Edition

SDL Game Development
SDL Game Development

SFML Game Development
SFML Game Development

XNA 4.0 Game Development by Example: Beginner's Guide
XNA 4.0 Game Development by Example: Beginner's Guide

 Cocos2d-X by Example Beginner's Guide
Cocos2d-X by Example Beginner's Guide


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software