Contents

About the Authors

About the Technical Reviewers

Introduction

images Chapter 1: JavaScript Is Not the Language You Think It Is

Variables and Scoping Rules

Declaration Scoping

Declaration Hoisting

JavaScript Typing and Equality

Base Types

The typeof Operator

The instanceof Operator

Type Coercion

Inheritance the JavaScript Way

Prototypical Inheritance

this

Conclusion

images Chapter 2: Optimal Asset Loading

Caching Data

HTTP Caching

HTTP Caching Example

Loading HTTP Cached Assets

Client-Side Storage

Memory Caching

Data Formats

Texture Formats

Audio Formats

Other Formats

Asset Hosting

Server Compression

Geolocating Assets

Using a Content Distribution Network

Effective Asset Grouping

Grouping Using Tar Files

Conclusion

Acknowledgements

images Chapter 3: High-Performance JavaScript

About the Demo

Object Pools

How to Make an Object Pool

Iterating on a Pool

Using an Object Pool

Updating Only What’s Important

Culling for Simulation

Culling for Rendering

Warming Up the Virtual Machine

Your Code Will Be Compiled and Optimized on the Fly

Deoptimizations

Rev Up the Engine

Benchmarking

Digging Deeper

Conclusion

images Chapter 4: Efficient JavaScript Data Structures

The Importance of Data Structures

Object Hierarchies

Arrays

Performance Data

ArrayBuffers and ArrayBufferViews

Complex Structures as Single ArrayBufferViews

Late Unpacking

Best Practices

Conclusion

images Chapter 5: Faster Canvas Picking

Creating Pickable Objects

Defining a Sprite Prototype

Basic Picking with Bounding Boxes

Caveats

Faster Picking via Bucketing

Caveats

Pixel Perfect Picking

Loading Pixel Data

Testing a Mouse Click

Results and Caveats

Convex Hull Picking

Generating the Convex Hull

Doing Picking Against the Convex Hull

Caveats

Moving Forward

images Chapter 6: Autotiles

Shadows

The Abyss

Smooth Transitions

images Chapter 7: Importing Flash Assets

Sprite Sheets

Vectorization

Cutout Animation

New Tools

Other Assets

Conclusion

images Chapter 8: Applying Old-School Video Game Techniques in Modern Web Games

High-Performance Update Loops

Calling requestAnimationFrame

Bottlenecks in an Update Loop

Dirty Rectangles

Rendering Massive Grids

Displaying Animations in Extremely Large Viewports

Color Cycling

Conclusion

images Chapter 9: Optimizing WebGL Usage

The Anatomy of a WebGL Call

How WebGL Works

Building the Renderer

Debugging WebGL Usage

Using Extensions

Rendering the Scene

Conclusion

images Chapter 10: Playing Around with the Gamepad API

Draft Stage

Browser Support

Supported Devices

Gamepad API Implementation

Project Setup

Connecting the Gamepad

Detecting Disconnection

Detecting Button Presses

Axis Events

Gamepad Object

Complete Source Code

Demo Time: Hungry Fridge

Mobile vs. Desktop

Conclusion

images Chapter 11: Introduction to WebSockets for Game Developers

Setting Up a WebSocket Connection

Sending and Receiving Data

The WebSocket API

Creating a Simple Echo Server

Encoding Data

Using Socket.IO

Getting Started

Echo Server

Using Events

Scaling and Reducing Overhead

Reducing the Size of Data Transmitted

Intelligently Processing and Distributing Packets

Autonomous Clients/Echo Server

Dumb Clients/Authoritative Server

Case Studies

GRITS

Rawkets

Off-the-Shelf Solutions and WebSocket-likeProducts

Firebase

Pusher

Kaazing

Conclusion

images Chapter 12: Real-Time Multiplayer Network Programming

Introduction

Challenges

Bandwidth

Latency

Synchronization

State Broadcast vs. Lockstep

Dealing with Latency

Tips and Tricks

Case Study: FrightCycle

Getting Started

The Game State

Communication Between the Server and Client

Synchronizing Time

Server Commands

Client-Side Prediction

Conclusion

images Chapter 13: The State of Responsive Design

Understanding the Problem at Hand

Getting the Screen Dimensions

Resolutions on the Desktop

Resolutions on Mobile

Responsive Canvas

Stretch

Float Middle

Fit Inside Screen

An Issue with ReadPixels

Responsive Layout

Responsive Content

Working with a Cloud Computing Resource

Conclusion

images Chapter 14: Making a Multiplatform Game

Case Study: Funfair Freak-Out

Control Method

Performance Testing

Interaction Design

Physics Engine

Audio

Asset Sizes

Interface Design

Maintenance

Conclusion

images Chapter 15: Developing Better Than Native Games

The HTML5 Fullscreen API

Creating a Fullscreen Button

Losing Fullscreen and How to Handle It

Going Further

Lowering the Resolution

When to Lower Resolution

How to Lower Resolution

Keeping Your Sprites Sharp

Staying Sharp Using Less Pixels

CSS Scaling

Motion Blur

Unwanted Behaviors

Disabling Zoom

Device Orientation

Home Screen

Icons

Detecting Standalone

Further References

Conclusion

images Chapter 16: Mobile Web Game Techniques with Canvas 2D API

Why Canvas?

The Basis of Canvas

Bitmap Images and Vector Images

Affine Transformations

How to Gain Speed

Speeding Up drawImage

In-Memory Canvas (Offscreen Canvas)

Dirty Rect

Color Transformation

Optimization on Drawing Paths

Use GPU Effectively

Keeping Canvas Applications Stable

Browser Compatibility

Memory Problems

Battery Problems

Profiling on the Real Devices

images Chapter 17: Faster Map Rendering

The MAP Object

Fetch the Data from the Server

Loading a Tiled Map

Rendering Tiled Data

Understanding the Data Format to Render

Fast Canvas Rendering with Precaching

Creating a CanvasTile

Filling the Cache

Draw!

Using a Free List of Canvases

A New CanvasTile

Drawing the Map

Results

Conclusion

images Chapter 18: HTML5 Games in C++ with Emscripten

What is Emscripten?

How Emscripten Works

Clang

Emscripten

Memory Representation

Arithmetic

What is asm.js?

The Emscripten Toolchain

Graphics Support

Audio Support

Input Events

Performance

Debugging

A Game Port

Choosing a Game

Getting Emscripten

Building the Game

Third-Party Dependencies and a Real Build System

Loading Game Content

Getting the Game to Run

Integrating with OpenGL, Attempt #1: Regal

Integrating with OpenGL, Attempt #2: Simplifying the AstroMenace Renderer

The Main Loop

The Emscripten Platform

Predicting the Future

images Chapter 19: Introduction to TypeScript: Building a Rogue-like Engine

What Is TypeScript?

Language Overview

Setting Up TypeScript

Creating Your Game Class

Drawing to Canvas

Handling Movement

Extending Your Engine

Adding Enemies and Treasure

Rendering Sprites

Rendering Larger Maps

images Chapter 20: Implementing a Main Loop in Dart

Sample Code

Dart

game_loop

Interfacing with the Browser

Inputs

Outputs

Your First Main Loop and What’s Wrong with It

Quest for Determinism

Fixed Time Step

User Input

Timers

Rendering

User Input Processing

Digital Input

Analog Input

Positional Input

Game-Specific Code

Chords

Sequences

Conclusion

images Chapter 21: Saving Bandwidth and Memory with WebGL and Crunch

The Goal

Browser-Supported Images

BMP

GIF

PNG

JPEG

WEBP

Memory Use

Compressed Textures

Loading DDS Files

Crunch

Emscripten

Workers

Notes on dxt-util.js

Conclusion

images Chapter 22: Creating a Two-Dimensional Map Editor

List of Tiles

List of Sprites

Basic Tileset Configuration

Binding Sprites to Tiles

Map Field and Its Serialization to JSON

Camera

Renderer

Editor

Builder Window

Main Window

index.html with jQuery UI

Conclusion

images Chapter 23: Automating Your Workflow with Node.js and Grunt

Automating Your Workflow

Installing Node.js

Command-Line Primer

Introduction to npm

Installing Grunt

Creating a Grunt File

What Should Your Build Script Do?

Conclusion

images Chapter 24: Building a Game with the Cocos2d-html5 Library

What Is Cocos2d?

Why Was Cocos2d Created?

What Makes Cocos2d the Best Choice for Your 2D Game Development?

What Sets Cocos2d Apart from Other Similar Frameworks?

What Is Cocos2d-html5?

Why Was Cocos2d-html5 Created?

What Are the Main Differences in Cocos2d and Cocos2d-html5?

Extending the Power of Cocos2d-html5 with Cocos2d JavaScript Binding

Understanding Cocos2d

Basic Concepts of Cocos2d

Introduction to the Directory Structure

Introduction to the Tiled Editor

What is TMX?

Why Tiled Editor?

Getting Started on Built-in Examples

Review the Built-in Examples

Setting Up Your First “Hello World” Project

Building the Tower Defence Game

Overview

The Tower Defence Gameplay Scene

Designing the Required Game Components

A Step-by-Step Process for Making the Tower Defence Game

Releasing a Cocos2d-html5 App to a Native App

The Power of Distributing an HTML5 Game as a Native Package

Setting Up the Cocos2d JSB Environment

Adding Resources to the Project

Configuring the Project

Building for iOS

Learning More

How Active Is the Community?

Many Top Games Are Created with Cocos2d

What If I Have a Question?

Conclusion

Index

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
52.15.47.218