This tutorial will describe how HTML5 sprite animations work. We will go action by step through the process of developing a sprite animation. At the end of the this article we will use the animation we developed in a simple HTML5 game.
The example code is based off the video game advancement structure: BlocksJS. The complete game framework with extra functions can be downloaded from BlocksJS on GitHub. The source code for the examples in the article is offered at the end.
What is a Sprite Animation?
Two dimensional frame-based animation can be attained on HTML5 canvas by rendering an area of a single image on a given interval. The following 5 frame animation is rendered on a HTML5 canvas at one frame per 2nd (1 fps).
drawImage approach of the canvas context we can change the source position to just draw a cropped portion of one image called a “sprite sheet”.
What is a Sprite Sheet?
HTML5 canvas animation sprite sheets are fundamentally the very same as CSS sprite sheets. A sprite sheet includes muliple frames in one image. The following sprite sheet has 10 frames. The width of the image is 460 pixels. Therefore the frame width is
Now Let’s Produce a Sprite Animation
Let’s start by filling the sprite sheet image for the coin animation. Create a new
Image item and then set its
src property to the filename of the image which will fill the image.
Next we specify the sprite things so we can create one (or more later). Invoking the object will simply return an item with three public properties.
Grab access to the canvas element utilizing
getElementById and after that set its measurements. We will require the canvas’s context to draw to later on.
Now we can produce a sprite things which we will call
coin. Utilizing the
alternatives specification we set residential or commercial properties of the object which will specify: the context of the canvas on which the sprite will be drawn, the sprite measurements, and the sprite sheet image.
The secret to developing sprites from one image is that the context’s
drawImage technique permits us to render a cropped area of the source image to the canvas.
context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)
|Source image object||Sprite sheet|
|Source x||Frame index amount of times width|
|Source width||Frame width|
|Source height||Frame height|
|Location width||Frame width|
|Destination height||Frame height|
We will use the
drawImage method in our sprite’s
render method to draw one frame at a time.
Time to draw to the canvas. The
sprite function will need a render method that conjures up the
drawImage method on the canvas’ context. The criteria specify the source image and the bounding rectangle dimensions and position of the source sprite sheet and the destination canvas context.
Oh, and call the render method.
We have drawn the coin, but where is the animation?
We require a technique so we can update the position of the sprite sheet’s bound rectangular shape. Let’s call it …
update. We require likewise need to keep track of where the animation is so let’s create some homes:
We could just increment the frame index whenever we call the upgrade method, however when running a video game at 60 frames per second we might desire the animation to run at a slower fps. Tracking the ticks let’s use delay the animation speed. We might run the sprite animation at 15 fps by setting the
ticksPerFrame to 4 on game loop running at 60 fps.
Each time the upgrade technique is called, the tick count is incremented. If the tick count reaches the ticks per frame the frame index increments the tick count resets to zero.
render technique can now move the bounding rectangular shape of the source sprite sheet based upon the frame index to be shown by changing the sprite width with the frame width:
that.width is changed with
This works until the frame index is higher than the variety of frames. We require a new property
numberOfFrames and a conditional to neglect out of range values.
We want our coin to keep spinning after the first go around. We will require a new
loop residential or commercial property and a conditional which resets the frame index and tick count if the last frame.
Wait! Without a loop the upgrade will only run when. We require to run the upgrade on a loop …
requestAnimationFrame (See Paul Irish’s post for a requestAnimationFrame polyfill for support in older internet browsers) to upgrade and render the sprite at the exact same rate that the web browser repaints.
Close, however something is not quite right.
clearRect approach allows us to clear an area of the destination canvas between animation frames.
context.clearRect(x, y, width, height)
|Clear rectangle x position|
|Clear rectangle y position|
|Clear rectangle width|
|Clear rectangle height|
Clearing the canvas between frames provides us our complete sprite animation.
Sprite Animation Demonstration
Coin Tap Game
Now that we have actually learned how to develop a sprite animation on HTML5 canvas we can use the video game loop and animation to produce a video game. Let’s keep the game simple: tap a coin to get points.
To create our game we need to add a number of occasion listeners for desktop (
mousedown) and mobile (
touchstart) and then utilize a basic circle accident detection to identify if the coin is tapped. If a coin is hit we eliminate the coin and create a new one leading to a score based upon the coin size. When developing new coins the size and speed of spin are randomized.
We are drawing more than one sprite on the canvas now, so rather of clearing the canvas when we render a sprite we need to we need to clear the canvas at the starting the game loop. If we didn’t we would clear the all the previous sprites.
With these updates we can create our Coin Tap Video game; let’s offer it a shot!