HTML5 Games by Castledine, Earle -- Read -- Imperial Library of Trantor

Index

HTML5 Games: Novice to Ninja Notice of Rights Notice of Liability Trademark Notice About Earle Castledine About SitePoint Preface

Who Should Read This Book? Acknowledgments Conventions Used

Code Samples Tips, Notes, and Warnings

Level 1: Press Space to Start

Game Design A Brief History Games and JavaScript

Strengths of JavaScript Limitations of JavaScript The Future of HTML5 Games

Enough Talk; Let’s Make Games

Making Art Build Tools and Workflow Version Control Systems Staying Motivated

Get Ready!

Level 2: Drawing Things

DOM vs Canvas vs WebGL Plain Ol’ DOM

Why Not DOM?

Canvas API

Drawing Some Shapes Images Transformations Blending and Alpha Performance Considerations

Game Engines vs Reinventing the Wheel

Game Libraries and Engines

Quick, Draw

Level 3: Game Loops & User Input

The Loop

The Old-school Way Looping with HTML5 An Even More Accurate Loop

User Input

Keyboard Input Mouse Controls

Creating Your Game Library

Our Game Architecture Idea The Renderer Bonus Renderer Features Adding the Loop Game Entities Adding Some Action

A Space Shoot-’em-up

Setting Up the Game A Controllable Player A Player That Shoots Removing “Dead” Entities The Bad Guys Strike Back Collisions—at Last!

Game Over

Level 4: Animation, Levels, Maps, Cameras…

An Unexpected Proposition De-boilerplating Our Prototypes

Starting a New Game A Little Help with the Children

Sprites with Zing!

Sprite Translation Scaling Sprites Math Helper Functions Anchor Points Sprite Rotation

An Unexpected Assignment Sprite Sheets & Animation

Sprite Sheets Creating the TileSprite Cell-based Animation: the Easy Way Cell-based Animation: A More Powerful Way

The Animation Manager Tile Maps

Clamping Down Snapping to a Grid Tile Map Helpers Entities Utilities

Scrolling Maps with a Camera

Grid-based Baddies

Screens & Game Life Cycle

Game Screens The Circle of Life Finishing Touches

Leveled Up

:Level 5: Collision Detection & AI

Colliding with Things

Bounding-box Collisions Drawing Rectangles Adjusting the Bounding Box Collision Testers

Procedural Level Generation Colliding with Maps

Wall Sliding Snap to Edges

AI: The Bots Strike Back

Intentional Movement Waypoints Moving, and Shooting, Towards a Target Smart Bad Guys: Attacking and Evading A More Stately State Machine Controlling Game Flow

Pathfinding

Target the Player Moving Along a Path

Enemies alive

Level 6: Mathematics & Physics

Jump Everybody, Jump

Faking Gravity Jumping Platformer

Fixing Our Time Step Triangles and Vectors Building a Vector Library

Normalizing, and the Dot Product

The Need for Speed (and Direction)

Velocity Velocity Bounce Acceleration Integration Friction More Accurate Friction Gravity-based Platformer

Billiard Ball Physics

Collision Resolution

Polar Coordinates

Physics All the Things

Physics Libraries

Penguin Golf Matter.js Syncing with Our Library Event Systems Procedurally Generated Terrain We Got Physical

Level 7: Audio

Old-school Techniques Audio on the Web

Playing Sounds Playing SFX Repeating Sounds Polyphonic Sounds Randomly Ordered Sounds

An Asset Manager

Asset Manager Events

Sound Production

Tools and Software Sound-effect Generators Samples and DIY Recording Recording Tips Music for Games Creating a Track from Scratch

The Web Audio API

Oscillators Combining Oscillators Moving into Our Library Audio Element as a Source Source as an Audio Buffer Effecting a Sound Source Timing and Scheduling Ramps and Modulators

Post Production: Mixing and Mastering Fade to Silence

Level 8: Bringing a Game to Life with “Juice”

Screen Effects

Screen Shake Alpha support Screen Flash Hit Stop, Hit Lag (Time Dilation)

Animations, Tweens, and Easing

Normalization and Lerping A Generic Timer Easing

Particle Effects

1-UPs Firework Particles

Camera Tricks

Smooth Camera Motion Camera Tracking Box

Platformer Tricks

Invincibility Blinking Jump Forgiveness Knockback Wall Jumping

More Tiles

Cloud Platforms Disappearing Tiles Trigger Areas and Doors

Dialogs and Screen Transitions

Pause Dialog Fading Screens

Designing Levels with a Level Editor

Tiled: a Level Editor Loading a Tiled Level Tiled Objects and Properties Game State and Serialization

Got Game

Level 9: Optimizing & Packaging

Debugging

Console Tools Browser Debugger Control Time, Squash Bugs Debug Overlay

Profiling

Adding an FPS Counter Measuring

Speeding Up Your Code

Looping Over Arrays Object Pools Faster Collisions with Spatial Partitioning

Speeding Up Rendering

Don’t Render Off-screen Entities Canvas Tricks TileMap Enhancements A WebGL Renderer

Getting on Devices

Gamepad Controls Mobile Web Tricks Touch Controls Deploying to Mobile Desktop Executables

Getting on the Stores Releasing to the World

Game Over

Bonus Round: How to Use SSL/TLS with Node.js Appendix A: List of Games Mentioned

← Prev
Back
Next →

← Prev
Back
Next →