Advertisement:
Read Later
In this tutorial, I will show you how to animate GIF images in the HTML canvas element by converting them into sprite sheets. If you are fond of developing JavaScript games for fun like me, sprite sheet animations are what you need to level-up your game designs due to their low-memory usage rate and efficiency as compared to other browser game animation options, at least it went that way for my games :)
You can convert GIF images into sprite sheets on this website.
I used a sprite sheet consisting of Pikachu movements as depicted in the figure below:
As the canvas background image:
Canvas(1):
The HTML <canvas> element is used to draw graphics on a web page.
The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph, but through WebGL it allows 3D shapes and images to be displayed. HTML5 Canvas also helps in making 2D games.
A canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to those of other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition.
HTML
- Load background and animate images to be able to call them by id in JavaScript functions.
- Do not forget to set images' display properties to none to avoid their appearance on the web page except the canvas element.
JavaScript
- Define the canvas element and context - canvas.getContext("2d").
- Define the game width and game height.
- Set the index variable as '0'.
- Define the properties of Pikachu - width, height, and position.
- Define the movements consisting of the selected animated part on the sprite sheet using a multidimensional array.
- 'sx' and 'sy' refer to the starting point coordinates.
- 'px' and 'py' refer to the ending point coordinates.
- In the draw() function:
- Clear the canvas.
- Draw the background image depending on the game width and game height.
- Draw the selected movement - the area between the starting and ending point - depending on the index variable.
- Increment the index variable.
- If the index variable is greater than the length of the movements array, set the index variable as '0'.
- To call the draw() function every second to create new frames, use the setInterval() function.
--------------HTML---------------
<img id="background" src="Pictures/background.png" style="display:none;" />
<img id="pikachu" src="Pictures/animate.png" style="display:none;" />
<canvas id="game" style="width:345px,height:145px;display:block;margin:auto;"></canvas>
--------------JavaScript---------------
let canvas = document.getElementById("game");
let ctx = canvas.getContext("2d");
let gameWidth = 384;
let gameHeight = 145;
let index = 0;
const properties = {width: 70, height:70, position: {x: 150, y: 100}};
const movements = [
{sx: 0, sy: 30, px: 45, py: 45},
{sx: 0, sy: 75, px: 45, py: 45},
{sx: 0, sy: 120, px: 45, py: 45},
{sx: 0, sy: 165, px: 45, py: 45},
{sx: 45, sy: 30, px: 45, py: 45},
{sx: 45, sy: 75, px: 45, py: 45},
{sx: 45, sy: 120, px: 45, py: 45},
{sx: 45, sy: 165, px: 45, py: 45},
{sx: 90, sy: 30, px: 45, py: 45},
{sx: 90, sy: 75, px: 45, py: 45},
{sx: 90, sy: 120, px: 45, py: 45},
{sx: 90, sy: 165, px: 45, py: 45}
];
function draw(){
ctx.clearRect(0, 0, gameWidth, gameHeight);
ctx.drawImage(document.getElementById("background"), 0, 0, gameWidth, gameHeight);
ctx.drawImage(document.getElementById("pikachu"), movements[index].sx, movements[index].sy, movements[index].px, movements[index].py, properties.position.x, properties.position.y, properties.width, properties.height);
index++;
if(index >= movements.length) index = 0;
}
setInterval(draw, 1000);
Result:
(1) https://en.wikipedia.org/wiki/Canvas_element