HTML5 Canvas

Index

A note on the digital index

A link in an index entry is displayed as the section title in which that entry appears. Because some sections have multiple index markers, it is not unusual for an entry to have several links to the same section. Clicking on any link will take you directly to the place in the text in which the marker appears.

Symbols

- (minus sign), -- (decrement) operator, Drawing the ball

2D context, Introduction to HTML5 Canvas

and current state, The 2D Context and the Current State

retrieving, Retrieving the 2D Context

3D with WebGL, 3D with WebGL–CopperLicht

JavaScript libraries used with WebGL, WebGL JavaScript Libraries

resources for learning about WebGL, How Do I Learn More About WebGL?

rotating cube application, What Does a WebGL Application Look Like?

adding JavaScript libraries, JavaScript libraries

animating the cube, Animating the cube

complete code, Full Code Listing–Further Explorations with WebGL

initialization in canvasApp( ), Initialization in canvasApp()

shaders, Shaders

testing for WebGL support, Testing for WebGL support with Modernizr

testing WebGL, How Do I Test WebGL?

? (question mark), ?: ternary operator, Keyboard input

A

accelerometer (iPhone), Adding the Gesture Functions to index.html

adding gesture to BS Bingo game (example), Adding in an iPhone “Gesture”–Adding the Gesture Functions to index.html

addColorStop( ) method, CanvasGradient objects, Linear Gradients and Text

addEventListener( ) method, window objects, HTML5 Canvas “Hello World!”, The initGame() Function

alignment, text, Font Baseline and Alignment–Text Arranger Version 2.0

centering text with TextMetrics, width property, Centering text using width

handling in Text Arranger (example), Handling text baseline and alignment–Text Arranger Version 2.0

horizontal, Horizontal alignment

setting vertical alignment with textBaseline property, The drawScreen() Function

vertical, Vertical alignment

vertically centering text on canvas, What about the height of the text?

alpha values

alpha fading player ship (game example), Using the context.globalAlpha attribute

globalAlpha property, Compositing on the Canvas

using with text, Global Alpha and Text

manipulating via pixel color values, How ImageData.data is organized

rgba colors, Setting Basic Fill Colors

angle of incidence, Bouncing Off Walls

angle of reflection, Bouncing Off Walls

angles

defined in radians for drawing arcs, context.arc()

direction of movement on a vector, Moving on a Vector

measurement in radians, Rotation and Translation Transformations

animations

adding step timer to FrameRateCounter object prototype, Adding in a Step Timer–How the step timer works

advanced cell-based animation, Advanced Cell-Based Animation–Moving the Image Across the Canvas

bouncing off walls, Bouncing Off Walls–Curve and Circular Movement

multiple balls, Multiple Balls Bouncing Off Walls–Multiple Balls Bouncing with a Dynamically Resized Canvas

multiple balls bouncing with friction, Multiple Balls Bouncing with Friction–Curve and Circular Movement

multiple balls colliding, Multiple Balls Bouncing and Colliding–Multiple Balls Bouncing with Friction

multiple balls with dynamically resized canvas, Multiple Balls Bouncing with a Dynamically Resized Canvas–Multiple Balls Bouncing and Colliding

single ball, Bouncing a Single Ball–Multiple Balls Bouncing Off Walls

Canvas compared to Flash, Canvas Compared to Flash

combining rotation, animation, and movement, Animating a Transformed Image–Animating a Transformed Image

displaying tile map on canvas, Displaying the map on the canvas

combining with rotation transformations, Animating a Transformed Image

curve and circular movement, Curve and Circular Movement–Simple Gravity, Elasticity, and Friction

creating cubic Bezier curve loop, Creating a Cubic Bezier Curve Loop–Simple Gravity, Elasticity, and Friction

moving image on cubic Bezier curve, Moving an Image–Creating a Cubic Bezier Curve Loop

moving in spiral, Moving in a Simple Spiral–Cubic Bezier Curve Movement

moving on cubic Bezier curve, Cubic Bezier Curve Movement–Moving an Image

uniform circular motion, Uniform Circular Motion–Moving in a Simple Spiral

easing, Easing–Easing In (Taking Off)

easing in, Easing In (Taking Off)–Easing In (Taking Off)

easing out, Easing Out (Landing the Ship)–Easing In (Taking Off)

game (example), Animating on the Canvas–The Player Ship State Changes

player ship state changes, The Player Ship State Changes

timer loop, Game Timer Loop

game object, physics and, Game Object Physics and Animation–A Basic Game Framework

controlling player ship with keyboard, Controlling the Player Ship with the Keyboard–Evaluating key presses

giving player ship maximum velocity, Giving the Player Ship a Maximum Velocity

how player ship will move, How Our Player Ship Will Move–Controlling the Player Ship with the Keyboard

gravity with bounce and applied elasticity, Gravity with Bounce and Applied Simple Elasticity–Simple Gravity, Simple Elasticity, and Simple Friction

moving in straight line, Math, Physics, and Animation–Moving on a Vector

moving between two points, Moving Between Two Points: The Distance of a Line

moving on a vector, Moving on a Vector–Bouncing Off Walls

simple cell-based sprite animation, Simple Cell-Based Sprite Animation–Changing the Tile to Display

simple gravity, Simple Gravity, Elasticity, and Friction–Simple Gravity with a Bounce

with bounce, Simple Gravity with a Bounce–Gravity with Bounce and Applied Simple Elasticity

simple gravity, elasticity, and friction applied to bouncing ball, Simple Gravity, Simple Elasticity, and Simple Friction–Easing

tile-based game, tile movement logic, Simple Tile Movement Logic Overview–Simple Tile Movement Logic Overview

update/render (repeat) cycle, The Update/Render (Repeat) Cycle–The Update/Render (Repeat) Cycle

using dynamic tile sheet created at runtime, Creating a Dynamic Tile Sheet at Runtime–Creating a Dynamic Tile Sheet at Runtime

video, Animation Revisited: Moving Videos–Animation Revisited: Moving Videos

WebGL 3D rotating cube, Animating the cube–Further Explorations with WebGL

appendChild( ) method, document.body DOM object, Dynamically Creating an Audio Element in JavaScript

Apple

application development platforms, Going Mobile!

Keychain for certificates, Step 3: Generate a Certificate Signing Request

Xcode IDE, Creating the iOS Application with PhoneGap

application functions, Geo Blaster game (example), Game application functions

application states

CanvasRenderingContext2D object and, The 2D Context and the Current State

Geo Blaster Basic game (example), Game application states

player ship state changes, animation (example), The Player Ship State Changes–The Player Ship State Changes

state machine for games, The Game State Machine

state machine for Space Raiders game, State machine

STATE_INIT, Initializing the game: no global variables

STATE_LOADING, Preloading all assets without global variables

STATE_PLAYING, Playing the game

STATE_RESET, Resetting the game

turn-based game flow and state machine, Turn-Based Game Flow and the State Machine–GAME_STATE_PLAYER_LOSE

arcs, drawing on Canvas, Arcs–Bezier Curves

arc( ) method, context.arc()

arcTo( ) method, context.arcTo()

stroke gradient, Radial gradients

Array objects

indexOf( ) method, The eventKeyPressed() Function

push( ) method, The eventKeyPressed() Function

toString( ) method, The drawScreen() Function

arrays

creating to hold tiles for animation, Creating an Animation Array

of logical display objects (Geo Blaster game), Arrays of Logical Display Objects

points array for tracing movement, Tracing movement: A path of points

swapping elements in two-dimensional array, Swapping two elements in a two-dimensional array

Atari, Asteroids game, Our Game’s Design

Audacity, converting audio file formats, Audacity

audio, Working with Audio–What’s Next

adding sound to Geo Blaster Extended game, Adding Sound–Playing sounds

adding sound instances and management variables, Adding sound instances and management variables to the game

loading in sounds and tile sheet assets, Loading in sounds and tile sheet assets

playing sounds, Playing sounds

basic <audio> tag, The Basic <audio> Tag

case study, Space Raiders game, Case Study in Audio: Space Raiders Game–What’s Next

creating sound pool, Iteration #3: Creating a Sound Pool

creating unlimited dynamic sounds, Iteration #2: Creating Unlimited Dynamic Sound Objects

final code, The final code for Space Raiders–What’s Next

game structure, Space Raiders Game Structure–Playing the game

playing sounds using single object, Iteration #1: Playing Sounds Using a Single Object

reusing preloaded sounds, Iteration #4: Reusing Preloaded Sounds–Iteration #4: Reusing Preloaded Sounds

sounds in games, Why Sounds in Apps Are Different: Event Sounds

creating canvas audio player, Creating a Canvas Audio Player–Case Study in Audio: Space Raiders Game

click-and-drag volume slider, Click-and-Drag Volume Slider

complete code, Volume slider functionality–Case Study in Audio: Space Raiders Game

custom user controls, Creating Custom User Controls on the Canvas

handlers for common mouse events, Mouse Events

loading button assets, Loading the Button Assets

loop toggle button, Loop/No Loop Toggle Button

play/pause push button, Play/Pause Push Button: Hit Test Point Revisited

sliding play indicator, Sliding Play Indicator

values for placement of controls, Setting Up the Audio Player Values

displaying audio element attributes on canvas, Displaying Attributes on the Canvas–Playing a Sound with No Audio Tag

formats, Audio Formats

converting in Audacity, Audacity

using .mp3, .ogg, and .wav formats (example), Example: Using All Three Formats

functions, Audio Tag Properties, Functions, and Events

important events, Important Audio Events

important properties, Important Audio Properties

loading and playing, Loading and Playing the Audio

playing sound with no audio tag, Playing a Sound with No Audio Tag–Creating a Canvas Audio Player

creating audio element dynamically, Dynamically Creating an Audio Element in JavaScript

finding supported audio format, Finding the Supported Audio Format

playing the sound, Playing the Sound

autoplay property

audio objects, Important Audio Properties

video objects, Basic HTML5 Video Implementation, Video with Controls, Loop, and Autoplay, HTML5 Video Properties

B

Base SDK, selecting for PhoneGap project, Creating the BS Bingo PhoneGap Project in Xcode

baseline and alignment, fonts, Font Baseline and Alignment–Text Arranger Version 2.0

handling in Text Arranger (example), Handling text baseline and alignment–Text Arranger Version 2.0

horizontal alignment, Horizontal alignment

vertical alignment, Vertical alignment

beginPath( ) function, Starting and Ending a Path

Bezier curves, Bezier Curves, Cubic Bezier Curve Movement, Creating a Cubic Bezier Curve Loop

(see also curve and circular movement)

defined, Cubic Bezier Curve Movement

BinaryHTTP protocol, The ElectroServer admin tool, Client

bitmaps

adding to Geo Blaster game, Geo Blaster Extended

rendering other game objects, Rendering the Other Game Objects–Adding Sound

tile sheet, Geo Blaster Tile Sheet–The new boundingBoxCollide() algorithm

bitmapped image of Canvas object, The HTML5 Canvas Object

bitmapped screen, Introduction to HTML5 Canvas

bouncing effects

adding bouncing balls to ElectroServer 5 chat application, Further Explorations with ElectroServer–This Is Just the Tip of the Iceberg

gravity with bounce and applied elasticity, Gravity with Bounce and Applied Simple Elasticity–Simple Gravity, Simple Elasticity, and Simple Friction

simple gravity with a bounce, Simple Gravity with a Bounce–Gravity with Bounce and Applied Simple Elasticity

simple gravity, elasticity, and friction applied to, Simple Gravity, Simple Elasticity, and Simple Friction–Easing

video animation, Animation Revisited: Moving Videos–What’s Next?

bouncing off walls, Bouncing Off Walls–Curve and Circular Movement

multiple balls, Multiple Balls Bouncing Off Walls–Multiple Balls Bouncing with a Dynamically Resized Canvas

with collisions, Multiple Balls Bouncing and Colliding–Multiple Balls Bouncing with Friction

with dynamically resized canvas, Multiple Balls Bouncing with a Dynamically Resized Canvas–Multiple Balls Bouncing and Colliding

with friction, Multiple Balls Bouncing with Friction–Curve and Circular Movement

single ball, Bouncing a Single Ball–Multiple Balls Bouncing Off Walls

bounding box collision detection, Bounding box collision detection

bounding box theory, Combining Scale and Rotation Transformations

BS Bingo game (example), The Application

application code, The Application Code

complete source code, The Code

porting to iPhone using PhoneGap, Creating the iOS Application with PhoneGap–Using Xcode to Target a Test Device

adding gesture functions to index.html, Adding the Gesture Functions to index.html

changing banner and icon, Changing the Banner and Icon

creating project in Xcode, Creating the BS Bingo PhoneGap Project in Xcode

installing PhoneGap, Installing PhoneGap

installing Xcode, Installing Xcode

integrating BS Bingo into project, Integrating BS Bingo into the Project

setting orientation, Setting the Orientation

testing blank application in simulator, Testing the New Blank Application in the Simulator

testing on a device, Testing on a Device

testing on iPhone simulator, Testing on the Simulator

TextButton.js file, The TextButton.js file–The onMouseMove() function

buffers, creating for WebGL application, Initialization in canvasApp()

buttons

creating and adding to form, Exporting Canvas to an Image

creating video control buttons, Creating video buttons

listening for presses in video controls, Listening for the button presses

placing video control buttons, Placing the buttons

preloading for audio player, Loading the Button Assets

preloading for video controls, Preloading the buttons

C

C3DL library, C3DL

canplaythrough events

audio, Important Audio Events

event listener for, Dynamically Creating an Audio Element in JavaScript

using to force audio loading, Loading and Playing the Audio

video, Preloading Video in JavaScript

problem with, A Problem with Events and Embedded Video in HTML5

canPlayType( ) method

audio objects, Audio Functions

HTMLAudioElement object, Displaying Attributes on the Canvas

finding supported format, Finding the Supported Audio Format

video objects, Video must still be embedded in HTML

Canvas

benefits of using, What Does Canvas Offer?

comparison to Flash, Canvas Compared to Flash

Document Object Model (DOM) and, The Document Object Model (DOM) and Canvas

encapsulating JavaScript code for, Encapsulating Your JavaScript Code for Canvas

JavaScript as programming language, JavaScript and Canvas

resources for further information, Conclusion

testing for web browser support of, Testing to See Whether the Browser Supports Canvas

<canvas> elements, <canvas>

adding to HTML page, Adding Canvas to the HTML Page

copying image data from one to another, Copying from One Canvas to Another–Copying from One Canvas to Another

Canvas objects, Using document to reference the canvas element in JavaScript

dir attribute, Horizontal alignment

getContext( ) method, Testing to See Whether the Browser Supports Canvas, The 2D Context and the Current State

properties and methods, The HTML5 Canvas Object

toDataURL( ) method, Exporting Canvas to an Image, The toDataURL() Method of the Canvas Object

width and height properties, Dynamically Resizing the Canvas

canvasApp( ) function, HTML5 Canvas “Hello World!”

drawScreen( ) function local to, Encapsulating Your JavaScript Code for Canvas

in ElectroServer chat application, Creating the chat functionality

Guess The Letter game (example), How the Game Works

Text Arranger (example)

event handler functions for font size and face changes, Defining event handler functions in canvasApp()

event handlers for font size and face changes, Setting event handlers in canvasApp()

font size, face, weight, and style variables, Creating the necessary variables in the canvasApp() function

gradient and patterns, Handling Gradients and Patterns in Text Arranger

shadow variables, Handling global shadows

text baseline and alignment, Handling text baseline and alignment

textFillcolor variable, Handling font color with JSColor

CanvasGradient objects, Basic Text Display

addColorStop( ) method, Linear Gradients and Text

CanvasPattern objects, Basic Text Display

creating, Image Patterns and Text

CanvasPixelArray interface, The Canvas Pixel Manipulation API

CanvasRenderingContext2D objects, Introduction to HTML5 Canvas

(see also context objects)

current state and, The 2D Context and the Current State

retrieving, Retrieving the 2D Context

capturing events, HTML5 Canvas “Hello World!”

Cascading Style Sheets (see CSS)

case statements, Keyboard input–Keyboard input

cell-based animation

advanced, Advanced Cell-Based Animation–Moving the Image Across the Canvas

simple sprite animation, Simple Cell-Based Sprite Animation–Changing the Tile to Display

center point

finding for any shape, Combining Scale and Rotation Transformations

rotating shapes around, Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center

scaling from, Scale Transformations

centering text, Centering text using width

certificate signing request, Step 3: Generate a Certificate Signing Request

character encodings, <meta charset="UTF-8">

chat applications

creating with ElectroServer 5, Creating a Chat Application with ElectroServer–Creating the chat functionality

adding bouncing ball, Further Explorations with ElectroServer–This Is Just the Tip of the Iceberg

testing ElectroServer chat application in Chrome, Testing the Application in Google Chrome–Further Explorations with ElectroServer

use of socket servers, The Basic Architecture of a Socket-Server Application

chooseButtonsForCard( ) function, BS Bingo game (example), The chooseButtonsForCard() function

Chrome

problem with events and embedded video, A Problem with Events and Embedded Video in HTML5

testing ElectroServer chat application in, Testing the Application in Google Chrome–Further Explorations with ElectroServer

circle arcs, creating, context.arc()

circle collision detection, Circle collision detection

circles, radial gradient applied to, Radial gradients

circular movement, Curve and Circular Movement–Moving in a Simple Spiral

clearRect( ) method, context objects, The Basic Rectangle Shape

clients for ElectroServer applications, Client

clipping regions, The 2D Context and the Current State, The Canvas Clipping Region

closePath( ) function, Starting and Ending a Path

code examples from this book, running, Running the Examples in the Book

codecs, HTML5 Video Support

COLLADA 3D models, Google O3D

collisions, Multiple Balls Bouncing and Colliding–Multiple Balls Bouncing with Friction

applying collision detection in Geo Blaster game (example), Applying Collision Detection

ball collisions in depth, Ball collisions in depth–Multiple Balls Bouncing with Friction

balls colliding, Circle collision detection

circle collision detection, Circle collision detection

detection in Geo Blaster Extended (example), The new boundingBoxCollide() algorithm

detection in Space Raiders game, Bounding box collision detection

elastic, Ball interactions in physics

hit test point-style collision detection, Creating hit test point-style collision detection

testing if balls are colliding, Collisions with balls

update-collide-render cycle, Separating the code in drawScreen()

color stops, Linear gradients

colors

context.strokeColor property, fillText and strokeText

formatting for fillStyle or strokeStyle, Handling Gradients and Patterns in Text Arranger

setting basic fill colors, Setting Basic Fill Colors

setting font color, Font Color

setting for text, Basic Text Display

shadow, picking with jsColor, Handling global shadows

shadowColor property, Creating Shadows on Canvas Shapes

text gradient fills, Handling Gradients and Patterns in Text Arranger

Vertex Color buffer, WebGL application, Initialization in canvasApp()

compositing, Compositing on the Canvas–Compositing on the Canvas

example, Compositing on the Canvas

“connected apps” culture, Conclusion

connection to ElectroServer, establishing, Establishing a connection to ElectroServer–Creating the chat functionality

console.log, Debugging with Console.log

context

accessing WebGL context, How Do I Test WebGL?

defined, Testing to See Whether the Browser Supports Canvas

retrieving 2D context, Retrieving the 2D Context

retrieving 3D context, Initialization in canvasApp()

context objects, The drawScreen() Function

arc( ) method, Arcs

arcTo( ) method, context.arcTo()

bezierCurveTo( ) method, Bezier Curves

CanvasRenderingContext2D, The 2D Context and the Current State

clip( ) method, The Canvas Clipping Region

createImageData( ) method, The Canvas Pixel Manipulation API

createLinearGradient( ) method, Linear horizontal gradients–Radial gradients, Linear Gradients and Text

createPattern( ) method, Filling Shapes with Patterns, Image Patterns and Text

createRadialGradient( ) method, Radial gradients–Radial gradients, Radial Gradients and Text

drawImage( ) method, The drawScreen() Function, Displaying an Image on the Canvas with drawImage()

drawing basic rectangle shape, The Basic Rectangle Shape

drawing states, The Canvas State

drawing with paths, methods for, The static player ship (frame 1)

fill( ) method, Applying a horizontal gradient to a complex shape

fillColor property, fillText and strokeText

fillStyle property, Basic Text Display

fillText( ) method, The drawScreen() Function, Basic Text Display, fillText and strokeText

font property, Basic Text Display, Setting the Text Font, Font Size, Face Weight, and Style Basics

globalAlpha property, Compositing on the Canvas, Global Alpha and Text

globalCompositeOperation property, Compositing on the Canvas

measureText( ) method, Using measureText, Handling text baseline and alignment, Handling text baseline and alignment

moveTo( ) and lineTo( ) methods, The Actual Drawing

properties, The 2D Context and the Current State

putImageData( ) method, Putting image data

quadraticCurveTo( ) method, Bezier Curves

rotate( ) method, Lesson 1: Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is called

saving and restoring state, How Do We Save and Restore the Canvas State?, Canvas Transformation Basics

scale( ) method, Scale Transformations

setTransform( ) method, Lesson 1: Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is called

shadow properties, Creating Shadows on Canvas Shapes, Global Shadows and Text–Text with Gradients and Patterns

strokeColor property, fillText and strokeText

strokeRect( ) method, The drawScreen() Function

strokeText( ) method, fillText and strokeText

textAlign property, Horizontal alignment

textBaseline property, Vertical alignment

translate( ) method, Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center

controls

controls property, audio objects, The Basic <audio> Tag, Important Audio Properties

setting, Example: Using All Three Formats

controls property, videos, HTML5 Video Properties

creating custom user controls for audio player, Creating Custom User Controls on the Canvas

hit/pause push button, Play/Pause Push Button: Hit Test Point Revisited

loading button assets, Loading the Button Assets

loop toggle button, Loop/No Loop Toggle Button

mouse event handlers, Mouse Events

setting values for placement of, Setting Up the Audio Player Values

sliding play indicator, Sliding Play Indicator

source code for custom player, Volume slider functionality–Case Study in Audio: Space Raiders Game

volume slider, Click-and-Drag Volume Slider–Volume slider functionality

creating video controls on Canvas, Creating Video Controls on the Canvas–Animation Revisited: Moving Videos

listening for button presses, Listening for the button presses

placing the buttons, Placing the buttons

preloading buttons, Preloading the buttons

source code, Listening for the button presses–Animation Revisited: Moving Videos

video, Video with Controls, Loop, and Autoplay

converters for video formats, Converting Video Formats

CopperLicht library, CopperLicht

copying image data from one canvas to another, Copying from One Canvas to Another–Copying from One Canvas to Another

copying part of image to Canvas, Copying Part of an Image to the Canvas

cosine, Moving on a Vector

counters

creating animation frame counter, Creating an Animation Frame Counter

FrameRateCounter object prototype, The FrameRateCounter Object Prototype–Putting It All Together

tracking current index of animation array, Creating an Animation Array

CraftyMind.com, Animation Revisited: Moving Videos

createElement( ) method, document objects, Video must still be embedded in HTML, Dynamically Creating an Audio Element in JavaScript

createImageData( ) function, The Canvas Pixel Manipulation API

createLinearGradient( ) method, context objects, Linear horizontal gradients–Radial gradients, Linear Gradients and Text

createPattern( ) method, context objects, Filling Shapes with Patterns, Image Patterns and Text

video element as source, Image Patterns and Text

createRadialGradient( ) method, context objects, Radial gradients–Radial gradients, Radial Gradients and Text

CSS (Cascading Style Sheets), Basic HTML We Will Use in This Book

font styles, Available font styles

font weights, Available font weights

cubic Bezier curves, Bezier Curves, Cubic Bezier Curve Movement

(see also curve and circular movement)

current state, The 2D Context and the Current State

currentSrc property, audio objects, Important Audio Properties

currentTime property

audio objects, Important Audio Properties

video objects, Basic HTML5 Video Implementation, HTML5 Video Properties

using to create video events, Using the currentTime Property to Create Video Events–Canvas Video Transformations: Rotation

curve and circular movement, Curve and Circular Movement–Simple Gravity, Elasticity, and Friction

creating cubic Bezier curve loop, Creating a Cubic Bezier Curve Loop–Simple Gravity, Elasticity, and Friction

moving an image on cubic Bezier curve path, Moving an Image–Creating a Cubic Bezier Curve Loop

moving in simple spiral, Moving in a Simple Spiral–Cubic Bezier Curve Movement

moving on cubic Bezier curve, Cubic Bezier Curve Movement–Moving an Image

uniform circular motion, Uniform Circular Motion–Moving in a Simple Spiral

curves, Bezier, Bezier Curves

(see also curve and circular movement)

D

Daleks game, Combining Bitmaps and Sound, A Simple Tile-Based Game

data property, ImageData objects, ImageData attributes

debugging, using console.log, Debugging with Console.log

decrement operator (--), Drawing the ball

degrees, converting to radians for angles, Rotation and Translation Transformations

deltaX (dx) and deltaY (dy) change in axis position, Moving the Image Across the Canvas

descenders (font), Vertical alignment

Developer Provisioning Assistant, Step 1: Launch the Provisioning Assistant

development certificates, Step 3: Generate a Certificate Signing Request

diagonal linear gradients, Diagonal gradients

dir attribute, Canvas object, Horizontal alignment

direction of movement (vectors), Moving on a Vector

displaying video on HTML5 Canvas, Displaying a Video on HTML5 Canvas–HTML5 Video Properties

embedding video in HTML, Video must still be embedded in HTML

setting interval to update display, Set an interval to update the display–Set an interval to update the display

distance of a line, Moving Between Two Points: The Distance of a Line–Moving on a Vector

distance equation, Moving Between Two Points: The Distance of a Line

<div> tags, <div>

doctype tags, <!doctype html>

document objects, The Document Object Model (DOM) and Canvas

createElement( ) method, Video must still be embedded in HTML, Dynamically Creating an Audio Element in JavaScript

getElementById( ) method, Exporting Canvas to an Image, Communicating Between HTML Forms and the Canvas

using to reference canvas element in JavaScript, Using document to reference the canvas element in JavaScript

DOM (Document Object Model), Canvas and, The Document Object Model (DOM) and Canvas

drag and drop, click-and-drag volume slider control, Click-and-Drag Volume Slider–Volume slider functionality

drawImage( ) method, context objects, Image Basics

copying part of image to Canvas, Copying Part of an Image to the Canvas

displaying image on Canvas, Displaying an Image on the Canvas with drawImage()

drawing a video, Video is displayed like an image

drawing image for rotation transformation, Step 4: Draw the image

drawing image window, Drawing the Image Window

drawing puzzle pieces for video puzzle, Drawing the screen

Hello World program (example), The drawScreen() Function

resizing image as it is drawn, Resizing an Image Painted to the Canvas

using all parameters, Copying Part of an Image to the Canvas

Drawing API, Drawing on the Canvas

drawing on Canvas, Drawing on the Canvas–What’s Next

arcs, Advanced Path Methods

Bezier curves, Bezier Curves

Canvas state, The Canvas State

clipping region, The Canvas Clipping Region

compositing, Compositing on the Canvas–Compositing on the Canvas

creating lines using paths, Using Paths to Create Lines–Examples of More Advanced Line Drawing

creating shadows, Creating Shadows on Canvas Shapes

filling objects with colors, Setting Basic Fill Colors

filling shapes with gradients, Filling Shapes with Gradients–Radial gradients

filling shapes with patterns, Filling Shapes with Patterns–Filling Shapes with Patterns

rectangle basic shape, The Basic Rectangle Shape

transformations, Simple Canvas Transformations–Filling Objects with Colors and Gradients

combining scale and rotation, Combining Scale and Rotation Transformations

rotation and translation, Rotation and Translation Transformations–Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center

scale, Scale Transformations

drawing states, The Canvas State

current state, The 2D Context and the Current State

drawing with paths, Advanced Path Methods, Game Graphics: Drawing with Paths–Animating on the Canvas

(see also drawing on Canvas)

creating lines, Using Paths to Create Lines–Examples of More Advanced Line Drawing

drawing game’s main character, Using Paths to Draw the Game’s Main Character

player ship with thrust engaged, The ship with thrust engaged (frame 2)

static player ship, The static player ship (frame 1)

graphics for Asteroids-like game, Needed Assets

drawScreen( ) function, The drawScreen() Function

drawing screen for video puzzle game, Drawing the screen

in Guess The Letter game (example), The drawScreen() Function

Hello World program (example), Encapsulating Your JavaScript Code for Canvas

Text Arranger (example)

setting font, Setting the font in the drawScreen() function

shadow settings and changes, Handling global shadows

text fill color changes, Handling font color with JSColor

TextButton object in BS Bingo game (example), The drawScreen() function

using in 3D context, Animating the cube

duration property

audio objects, Important Audio Properties

video objects, Basic HTML5 Video Implementation, HTML5 Video Properties

E

easing, Easing–Easing In (Taking Off)

easing in, Easing In (Taking Off)–Easing In (Taking Off)

easing out, Easing Out (Landing the Ship)–Easing In (Taking Off)

Robert Penner’s easing equations and implementation in jQuery, Easing In (Taking Off)

elastic collisions, Ball interactions in physics

elasticity

applied with gravity and friction to bouncing ball, Simple Gravity, Simple Elasticity, and Simple Friction–Easing

gravity with bounce and applied simple elasticity, Gravity with Bounce and Applied Simple Elasticity

ElectroServer 5, Multiplayer Applications with ElectroServer 5–This Is Just the Tip of the Iceberg

admin tool, The ElectroServer admin tool

basic architecture of an application, The Basic Architecture of an ElectroServer Application

basic architecture of socket-server application, The Basic Architecture of a Socket-Server Application

creating chat application with, Creating a Chat Application with ElectroServer–Creating the chat functionality

adding bouncing ball to chat, Further Explorations with ElectroServer

creating chat functionality, Creating the chat functionality–Creating the chat functionality

establishing connection to ElectroServer, Establishing a connection to ElectroServer–Creating the chat functionality

full code for ball demo, Further Explorations with ElectroServer–This Is Just the Tip of the Iceberg

installing, Installing ElectroServer

JavaScript API, The JavaScript API

other uses of, This Is Just the Tip of the Iceberg

starting the server, Starting the server

testing chat application in Google Chrome, Testing the Application in Google Chrome–Further Explorations with ElectroServer

Electrotank, Multiplayer Applications with ElectroServer 5

em square (fonts), Vertical alignment

embedding video in HTML, Video must still be embedded in HTML

plain-vanilla embed, Plain-Vanilla Video Embed

properties and methods, Basic HTML5 Video Implementation

video with controls, loop, and autoplay, Video with Controls, Loop, and Autoplay

end of game, Geo Blaster Basic (example), Level end

ended events, audio, Important Audio Events

ended property

audio objects, Important Audio Properties, Sliding Play Indicator

video objects, Basic HTML5 Video Implementation

enemy object (Micro Tank Maze game), The Enemy

EsObject objects, Creating the chat functionality

use in bouncing balls application, Further Explorations with ElectroServer

eval( ) function, fillText and strokeText

event handlers, Exporting Canvas to an Image

(see also events)

adding for keyup event in Guess The Letter game (example), The initGame() Function

createImageDataPressed( ) function (example), Exporting Canvas to an Image

creating for mouse events on play/pause push button, Play/Pause Push Button: Hit Test Point Revisited

defining for click-and-drag volume slider, Volume slider functionality

defining for mouse events in Space Raiders game, Mouse control

eventKeyPressed( ) function, The eventKeyPressed() Function

mouse events on loop toggle button, Loop/No Loop Toggle Button

registering, HTML5 Canvas “Hello World!”

setting in canvasApp( ), Text Arranger (example), Setting event handlers in canvasApp()

events, HTML5 Canvas “Hello World!”

canplay event handler for video, changing to itemLoaded, Preloading the buttons

changes in shadow settings, Text Arranger (example), Handling global shadows

ElectroServer, creating handlers for, Establishing a connection to ElectroServer

embedded video in HTML5, problem with, A Problem with Events and Embedded Video in HTML5

handler for keyup event of textBox, Communicating Between HTML Forms and the Canvas

handling for videoSize form control, Dynamically scaling a video

handling keyup event in Guess The Letter game, The initGame() Function

handling mouse events in Tile Stamper application, Adding mouse events to the canvas

handling mouse events in video puzzle game, Detecting mouse interactions and the canvas

handling range controls change event, Multiple Balls Bouncing with a Dynamically Resized Canvas

important audio events, Important Audio Events

interactivity of mouse events with audio player controls, Setting Up the Audio Player Values

keyboard controlling game player ship, Controlling the Player Ship with the Keyboard–Evaluating key presses

keyboard input handler for controlled pan and zoom, Keyboard input

listening for mouse button click in video controls, Listening for the button presses

setting event handler for button click event, Exporting Canvas to an Image

video, creating using currentTime property, Using the currentTime Property to Create Video Events–Canvas Video Transformations: Rotation

eventWindowLoaded( ) function, HTML5 Canvas “Hello World!”

explosions (Micro Tank Maze game), The Explosions

explosions and particles (in Geo Blaster game), Explosions and particles

prerendering as bitmaps, Geo Blaster Tile Sheet

rendering for Geo Blaster Extended, Rendering the particles

using object pooling, Object pooling in Geo Blaster Extended

exporting current Canvas to an image, Exporting Canvas to an Image

extensions, ElectroServer applications, Extensions

F

faces, font, Generic font faces

facing versus moving, game object animation, The difference between facing and moving

fade effects, alpha fading player ship (game example), Alpha Fading the Player Ship

Feldman, Ari, Displaying an Image on the Canvas with drawImage()

fill( ) method, context objects, Applying a horizontal gradient to a complex shape

fillColor property, context objects, fillText and strokeText

fillRect( ) method, context objects, The drawScreen() Function, The Basic Rectangle Shape, Diagonal gradients

linear gradient fills, Linear horizontal gradients–Applying a horizontal gradient to a stroke

fills, Filling Objects with Colors and Gradients–Filling Shapes with Patterns

filling shapes with gradients, Filling Shapes with Gradients–Radial gradients

diagonal linear gradients, Diagonal gradients

linear horizontal gradients, Linear horizontal gradients–Applying a horizontal gradient to a complex shape

radial gradients, Radial gradients–Radial gradients

vertical linear gradients, Vertical gradients

filling shapes with patterns, Filling Shapes with Patterns–Filling Shapes with Patterns

setting basic fill colors, Setting Basic Fill Colors

setting for filled text, Basic Text Display

fillStyle property, context objects, The 2D Context and the Current State, Basic Text Display

formatting with color, gradient, or pattern, Handling Gradients and Patterns in Text Arranger

pattern, Image Patterns and Text

setting colors, Setting Basic Fill Colors

setting font color for text, Font Color

setting for Hello World (example), The drawScreen() Function

setting gradients, Filling Shapes with Gradients–Radial gradients

setting in Guess The Letter game (example), The drawScreen() Function

fillStyle( ) method, context objects, The drawScreen() Function

fillText( ) method, context objects, The drawScreen() Function, Basic Text Display, fillText and strokeText

Flash

comparison to Canvas, Canvas Compared to Flash

retained mode drawing surface, The 2D Context and the Current State

flip-book animation, Simple Cell-Based Sprite Animation

font property, context objects, The 2D Context and the Current State

setting for Hello World (example), The drawScreen() Function

setting in Guess The Letter game (example), The drawScreen() Function

fonts, Setting the Text Font–Text and the Canvas Context

baseline and alignment, Font Baseline and Alignment–Text Arranger Version 2.0

handling text baseline alignment, Handling text baseline and alignment–Text Arranger Version 2.0

horizontal alignment, Horizontal alignment

vertical alignment, Vertical alignment

color, Font Color, Font Color

context.font property, fillText and strokeText

context.font style, setting, Basic Text Display

handling font size and face in Text Arranger (example), Handling Font Size and Face in Text Arranger–Font Color

handling in Text Arranger 2.0 (example), Text Arranger Version 2.0–Text and the Canvas Context

size, face weight, and style basics, Font Size, Face Weight, and Style Basics

for:next loops, Using the currentTime Property to Create Video Events

using in video puzzle game, Creating hit test point-style collision detection

formats

audio, Audio Formats

converting, Audacity

finding supported format, Finding the Supported Audio Format

using .mp3, .ogg, and .wav formats, Example: Using All Three Formats

video, HTML5 Video Support

.mp4 files, H.264 + $$$ = .mp4

.ogg files, Theora + Vorbis = .ogg

.webm, VP8 + Vorbis = .webm

converting, Converting Video Formats

web browsers’ support of, VP8 + Vorbis = .webm

forms (see HTML forms)

fragment shaders, Shaders

frame counter, creating for animation, Creating an Animation Frame Counter

frame tick, Creating a Timer Loop

FrameRateCounter object prototype, The FrameRateCounter Object Prototype–Putting It All Together

adding step timer, Adding in a Step Timer–How the step timer works

frames per second (FPS), Set an interval to update the display, Game Timer Loop

frameworks, JavaScript, JavaScript Frameworks and Libraries

friction

ball bouncing with applied gravity, elasticity, and friction, Simple Gravity, Simple Elasticity, and Simple Friction–Easing

multiple balls bouncing with, Multiple Balls Bouncing with Friction–Curve and Circular Movement

fromCharCode( ) method, String object, The eventKeyPressed() Function

functions

encapsulating for Canvas applications, Encapsulating Your JavaScript Code for Canvas

placement on HTML page, The Basic HTML Page

G

GameManager API (ElectroServer), Zones, rooms, and games

games, Canvas Game Essentials–What’s Next

animating on canvas, Animating on the Canvas–The Player Ship State Changes

game timer loop, Game Timer Loop

player ship state changes (example), The Player Ship State Changes

applying transformations to graphics, Applying Transformations to Game Graphics–The Canvas Stack

basic game framework, A Basic Game Framework–Putting It All Together

FrameRateCounter object prototype, The FrameRateCounter Object Prototype–Putting It All Together

state machine, The Game State Machine–The Game State Machine

update/render (repeat) cycle, The Update/Render (Repeat) Cycle–The Update/Render (Repeat) Cycle

basic HTML5 file for, Our Basic Game HTML5 File

creating dynamic tile sheet at runtime, Creating a Dynamic Tile Sheet at Runtime–Creating a Dynamic Tile Sheet at Runtime

creating for mobile devices with PhoneGap, Going Mobile!

creating simple tile-based game, A Simple Tile-Based Game–What’s Next

Micro Tank Maze complete code, Simple Homegrown AI Overview–What’s Next

design, Asteroids-like game, Our Game’s Design

development using HTML5 Canvas, Why Games in HTML5?

Geo Blaster Basic (example)

applying collision detection, Applying Collision Detection

arrays of logical display objects, Geo Blaster Game Algorithms

awarding player extra ships, Awarding the Player Extra Ships

full source code, The Geo Blaster Basic Full Source–Rock Object Prototype

game structure, Geo Blaster Game Structure–Game application functions

global game variables, Geo Blaster Global Game Variables

level and game end, Level and Game End

level knobs, Level Knobs

Rock object prototype, Rock Object Prototype–What’s Next

going mobile (see BS Bingo game; PhoneGap)

graphic transformations

alpha fading player ship (example), Alpha Fading the Player Ship

rotating player ship from center (example), Game Graphic Transformations

graphics, drawing with paths, Game Graphics: Drawing with Paths–Animating on the Canvas

drawing game’s main character, Using Paths to Draw the Game’s Main Character

Guess The Letter (example), Another Example: Guess The Letter–What’s Next

multiplayer applications with ElectroServer 5, Multiplayer Applications with ElectroServer 5–This Is Just the Tip of the Iceberg

object physics and animation, Game Object Physics and Animation–A Basic Game Framework

controlling player ship with keyboard, Controlling the Player Ship with the Keyboard–Evaluating key presses

how player ship will move (example), How Our Player Ship Will Move–Controlling the Player Ship with the Keyboard

maximum velocity for player ship, Giving the Player Ship a Maximum Velocity

player object, The player Object

tile-based environment for backgrounds and level graphics, Creating a Grid of Tiles

Geo Blaster Basic (example)

applying collision detection, Applying Collision Detection

arrays of logical display objects, Geo Blaster Game Algorithms

explosions and particles, Explosions and particles

missiles, Missiles

rocks, Rocks

saucers, Saucers

awarding player extra ships, Awarding the Player Extra Ships

Basic version, full source code, The Geo Blaster Basic Full Source–Rock Object Prototype

game structure, Geo Blaster Game Structure

application functions, Game application functions

application states, Game application states

global variables, Geo Blaster Global Game Variables

level and game end, Level and Game End

level knobs, Level Knobs

player object, The player Object

Rock object prototype, Rock Object Prototype–What’s Next

Geo Blaster Extended (example), Combining Bitmaps and Sound

adding sound, Adding Sound–Playing sounds

adding step timer, Adding in a Step Timer–How the step timer works

complete source code, How the step timer works–Creating a Dynamic Tile Sheet at Runtime

pooling object instances, Pooling Object Instances–Adding in a Step Timer

rendering other game objects, Rendering the Other Game Objects

tile sheet, Geo Blaster Tile Sheet

gesture (iPhone), adding to BS Bingo (example), Adding in an iPhone “Gesture”

adding gesture functions to index.html, Adding the Gesture Functions to index.html–Adding the Gesture Functions to index.html

getContext( ) method, Canvas object, Testing to See Whether the Browser Supports Canvas, The 2D Context and the Current State, The HTML5 Canvas Object

getElementById( ) method, document objects, Using document to reference the canvas element in JavaScript, Exporting Canvas to an Image, Communicating Between HTML Forms and the Canvas

getImageData( ) function, Getting image data, Creating a Dynamic Tile Sheet at Runtime

getShader( ) function, WebGL application, Initialization in canvasApp()

GLGE library, GLGE

global variables

Geo Blaster game (example), Geo Blaster Global Game Variables

initializing Space Raiders game without using, Initializing the game: no global variables

preloading assets without, Space Raiders game, Preloading all assets without global variables

globalAlpha property, context objects, The 2D Context and the Current State, Compositing on the Canvas

alpha fading player ship (game example), Using the context.globalAlpha attribute

text and, Global Alpha and Text

globalCompositeOperation property, context objects, The 2D Context and the Current State, Compositing on the Canvas

Google’s O3D library, Google O3D

gradients, Filling Shapes with Gradients–Radial gradients

linear, Linear gradients–Radial gradients

diagonal, Diagonal gradients

horizontal, Linear horizontal gradients–Applying a horizontal gradient to a complex shape

vertical, Vertical gradients

radial, Radial gradients–Radial gradients

text with, Text with Gradients and Patterns

handling in Text Arranger (example), Handling Gradients and Patterns in Text Arranger–Width, Height, Scale, and toDataURL() Revisited

linear gradients, Linear Gradients and Text

radial gradients, Radial Gradients and Text

gravity, simulating

with bounce and applied simple elasticity, Gravity with Bounce and Applied Simple Elasticity–Simple Gravity, Simple Elasticity, and Simple Friction

simple gravity, Simple Gravity, Elasticity, and Friction–Simple Gravity with a Bounce

simple gravity with a bounce, Simple Gravity with a Bounce–Gravity with Bounce and Applied Simple Elasticity

Guess The Letter game (example), Another Example: Guess The Letter–What’s Next

drawScreen( ) function, The drawScreen() Function

eventKeyPressed( ) function, The eventKeyPressed() Function

exporting canvas to an image, Exporting Canvas to an Image

final code, The Final Game Code–What’s Next

initGame( ) function, The initGame() Function

variables, The “Guess The Letter” Game Variables

H

H.264 video standard, H.264 + $$$ = .mp4

<head> tags, placement of JavaScript in, Where Does JavaScript Go and Why?

height attribute, <canvas> element, Adding Canvas to the HTML Page

height of text, What about the height of the text?

height property, Canvas objects, The HTML5 Canvas Object

“Hello World!” program (example), HTML5 Canvas “Hello World!”–Debugging with Console.log

hex number string, using to set fill color, Setting Basic Fill Colors

hit test point

collision detection in video puzzle game, Creating hit test point-style collision detection

detecting for audio player play/pause button, Play/Pause Push Button: Hit Test Point Revisited

horizontal alignment of text, Horizontal alignment

horizontal linear gradients, Linear horizontal gradients–Applying a horizontal gradient to a complex shape

applying to complex shape, Applying a horizontal gradient to a complex shape

applying to strokes, Applying a horizontal gradient to a stroke

on multiple objects, Linear horizontal gradients

HTML

adding Canvas to a page, Adding Canvas to the HTML Page

basic page, The Basic HTML Page

basic tags used in this book, Basic HTML We Will Use in This Book

</html><!doctype html> tags, <!doctype html>

HTML forms

communication between Canvas and, Communicating Between HTML Forms and the Canvas

creating and adding button to, Exporting Canvas to an Image

ElectroServer chat application, Creating the chat functionality

<html lang="en"> tags, <html lang="en">

HTML5, Introduction to HTML5 Canvas

Canvas Hello World, HTML5 Canvas “Hello World!”–Debugging with Console.log

resources for further information, Conclusion

simple page viewed in browsers, A Simple HTML5 Page

HTMLAudioElement objects, Audio Tag Properties, Functions, and Events

canPlayType( ) function, Displaying Attributes on the Canvas

creating array to hold for Space Raiders game, Iteration #2: Creating Unlimited Dynamic Sound Objects

creating dynamically, Dynamically Creating an Audio Element in JavaScript, Iteration #2: Creating Unlimited Dynamic Sound Objects

finding supported audio format, Finding the Supported Audio Format

playing sound with no <audio> tag, Look Ma, No Tag!–Creating a Canvas Audio Player

paused property, Play/Pause Push Button: Hit Test Point Revisited

reusing preloaded sounds, Iteration #4: Reusing Preloaded Sounds

setAttribute( ) method, Dynamically Creating an Audio Element in JavaScript

Space Raiders game, Initializing the game: no global variables

using in sound pool, Iteration #3: Creating a Sound Pool

HTMLMediaElement interface, Basic HTML5 Video Implementation

properties, HTML5 Video Properties

HTMLVideoElement objects

canPlayType( ) method, Video must still be embedded in HTML

methods, Basic HTML5 Video Implementation

properties, Basic HTML5 Video Implementation, Basic HTML5 Video Implementation, HTML5 Video Properties–Video on the Canvas Examples

I

id attribute, <canvas> element, Adding Canvas to the HTML Page

if:then statements, Creating hit test point-style collision detection

Image objects, Image Basics

src property, The drawScreen() Function

image patterns

text with image pattern applied, Handling Gradients and Patterns in Text Arranger

using with text, Image Patterns and Text

ImageData objects, The Canvas Pixel Manipulation API

attributes, ImageData attributes

data, organization in Tile Stamper (example), How ImageData.data is organized

images, Images on the Canvas–What’s Next

advanced cell-based animation, Advanced Cell-Based Animation–Moving the Image Across the Canvas

choosing tile to display, Choosing the Tile to Display

creating animation array, Creating an Animation Array

drawing the tile, Drawing the Tile

looping through tiles, Looping Through the Tiles

moving image across Canvas, Moving the Image Across the Canvas–Moving the Image Across the Canvas

tile sheet, Examining the Tile Sheet

applying rotation transformations to, Applying Rotation Transformations to an Image–Animating a Transformed Image

animating transformed image, Animating a Transformed Image–Animating a Transformed Image

combining rotation, animation, and movement, Animating a Transformed Image–Animating a Transformed Image

rotation transformation code, Step 4: Draw the image–Step 4: Draw the image

transformation basics, Canvas Transformation Basics–Step 4: Draw the image

audiocontrols.png image for audio player, Creating Custom User Controls on the Canvas

basics of Canvas API, Image Basics

copying from one canvas to another, Copying from One Canvas to Another–Copying from One Canvas to Another

copying part of image to Canvas, Copying Part of an Image to the Canvas

creating grid of tiles, Creating a Grid of Tiles–Displaying the map on the canvas

creating tile map with Tiled, Creating a Tile Map with Tiled

defining tile map, Defining a Tile Map

displaying tile map on canvas, Displaying the Map on the Canvas–Displaying the map on the canvas

displaying image of canvas on the screen, The drawScreen() Function

displaying on Canvas with drawImage( ), Displaying an Image on the Canvas with drawImage()

exporting canvas to an image, Exporting Canvas to an Image

exporting with toDataURL( ) method of Canvas, The toDataURL() Method of the Canvas Object

file formats, The HTML5 Canvas Object

moving on cubic Bezier curve path, Moving an Image–Creating a Cubic Bezier Curve Loop

pixel manipulation, Pixel Manipulation

Tile Stamper application (example), Application Tile Stamper

preloading, Preloading Images

resizing while drawing to canvas, Resizing an Image Painted to the Canvas

simple cell-based sprite animation, Simple Cell-Based Sprite Animation–Changing the Tile to Display

using as fills, Filling Shapes with Patterns

using no-repeat, repeat-x, and repeat-y strings, Filling Shapes with Patterns

using repeat string, Filling Shapes with Patterns

zooming and panning, Zooming and Panning an Image–Keyboard input

controlled pan and zoom application, Application: Controlled Pan and Zoom–Keyboard input

creating and drawing window for image, Creating a Window for the Image–Panning the Image

panning the image, Panning the Image

zooming and panning the image, Zoom and Pan the Image

immediate mode, Introduction to HTML5 Canvas, The 2D Context and the Current State

indexOf( ) method, Array objects, The eventKeyPressed() Function

initBuffers( ) function, WebGL application, Initialization in canvasApp()

initButtons( ) function, BS Bingo game (example), The initButtons() function

initGame( ) function, Guess The Letter game (example), The initGame() Function

initLists( ) function, BS Bingo game (example), The initLists() function

initShaders( ) function, WebGL application, Initialization in canvasApp()

initSounds( ) function, BS Bingo game (example), The initSounds() function

innerHTML property, element objects, Preloading Video in JavaScript

interval for video display update, Set an interval to update the display–Set an interval to update the display

iOS applications, Going Mobile!

iOS Developer Center, Installing Xcode

iOS SDK, downloading, Installing Xcode

iPad, Supported Interface Orientations, Setting the Orientation

iPhone

application development for, Going Mobile!

porting HTML5 Canvas application to (see PhoneGap)

iPhone gesture, adding to BS Bingo game (example), Adding in an iPhone “Gesture”

adding gesture functions to index.html, Adding the Gesture Functions to index.html

iTunes Store, Going Mobile!

J

JavaScript

dynamically creating audio element, Dynamically Creating an Audio Element in JavaScript

ElectroServer API, The JavaScript API

encapsulating code for Canvas, Encapsulating Your JavaScript Code for Canvas

events, HTML5 Canvas “Hello World!”

frameworks and libraries, JavaScript Frameworks and Libraries

libraries for WebGL, JavaScript libraries, WebGL JavaScript Libraries

modernizr.js library, Introduction to HTML5 Canvas

placement in HTML documents, Where Does JavaScript Go and Why?

preloading video, Preloading Video in JavaScript–A Problem with Events and Embedded Video in HTML5

programming Canvas applications with, JavaScript and Canvas

using document object to reference canvas element in, Using document to reference the canvas element in JavaScript

jQTouch, Beyond the Canvas

jQuery Mobile Framework, Beyond the Canvas

JSColor, Handling font color with JSColor

K

keyboard

checks for game-specific key presses, The Update/Render (Repeat) Cycle

controlling player ship (game example), Controlling the Player Ship with the Keyboard–Evaluating key presses

array holding key presses, The array to hold our key presses

evaluating key presses, Evaluating key presses

key events, The key events

source code, Evaluating key presses–Evaluating key presses

event listener and handler for keyup event, The initGame() Function

keyboard input, event handler for controlled pan and zoom, Keyboard input

L

language, specifying in <html> tag, <html lang="en">

law of conservation of momentum, Ball collisions in depth

layerX and layerY properties, event objects, Detecting mouse interactions and the canvas

Learning WebGL website, What Does a WebGL Application Look Like?

level knobs (Geo Blaster game), Level Knobs

levels, checking in Geo Blaster Basic (example), Level and Game End

libraries, JavaScript, JavaScript Frameworks and Libraries

linear gradients, Filling Shapes with Gradients–Radial gradients

diagonal, Diagonal gradients

horizontal, Linear horizontal gradients–Applying a horizontal gradient to a complex shape

applying to a stroke, Applying a horizontal gradient to a stroke

applying to complex shape, Applying a horizontal gradient to a complex shape

on multiple objects, Linear horizontal gradients

text with, Linear Gradients and Text

vertical, Vertical gradients

lineCap property, context objects, The 2D Context and the Current State

defining attributes, The Actual Drawing

using in more advanced line drawing, Examples of More Advanced Line Drawing

lineJoin property, context objects

defining attributes, context.lineCap

using in more advanced line drawing, Examples of More Advanced Line Drawing

lines

creating using paths, Using Paths to Create Lines–Examples of More Advanced Line Drawing

more advanced examples, Examples of More Advanced Line Drawing–Examples of More Advanced Line Drawing

finding length of, Moving Between Two Points: The Distance of a Line

moving in straight line, Moving in a Straight Line–Moving on a Vector

lineTo( ) method, context objects, The Actual Drawing

lineWidth property, context objects, The 2D Context and the Current State

setting, lineWidth

listeners for events, HTML5 Canvas “Hello World!”

(see also event handlers; events)

load event, window objects, HTML5 Canvas “Hello World!”

load( ) function, audio objects, Audio Functions

loading audio, Loading and Playing the Audio

Logg, Ed, Our Game’s Design

logging text messages to JavaScript console, Debugging with Console.log

logical display objects, arrays of, Arrays of Logical Display Objects

look and feel for iPhone-like application, Beyond the Canvas

loop property

audio objects, Important Audio Properties

video objects, Basic HTML5 Video Implementation, Video with Controls, Loop, and Autoplay

loop toggle button, Creating Custom User Controls on the Canvas

implementing for canvas audio player, Loop/No Loop Toggle Button

values for placement of, Setting Up the Audio Player Values

M

magnitude (speed) of movement, Moving on a Vector

Makar, Jobe, Ball interactions in physics

math-based movement, Math, Physics, and Animation

moving in straight line, Moving in a Straight Line–Moving on a Vector

length of a line, Moving Between Two Points: The Distance of a Line

Math.atan2( ) function, Ball collisions in depth

Math.cos( ) function, Moving on a Vector, Ball collisions in depth

Math.PI, Moving on a Vector

Math.PI/180, context.arc()

Math.sin( ) function, Moving on a Vector, Ball collisions in depth

Math.sqrt( ) function, Moving Between Two Points: The Distance of a Line, Ball collisions in depth

measureText( ) method, context objects, Using measureText, Handling text baseline and alignment

<meta charset="UTF-8"> tags, <meta charset="UTF-8">

Micro Tank Maze game (example), A Simple Tile-Based Game–What’s Next

complete code, Simple Homegrown AI Overview–What’s Next

description of game, Micro Tank Maze Description

enemy object, The Enemy

player, The Player

playfield, The Playfield

rendering logic overview, Rendering Logic Overview

simple AI overview, Simple Homegrown AI Overview

tile movement logic overview, Simple Tile Movement Logic Overview–Simple Tile Movement Logic Overview

tile sheet, The Tile Sheet for Our Game

MIME types

audio, Finding the Supported Audio Format

canPlayType( ) method parameter, Video must still be embedded in HTML

missiles (in Geo Blaster game), Missiles

prerendering as bitmaps, Geo Blaster Tile Sheet

rendering for Geo Blaster Extended, Rendering the missiles

miterLimit property, context objects, The 2D Context and the Current State

mobile devices, creating games for (see PhoneGap)

modernizr.js library, Introduction to HTML5 Canvas

including in HTML page, Testing to See Whether the Browser Supports Canvas

testing for audio support, Finding the Supported Audio Format

testing for WebGL support, Testing for WebGL support with Modernizr

momentum, conservation of, Ball interactions in physics, Ball collisions in depth

mouse events

handling for click-and-drag volume slider, Volume slider functionality

handling for loop toggle button, Loop/No Loop Toggle Button

handling in Space Raiders game, Mouse control

handling in Tile Stamper application, Adding mouse events to the canvas

handling in video puzzle game, Detecting mouse interactions and the canvas

hit test point for play/pause push button, Play/Pause Push Button: Hit Test Point Revisited

interactivity with canvas audio player controls, Setting Up the Audio Player Values

listening for button click in video controls, Listening for the button presses

movement, Moving in a Simple Spiral

(see also animations; curve and circular movement)

combining rotation, animation, and movement, Animating a Transformed Image

displaying tile map on canvas, Displaying the map on the canvas

moving in straight line, Math, Physics, and Animation–Moving on a Vector

distance between two points, Moving Between Two Points: The Distance of a Line

moving object on a vector, Moving on a Vector–Bouncing Off Walls

player ship movement in Geo Blaster game (example), How Our Player Ship Will Move–Controlling the Player Ship with the Keyboard

simple tile movement logic overview, Simple Tile Movement Logic Overview–Simple Tile Movement Logic Overview

simulating in animation, Moving the Image Across the Canvas–Moving the Image Across the Canvas

movement vector calculations for step timer, How the step timer works

moveTo( ) method, context objects, The Actual Drawing

moving versus facing in game object animation, The difference between facing and moving

.mp3 files, Supported Formats

.mp4 files, H.264 + $$$ = .mp4

multiplayer applications with ElectroServer 5, Multiplayer Applications with ElectroServer 5–This Is Just the Tip of the Iceberg

basic architecture of ElectroServer applications, The Basic Architecture of an ElectroServer Application

basic architecture of socket-server application, The Basic Architecture of a Socket-Server Application

chat application with bouncing ball added, Further Explorations with ElectroServer–This Is Just the Tip of the Iceberg

creating chat application, Creating a Chat Application with ElectroServer–Creating the chat functionality

installing ElectroServer, Installing ElectroServer

resources for further information, This Is Just the Tip of the Iceberg

testing chat application in Chrome, Testing the Application in Google Chrome–Further Explorations with ElectroServer

muted property

audio objects, Important Audio Properties

video objects, Basic HTML5 Video Implementation, HTML5 Video Properties

mvPopMatrix( ) function, Animating the cube

mvPushMatrix( ) function, Animating the cube

mvRotate( ) function, Animating the cube

mvTranslate( ) function, Animating the cube

N

Nitobi, PhoneGap, Introducing PhoneGap

O

O3D library, Google O3D

object pools in Geo Blaster Extended (example), Pooling Object Instances–Adding in a Step Timer

Objective-C, iOS applications in, Going Mobile!

offsetX and offsetY properties, event objects, Detecting mouse interactions and the canvas

.ogg files, Theora + Vorbis = .ogg, Supported Formats

onMouseClick( ) function, TextButton object in BS Bingo (example), The onMouseClick() function

onMouseMove( ) function, TextButton object in BS Bingo (example), The onMouseMove() function

open( ) method, window objects, Exporting Canvas to an Image

OpenGL, What Is WebGL?

orientation, setting for iOS application, Setting the Orientation

P

Pac-Man, A Simple Tile-Based Game

panning an image, Panning the Image

(see also zooming and panning images)

paths, Drawing on the Canvas

advanced drawing methods, Advanced Path Methods–Compositing on the Canvas

arcs, Arcs

Bezier curves, Bezier Curves

clipping region, The Canvas Clipping Region

drawing game graphics with, Game Graphics: Drawing with Paths–Animating on the Canvas

drawing methods of context object, The static player ship (frame 1)

tracing movement with path of points, Tracing movement: A path of points

using to create lines, Using Paths to Create Lines–Examples of More Advanced Line Drawing

examples of more advanced line drawing, Examples of More Advanced Line Drawing

simple line path (example), The Actual Drawing

starting and ending paths, Starting and Ending a Path

patterns

filling shapes with, Filling Shapes with Patterns–Filling Shapes with Patterns

image file using repeat string, Filling Shapes with Patterns

using no-repeat, repeat-x, and repeat-y strings, Filling Shapes with Patterns

image patterns and text, Image Patterns and Text

handling in Text Arranger (example), Handling Gradients and Patterns in Text Arranger–Width, Height, Scale, and toDataURL() Revisited

video as source, Image Patterns and Text

pause button, video controls, Placing the buttons

pause( ) method

HTMLAudioElement objects, Audio Functions

HTMLVideoElement objects, Basic HTML5 Video Implementation

paused property

audio objects, Important Audio Properties, Play/Pause Push Button: Hit Test Point Revisited

videos, Basic HTML5 Video Implementation

Penner, Robert, Easing In (Taking Off)

perspective, setting up for 3D scene, Animating the cube

Peters, Keith, Ball collisions in depth

PhoneGap, Going Mobile!

creating iOS application with, Creating the iOS Application with PhoneGap–Using Xcode to Target a Test Device

adding gesture functions to index.html, Adding the Gesture Functions to index.html

adding iPhone gesture, Adding in an iPhone “Gesture”

changing game banner and icon, Changing the Banner and Icon

creating BS Bingo project in Xcode, Creating the BS Bingo PhoneGap Project in Xcode

installing PhoneGap, Installing PhoneGap

installing Xcode, Installing Xcode

integrating BS Bingo into project, Integrating BS Bingo into the Project

setting orientation, Setting the Orientation

testing application on a device, Testing on a Device

testing new app in simulator, Testing the New Blank Application in the Simulator

testing on iPhone simulator, Testing on the Simulator

physics

angle of reflection and angle of incidence, Bouncing Off Walls

friction, Simple Gravity, Simple Elasticity, and Simple Friction

game objects and animation, Game Object Physics and Animation–A Basic Game Framework

giving player ship maximum velocity, Giving the Player Ship a Maximum Velocity

how player ship will move (example), How Our Player Ship Will Move–Controlling the Player Ship with the Keyboard

law of conservation of momentum, Ball interactions in physics

vectors, Moving on a Vector

Pilgrim, Mark, Testing to See Whether the Browser Supports Canvas

pixel manipulation, Pixel Manipulation

Canvas Pixel Manipulation API, The Canvas Pixel Manipulation API

Tile Stamper application (example), Application Tile Stamper–The highlightTile() function

play button, video controls, Listening for the button presses

play( ) method

calling on audio elements, Playing the Sound

HTMLAudioElement objects, Audio Functions

HTMLVideoElement objects, Basic HTML5 Video Implementation

play/pause push button, Creating Custom User Controls on the Canvas

implementing for canvas audio player, Play/Pause Push Button: Hit Test Point Revisited

values for placement of, Setting Up the Audio Player Values

player object

Geo Blaster Basic game (example), The player Object

Micro Tank Maze game (example), The Player

players

creating canvas audio player, Creating a Canvas Audio Player–Case Study in Audio: Space Raiders Game

click-and-drag volume slider, Click-and-Drag Volume Slider

complete code, Volume slider functionality–Case Study in Audio: Space Raiders Game

creating custom user controls, Creating Custom User Controls on the Canvas

handlers for commonmouse events, Mouse Events

loading button assets, Loading the Button Assets

loop toggle button, Loop/No Loop Toggle Button

play/pause push button, Play/Pause Push Button: Hit Test Point Revisited

setting up player values, Setting Up the Audio Player Values

sliding play indicator, Sliding Play Indicator

playfield (Micro Tank Maze game), The Playfield

playing events, audio, Important Audio Events

playing sounds in Geo Blaster Extended game, Playing sounds

playing Space Raiders game, Playing the game

plug-ins for ElectroServer applications, Extensions

PluginMessageRequest object, Creating the chat functionality

.png image file, exporting current canvas as, The HTML5 Canvas Object

points, path, of, use in tracing movement, Tracing movement: A path of points

pooling variables, adding to Geo Blaster Extended (example), Adding pooling variables to our game

ports and protocols, ElectroServer, The ElectroServer admin tool

positions of objects, updating in multiple balls bouncing with collisions, Updating positions of objects

poster property, videos, Basic HTML5 Video Implementation

preload property, audio objects, Important Audio Properties

preloading

button assets for audio player, Loading the Button Assets

buttons for video controls, Preloading the buttons

Space Raiders game assets, without global variables, Preloading all assets without global variables

video in JavaScript, Preloading Video in JavaScript–A Problem with Events and Embedded Video in HTML5

PrivateMessageRequest object, Creating the chat functionality

programming languages for web development, What You Need to Know

progress bar, sliding, Creating Custom User Controls on the Canvas

drawing sliding play indicator onto canvas, Sliding Play Indicator

values for placement of, Setting Up the Audio Player Values

progress events

audio, Important Audio Events

video, Preloading Video in JavaScript

problem with, A Problem with Events and Embedded Video in HTML5

properties

audio, displaying on canvas, Displaying Attributes on the Canvas–Playing a Sound with No Audio Tag

CanvasRenderingContext2D (context), The 2D Context and the Current State

important audio properties, Important Audio Properties, Important Audio Properties

important video properties, Basic HTML5 Video Implementation

protocols and ports, ElectroServer, The ElectroServer admin tool

Provisioning Assistant, launching, Step 1: Launch the Provisioning Assistant

PublicMessageRequest object, Creating the chat functionality

push( ) method, Array objects, The eventKeyPressed() Function

putImageData( ) function, Putting image data, Creating a Dynamic Tile Sheet at Runtime

puzzle game, video, Canvas Video Puzzle–Creating Video Controls on the Canvas

creating hit test point-style collision detection, Creating hit test point-style collision detection

drawing the screen, Drawing the screen

handling mouse events, Detecting mouse interactions and the canvas

randomizing puzzle pieces, Randomizing the puzzle pieces

setting up the game, Setting up the game

swapping elements in two-dimensional array, Swapping two elements in a two-dimensional array

testing the game, Testing the game–Creating Video Controls on the Canvas

Pythagorean theorem, Moving Between Two Points: The Distance of a Line, Circle collision detection

Q

quadratic Bezier curves, Bezier Curves, Creating a Cubic Bezier Curve Loop

R

radial gradients, Filling Shapes with Gradients, Filling Shapes with Gradients, Radial gradients–Radial gradients

applied to a circle, Radial gradients

arc stroke gradient, Radial gradients

complex, Radial gradients

simple, Radial gradients

text with, Radial Gradients and Text

radians

converting angles to, Rotation and Translation Transformations, Moving on a Vector

defining angles in, context.arc()

Rains, Lyle, Our Game’s Design

range controls, Multiple Balls Bouncing with a Dynamically Resized Canvas

adding to dynamically scale videos, Dynamically scaling a video

event handlers for change event, Multiple Balls Bouncing with a Dynamically Resized Canvas

specifying font size, Font size and HTML5 range control

rect( ) method, context objects, The Canvas Clipping Region

rectangles

drawing basic, The Basic Rectangle Shape

scaling and rotating, Combining Scale and Rotation Transformations

rendering

Micro Tank Maze game (example), logic overview, Rendering Logic Overview

splitting render cycle from updates, The Update/Render (Repeat) Cycle–The Update/Render (Repeat) Cycle

repeats, image fills, Filling Shapes with Patterns

text with pattern fill, Image Patterns and Text

using no-repeat, repeat-x, and repeat-y strings, Filling Shapes with Patterns

using repeat string, Filling Shapes with Patterns

resetting Space Raiders game, Resetting the game

resizing

dynamically resizing canvas, Width, Height, Scale, and toDataURL() Revisited–Dynamically Scaling the Canvas

multiple balls bouncing animation, Multiple Balls Bouncing with a Dynamically Resized Canvas–Multiple Balls Bouncing and Colliding

image as it’s drawn, Resizing an Image Painted to the Canvas

restore( ) method, context objects, Step 1: Save the current context to the stack

retained mode, Introduction to HTML5 Canvas, The 2D Context and the Current State

rgb( ) method, setting fill color, Setting Basic Fill Colors

rgba( ) method, setting fill color, Setting Basic Fill Colors

RIA (Rich Internet Application) technology, shift away from, Conclusion

rocks (in Geo Blaster game), Rocks

prerendering as bitmaps, Geo Blaster Tile Sheet

rendering for Geo Blaster Extended, Rendering the rocks

Rock object prototype, Rock Object Prototype–What’s Next

rooms in ElectroServer zones, Zones, rooms, and games

rotate( ) function, Lesson 1: Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is called

rotation

around the center point, Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center

redrawing player ship (example) to start at angle 0, Redrawing the player ship to start at angle 0

thrusting in rotated direction (game example), Thrusting in the rotated direction

rotation transformations, Rotation and Translation Transformations–Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center, Applying Rotation Transformations to an Image–Animating a Transformed Image

animating rotated image, Animating a Transformed Image–Animating a Transformed Image

Canvas state and, Lesson 1: Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is called

Canvas transformation basics, Canvas Transformation Basics–Step 4: Draw the image

combining with animation and movement, Animating a Transformed Image–Animating a Transformed Image

displaying tile map, Displaying the map on the canvas

combining with scale transformations, Combining Scale and Rotation Transformations

multiple rotated squares (example), Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center

prerendering as bitmaps for Geo Blaster Extended, Geo Blaster Tile Sheet

rotating game graphic (example), The Canvas Stack–The Canvas Stack

rotating game player ship from center, Game Graphic Transformations–Alpha Fading the Player Ship

translation with, Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center

using dynamic tile sheets created at runtime, Creating a Dynamic Tile Sheet at Runtime–Creating a Dynamic Tile Sheet at Runtime

video, Canvas Video Transformations: Rotation–Canvas Video Puzzle

S

Safari Mobile applications, automatic scaling to iOS device window, Setting the Orientation

Sampaio, Felipe, Ball collisions in depth

saucers (in Geo Blaster game), Saucers

prerendering as bitmaps, Geo Blaster Tile Sheet

rendering for Geo Blaster Extended, Rendering the Other Game Objects

save( ) and restore( ) methods, context objects, How Do We Save and Restore the Canvas State?, Canvas Transformation Basics

scale transformations, Scale Transformations

combining with rotation transformations, Combining Scale and Rotation Transformations

performing translation before, Scale Transformations

scale( ) function, Scale Transformations

scaling

altering width and height of video, Altering the Width and Height of the Video

dynamically scaling the Canvas, Dynamically Scaling the Canvas

dynamically scaling video, Dynamically scaling a video

resizing image as it’s drawn, Resizing an Image Painted to the Canvas

SceneJS library, SceneJS

scenes, Shaders

SDK (iOS)

downloading, Installing Xcode

setting for PhoneGap project, Creating the BS Bingo PhoneGap Project in Xcode

SECURITY_ERR: DOM Exception 18, The toDataURL() Method of the Canvas Object

<select> elements, fillText and strokeText

sendMessage( ) function, Creating the chat functionality

setAttribute( ) method, Dynamically Scaling the Canvas

HTMLAudioElement object, Dynamically Creating an Audio Element in JavaScript

setInterval( ) function, Set an interval to update the display, Game Timer Loop

setTransform( ) method, context objects, Lesson 1: Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is called, Step 2: Reset the transformation matrix to identity, Step 2: Reset the transformation matrix to identity

shaders, Shaders

shadowBlur property, context objects, Creating Shadows on Canvas Shapes, Global Shadows and Text

shadowColor property, context objects, Creating Shadows on Canvas Shapes, Global Shadows and Text

shadowOffsetX property, context objects, The 2D Context and the Current State, Creating Shadows on Canvas Shapes, Global Shadows and Text

shadowOffsetY property, context objects, The 2D Context and the Current State, Creating Shadows on Canvas Shapes, Global Shadows and Text

shadows

creating on shapes, Creating Shadows on Canvas Shapes

global shadows and text, Global Shadows and Text–Text with Gradients and Patterns

Silverlight

and move away from RIA technologies, Conclusion

retained mode drawing surface, The 2D Context and the Current State

simulator (Xcode)

testing blank PhoneGap application, Testing the New Blank Application in the Simulator

testing iPhone PhoneGap app on, Testing on the Simulator

sine, Moving on a Vector

socket-server applications, Multiplayer Applications with ElectroServer 5

basic architecture of, The Basic Architecture of a Socket-Server Application

sound pool, creating, Iteration #3: Creating a Sound Pool

<source> tags, within <video> tag, Plain-Vanilla Video Embed

Space Raiders game, audio case study, Case Study in Audio: Space Raiders Game–What’s Next

creating sound pool, Iteration #3: Creating a Sound Pool

creating unlimited dynamic sounds, Iteration #2: Creating Unlimited Dynamic Sound Objects

final code, The final code for Space Raiders–What’s Next

game structure, Space Raiders Game Structure–Playing the game

bounding box collision detection, Bounding box collision detection

initializing game, Initializing the game: no global variables

mouse control, Mouse control

playing the game, Playing the game

preloading assets, Preloading all assets without global variables

resetting the game, Resetting the game

state machine, State machine

other possible improvements, Other stuff you could do to improve the game

playing sounds using single object, Iteration #1: Playing Sounds Using a Single Object

reusing preloaded sounds, Iteration #4: Reusing Preloaded Sounds–Iteration #4: Reusing Preloaded Sounds

sounds and games, Why Sounds in Apps Are Different: Event Sounds

speed

magnitude of movement, Moving on a Vector

multiple balls bouncing, Multiple Balls Bouncing Off Walls

SpiderGL library, SpiderGL

spiral, moving in, Moving in a Simple Spiral–Cubic Bezier Curve Movement

sprite sheet, Copying Part of an Image to the Canvas

SpriteLib, Displaying an Image on the Canvas with drawImage()

sqrt( ) function, Math object, Moving Between Two Points: The Distance of a Line

src property

Image objects, The drawScreen() Function, Image Basics

setting for audio element, Dynamically Creating an Audio Element in JavaScript

videos, Basic HTML5 Video Implementation

stack, saving and retrieving current canvas, The Canvas Stack

state

current path and current bitmap, not included in, What’s Not Part of the State?

drawing states, The Canvas State

rotation and Canvas state, Lesson 1: Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is called

saving and restoring, How Do We Save and Restore the Canvas State?

state functions, The Game State Machine

animateEnemy( ) game state function, The Enemy

gameStateEnemyMove( ) function

overview, Simple Homegrown AI Overview

gameStateInit( ) function, Adding pooling variables to our game

Geo Blaster Basic game (example), Game application state functions

state machine

application states, Space Raiders game, State machine

STATE_INIT, Initializing the game: no global variables

STATE_LOADING, Preloading all assets without global variables

STATE_PLAYING, Playing the game

STATE_RESET, Resetting the game

for games, The Game State Machine–The Game State Machine

Micro Maze Tank game, turn-based game flow and, Turn-Based Game Flow and the State Machine–GAME_STATE_PLAYER_LOSE

step timer, adding to Geo Blaster Extended game, Adding in a Step Timer–How the step timer works

stop button, video controls, Listening for the button presses

String object, fromCharCode( ) method, The eventKeyPressed() Function

stroke

arc stroke radial gradient, Radial gradients

horizontal stroke gradient, Applying a horizontal gradient to a stroke

vertical gradient stroke, Vertical gradients

strokeColor property, context objects, fillText and strokeText

strokeRect( ) method, context objects, The drawScreen() Function, The Basic Rectangle Shape

horizontal stroke gradient, Applying a horizontal gradient to a stroke

strokeStyle property, context objects, The 2D Context and the Current State

defining attributes of, strokeStyle

formatting with color, gradient, or pattern, Handling Gradients and Patterns in Text Arranger

horizontal gradient, Applying a horizontal gradient to a stroke

pattern, Image Patterns and Text

setting font color for text, Font Color

strokeText( ) method, context objects, fillText and strokeText

style.width and style.height properties of canvas

dynamically scaling the canvas, Dynamically Scaling the Canvas

styles, font, Available font styles

subpaths, Starting and Ending a Path

Supported Interface Orientations setting, Setting the Orientation

switch statements, fillText and strokeText

switch/case statement, Keyboard input–Keyboard input

sylvester.js library, JavaScript libraries

T

ternary operator (?:), Keyboard input

text

drawing to screen in Guess The Letter game (example), The drawScreen() Function

putting “Hello World!” on the screen, The drawScreen() Function

Text API, The HTML5 Canvas Text API–What’s Next

basic text display, Displaying Basic Text

communicating between HTML forms and Canvas, Communicating Between HTML Forms and the Canvas

dynamically resizing the canvas, Width, Height, Scale, and toDataURL() Revisited–Dynamically Scaling the Canvas

dynamically scaling the canvas, Dynamically Scaling the Canvas

fillText( ) and strokeText( ) methods, fillText and strokeText

final version of Text Arranger (example), Final Version of Text Arranger–What’s Next

global shadows and text, Global Shadows and Text–Text with Gradients and Patterns

handling basic text in Text Arranger, Handling Basic Text in Text Arranger

handling gradient and patterns in Text Arranger, Handling Gradients and Patterns in Text Arranger

setting fonts, Setting the Text Font–Text and the Canvas Context

baseline and alignment, Font Baseline and Alignment–Text Arranger Version 2.0

Text Arranger 2.0 (example), Text Arranger Version 2.0–Text and the Canvas Context

text and Canvas context, Text and the Canvas Context–Text with Gradients and Patterns

text with gradients, Text with Gradients and Patterns

text with image patterns, Image Patterns and Text

toDataURL( ) method of Canvas object, The toDataURL() Method of the Canvas Object

using measureText( ) method, Using measureText

Text Arranger (example)

complete code, version 1.0, fillText and strokeText–Setting the Text Font

dynamically resizing text, Dynamically resizing in Text Arranger

final version 3.0, Final Version of Text Arranger–What’s Next

handling basic text, Handling Basic Text in Text Arranger

handling font color, Font Color

handling font size and face, Handling Font Size and Face in Text Arranger–Font Color

handling gradient and patterns, Handling Gradients and Patterns in Text Arranger–Width, Height, Scale, and toDataURL() Revisited

handling text baseline and alignment, Handling text baseline and alignment–Text Arranger Version 2.0

version 2.0, Text Arranger Version 2.0–Text and the Canvas Context

textAlign property, context objects, The 2D Context and the Current State, Horizontal alignment

textBaseline property, context objects, The 2D Context and the Current State, Vertical alignment

setting in Guess The Letter game (example), The drawScreen() Function

setting in Hello World (example), The drawScreen() Function

TextButton.js file, BS Bingo game (example), The TextButton.js file–The onMouseMove() function

chooseButtonsForCard( ) function, The chooseButtonsForCard() function

drawScreen( ) function, The drawScreen() function

initButtons( ) function, The initButtons() function

initLists( ) function, The initLists() function

initSounds( ) function, The initSounds() function

onMouseClick( ) function, The onMouseClick() function

onMouseMove( ) function, The onMouseMove() function

TextMetrics objects, Using measureText

width property, Handling text baseline and alignment

Theora, Theora + Vorbis = .ogg

Thomas, Giles, What Does a WebGL Application Look Like?

three-way swap programming construct, Swapping two elements in a two-dimensional array

thrusting in rotated direction (game object), Thrusting in the rotated direction

tile maps, Defining a Tile Map

creating with Tiled, Creating a Tile Map with Tiled

displaying on Canvas, Displaying the Map on the Canvas–Displaying the map on the canvas

displaying map on Canvas, Displaying the map on the canvas

map height and width, Map height and width

storing map data, Storing the map data

tile sheets, Copying Part of an Image to the Canvas

calculating tile source location, Refresher: Calculating the tile source location

creating dynamic tile sheet at runtime, Creating a Dynamic Tile Sheet at Runtime–Creating a Dynamic Tile Sheet at Runtime

Geo Blaster Extended (example), Geo Blaster Tile Sheet

loading, Loading in sounds and tile sheet assets

Micro Tank Maze game tile sheet, The Tile Sheet for Our Game

using in advanced cell-based animation, Advanced Cell-Based Animation–Moving the Image Across the Canvas

choosing tile to display, Choosing the Tile to Display

drawing tile on each iteration, Drawing the Tile

looping through tiles, Looping Through the Tiles

using in simple cell-based animation, Simple Cell-Based Sprite Animation–Changing the Tile to Display

changing tile to display, Changing the Tile to Display

Tile Stamper application (example), Application Tile Stamper–The highlightTile() function

adding mouse events to canvas, Adding mouse events to the canvas

complete code, The highlightTile() function

highlightTile( ) function, The highlightTile() function

organization of ImageData.data, How ImageData.data is organized

tile-based games, A Simple Tile-Based Game

Micro Tank Maze game (example)

complete code, Simple Homegrown AI Overview–What’s Next

description of game, Micro Tank Maze Description

enemy, The Enemy

explosions, The Explosions

goal tile, The Goal

player, The Player

playfield, The Playfield

rendering logic overview, Rendering Logic Overview

simple AI overview, Simple Homegrown AI Overview

tile movement logic overview, Simple Tile Movement Logic Overview–Simple Tile Movement Logic Overview

tile sheet, The Tile Sheet for Our Game

turn-based game flow and state machine, Turn-Based Game Flow and the State Machine–GAME_STATE_PLAYER_LOSE

Tiled, Creating a Tile Map with Tiled

timer tick, Creating a Timer Loop

timers

adding step timer to Geo Blaster Extended (example), Adding in a Step Timer–How the step timer works

creating timer loop for cell-based animation, Creating a Timer Loop

creating timer loop for cell-based sprite animation, Creating a Timer Loop

game/animation timer loop, Game Timer Loop

title screen state (game example), The Game State Machine–The Game State Machine

<title>…</title> tags, <title>…</title>

toDataURL( ) method, Canvas objects, The HTML5 Canvas Object, Exporting Canvas to an Image, The toDataURL() Method of the Canvas Object

toString( ) method, Array objects, The drawScreen() Function

transformation matrix, The 2D Context and the Current State

transformations, Simple Canvas Transformations–Filling Objects with Colors and Gradients, Applying Rotation Transformations to an Image–Animating a Transformed Image

alpha fading player ship (game example), Alpha Fading the Player Ship

animating transformed image, Animating a Transformed Image–Animating a Transformed Image

applying to game graphics, Applying Transformations to Game Graphics–The Canvas Stack

Canvas transformation basics, Canvas Transformation Basics–Step 4: Draw the image

combining rotation, animation, and movement, Animating a Transformed Image, Displaying the map on the canvas

combining scale and rotation transformations, Combining Scale and Rotation Transformations

prerendering as bitmaps for Geo Blaster Extended, Geo Blaster Tile Sheet

rotating game player ship from center (example), Game Graphic Transformations–Alpha Fading the Player Ship

rotation and translation, Rotation and Translation Transformations–Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center

scale, Scale Transformations

video, rotation transformation, Canvas Video Transformations: Rotation–Canvas Video Puzzle

translate( ) function, Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center

translations

performing before scale transforms, Scale Transformations

in rotation transformations, Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center

transparency

controlling with globalAlpha property, Compositing on the Canvas

globalAlpha property and text, Global Alpha and Text

turn-based game flow, state machine and, Turn-Based Game Flow and the State Machine–GAME_STATE_PLAYER_LOSE

U

Unique ID, finding for physical mobile device, Step 2: Find the device’s Unique ID

update-collide-render cycle, Separating the code in drawScreen()

update/render (repeat) cycle, The Update/Render (Repeat) Cycle–The Update/Render (Repeat) Cycle

useCapture option, HTML5 Canvas “Hello World!”

UTF-8 character encoding, <meta charset="UTF-8">

V

variables

encapsulating for Canvas applications, Encapsulating Your JavaScript Code for Canvas

Guess The Letter game (example), The “Guess The Letter” Game Variables

vectors

moving object on, Moving on a Vector–Bouncing Off Walls

object moving on, simple gravity with, Simple Gravity

velocity (maximum), giving to player ship (example), Giving the Player Ship a Maximum Velocity

Vertex Color buffer, WebGL application, Initialization in canvasApp()

Vertex Index buffer, WebGL application, Initialization in canvasApp()

vertex shaders, Shaders

vertical alignment of text, Vertical alignment

vertical linear gradients, Vertical gradients

video, Mixing HTML5 Video and Canvas–What’s Next?

animation, Animation Revisited: Moving Videos–Animation Revisited: Moving Videos

basic HTML5 implementation, Basic HTML5 Video Implementation–Preloading Video in JavaScript

altering video’s width and height, Altering the Width and Height of the Video–Preloading Video in JavaScript

plain-vanilla embed, Plain-Vanilla Video Embed

video with controls, loop, and autoplay, Video with Controls, Loop, and Autoplay

converting formats, Converting Video Formats

displaying on HTML5 Canvas, Displaying a Video on HTML5 Canvas–HTML5 Video Properties

HTML5 properties, HTML5 Video Properties–Video on the Canvas Examples

HTML5 video format support, HTML5 Video Support

preloading in JavaScript, Preloading Video in JavaScript–A Problem with Events and Embedded Video in HTML5

problem with events, A Problem with Events and Embedded Video in HTML5

using as source for patterns, Image Patterns and Text

using with Canvas, examples

creating video controls on Canvas, Creating Video Controls on the Canvas–Animation Revisited: Moving Videos

rotation video transformation, Canvas Video Transformations: Rotation–Canvas Video Puzzle

using currentTime property to create video events, Using the currentTime Property to Create Video Events–Canvas Video Transformations: Rotation

video puzzle game, Canvas Video Puzzle–Creating Video Controls on the Canvas

video codecs, HTML5 Video Support

<video> tags, HTML5 Video Support

viewport, setting up, Animating the cube

volume property

audio objects, Important Audio Properties

video objects, Basic HTML5 Video Implementation, HTML5 Video Properties

volume slider, interactive, Creating Custom User Controls on the Canvas

click-and-drag volume slider, Click-and-Drag Volume Slider

volume slider functionality, Volume slider functionality

volume slider variables, Volume slider variables

values for placement of, Setting Up the Audio Player Values

volumechange events, audio, Important Audio Events

Vorbis, Theora + Vorbis = .ogg

VP8 codec, VP8 + Vorbis = .webm

W

W3C website, coverage of Canvas 2D Drawing API, Drawing on the Canvas

walls, better interaction with, in balls bouncing with collisions, Better interaction with the walls

.wav files, Supported Formats

web application development, paradigm shift in, Conclusion

web browsers

HTML5 Canvas Text API support, The HTML5 Canvas Text API

looking at simple HTML5 page, A Simple HTML5 Page

pattern fills, Filling Shapes with Patterns

running examples in this book, Running the Examples in the Book

support for HTML5 Canvas, Introduction to HTML5 Canvas

supported audio formats, Audio Formats

testing for canvas support, Testing to See Whether the Browser Supports Canvas

testing for WebGL support, Testing for WebGL support with Modernizr

video formats supported by, VP8 + Vorbis = .webm

web page for this book, We’d Like to Hear from You

web security, disabling for Chrome, Testing the Application in Google Chrome

WebGL, Further Explorations–CopperLicht

application, 3D rotating cube, What Does a WebGL Application Look Like?

adding JavaScript libraries, JavaScript libraries

animating the cube, Animating the cube

complete code, Full Code Listing–Further Explorations with WebGL

initialization in canvasApp( ), Initialization in canvasApp()

shaders, Shaders

testing for WebGL support with Modernizr, Testing for WebGL support with Modernizr

defined, What Is WebGL?

JavaScript libraries used with, WebGL JavaScript Libraries

resources for information, How Do I Learn More About WebGL?

testing, How Do I Test WebGL?

.webm files, VP8 + Vorbis = .webm

WebM video standard, VP8 + Vorbis = .webm

WebSockets, Multiplayer Applications with ElectroServer 5

weights, font, Available font weights

while loops, Randomizing the puzzle pieces

width and height

altering for videos, Altering the Width and Height of the Video–Preloading Video in JavaScript

dynamically resizing the canvas, Dynamically Resizing the Canvas

ImageData objects, ImageData attributes

width attribute, <canvas> element, Adding Canvas to the HTML Page

width property

Canvas objects, The HTML5 Canvas Object

TextMetrics object, Using measureText

window objects, The Document Object Model (DOM) and Canvas

addEventListener( ) method, HTML5 Canvas “Hello World!”, The initGame() Function

load event, HTML5 Canvas “Hello World!”

open( ) method, Exporting Canvas to an Image

windows, creating logical window for zoomed or panned image, Creating a Window for the Image–Panning the Image

Winiarczyk, Ben, Ball interactions in physics

X

Xcode IDE, Going Mobile!

creating BS Bingo PhoneGap project, Creating the BS Bingo PhoneGap Project in Xcode

installing, Installing Xcode

looking up mobile device’s Unique ID, Step 2: Find the device’s Unique ID

setting build target to a device, Using Xcode to Target a Test Device

testing BS Bingo on iPhone simulator, Testing on the Simulator

Z

zones, rooms, and games in ElectroServer, Zones, rooms, and games

zooming and panning images, Zooming and Panning an Image–Keyboard input

controlled pan and zoom, Application: Controlled Pan and Zoom–Keyboard input

creating logical window for, Creating a Window for the Image–Panning the Image

panning an image, Panning the Image

simultaneously zooming and panning an image, Zoom and Pan the Image