www.allitebooks.com For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. www.allitebooks.com Contents at a Glance About the Author .....................................................................................................xv About the Technical Reviewers .............................................................................xvii Acknowledgments ..................................................................................................xix Introduction ............................................................................................................xxi ■ Chapter 1: Level Up! .............................................................................................. 1 ■ Chapter 2: The Canvas Drawing API .................................................................... 59 ■ Chapter 3: Working with Game Assets ................................................................ 93 ■ Chapter 4: Making Sprites and a Scene Graph .................................................. 111 ■ Chapter 5: Making Things Move ........................................................................ 165 ■ Chapter 6: Interactivity ...................................................................................... 189 ■ Chapter 7: Collision Detection ........................................................................... 239 ■ Chapter 8: Juice It Up ........................................................................................ 287 ■ Chapter 9: Sound with the Web Audio API ......................................................... 331 ■ Chapter 10: Tweening ........................................................................................ 369 ■ Chapter 11: Make Your Own Game Engine ........................................................ 407 ■ Appendix A: Vectors for Movement and Collision Detection ............................. 449 Index ..................................................................................................................... 519 iii www.allitebooks.com Introduction How do you make a video game? his book will show you everything you need to know. You’ll learn how to make all kinds of 2D action games by building your own development tools, from scratch, using low-level open-source technologies. All you need is this book, a text editor, a web browser and any old computer. No libraries, no frameworks, no game engines, no black-box mystery code, and no expensive proprietary software or licenses. And you’ll be able to publish your games cross-platform to the desktop, mobile devices, and the Web. As you’ll soon see, by writing just few hundred lines of code, you’ll be well on your way to developing any 2D video game you can imagine. Sound like fun? It’s the best fun there is! Here’s what you’ll learn: •฀ New JavaScript tips and tricks, including some that arrived with ES6 (Chapter 1). •฀ How to draw graphics on the screen and use those graphics to create reusable game components (Chapters 2 and 4). •฀ How to create a scene graph (a parent-child hierarchy for game objects) for maximum lexibility in creating game scenes (Chapter 4). •฀ How to eiciently load images, sounds, fonts, and other game assets (Chapter 3) and build a loading progress bar (Chapter 11). •฀ How to animate objects with physics (Chapter 5), and how to created detailed game characters using keyframe animation (Chapter 8). •฀ Everything you need to know about collision detection (Chapter 7), including the video game designer’s “secret black art”: vector math (Appendix A). •฀ Saving and loading game data, running a game in full screen mode (Chapter 1), and scaling a game to any window size (Chapter 11.) •฀ What is the separating axis theorem (SAT) and why is it useful for games? Find out in Appendix A! •฀ How to create buttons, add mouse, touch and keyboard interactivity to your games, and learn how to create a drag-and-drop system for game objects (Chapter 6). •฀ How to add special efects to your games: easy parallax scrolling, particle efects (Chapter 8), and screen shaking (Chapter 11). •฀ How to play and control sound iles and how to generate synthesized sound efects dynamically from pure code (Chapter 9). •฀ How to build a tweening system and make game objects follow ixed curved paths (Chapter 10). xxi www.allitebooks.com ■ INTRODUCTION •฀ How to put all these pieces together to make your own game engine so that you can build games in the quickest, easiest, and most fun way (Chapter 11). •฀ And you’ll learn lots of the most modern coding and game development practices along the way. his book is a self-contained, classical education in making video games and a compendium of all the important techniques you’ll need to know to lourish as a game designer. If you were alone on a desert island with only a solar-powered laptop, a pile of coconuts, and this book, you’d have everything you need to recreate the entire history of 2D video games from Spacewar! to Flappy Bird. Things You Need to Know To make the best use of this book you need to have a moderate degree of programming literacy. You should be able to glance at a block of code in whatever programming language you’re most familiar with and have a general idea of how it works. You don’t need to think of yourself as a “programmer” or some kind of expert. You just need to be able to fumble your way through programming problems with a reasonable degree of conidence. If you enjoy programming, you’ll love this book. he programming code in this book is written in JavaScript. JavaScript belongs to the C family of languages (C, C++, C#, Objective-C, Java, and AS3.0) so if you know any of those languages, you’ll be able to use JavaScript with ease. And even if you’ve never used JavaScript before, Chapter 1 gives you a quick primer. Have you never done any programming before? hen start with this book’s predecessor, Foundation Game Design with HTML5 and JavaScript. It will teach you how to program, while you’re learning how to make games, and cover everything you need to know to start using this book. Have you read Foundation Game Design with HTML5 and JavaScript? If so, you’re well prepared. If you think you might have forgotten a bit, or need a refresher before you start, relax! I’ve written this book in a very sneaky way. It covers all the basics, from scratch, and squeezes in all the advanced, interesting new stuf all along the way. So, if you’ve forgotten something, like how to make and render a sprite, don’t worry: it’s all in here and packed with loads of clever new tricks. Where the Foundation book was all about learning how to program and how to do things in the most understandable way, this Advanced book is all about doing things in the best and most exciting ways. I’ve written this to be a completely comprehensive book about making games that will reintroduce you to our beloved art form with enlightening and eye-opening new ways of doing things. How to Read This Book his is a storybook. You can read it in bed, or on the beach. Just as you would with Jane Eyre or he Lord of the Rings, start at Chapter 1 and work your way through to the end. Each chapter builds on the techniques and concepts of the previous chapter. But if there are speciic techniques you want to know about right away, just jump in at any spot—you should be still be OK. he only part that’s diferent is Appendix A: “Vectors for Movement and Collision Detection.” You can read it at any time. Appendix A is a deep exploration of vector math concepts which are generally relevant to all the other chapters in the book—but also optional. If you want to know all about vectors before you start Chapter 1, go ahead and read the Appendix irst. But if you’re not really that interested, or just want to keep it for future reference, you can skip it completely. xxii www.allitebooks.com ■ INTRODUCTION The Source Code Most of the content in this book is actually not in this book. You’ll ind it in the source code iles that accompany each chapter. You can download the source code from this book’s product page at www.apress.com, or at this book’s GitHub repository: https://github.com/kittykatattack/agd Yes, there’s a lot of source code! In fact, there’s so much that most of the printed examples in this book only highlight the most signiicant, vital parts. You’re a good enough programmer to understand how those parts it into the bigger picture. But if you have any doubts, open up the complete working source code and take a look. All the code in this book is written in pure JavaScript and HTML. It doesn’t use any abstraction layers like CofeeScript, TypeScript, or JQuery. his book was written during a time when many of the best features of HTML5 for game developers were still experimental and required “vendor preixes” to work properly on all platforms. I’ll mention in the text if it’s likely that you’ll need to use them, but I’ll try to keep them out of the printed code in this book. (For maximum compatibility I’ve kept them in the source code, but usually tidied them away in a JS polyill ile.) Hopefully, you’re reading this book in a happy, future time when these vestigial tails of HTML5’s evolution have disappeared. But until then, here are the most common vendor preixes in current use: Vendor CSS Prefix JavaScript Prefix Microsoft -ms- ms Mozilla -moz- moz Opera -o- o Chrome, Safari -webkit- webkit ■ Tip Writing cross-platform CSS can be particularly difficult, because there are often discrepancies between vendors about how CSS properties are defined. You can make CSS fun again by using a good preprocessor like Sass, and use its Compass extension to create all the vendor-specific code for you automatically. Also, make sure that you run all the source code in a webserver. Many JavaScript and HTML5 features that we’ll be using in this book, like XHR, will only work inside a webserver. A nice cross-platform way to do this is to install Node, which is a marvelous pure JavaScript server. Visit nodejs.org and follow the instructions to install it on your platform. hen install a great little helper utility that runs on top of it, called http-server: (github.com/nodeapps/http-server).