JavaScript Sprite Animation Tutorial using HTML5 Canvas

From a long time I am posting only about Android. So today I came up with a new interesting tutorial. In this post we will learn JavaScript Sprite Animation. You may have seen JavaScript Sprite Animation …

JavaScript Sprite Animation Tutorial

From a long time I am posting only about Android. So today I came up with a new interesting tutorial. In this post we will learn JavaScript Sprite Animation. You may have seen JavaScript Sprite Animation many times. All the 2d animations you see in the web most of them are made with JavaScript and HTML5.

We can create really cool animations using JavaScript and HTML5 Canvas. To create our 2D animation we will be using Sprites.  If you are not aware with sprites then don’t worry we will be discussing the things from scratch. So lets begin.

First you can see what will be created at the end of this tutorial. See the below animation clip this is actually what we will be creating.

Now if you liked this animation and want to know how you can also create the same, keep reading 🙂

JavaScript Sprite Animation Video Tutorial

If you are more comfortable in watching a video rather than learning by reading the here is a video explaining this topic as well.

What is Sprite, Spritesheet and Animation?

Sprite

I told you we will be learning JavaScript Sprite Animation. So the first thing we should now that What is a Sprite? Sprite is a normal 2d bitmap image that is considered as a single frame of our animation.

Sprite Sheet

When we club many sprites into a single bitmap we get an spritesheet. So for creating an spritesheet we can use any image editing tools like photoshop, gimp etc. But if you are not good at these just google image search withe the keyword “Spritesheet” and you will get many spritesheets.

Animation

It is basically an illusion we display many image of a sequence rapidly and it feels like it is animating. In this today we will render different sprites to the screens  from our SpriteSheet.

Creating JavaScript Sprite Animation Project

We will not be using any special tool or IDE. I am using Google Chrome and Notepad++. And the main thing we need is a SpriteSheet. So I have the following spritesheet. You can use the same also just save the image to your computer.

Spritesheet
Spritesheet

As you can see in the above image we have 8 columns and 2 rows. The first row is for right movement and the second row is for left.

When our character is moving rightward then we have to display all the 8 sprites one by one repeatedly. And then it will create an animation. So lets begin.

  • Create a folder in your computer I just created SpriteAnimation. Put the above spritesheet inside the folder.
  • Now create an HTML file named index.html. And create the basic HTML structure as follows.

  • Inside body we need an area to render our sprite. For this we will be using HTML5 Canvas. You can easily create a Canvas using the canvas tag.

  • Inside this canvas we will render our sprite. I have given an id to the canvas because we need to access it in our script. Now below the canvas create a script tag to write the JavaScripts.

  • Now we will create a function to update the frame index. As you can see a variable named curFrame which is initialized with 0. We have to update it each time we will render a the sprite. So create a function named updateFrame().

  • Now finally we will create the function to render the sprite. We render the image using drawImage() method with the context that has been established for the canvas.

  • We need to call the draw function repeatedly to continue rendering the sprites on the canvas. This can be done easily by using setInterval method.

  • First parameter is the function name (draw), and second parameter is the interval to call the function. So the above statement will call the draw function after every 100ms.
  • If you open the your file in browser now you will see something like this.

  • As you can see we have to clear the already drawn sprite before rendering the new sprite. For this we will use the clearRect() method.
  • Just put this line inside the updateFrame() function.

  • And you will see the following.

  • To add the left and write movement we need to create two move methods. Write the following code.

  • We need to modify the updateFrame() method as follow.

  • At last we need to create two buttons left and right, to change the movement and inside the onClick attribute we will call the method moveLeft() and moveRight().

  • I have added a background to the canvas to make it look more cool. The final code will look like.

  • If you are having trouble you can leave your comments below.

So thats for this JavaScript Sprite Animation Tutorial guys. Feel free to ask if having any confusions or doubts regarding this JavaScript Sprite Animation Tutorial. And support us by sharing my tutorials to your social profiles. Thank You 🙂

Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.

Expand Your Knowledge: Next Tutorial Picks

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x