Bootstrapping the Quintus Engine: Part II - HTML5 Mobile Game Development - page 181

},
drawCanvas: function() {
if(this.touchEnabled) {
this.drawButtons();
}
if(this.joypadEnabled) {
this.drawJoypad();
}
}
The drawCanvas method is the primary method that needs to be called each frame to draw the controls.
This method works only for Canvas-based games. This method calls two helper methods: drawButtons and
drawJoypad . drawJoypad further calls a helper method called drawCircle to draw the outer and inner
joypad circles.
drawButtons loops over each of the controls and draws a square with a text character on top of it to
identify the button. It also checks the state of each keypad button so that buttons currently depressed are drawn
highlighted. The method uses the textAlign and textBaseline attributes of the Canvas to center the
text in the buttons. These are discussed in detail in Chapter 15, “Learning Canvas, the Hero of HTML5.” The
fillText method can be slow, so in production you'll most likely want to replace the text buttons with im-
ages.
drawCircle uses the arc command with a fill to draw a circle. drawJoypad calls this twice: once for
the outer larger circle and once for the center circle. See Chapter 15 for a description of the Canvas API in
depth.
Finishing and Testing the Input
The Quintus.Input module is now feature complete. The only thing that could still be added is a little bit
of helper glue code—to help users get up and running quickly—and an HTML file to test the whole thing.
Based on the assumption that the most common usage for the input system is either a two-way keypad with
a and b buttons or a four-way joypad with a and b buttons, you can add a simple helper method to the top-level
Quintus module to set up just that, along with the desktop fallback keyboard controls. Add the code in Listing
10-8 below the definition for Q.input .
Listing 10-8: The controls helper method
Q.input = new Q.InputSystem();
Q.controls = function(joypad) {
Q.input.keyboardControls();
if(joypad) {
Q.input.touchControls({
controls: [ [],[],[],['action','b'],['fire','a']]
});
Q.input.joypadControls();
} else {
Q.input.touchControls();