{"id":5242,"date":"2015-05-02T15:16:54","date_gmt":"2015-05-02T22:16:54","guid":{"rendered":"http:\/\/g-liu.com\/blog\/?p=5242"},"modified":"2018-01-16T12:01:41","modified_gmt":"2018-01-16T19:01:41","slug":"animating-a-2d-sprite-with-css-animation","status":"publish","type":"post","link":"https:\/\/g-liu.com\/blog\/2015\/05\/animating-a-2d-sprite-with-css-animation\/","title":{"rendered":"Animating a 2D sprite with CSS animation"},"content":{"rendered":"

With new features in CSS 3 such as animation and three-dimensional transforms, you can do some pretty amazing things<\/a>. With multiple animations on one element, it’s possible to take a sprite sheet and animate it frame by frame. This tutorial assumes basic knowledge of CSS3. Knowing CSS3 animations is a plus.<\/p>\n

<\/p>\n

At the time of this tutorial, only Chrome, Safari, and possibly Internet Explorer are supported. This is due to inconsistent support of background-position-x<\/code> and background-position-y<\/code> among different rendering engines<\/a>. If you find that your animations do not work, try using one of these browsers.<\/s> Update 16 Jan 2018: Almost all the major browsers now support background-position-x\/y<\/code> consistently, meaning that this tutorial should work in Chrome, Firefox, Safari, IE, Microsoft Edge, and Opera. You may check https:\/\/caniuse.com\/#search=background-position<\/a> for the latest cross-browser compatibility.<\/p>\n

What’s a sprite sheet?<\/h1>\n

A sprite sheet is a single image that consists of a bunch of smaller images. The easiest way to explain it is to look at a picture of one:<\/p>\n

\"Sprite
Source: http:\/\/smwiki2014.wikidot.com\/wiki:android-game-development<\/figcaption><\/figure>\n

Reading from left to right, top to bottom, notice how our figure changes position ever so slightly. In fact, if we cut this large image up into its constituent images and rapidly flash them in sequence, we will get the illusion of movement.<\/p>\n

Primer: one-dimensional sprite sheet animation<\/h1>\n

Before delving into two dimensions, let’s take a look at how we can animate just the top row of the sprite sheet above.<\/p>\n

First we must know how to show one part of the image. The easiest way to achieve this is with a div<\/code> of set width and height, and a background image. There are other ways of achieving this, but we will stick with this method.<\/p>\n

\r\n\r\n<div id="sprite"><\/div>\r\n\r\n<\/pre>\n
\r\n#sprite {\r\n    height: 294px;\r\n    width: 165px;\r\n    background-image: url(http:\/\/www.fabiobiondi.com\/blog\/wp-content\/uploads\/2012\/08\/runningGrant.png);\r\n    background-position: 0 0;\r\n}\r\n<\/pre>\n
Setting the width and height on the div effectively crops the background image. The specific numbers are derived from the dimensions of each frame of the sprite sheet. The important property here is background-position<\/code>, which we will use to shift the background image inside the div<\/code>. Right now it is set to 0 0<\/code>, which shows the background image starting at the top-left corner of the image.<\/p>\n
Defining the animation<\/h2>\n
What we want to do then, is rapidly change the value of background-position<\/code> in our animation. First, let’s define that animation. Add this to the bottom of your CSS.<\/p>\n
\r\n@keyframes run-x {\r\n    from {\r\n        background-position-x: 0;\r\n    }\r\n    to {\r\n        background-position-x: -1980px;\r\n    }\r\n}\r\n<\/pre>\n
In the code above, we start at 0<\/code> for our background-x-position<\/code>. By the end of the animation, the background will have shifted to -1980px<\/code>. How did we arrive at this number? Let’s temporarily ignore the negative sign. Examining the image of running Grant, we see that each “frame” is 165 pixels wide. The sprite sheet is 12 frames across. By simple math, we figure out that the last frame is positioned at 12 \u00d7 165px = 1980px.<\/p>\n
Now you may wonder why there is a negative sign. Background position is a strange beast; it is not specified in terms of the image itself, but rather the element that has the background image. Do not worry too much about whether to use a negative sign, as this tutorial will give you the exact numbers to use.<\/p>\n
Apply the animation<\/h2>\n
Right now nothing on your screen will move. That’s because we haven’t referred to the animation yet. Now we’ll modify the CSS for #sprite<\/code>. The changes are highlighted.<\/p>\n
\r\n#sprite {\r\n    width: 300px;\r\n    width: 165px;\r\n    background-image: url(http:\/\/www.fabiobiondi.com\/blog\/wp-content\/uploads\/2012\/08\/runningGrant.png);\r\n    background-position: 0 0;\r\n    animation-name: run-x;\r\n    animation-duration: 0.4s;\r\n    animation-iteration-count: infinite;\r\n    animation-timing-function: steps(12);\r\n}\r\n<\/pre>\n
Note:<\/strong> when using Chrome or Safari, prefix all animation-*<\/code> properties with -webkit-<\/code>. For example, animation-name<\/code> becomes -webkit-animation-name<\/code>.<\/p>\n
The four lines of code we added define the animation that is applied to the element and some properties of the animation.<\/p>\n