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 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 🙂

12 thoughts on “JavaScript Sprite Animation Tutorial using HTML5 Canvas”

  1. I was able to get your simple email app to work the first try but this is confusing. Explanation is very week and update this code – put that code there but you don’t truly explain where sometimes. Great work man but this one eludes me!

    Reply
  2. Hi, I was wondering how you would get the image to stop? Like, I would like it to move when holding down button, and to stop when releasing it? Thanks in advance!

    Reply
  3. i have an error saying “Cannot set property ‘width’ of null” coming from this line of code

    canvas.width = canvas.Width;
    canvas.height = canvas.Height;

    how can i fix this

    Reply
  4. Hi Belal,
    I found you have done great work, I am trying to create a tetris game for my project but I need to have a sprite base animation. I wast thinking that once the block appear, the animated dog holds the block and the user has to answer simple math question, if the answer is correct he can put the block in right place if he guess the wrong answer the block falls down directly. Can you please help me how to make it possible. if you need i can send my code by mail.

    Reply
  5. I tried the tutorial. I had to actually shrink the width of my width property to get it to stop moving left. For example, one of my sprite sheets was 1620 px wide. When I used the formula width = spriteWidth/cols, if the answer was say 148.33 I would have to change the spriteWidth/cols property to a straight 145;

    I feel like I understand the logic behind this method but I’m not sure why the standard formula is causing the image to move left. The animation happens but part of the next img of the sprite can be seen a little as it moves left every loop. Any ideas?

    Reply
  6. Hi,

    Could you help me ? I get my character moving from right to left automatically with clicking anywhere.

    I can send you my code, if you’re ok.

    Thanks in advance !

    Reply

Leave a Comment