HTML and CSS Reference
In-Depth Information
This example just creates a new Quintus instance and then turns the background color of the created Canvas
element red to give an indication of where the element is on the page. If you load it in a browser, you should see
a slender red Canvas element running down the center of your browser. If you modify the setup line to read
var q = Quintus().setup("quintus", { maximize: true });
you should be able to maximize the red area on both desktop and mobile devices.
Capturing User Input
You can't actually make a game without giving the player some way to interact with your game. Following the
same pattern as
Alien Invasion
built in Chapters 1 through 3, Quintus handles user input from both the keyboard
and via a touch interface. Supporting the keyboard is useful in development as well as when players play your
game via the desktop.
Creating an Input Subsystem
The simplest way to do input is to directly bind some action (for example, pressing the right arrow key) to an
action in the game, like moving the player to the right. The problem with this mechanism becomes obvious after
you add additional input options to your game.
In the case of a game that needs to work on both mobile and desktop, you have at least two input mechanisms:
keyboard or mouse and touch. Abstracting your game logic away from what's actually generating the input and
providing a consistent interface to the engine can make developing games much easier.
Quintus uses a module called
Quintus.Input
to handle input. Keeping the input code separate from the
rest of the Quintus engine helps keep the dependencies in check and makes it easier to swap out a different input
engine if necessary.
The input module will eventually support five different input mechanisms:
• Keyboard (desktop input)
• Mouse (desktop input)
• Direct manipulation (touch input)
• Keypad (touch input)
• Joypad (touch input)
Keyboard and mouse hopefully need no extra description. Direct manipulation refers to the capability to
move stuff on the screen directly. (Think firing the Angry Birds slingshot.) Keypad input is the use of onscreen
buttons as used in
Alien Invasion
. Joypad input refers to the small, analog-style touch pad that works like a four-
way control pad. It can be used as an analog control (providing a strength and an angle) or as a digital control
(providing movement in four discrete directions).
In this chapter the keyboard, keypad, and joystick inputs will be built; Chapter 14, “Building Games with
SVG and Physics,” covers direct manipulation and mouse input.
