First of all, everything in my game is rendered onto a canvas. The game's main render target is a canvas, that's how we get moving graphics. But there are also a bunch of fun little tricks that I can do to make the game look more interesting by manipulating the canvas, and having the canvas render other canvases on top of it.
The most obvious example of this is the radar in your HUD.
The radar display is an HTML canvas element that gets updated every frame. Each threat to the hive ship is rendered as a simple little colored dot onto the radar canvas, and then at the end of the frame the radar canvas is rendered onto the game's main render canvas. This is made especially easy due to the way I designed the camera class to work.
Basically each camera object has it's own canvas that it renders to when you call camera.DrawImage(). So you can have as many cameras as you want, active all at once, each rendering to their own canvas, and then at the end of the frame you can render each canvas of each camera onto the game's render canvas, or even onto another camera if you want.
Another way I utilize HTML canvas elements are in the "tutorial" screen. (I know it's not much of a tutorial, it was added in last minute)
In order to get the background graphic in the tutorial screen, I simulate one single frame of the game, render that entire frame to a canvas once, and then render text over that canvas of that single frame of gameplay.
There are really two parts that are using canvas manipulation here. First off is what I mentioned above, rendering the gameplay frame to a canvas and re-using that canvas, and then also the text rendering is using canvas manipulation techniques.
Each line of text is it's own canvas. I have a class that I created (originally for another project, but I modified it to work here as well) called SpriteFont. The way the the SpriteFont works is it takes a sprite off of a spritesheet for each letter of the alphabet based on data from a JSON file, in this case the spritesheet here:
And it renders the corresponding sprite to the canvas based on the current character in the string that it's generating a canvas image for. Basically, I feed the spritefont a string (and some other parameters), and it spits out an image with that string rendered onto it based on the characters in the spritesheet.
For example: If I call
spriteFont.GenerateTextImage("Hello, World!", 1, -1), the output is:
And that's how text is rendered! For dynamic text however (like the player's score), I need to re-generate the image every time the value is modified. But since this is a relatively quick process, it doesn't cost too much CPU or GPU overhead so it isn't anything to worry about.
Another one of the major things that I use the canvas manipulation for, is procedurally generating the stars in the background. Basically at the beginning of each game I create a new StarField() object that when constructed, automatically generates a canvas image that is sprinkled with stars. The starfield object can be customized with varying density levels and different resolutions and when it's finished generating it looks something like this:
This texture is then tiled and drawn to cover the entire viewport of the main camera.
And when you put it all together, you get this:
(Sue me, I'm not creative when it comes to naming things)
you should check out my game ;)
