Using Canvas shapes is somewhat difficult because there aren't yet powerful editors that can let you create Canvas shapes and paths. There are some intermediate plugins that will converts an Illustrator drawing to Canvas, but I'm not sure how good they are.
But there are a zillion editors that can create a bitmap that can be copied to a canvas. Instead of drawing a ball with something like the arc method, I'll copy a bitmap drawing of a ball to the canvas and then bounce it around.
By some coincidence, I happen to have a bitmap drawing of a ball left over from my post on using CSS to bounce a ball. In case you've forgotten, here is the bitmap of the ball:
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Canvas Bounce BitMap w/requestAnimationFrame
</title>
<script>
// Global variables
var canvas;
var ctx;
var myImage = new Image();
var boardWidth = 320;
var boardHeight = 460;
var ballHor = boardWidth / 2;
var ballVer = boardHeight /2;
var changeHor = 10;
var changeVer = 10;
// Covers all bases for various browser support.
var requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
// Event listener
window.addEventListener("load", getLoaded, false);
// Run this when the page loads.
function getLoaded(){
// Make sure we are loaded.
console.log("Page loaded!");
// Load the image and the canvas.
loadMyImage();
// Start the main loop.
doMainLoop();
}
// Runs to the beat of requestAnimationFrame.
function doMainLoop(){
// Loop the loop for the canvas.
requestAnimationFrame(doMainLoop);
// Clear the canvas.
ctx.clearRect(0,0,320,460);
ballMove();
}
// Calculate new ball position.
function ballMove() {
// Changes are calculated but do not
// take effect until next time through loop.
// Calculate new vertical component.
ballVer = ballVer + changeVer;
// If top is hit, change direction.
if (ballVer + changeVer < -10)
changeVer = -changeVer;
// If bottom is hit, reverse direction.
if (ballVer + changeVer > boardHeight - 10)
changeVer = -changeVer;
// Calculate new horizontal component.
ballHor = ballHor + changeHor;
// If left edge hit, reverse direction.
if (ballHor + changeHor < -10)
changeHor = -changeHor;
// If right edge is hit, do something.
if (ballHor + changeHor > boardWidth - 10)
changeHor = -changeHor;
// Draw the ball with new coordinates.
ctx.drawImage(myImage, 0, 0, 20, 20,
ballHor, ballVer, 20, 20);
}
// Load the image and the canvas.
function loadMyImage() {
// Get the canvas element.
canvas = document.getElementById("myCanvas");
// Make sure you got it.
if (canvas.getContext) {
// Specify 2d canvas type.
ctx = canvas.getContext("2d");
// When the image is loaded, draw it.
myImage.onload = function() {
// Did the image get loaded?
console.log("The image was loaded.");
}
// Define the source of the image.
myImage.src = "ball.png";
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="320" height="460">
</canvas>
</body>
</html>
Most of the code is the same as CSS and Canvas code I've already written about. Here are the main differences:
- Using requestAnimationFrame instead of setInterval.
- Using drawImage instead of arc.
- Using the HTML DOM Image object.
You may be asking yourself, why use this when you have good old setInterval? Well, the short answer is that instead of you setting the timing of the animation with setInterval, you can let the browser decide. This is especially important because the browser can make sure that the animation is making the most efficient use of the battery, and Firefox OS phones use batteries (so does everything else, practically).
This is a more recent addition to web programming, and is mostly adopted. While the details were being figured out in the W3C committee, browser manufactures started to adopt requestAnimationFrame, but they would prefix it. So Firefox had moxRequestAnimationFrame instead of requestAnimationFrame. Robert Helmer pointed out t me that I should use requestAnimationFrame and Panagiotis Astithas explained to me why Firefox OS 1.0 and 1.1 don't work with requestAnimationFrame:
And here is how to handle this in your code. First, create a new definition for requestAnimationFrame (I'm basing this on the Mozilla documentation for requestAnimationFrame).Firefox 18, which only supported the moz-prefixed version. Firefox OS 1.2 is based off Firefox 26 and will support the unprefixed version.
var requestAnimationFrame =This covers webkit, Mozilla, and old IE browsers before IE9.
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
Next, instead of using setInterval, put this line in your game loop:
requestAnimationFrame(doMainLoop);
This will call the main loop as quickly as the browser decides is correct. Typically this will be 60 frames per second, but it may vary. The point is that it will do the best thing for your animation and your battery life.
drawImage
This is a handy method on the canvas context (ctx). It might seem complicated (with 9 parameters), but it's really easy. Here's the code:
ctx.drawImage(myImage, 0, 0, 20, 20,
ballHor, ballVer, 20, 20);
I'll talk about myImage in a minute, but it hold the image you want to copy to the canvas. After the image, the next four numbers define the portion of the bitmap you want to copy from. The first two numbers are 0,0 and they represent the upper left-hand corner of the bitmap. The next two are 20,20 and they represent the lower right-hand corner of the image. One cool feature of this method is that you can take part of a bitmap and copy it, letting you have all your images in one big bitmap (saving loading time).
Next comes the place on canvas you want to copy the image to. ballHor and ballVer represent the upper left-hand corner of the current position of the ball, and 20,20 are lower right-hand corner. Again, you don't need to have the save size or ratio when you copy, allowing cool effects.
The drawing takes place every time through the loop, but in this example, the canvas is erased before each drawing. You could also erase where the ball was by copying a blank bitmap, and you don't need to worry about aliasing (which was a problem in the second canvas arc example if you didn't erase the whole canvas, but just the part you wanted to remove), because the edges are straight.
Using the HTML DOM Image object
I find it convenient to do all my image loading at the same time, and I like to make sure that both my image and my canvas context loaded properly, so you'll see that in the code for loadMyImage. There may be other ways to do this, but I find it works best when I define an HTML DOM image object and copy the bitmap into that.
Here's how you do it:
var myImage = new Image();
As you may know, one of the important concept in web programming is the DOM (Document Object Model). That defines a set of objects that can be modified by JavaScript. Image is an object that you can use. One of the things that is fun about web programming is the different way things are named. When you create an <img> tag, you are creating an Image object. And to write effective HTML5 games, you need to understand HTML5, JavaScript, CSS, and the DOM.
Sometimes the DOM is documented in ways that are a little confusing. For example, MDN has a very useful page on using the Image object, but it is called the HTMLImageElement. The difference between elements and objects are fun. They are really the same thing, but they change their names depending on what country (HTML or DOM) they are in. HTMLImageElement is the Image object is the <img> tag. Note that I could have created a new empty image with
document.createElement('img');Sorting out when to use an element and when to use an object is definitely mind-boggling, but when you start using JavaScript in really cool ways, objects will be your best friends forever.
So there's a 4-step process for images:
- Define a blank object with the new Image() method.
- Make sure that blank image was created (using myImage.onload).
- Define the source of the image (myImage.src).
- Use the image in drawImage.
- The page is loaded.
- The canvas context is loaded.
- The image container is loaded.
So I've covered a few ways to use Canvas to draw a bouncing ball. There are advanced techniques that I'll be covering later, such as flipping two canvas back and forth, and using different canvases for layers. But this post covers the bread and butter of mangling canvases.
And don't forget to use requestAnimationFrame. You'll want to use the code that permits use of requestAnimationFrame or mozRequestAnimationFrame because early Firefox OS phones may not be upgraded to Firefox OS 1.2. Mine isn't, and won't be until I hear widespread reports that it is safe to upgrade my ZTE Open phone. I'll probably buy a different Firefox OS phone before then. That LG model looks nice, but maybe Asus will make a phone soon!
So far I am liking CSS bouncing balls more than Canvas bouncing balls. Canvas requires cleanup and CSS doesn't. Now it's possible that Canvas has better hardware acceleration on the Firefox OS phone, but no one has told me that, and all browsers have gotten pretty good at making CSS efficient.
But why stop with CSS and Canvas for creating games? There's a third, mysterious graphics technology called SVG (Scalable Vector Graphics) that is really cool and well-supported in Firefox and all other browsers. Next time I write about game programming, I'll explain the mystery and how to make SVG fly. Not only that, but I'll show you three different ways (in three posts) to use SVG and introduce you to an even more shadowy figure, the SVG DOM!
But first some game reviews and then on to ... touch! And lots more. There's so much to write about, and Firefox OS is the place to be for games and game programming.
