HTML5 Game Development For Dummies
Today's technology is incredibly capable, but it can overwhelm a beginning game programmer. You need a way to learn to build games in HTML5 without drowning in details, or spending a ton of money. This Cheat Sheet provides a handy reference for the most common HTML5 objects you'll use in your games.
HTML 5 Game Development: Working with the Scene Object
The primary element of any simpleGame game is the Scene object. Do not change the Scene's properties directly. Instead, use the appropriate method to manage the scene.
|touchable||Indicates whether the scene is running on a touch (mobile) interface. Returns true or false.|
|canvas||A reference to the canvas object created by simpleGame. Can be used to view canvas properties, but modification should be done with scene methods.|
|height||Indicates the height of the canvas. Normally used for border-checking. Change with the setSize() method of the Scene object.|
|width||Indicates the width of the canvas. Normally used for border-checking. Change with the setSize() method of the Scene object.|
|top||Indicates the Y position of the top of the canvas in the page. Change with the setPosition() method of the Scene object.|
|left||Indicates the position of the top of the canvas in the page. Change with the setPosition() method of the Scene object.|
|start()||Begins the timing loop. Normally the last line of the page's init() function.|
|clear()||Erases the scene with the current background color. Called at the beginning of the page's update() function.|
|stop()||Halts the timing loop, pausing the game.|
|setSize(width, height)||Changes the size of the scene to the indicated width and height.|
|setPos(left, top)||Moves the upper-left corner of the scene to the indicated left and top pixels.|
|setSizePos(width, height, left, top)||Utility function for setting the size and position at the same time.|
|setBG(color)||Changes the background color of the scene. Can be any valid HTML color string: black, #FF00CC, and so on.|
|hideCursor()||Hides the default mouse cursor. Frequently used in the init() method of games that allow mouse input.|
|showCursor()||Displays a cursor that was hidden with hideCursor().|
|getMouseX()||Returns the mouse's X position on the game canvas (not the overall web page). Virtual joystick must be enabled to get mouse positions on a touch input device.|
|getMouseY()||Returns the mouse's Y position on the game canvas (not the overall web page). Virtual joystick must be enabled to get mouse positions on a touch input device.|
Keeping Your Game Moving with the Sprite Object
As a game developer, remember that the Sprite object is the basis for moving game elements. Do not change the properties directly, but use the appropriate method to manipulate the sprite as follows:
spriteName = new Sprite(scene, imgFile, width, height);: Create an instance of the Sprite class called spriteName with the indicated scene, image file, and size.
Canvas: Refers to the canvas element created by the sprite's scene.
width, height: The width and height of the Sprite object in pixels.
cwidth, cHeight: The width and height of the canvas containing the sprite.
x, y: Position of the center of the sprite.
Dx: Delta-X, or change in X. Describes how the sprite will move in the X axis. Positive values indicate movement to the right.
dy: Delta-y, or change in Y. Describes how the sprite will move in the Y axis. Positive values indicate movement downward.
speed: Displays the current speed of the sprite in its current direction of travel.
changeImage(imageFile): Changes the image file to the file indicated by imageFile. Used for a simple form of animation.
setImage(imageFile): Another name for changeImage().
update(): Draws the sprite's image on the scene based on the current image, size, imgAngle, X, and Y properties. Normally called late in the page's update() function.
hide(): Hides the sprite. Sprite position and angle are still calculated, but the sprite will not be drawn, nor will it collide with other sprites.
show(): Reverses the hide() method, making the visible appear and respond to collisions.
report(): A utility method for displaying the position, dx, dy, speed, and angle values of the sprite to the programmer's console. Useful for debugging.
setPosition(X, Y): Sets the center of the sprite to the coordinate specified by X and Y.
setX(x), setY(y): Sets an individual coordinate to the specified value.
setDX(newDX), setDY(newDY): Changes the DX or DY properties to the indicated values. Setting DX to 5 causes the sprite to move 5 pixels to the right every frame until DX is changed again (directly or through other motion methods).
changeXby(xChange), changeYby(yChange): Moves the sprite the indicated value in X or Y, but does not make a permanent change to DX or DY. After the current frame, the sprite will move based on its current settings of DX and DY.
setSpeed(speed): Changes the sprite's speed to the indicated value. The speed and moveAngle values are used together to determine the DX and DY properties of the sprite. You can set the speed to a negative value to make the sprite move backward.
getSpeed(): Returns the current speed based on the sprite's current DX and DY values. Can be more accurate than using the speed property.
changeSpeedBy(diff): Changes the speed by the diff amount. Positive values speed up the sprite in the current moveAngle direction, and negative values slow the sprite down. It's possible to have a negative speed. You may want to limit the minimum and maximum speeds to keep the game under control.
setImgAngle(degrees): Immediately changes the angle at which the sprite is drawn to the indicated value. Does not modify the motion of the sprite.
changeImgAngleBy(degrees): Modifies the sprite's image angle. Use this method repeatedly to gradually change the angle at which a sprite is drawn.
getImgAngle(): Used to return the sprite's current imgAngle. Returns a value in degrees.
setMoveAngle(degrees): Immediately changes the angle at which the sprite moves. Used in conjunction with speed to determine new DX and DY values for the sprite. Does not modify the appearance of the sprite.
changeMoveAngleBy(degrees): Modifies the sprite's movement angle. Use this method repeatedly to gradually change the motion angle of a sprite.
getMoveAngle(): Returns the sprite's current motion angle in degrees.
setAngle(degrees): Immediately sets both image and movement angles to the same value. Use when the sprite travels in the direction it is facing.
changeAngleBy(degrees): Modifies both the image and movement angles. Use this method repeatedly to gradually change the sprite's direction.
turnBy(degrees): Another name for changeAngleBy().
addVector(degrees, force): Adds a force vector to the sprite at the indicated angle and force. This extremely powerful method can be used to add physics-based behaviors like gravity, orbits, and skidding. Modifies only the motion angle.
setBoundAction(action): Change the boundAction of the sprite to one of the following: BOUNCE, WRAP, STOP, DIE, or CONTINUE.
checkBounds(): If you have a boundary behavior that is not covered by one of the default actions, you can write your own checkBounds() method. You are responsible for checking all boundary conditions, and the default actions will no longer be checked for this sprite. It is never necessary to call the checkBounds() method. It is called automatically by the sprite's update() method.
collidesWith(sprite): Returns true if this sprite's bounding rectangle is overlapping the rectangle of the parameter sprite. Returns false if the sprites are not overlapping or either sprite is hidden.
*distanceTo(sprite): Returns the distance (in pixels) between the center of the current sprite and the center of the parameter sprite. Not affected by the sprite's image size or angle.
angleTo(sprite): Returns the angle (in degrees) between the center of the current sprite and the center of the parameter sprite.
loadAnimation(width, height, cellWidth, cellHeight): Indicates that the image associated with a sprite is actually a sprite sheet. The width and height parameters indicate the width and height of the sprite, and the cellWidth and cellHeight determine the width of a single animation cell.
generateAnimationCycles(): Generates a series of animations based on the sprite sheet. Default behavior presumes that each row is a state and each column is a frame of animation within that state.
renameCycles(cycleNameArray): Renames each cycle. Each element of the array should be a human-readable name for the corresponding state.
setAnimationSpeed(speed): Sets the delay used when the library flips through the animation frames. Higher values cause slower animations.
setCurrentCycle(cycleName): Changes the animation cycle to the indicated value. Use one of the names defined with the renameCycles() method.
playAnimation(): Begins the animation, which will continue until paused.
pauseAnimation(): Pauses the current animation.
HTML5 Game Programming: Making Noise with the Sound Object
You use the Sound object to create two sounds per object — an MP3 and an OGG — to ensure the sound effects in your game will work on most HTML5-compliant browsers.
|sndElement = new Sound(src)||Creates a new Sound object called sndElement based on the src file. This file should be in MP3, OGG, or WAV format.|
|play()||Plays the current sound.|
|showControls()||Displays the HTML5 sound control panel with a volume control and scrubber. Can be useful for iOS devices that require manual sound playback before code-based playback.|
HTML5 Game Development: Keeping Track with the Timer Object
The Timer object will help you keep track of time in your games. You can have as many timers as you wish in your game.
|timerObj = new Timer()||Creates a new Timer object called timerObj. The counter automatically begins counting when it is created.|
|reset()||Resets the timer so it begins counting at zero.|
|getElapsedTime()||Returns the number of seconds since the timer was created or reset.|
HTML5 Game Programming: Adding a Touch with the Virtual Joystick Object
Create a Joystick object whenever you think your game may be used on touch devices. The scene's getMouseX() and getMouseY() methods will respond to touch input.
|joyName = new Joy()||Creates a new Joystick object called joyName.|
|getMouseX(), getMouseY()||Gets the X and Y position of the mouse if the user is touching the screen. Returns screen coordinates, not coordinates in the scene. Typically, you want to use the scene object's getMouseX() and getMouseY() methods instead.|
|getDiffX(), getDiffY()||Returns how far the user's finger has moved from the initial touch position. Modify these values to get joystick-like behavior.|
|virtKeys = true;||If you create a variable called virtKeys in your main code and set it to true before building a joystick object, the user can drag up to trigger the up arrow key, down to trigger the down arrow, and so on.|
Adding Tilt with the Virtual Accelerometer Object
An HTML5 game programmer can use an accelerometer (the Accel object) to read tilt and movement input on supported devices, such as tablets and phones.
|accelName = new Accel()||Creates a new Accel object called accelName.|
|getAX()||Returns rotation around the X axis as a –1 to 1 value (often used to modify DY).|
|getAY()||Returns rotation around the Y axis as a –1 to 1 value (often used to modify DX).|
|getAZ()||Returns rotation around the Z axis (rotating the device like a steering wheel). Typically, the getAY() also returns suitable values for this type of input, so getAZ() is rarely needed.|
|getRotX(), getRotY(), getRotZ()||Returns the current change in rotation around each of the axes. Normally, the get() methods are more useful.|
HTML5 Game Development: Adding Buttons with the GameButton Object
If your game only allows keyboard input, users with touchscreen devices may not be able to play. Use the gameButton object to add touchscreen-supported buttons.
|buttonName = new GameButton(label);||Creates a GameButton object called buttonName displaying the label value. The label value can include HTML code for more interesting buttons.|
|setPosition(x,y)||Sets the button's upper-left corner to the indicated (x,y) coordinates. The coordinates are for the page, so buttons can be placed on the game scene or elsewhere on the page.|
|setSize(width, height)||Changes the button's size. You may need to experiment to find the optimal button size for easy play without obscuring the screen.|
|isClicked()||Returns true if the button is currently clicked and false if it is not. Provides an easy way to read the button's status in the game loop.|