This tutorial will explain how HTML5 sprite animations work. We will go step by step through the procedure of producing a sprite animation. At the end of the this short article we will use the animation we produced in an easy HTML5 video game.
The example code is based off the game development framework: BlocksJS. The complete game framework with extra features 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 accomplished on HTML5 canvas by rendering an area of a single image on an offered period. The following five frame animation is rendered on a HTML5 canvas at one frame per 2nd (1 fps).
drawImage technique 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 essentially the same as CSS sprite sheets. A sprite sheet consists of 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 loading the sprite sheet image for the coin animation. Develop a new
Image item and then set its
src residential or commercial property to the filename of the image which will pack the image.
Next we define the sprite item so we can develop one (or more later on). Conjuring up the object will merely return an item with three public properties.
Get access to the canvas component utilizing
getElementById and then set its measurements. We will require the canvas’s context to draw to later on.
Now we can develop a sprite object which we will call
coin. Using the
choices parameter we set residential or commercial properties of the item which will specify: the context of the canvas on which the sprite will be drawn, the sprite dimensions, and the sprite sheet image.
The secret to developing sprites from one image is that the context’s
drawImage method enables 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 item||Sprite sheet|
|Source x||Frame index times frame width|
|Source width||Frame width|
|Source height||Frame height|
|Destination width||Frame width|
|Destination height||Frame height|
We will utilize the
drawImage technique in our sprite’s
render technique to draw one frame at a time.
Time to draw to the canvas. The
sprite function will require a render technique that conjures up the
drawImage method on the canvas’ context. The specifications define the source image and the bounding rectangle dimensions and position of the source sprite sheet and the location canvas context.
Oh, and call the render method.
We have drawn the coin, however where is the animation?
We need a technique so we can update the position of the sprite sheet’s bound rectangular shape. Let’s call it …
upgrade. We require also require to keep track of where the animation is so let’s develop some residential or commercial properties:
We might simply increment the frame index whenever we call the update technique, but when running a video game at 60 frames per second we may want the animation to perform at a slower fps. Tracking the ticks let’s use delay the animation speed. We could run the sprite animation at 15 fps by setting the
ticksPerFrame to 4 on game loop performing at 60 fps.
Each time the upgrade approach 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 absolutely no.
render technique can now move the bounding rectangle of the source sprite sheet based on the frame index to be displayed by replacing the sprite width with the frame width:
that.width is changed with
This works until the frame index is greater than the variety of frames. We need a brand-new residential or commercial property
numberOfFrames and a conditional to ignore out of range values.
We want our coin to keep spinning after the very first walk around. We will require a brand-new
loop property and a conditional which resets the frame index and tick count if the last frame.
However wait! Without a loop the update will just run as soon as. We need to run the upgrade on a loop …
requestAnimationFrame (See Paul Irish’s post for a requestAnimationFrame polyfill for support in older internet browsers) to update and render the sprite at the exact same rate that the browser repaints.
Close, but something is not rather ideal.
clearRect approach enables us to clear an area of the location canvas between animation frames.
context.clearRect(x, y, width, height)
|Clear rectangle x position|
|Clear rectangular shape y position|
|Clear rectangle width|
|Clear rectangle height|
Cleaning the canvas between frames offers us our complete sprite animation.
Sprite Animation Demonstration
Coin Tap Game
Now that we have actually found out how to create a sprite animation on HTML5 canvas we can use the video game loop and animation to develop a game. Let’s keep the game simple: tap a coin to get points.
To create our video game we need to include a couple of event listeners for desktop (
mousedown) and mobile (
touchstart) and after that use a simple circle crash detection to identify if the coin is tapped. If a coin is struck we remove the coin and produce a brand-new one leading to a score based on the coin size. When creating brand-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 require to we need to clear the canvas at the beginning the game loop. If we didn’t we would clear the all the previous sprites.
With these updates we can produce our Coin Tap Game; let’s provide it a try!