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).

Utilizing the 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 460/10 or 46 pixels.

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.

DrawImage Technique

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)

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.

The 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 that.width/ numberOfFrames.

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 …

Close, but something is not rather ideal.

ClearRect Technique

The clearRect approach enables us to clear an area of the location canvas between animation frames.

context.clearRect(x, y, width, height)

Cleaning the canvas between frames offers us our complete sprite animation.

Sprite Animation Demonstration