Contents

About the Author

About the Technical Reviewer

Acknowledgments

Introduction

 Chapter 1: Getting to Know CreateJS

Getting Started

EaselJS

HTML5 Canvas

EaselJS with HTML5 Canvas

TweenJS

Animating with TweenJS

Easing

Callbacks and Scope

SoundJS

Events

Plugins

PreloadJS

Dancing Butterflies

Summary

 Chapter 2: Making and Animating Graphics

Stage

Setting Up the Stage

Ticker

Creating Graphics

Graphics

Shapes

Drawscript

Animating Shapes

Drawing UI Elements

Preloader Prototype

Summary

 Chapter 3: Capturing User Input

Mouse Events

Mouse Clicks

Drag and Drop

Color Drop

Keyboard Events

Text

Creating Text

DOMElement Class

Word Game

Summary

 Chapter 4: Game Project: Progressive Break-it

Progressive Break-it

Setting Up the Project Files

Beginning the Game Code

Declaring the Game Constants and Variables

Initializing the Game

Building the Game Elements

Creating the Walls

Creating the Message Board

Creating the Paddle and Puck

Adding the Controls

Creating Levels

Adding Levels

Shifting the Bricks

Setting Up the Game Loop

Updating Game Elements in the Game Loop

Checking for Collisions

Rendering the Game Elements

Evaluating the Game

Ending the Game

Resetting the Game

Summary

 Chapter 5: Using and Managing Bitmap Images

Bitmaps

Adding Bitmaps to the Stage

Adding Effects

Masking and Clipping

Puzzle Swap

Setting up the Game Files

Initializing the Game

Building the Puzzle Pieces

Shuffling the Puzzle Pieces

Moving Puzzle Pieces

The Complete Puzzle Swap Code

Containers

Building Containers

Animating and Cloning Containers

Veggie Match

Setting Up the Game Files

Initializing the Game

Creating the Cards

Shuffling the Cards

Flipping the Cards

The Complete Veggie Match Code

Summary

 Chapter 6: Sprites and Sprite Sheet Animations

Sprite Sheets

SpriteSheet Class

Creating Sprite Sheets with Texture Packer

Sprite Class

Bitmap Fonts

BitmapText Class

Creating Bitmap Font Sprite Sheets

Sprite Sheet Animations

Animations Data

Animated Sprite Sheets Using Zoe

Animations with Flash CC

Summary

 Chapter 7: Game Project: Fakezee

Fakezee

Yahtzee Rules

Setting Up the Project Files

Reviewing the Sprite Sheet Files

Reviewing the Sprite Sheet Image

Setting Up the Sprite Sheet Data

Beginning the Game Code

Declaring the Game Constants and Variables

Setting Up the Stage and Preloader

Setting Up the Sprite Sheet

Initializing the Game

Building the Game Title

Building the Dice Tray

Building the Scorecard

Building the Scoreboard

Revealing the Game Elements

Hiding the Game Elements

Revealing the Title and Dice Tray

Revealing the Scorecard

Revealing the Scoreboard

Playing the Rounds

Rolling the Dice

Holding Dice

Scoring on Categories

Choosing a Category

Updating the Score

Evaluating the Game

Resetting the Dice Tray

Ending and Replaying the Game

Calculating the Scores

Setting Up the Scoring Class

Scoring for Number Categories

Scoring for Kinds

Scoring for Straights

Scoring for a Full House

Scoring for Chance

Scoring for Fakezee and Bonus Fakezee

The Complete Scoring Class

Using the Scoring Class

Summary

 Chapter 8: Extending EaselJS Display Objects

Inheritance

EaselJS and Inheritance

Extending EaselJS

Pulsing Orbs

Creating Reusable UI Components

Creating Buttons

Creating a Preloader

Creating Custom Sprites

Extending the Sprite Class

Using Custom Sprites

Running Man

Setting Up the Game Files

Creating the Runner Sprite

Preloading and Initializing the Application

Setting Up the Sprite Sheet and Buttons

The Complete Code for Running Man

Summary

 Chapter 9: Sounds and Asset Management

SoundJS

Using the Sound Class

Registering Sounds

Preloading Sounds with PreloadJS

Considering Mobile

Creating an Asset Manager Class

Extending the EventDispatcher Class

Declaring the Assets and Events

Preloading in the AssetManager Class

Managing Scope with the on Method

Creating and Dispatching Events

Accessing Assets from the AssetManager Class

Exploding Asteroids

Setting Up the Game Files

The Complete AssetManager for Exploding Asteroids

Creating the Asteroid Class

Creating the Exploding Asteroids Game

The Complete Exploding Asteroids Game Code

Summary

 Chapter 10: The State Machine and Scenes

Deconstructing a State Machine

Declaring States

Setting the Game State

Running the Game

Setting Up Game State Events

Orb Destroyer

Setting Up the Game Files

Building the States and State Events

Building the Game Menu

Building the Game

Building the Orb Sprite

Building the Game Over Screen

Building the Main Application with State Machine

Summary

 Chapter 11: Game Project: Space Hero

Space Hero

Preparing for the Project

Setting Up the HTML

Reviewing the Sprite Sheet Files

Preparing the Asset Manager

Creating the Application Class

Creating the Sprites

Creating the Hero Ship

Creating the Enemy Ships

Creating the Bullets and Explosions

Creating the HUD

Reviewing the HUD Sprite Frames

Creating the Health Meter

Creating the Scoreboard

Creating the Life Box

Using Object Pools

Creating the Scenes

Creating the Game Menu Scene

Creating the Game Scene

Creating the Game Over Scene

Creating the Game

Declaring the Game Variables

Initializing the Game

Creating the Game Sprites

Setting Up the Controls

Creating the Game Loop

Building the Update Functions

Building the Render Functions

Building the Spawn Functions

Detecting Pixel-Perfect Collision

Building the Check Functions

Summary

 Chapter 12: Building for Mobile Browsers

Enabling Touch Events

Setting the Viewport

Scaling Fakezee for Multiple Screen Size

Optimizing Fakezee for iOS Home Pages

Adding the Web App Meta Tags

Creating a Home Screen App Icon

Creating the Startup Image

Summary

 Chapter 13: Packaging and Compiling with PhoneGap Build

Introducing PhoneGap Build

Acquiring Developer Accounts For iOS and Android

Updating the Fakezee Game For Packaging

Adjusting the Visual Layout for Fakezee

Preloading JSONP for PhoneGap

Preparing Assets for PhoneGap

Preparing the PhoneGap Configuration File

The Complete Configuration File for Fakezee

Submitting your Application to PhoneGap Build

Summary

 Chapter 14: Game Project: The Villager RPG

The Villager RPG

Preparing for the Project

Setting Up the HTML

Reviewing the Sprite Sheet Images

Preparing the Asset Manager

Creating the Device Class

Creating the Application Class

Building the Game Data

Meeting the Bad Guys

Creating the Enemy Data

Creating the Game and Level Data

Creating the Player Data

Building the Enemies and Hero

Creating the Enemy Class

Creating the Enemy Health Bar

Creating the Hero Class

Building the Game Menus

Creating the Main Menu Scene

Creating the Level Select Scene

Building the Game Level

Reviewing the RPG Battle System

Starting the Game Class and its Properties

Initializing the Game Level

Populating the Enemies

Building the Battle Panel

Creating Custom Events

Adding the Battle Panel to the Game

Handling Battle Button Events

Attacking the Enemies

Attacking the Hero

Creating the Check Level Functions

Finishing the Level

Building the Battle Win Screen

Creating the Level Complete Scene

Creating the Magic Shop

Summary

Index