Firefox OS Gaming: canvas arc method

Showing posts with label canvas arc method. Show all posts

Friday, November 1, 2013

Bouncing a Ball with Canvas Arc - Revisited (Game Programming)

In a recent post (Bouncing a Ball with Canvas Arc) I wrote about ... duh ... bouncing a ball using Canvas and drawing the ball with the arc method.

First of all, here are better links (thanks, Robert Helmer) for the Canvas arc method:

Reference: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#arc%28 (note that this hangs off of CanvasRenderingContext2D, not Canvas).
Guide: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Arcs (note this is part of a larger topic on drawing shapes with Canvas).
From now on, I'll try to reference Mozilla Developer Network. I'm guilty of quick look ups on W3 Schools, but MDN really is the authority on Firefox!

Secondly, the post on Canvas and the arc method assumed that it is okay to erase the screen every time you move the ball. This works with some things well and the phone screen is small enough that there isn't a lot of delay. But I then thought, what about these two conditions:

You have other stuff on the screen you don't erase?
What if you have to do a lot of calculations to redraw something that doesn't need to be done?

So I remembered a technique I learned from programming 8-bit games (Apple II, Commodore 64, etc.). There it was simply:

Draw something.
Calculate the move.
Erase the thing you want to move.
Draw the thing in its new position.

Easy to do, right? Draw the ball in Fuchsia, calculate new position, erase the ball by drawing it with White, and then draw it again in its new position with Fuchsia. What could be simpler? (Well, it seemed simple at the time.)

So here's the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
    Canvas Bounce Draw Circle and Erase
    </title>

    <script>

    // Global variables
    var canvas;
    var ctx;

    var boardWidth = 320;
    var boardHeight = 460;

    var ballHor = boardWidth / 2;
    var ballVer = boardHeight /2;

    var oldHor;
    var oldVer;

    var changeHor = 10;
    var changeVer = 10;

    // Listen to that page load!
    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 game loop.
      gameLoop = setInterval(doMainLoop,16);
    }

    // This will run every 16 milliseconds.
    function doMainLoop(){

    // Move the ball.
      ballMove();
    }

    function ballMove() {

      // Changes are calculated but do not
      // take effect until next time through loop.

    // Get the old ball coordinates.
    oldHor = ballHor;
    oldVer = ballVer;

    // Erase the ball where it is now.
    // Color is White.
    ctx.lineWidth = 0;
    ctx.beginPath();
      ctx.arc(oldHor, oldVer, 10, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fillStyle = "White";
    ctx.fill();

      // 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 a ball using canvas arc function.
    // Color is Fuchsia.
    // Make the radius one pixel smaller.
    ctx.beginPath();
      ctx.arc(ballHor, ballVer, 10, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fillStyle = "Fuchsia";
      ctx.fill();
    }

    // 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");
      }
    }

</script>

</head>
<body bgcolor="White">

<canvas id="myCanvas" width="320" height="460">
</canvas>

</body>
</html>

This is nearly the same code as last time, with these few small changes:

I added temporary variables to track the previous positions of the ball.
In the ballMove section, I added erasing the ball.
The main loop (doMainLoop) no longer clears the screen every time.

Erasing the Ball

This code erases the ball:

    // Get the old ball coordinates.
    oldHor = ballHor;
    oldVer = ballVer;

    // Erase the ball where it is now.
    // Color is White.
    ctx.lineWidth = 0;
    ctx.beginPath();
      ctx.arc(oldHor, oldVer, 10, 0, Math.PI * 2, true);
      ctx.closePath();
    ctx.fillStyle = "White";
    ctx.fill();

It is nearly the same as drawing the ball, but the fillStyle is White. The old ball position is created and used to erase where the ball was drawn.

But Wait! Something is wrong!

When I ran this code, it looked like this in the Simulator:

And it looked like this when I pushed it to my ZTE Open phone:

I'm hoping that the picture is clear enough to show that the bouncing ball is leaving a trail of ghost shapes behind it. Well, it was Halloween, but I'm not sure that would account for the behavior today.

The ball bounces all right, but its not cleaning up after itself. I did some research and it turns out that when you draw on Canvas, the pixels get scattered a little too far and you get artifacts that can cause problems. This is called aliasing, and is often a problem with drawing shapes onto a screen. And this is why many people recommend clearing the canvas every time you move an object.

There are two solutions I have found:

You can erase part of a screen by using context.clearRect ( x , y , w , h ); You can do this to clear a specific rectangle at x,y with a width and height.
You can overlap the drawing a little to get rid of the spilled pixels.

I like the second because it is more precise. I want to erase just the part I want. So the solution is simple. When you draw the ball, use 9 instead of 10 in this line:

ctx.arc(ballHor, ballVer, 10, 0, Math.PI * 2, true);

so it reads:

ctx.arc(ballHor, ballVer, 9, 0, Math.PI * 2, true);

The ball is slightly smaller, but all of it gets erased. I'm not happy with this, but I looked and saw that this isn't a bug, it is a feature of not only Firefox, but Chrome and IE. Throwing pixels around is a bit imprecise, and that's one of the reasons I'm not 100% happy with Canvas. But it works with lots of stuff. I'm still more happy CSS. See my Bouncing a Ball in CSS topic. I'll come back to CSS later, but there's still a few more things to look at with Canvas.

Programming Tip

When you install an app to the ZTE Open, there is a delay of a few seconds before you get a message telling you the app is installed. And you'll have to reboot the ZTE Open before you can see your app's icon.

Also, screenshots are still tricky. You have to hit two buttons at nearly the same time. But I'm learning how to do this. I was sending the screenshots to myself from the gallery with my email, but I figured out I could use the cable to download the screenshots from a folder named screenshots. There's a short delay before the screenshot appears in the gallery. However, if you want to take a screenshot, you must unplug the cable first. A little annoying, but liveable. This is a version 1 of an new product that never lived before, so the baby steps can be amusing and appealing.

Wednesday, October 30, 2013

Bouncing a Ball with Canvas Arc (Game Programming)

Recently I created a simple programming showing how to bounce a ball around a Firefox OS phone screen using nothing but HTML5, JavaScript, and CSS (check it out).

CSS is very cool, but Canvas has its place also. There are a few different ways to work with Canvas, and I'll show you one here. The game looks the same, so I grabbed a graphic from Wikipedia when they weren't looking.

I'll be covering bouncing balls in Canvas (with a few variations) as well as SVG (with greater variations).

So basically instead of pushing around a bitmap, we'll create a canvas in HTML5 and then draw on it using the Canvas Arc method. This is only a few more lines than the CSS version, and runs just as fast. And, again, this runs in all browsers.

Here is the code, in glorious HTML5:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
    Canvas Bounce Draw Circle
    </title>

    <script>

    // Global variables
    var canvas;
    var ctx;

    var boardWidth = 320;
    var boardHeight = 460;

    var ballHor = boardWidth / 2;
    var ballVer = boardHeight /2;

    var changeHor = 10;
    var changeVer = 10;

    // Listen to that page load!
    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 game loop.
      gameLoop = setInterval(doMainLoop,16);
    }

    // This will run every 16 milliseconds.
    function doMainLoop(){

      // Clear the canvas.
      ctx.clearRect(0,0,boardWidth,boardHeight);

      ballMove();
    }

    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 a ball using canvas arc function.
      ctx.beginPath();
      ctx.arc(ballHor, ballVer, 10, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fillStyle = "Fuchsia";
      ctx.fill();
    }

    // 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");
      }
    }

</script>

</head>
<body>

<canvas id="myCanvas" width="320" height="460">
</canvas>

</body>
</html>

There are lots of books written about Canvas and you can always get started at the W3 Schools: http://www.w3schools.com/html/html5_canvas.asp

Essentially, this code can be divided into parts:

HTML5 shell - standard, except Firefox OS likes to know about UTF-8.
JavaScript that defines some global variables and defines a page load event.
An initial function that loads the canvas and starts the game loop.
A game loop function that erases the screen and draws the ball.
A function that calculates what's next and moves the ball.
A function that loads the canvas.
A canvas element in the body that defines the canvas size.

This has been tested with my trusty ZTE Open Firefox OS phone. I like the phone for all its quirks, and it is a good environment to test on because it represents the minimum that a Firefox OS phone offers. I haven't even tried to upgrade the OS, but everything I'm doing is very standard and shouldn't cause any problems. After all, it's only game programming!

Here's how it works:

Shell and Globals and Page Load

The shell is just your standard HTML5 shell. Nothing special to see here, but be sure to give it a title and specify UTF-8 (unless you are working with other kinds of UTF).

The canvas and its context (ctx) are defined as global so they can be accessed anywhere. Sometimes globals are good. The size of the screen (board), position of the ball, and the amount of change are defined.

An event handler is created that will detect when the page is loaded. I always do this because I want to make sure everything is loaded before I start calling JavaScript. In the CSS ball bounce, I used the onload function in the body but event listeners are cooler.

Initial Function

You call two functions here (and I added a console output in case you want to make doubly sure the page loaded).

First the function is called that defines the canvas. You do this once.

Next you call the game loop, which will run every 16 milliseconds. You can mess with this number, but it seems to work with the way that browsers are programmed. Or maybe it's just a memory of that time when you were sweet 16?

Game Loop

This just does two things:

Clear the screen.
Call a function to draw the ball.

Canvas needs to have the screen cleared. Once you draw on the canvas, it stays that way. Think of it as fire and forget. Except that with games, you can't forget, so you need to keep track of what you're doing, but the canvas won't help you. The canvas forgets! There are some other techniques you can use to take care of this, but we'll talk about that later.

Anyway, the loop just goes around and around, each time clearing the screen and drawing the ball in a new place. For fun, don't clear the screen and watch it fill up with ball images.

Drawing the Ball

This is the good part. Canvas has some drawing commands, like line, square, and arc. They don't have a circle command, but you can draw a circle with the arc method (arcs are just parts of a circle, so make it go around all wthe way). You can find out more about arc here. Of course, there's a W3C canvas specification, but it's written for browser manufacturers, not web monkeys like you and me.

So drawing the ball has some similarities to the CSS bouncing ball. Calculate the move, and draw the circle. The difference here is that instead of blasting with a bitmap, you draw a circle.

      ctx.beginPath();
      ctx.arc(ballHor, ballVer, 10, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fillStyle = "Fuchsia";
      ctx.fill();

This is a pretty standard canvas procedure. All your methods are attached to the canvas context (ctx, defined in the function below). Follow this for painting with a method:

Arc is really a way to define a path. So you need to begin the path first.
The arc method needs the ball x and y position, radius, and three other standard variables.
Then you close the path. Otherwise the horse will get out of the barn!
Then define your color with the fillStyle method (isn't Fuschia fun to spell?).
Finally, use the fill method to make it happen.

Canvas likes fiddly procedures, but once you learn them, you can just fill in the blanks.

Loading the Canvas

Getting a canvas to work is not that hard, it just takes a few steps:

Define the canvas in the body.
Load the canvas into the web page.
Get the context of the canvas.
Make sure you get the context!

In this function, you first find the canvas element that was created in the body with the canvas tags. The canvas tag needed to have a height, width, and an id (so it can be found).

Next, do an if statement to make sure you get the canvas. In that statement, use the canvas.getContext method and assign it a name (ctx is popular). Specify that you want a "2d" canvas. 3D is coming but I'm not sure how well it is supported and I'm only looking at 2D games right now.

You want to make sure you got the context. It's like page load. You'll appreciate it the first time you make a typo or forget to define the canvas tag in the body.

Canvas Element in the Body

Just put the canvas element in the body. Give it a size and id. The position of the canvas is determined by the flow of the page, but wherever it is, once you have its context, you can blast away on it. Think of canvas as its own little world. You can draw on it and every HTML5 browser supports it.

That's it for now. This seems to run as fast as the CSS ball bouncing, but I haven't done any precise tests yet. It runs fast enough to convince me I can do an action game with Canvas or CSS.

So far, the advantage goes to CSS, because I don't care about what's on the screen and I don't erase anything. In CSS I just move the ball, but in Canvas I have to clean up after the ball moves. Well, maybe that's like taking care of a cute little puppy.

Next time: what if you have other stuff on the Canvas screen and don't want to erase everything?