Animated Effects

Tutorial Interactive Sprite Movement with HTML5

Learn how to move a sprite in response to mouse over for desktops, and mouse taps for mobile devices.

Sprite Movement Example Introduction Translate Coordinates Edge Detection Tips Summary Sprite Movement Graphic HTML Markup JavaScript CSS Source Code Page

Introduction

Learn game and Web development with this HTML5 sprite movement tutorial. This free training tutorial explains how to interact with a sprite. This article includes simple edge detection. JavaScript prevents the sprite from moving beyond the edges of the canvas.

The example uses an offset for the sprite. The offset centers the sprite under the user's tap or mouse movement. Centering provides more direct sense of interaction for the user.

HTML for the Canvas

<canvas 
 id="cv" 
 width="300" 
 height="300" 
 onclick="javascript:clickCanvas(event)" 
 onmousemove="javascript:clickCanvas(event)">
	...
</canvas>

JavaScript

Maintain the Bounding Box

When the user resizes the browser window, rotates their device, or scrolls, the visible position of the canvas may change. Therefore maintain a copy of the position and dimensions of the canvas. Call the JavaScript API method getBoundingClientRect() for a copy of the canvas bounding box.

The bounding box of the canvas include left, top, width, and height properties. The left property is the X position of the canvas in the window. The top property is the Y position of the canvas in the window. Therefore both left and top represent window coordinates. Later in the tutorial learn to translate from window to canvas coordinates. The width and height properties of the bounding box, represent the actual width and height of the canvas.

The following listing demonstrates assigning function resizeCanvas() to respond when the user resizes, zooms, or scrolls the canvas.

function loadGame(){
...

 window.addEventListener(
  "resize", 
  resizeCanvas, 
  false
 );

 window.addEventListener(
  "scroll", 
  resizeCanvas, 
  false
 );

...
}

The following listing is the entire resizeCanvas() function. Function resizeCanvas() simply indicates the canvas has new dimensions. Later JavaScript obtains the new canvas coordinates.

function resizeCanvas(){
 bResized = true;
}

Window Versus Canvas Coordinates

We need canvas coordinates for drawing the sprite. The coordinates of the browser window differ from the coordinates of the canvas. Any HTML elements above or to the left of the canvas, offset the location of the canvas from the browser window as a whole. onclick and onmousemove events provide the coordinates of the browser window, not the canvas. We implemented a simple function to translate browser window coordinates into canvas coordinates.

First save a TextRectangle to the variable bb, in response to canvas resize or scroll events. The following line demonstrates calling getBoundingClientRect() to save the canvas's bounding box or TextRectangle.

bb = canvas.getBoundingClientRect();

Function translateToCanvasCoords(x,y) receives parameters x and y, from the browser window. translateToCanvasCoords(x,y) uses the bounding box named bb, to calculate X and Y canvas coordinates from browser window coordinates.

The window coordinates are retrieved from onmouseover and onclick events. X = 0 and Y = 0, represent the upper left hand coordinates of the browser window.

Function translateToCanvasCoords() returns an array. The first entry in the array is the X coordinate within the canvas and the second entry is the Y coordinate within the canvas. The returned X and Y coordinates are canvas coordinates. We can draw the sprite directly onto the canvas with the new coordinates.

However with this tutorial we'll use the translated X and Y canvas coordinates, but we won't directly draw the sprite with them. We want to react to the boundaries of the canvas, and give the user the impression of more direct sprite control with edge detection and offsets.

The following listing demonstrates converting from window to canvas coordinates. Parameters x and y are window coordinates. The returned array contains canvas coordinates.

function translateToCanvasCoords(
 x,
 y
)
{			
 var actualX = x - bb.left;
 var actualY = y - bb.top;					
 return [actualX,actualY];		
}

Edge Detection

In response to mouseover and onclick events we created the clickCanvas() function, which first clears the canvas using the API function; clearRect(). Function clickCanvas() then obtains the canvas coordinates from translateToCanvasCoords().

Modify canvas coordinates to fit within the boundaries of the canvas. That takes a little extra calculation which might not be necessary in every scenario.

Additionally for the end result we want the sprite to display in the center of the position the user tapped. By default the sprite draws starting at the upper left coordinates. Code moves coordinates to the center of the sprite.

The clickCanvas() function uses the bounding box variable named bb, to determine where the edges of the canvas are located. Function clickCanvas() moves the sprite a little so it doesn't go over the edges of the canvas. To minimize the number of calculations performed here, only call getBoundingClientRect() when needed.

Unfortunately we can't call resizeCanvas() when the page is first loaded because for some devices, the canvas hasn't fully initialized. Therefore create and set a boolean variable to determine if the page has initialized. Assign variable bResized the value false at first. If bResized equals true then obtain new canvas dimensions.

Optimize

Obtain the size of the canvas only when the page is resized.

By default the mouse pointer or tap position begins at the upper left hand corner of the sprite. Offset the sprite by one half it's width and height. The offset centers the sprite under the user's finger tip or mouse pointer. Variable I_HALF equals one half the width and height of the sprite. Variable I_DIM equals the width and height dimensions of the sprite.

The following listing demonstrates preparing an offset for the ball shaped sprite.

function clickCanvas(evt) {
	
if (bResized == true){
 bb = canvas.getBoundingClientRect();
 bResized = false;
}	
			
context.clearRect(
 0,
 0,
 bb.width,
 bb.height
);	
	
var a = translateToCanvasCoords(
 evt.clientX,
 evt.clientY
);
		
// Offset the sprite so it won't 
// display right of the right side.
if (a[0] + I_HALF > bb.width){
 a[0] -= I_DIM;			
}	
	
// Offset the sprite, so the pointer 
// displays in the sprite's horizontal center.
else if (a[0] > I_DIM) {
 a[0] -= I_HALF;
}	

// Offset sprite so it won't display below the bottom.
if (a[1] + I_HALF > bb.height){
 a[1] -= I_DIM;			
}	
	
// Place the sprite in the vertical center of the pointer.
else if (a[1] > I_DIM) {
 a[1] -= I_HALF;
}

...

The 2D canvas API method drawImage() displays the sprite on the canvas in the following listing. See the Beginner's Guide to Sprite Sheets tutorial for more details regarding drawImage() parameters.


...

context.drawImage(
 imgSprite,
 0,
 0,
 I_DIM,
 I_DIM,
 a[0],
 a[1],
 I_DIM,
 I_DIM
);
}

Tips

Desktops or full computers such as Macintosh and Windows PCs use onmouseover events to move the mouse.

Tablets, mobile phones, and other devices use the onclick event to move the mouse, because onmouseover has no response. However touchmove events work great for mobile devices. See the Mobile Interactive Sprite Tutorial for use of touchmove events.

Mouse onclick events cause the canvas to highlight and response is slow to taps, in the older Android (2.2) default browser.

Summary

This tutorial explained how to interact with a sprite. This article included simple edge detection. JavaScript prevents the sprite from moving beyond the edges of the canvas.

The example uses an offset for the sprite. The offset centers the sprite under the user's tap or mouse movement. Centering provides more direct sense of interaction for the user. See the Interactive Sprite Movement Source Code for more details.

Have fun and love learning!

Drag & Drop Examples with Tutorials

Sprite Sheet Animation
Copyright © 2015 Seven Thunder Software. All Rights Reserved.