HTML5 Game Development Insights
Published on 19. April 2014
XXVI, 476 pages
978-1-4302-6698-3 (ISBN)
Description
HTML5 Game Development Insights is a from-the-trenches collection of tips, tricks, hacks, and advice straight from professional HTML5 game developers. The 24 chapters here include unique, cutting edge, and essential techniques for creating and optimizing modern HTML5 games. You will learn things such as using the Gamepad API, real-time networking, getting 60fps full screen HTML5 games on mobile, using languages such as Dart and TypeScript, and tips for streamlining and automating your workflow. Game development is a complex topic, but you don't need to reinvent the wheel. HTML5 Game Development Insights will teach you how the pros do it.The book is comprised of six main sections: Performance; Game Media: Sound and Rendering; Networking, Load Times, and Assets; Mobile Techniques and Advice; Cross-Language JavaScript; Tools and Useful Libraries. Within each of these sections, you will find tips that will help you work faster and more efficiently and achieve better results.Presented as a series of short chapters from various professionals in the HTML5 gaming industry, all of the source code for each article is included and can be used by advanced programmers immediately.
More details
Other editions
Additional editions
Colt McAnlis | Peter Lubbers | Brandon Jones
HTML5 Game Development Insights
Book
04/2014
APress
€53.49
Shipment within 15-20 days
Persons
Colt McAnlis is a Developer Advocate at Google focusing on Games and Performance; Before that, he was a systems & graphics programmer in the games industry working at Blizzard, Microsoft (Ensemble), and Petroglyph. He's a UDACITY course professor for HTML5 games, and also spent 4 years as an Adjunct Professor at SMU Guildhall's school for game development. When he's not working with developers, Colt spends his time preparing for an invasion of giant ants from outer space.
Content
- Intro
- Contents at a Glance
- Contents
- About the Authors
- About the Technical Reviewers
- Introduction
- 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
- Numbers
- Strings
- Booleans
- Objects
- Arrays
- null
- undefined
- The typeof Operator
- The instanceof Operator
- Type Coercion
- Equality Checking
- Truthiness
- Inheritance the JavaScript Way
- Prototypical Inheritance
- this
- Conclusion
- 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
- Chapter 3: High-Performance JavaScript
- About the Demo
- Object Pools
- How to Make an Object Pool
- Pool Structure
- Recyclable Objects
- Requesting a Free Object from the Pool
- Returning Objects to the 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
- 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
- Chapter 5: Faster Canvas Picking
- Creating Pickable Objects
- Defining a Sprite Prototype
- Representing Objects
- 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
- Chapter 6: Autotiles
- Shadows
- The Abyss
- Smooth Transitions
- Chapter 7: Importing Flash Assets
- Bruno Garcia, co-founder, 2DKit
- Sprite Sheets
- Vectorization
- Cutout Animation
- New Tools
- Other Assets
- Conclusion
- 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
- Chapter 9: Optimizing WebGL Usage
- The Anatomy of a WebGL Call
- How WebGL Works
- Building the Renderer
- Debugging WebGL Usage
- Using Extensions
- Vertex Array Objects
- Draw Buffers
- Instanced Arrays
- WebGL 2
- Rendering the Scene
- Frustum Culling
- Rendering Order
- Batching
- Conclusion
- Chapter 10: Playing Around with the Gamepad API
- Draft Stage
- Browser Support
- Supported Devices
- Gamepad API Implementation
- Project Setup
- Connecting the Gamepad
- Prefixes
- Detecting Disconnection
- Detecting Button Presses
- Axis Events
- Axis Threshold
- Gamepad Object
- Gamepad Differences
- Hooking Up to the Event
- Complete Source Code
- Demo Time: Hungry Fridge
- Mobile vs. Desktop
- Conclusion
- 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
- BSON
- MessagePack
- Intelligently Processing and Distributing Packets
- Send Mostly Deltas and Infrequent Worldviews
- Autonomous Clients/Echo Server
- Dumb Clients/Authoritative Server
- Case Studies
- GRITS
- Rawkets
- Off-the-Shelf Solutions and WebSocket-likeProducts
- Firebase
- Pusher
- Channels and Events
- Kaazing
- Conclusion
- Chapter 12: Real-Time Multiplayer Network Programming
- Introduction
- Challenges
- Bandwidth
- Latency
- Synchronization
- State Broadcast vs. Lockstep
- Dealing with Latency
- Client-Side Prediction
- Synchronized Time Among Clients
- Fast-Forwarding the Game State
- Tips and Tricks
- Keep Client Input Times Monotonically Increasing
- Keep the Game State Independent from the Rest of the Game
- Avoid Floating Point in the Game State
- Keep the Game Engine Small
- Interpolate Between Game States
- Do not Assume a Particular Sequence of Game States
- Send Checksums of the Game State
- Case Study: FrightCycle
- Getting Started
- The Game State
- Communication Between the Server and Client
- Synchronizing Time
- Server Commands
- Client-Side Prediction
- Conclusion
- 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
- Chapter 14: Making a Multiplatform Game
- Case Study: Funfair Freak-Out 1
- Control Method
- Performance Testing
- Interaction Design
- Physics Engine
- Audio
- Asset Sizes
- Interface Design
- Maintenance
- Conclusion
- 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
- Android
- iOS
- Firefox OS
- Conclusion
- Chapter 16: Mobile Web Game Techniques with Canvas 2D API
- Why Canvas?
- The Basis of Canvas
- Bitmap Images and Vector Images
- A Bitmap API Example
- Path API Example
- Affine Transformations
- How to Gain Speed
- Speeding Up drawImage
- In-Memory Canvas (Offscreen Canvas)
- Dirty Rect
- Color Transformation
- Color Transformation Using Alpha
- Separate RGB Channels
- Optimization on Drawing Paths
- Use GPU Effectively
- Keeping Canvas Applications Stable
- Browser Compatibility
- Memory Problems
- Battery Problems
- Profiling on the Real Devices
- Chapter 17: Faster Map Rendering
- The MAP Object
- Fetch the Data from the Server
- Loading a Tiled Map
- Parsing the Map Data
- Rendering Tiled Data
- Understanding the Data Format to Render
- Coordinate Spaces and View-Rect
- Fast Canvas Rendering with Precaching
- Creating a CanvasTile
- Filling the Cache
- Draw!
- Sec13
- Results
- Using a Free List of Canvases
- A New CanvasTile
- Drawing the Map
- Results
- Conclusion
- 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
- WebGL
- Canvas
- 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
- 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
- Chapter 20: Implementing a Main Loop in Dart
- Sample Code
- Dart
- game_loop
- Interfacing with the Browser
- Inputs
- Time
- Display Sync
- User Input
- Outputs
- Game State
- Display
- Audio
- Your First Main Loop and What's Wrong with It
- Quest for Determinism
- Fixed Time Step
- Accumulating Time
- Falling Behind
- Seeing into the Future
- User Input
- Timers
- Rendering
- On Demand
- Interpolation
- User Input Processing
- Digital Input
- Analog Input
- Positional Input
- Game-Specific Code
- Chords
- Sequences
- Conclusion
- 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
- 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
- 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
- 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
- Director
- Scene
- Layer
- Sprite
- Coordinate System
- Action
- Animation
- Scheduler
- Touch Event
- 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
- Review the Tests
- Taking a Look at the Sample Games
- MoonWarriors
- Fruit Attack
- 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
- Creating the Tower Defence Project
- Creating Main Menu Scene for the Game
- Creating the Game Layer, Toolbar Layer, and Game Map Layer
- Adding the Enemy Menu and the Show Range of the Game
- Creating Towers and Bullets
- Creating Enemies and Actions
- Simple Collision Detection
- Adding Music and Sound Effects
- Creating the Game Over Scene
- Deploying the 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
