Creating a Simple Animation with a Sprite Sheet
Animation is an easy way to create and maintain the interest of a user on a web application. One common way to create animation is to use sprite sheets. Sprite sheets are a single graphic file (typically .png files) that illustrates each frame of the animation. Instead of loading up several different graphic files, a sprite sheet allows the application to simply use one file which is adjusted in each stage of the animation.
The benefit of using a sprite sheet is that it reduces the amount of times your application needs to call a file from the server. This, in effect, reduces loading times and enhances the user’s experience. Below is an animation created with a sprite sheet. You can imagine how this draws the eyes of the user and keeps them engaged in your application.
STEP 1
The first thing you need to do is find a sprite sheet that you would like to implement into your web application. There are several free resources as well as paid resources, such as:
I found this specific sprite sheet from Gameart2d.com (https://www.gameart2d.com/jelly-squash-free-sprites.html) and will be creating an animation of the first column (the yellow character.) Feel free to download and code along!
STEP 2: HTML
In your HTML file, you will want to implement the following code. Make sure to assign the id of the <p> tag to “image”, which we will define in our .css file next. You will also want to assign the onmouseover property to a function called animation(). We will define this function in our javascript file and it will be responsible for slicing through our image.
STEP 3: CSS
In a .css file, we will now want to define the image in css. You will need to set the height, width, and background. The height and width will be determined by the size of the sprite sheet’s first graphic (as shown in red.) In this case, the height and width are 350px by 340px.
You can easily determine what each slice size should be by dividing the total height by the number of slices as well as the total width. So, in this case, the total height is 1721. So, each slice is 1721/5 = 344.2. The total width is 2081 and therefore each slice is 346.8 (2081/6). We’ll round up in both cases, making each slice 345(h) x 347(w) pixels.
The background is set to the url where you will find the sprite sheet image followed by the starting point of sprite sheet (0px by 0px).
**Please note that the height and width should be 345(h) x 347(w) pixels as calculated above. However, this sprite sheet wasn’t spaced perfectly so I had to play around a little bit with both measurements until there was no overlapping.
If you were to run the animation at this moment, you should see only a static picture of the first yellow character.
So how do we create an animation? Let’s move onto Step 4.
STEP 4: JAVASCRIPT
With a sprite sheet, we can simply write a function that rotates through our single image by telling it to display only certain portions at a time. Do you remember those old school flip books that people used to make? Think of a sprite sheet like that but all the images are on one single sheet and “flipped through” quick enough to appear like it’s moving. So, let’s add some javascript…
In our function animation(), we are setting the beginning position of the slicer on line 4 at 0. The const interval in line 5 is telling it how quickly to rotate through in setInterval() found on line 6. The smaller the number, the faster the animation will be and vice versa.
On line 7, we are setting the image’s position. Initially, this will start at 0 since we defined position on line 4 to start at 0. However, on lines 10–12, the height will be incremented by 345px (the height of each slice) until it reaches it’s max of 1721. Notice that we are adjusting height only because we want the sprite sheet to adjust vertically. If we had a horizontal sprite sheet, we would need to adjust the width instead. Once “position” is no longer smaller than 1721, the animation will begin again at the start position of 0 and repeat through.
Let’s take a look at our animation currently:
If we stopped right now, the animation would loop endlessly with no way of stopping unless you refreshed your page. To stop the animation, we could update our code in our .js file like this:
Notice that we created a new const “diff” which is equal to a slice’s height. Whenever our mouse moves out from the graphic, it will stop at the animation’s current position. The stopAnimate() function includes the clearInterval() method. Where did this method come from? It’s actually a built in javascript method and here it will clear the tID value set on line 12. This, in effect, will stop the animation.
Now, we have defined the stopAnimate() function but we need to code it somewhere so that it gets invoked. We would need to do this in our HTML file.
Here’s our final animation with a simple green background:
I hope you enjoyed this simple little exercise in creating a sprite animation! Now, it’s time to add a little sprite animation fun to your own applications!