www.it-ebooks.info HTML5 Game Development with ImpactJS A step-by-step guide to developing your own 2D games Davy Cielen Arno Meysman BIRMINGHAM - MUMBAI www.it-ebooks.info HTML5 Game Development with ImpactJS Copyright © 2013 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: March 2013 Production Reference: 1140313 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84969-456-8 www.packtpub.com Cover Image by Shutterstock www.it-ebooks.info Credits Authors Davy Cielen Arno Meysman Reviewers Makzan Kevin Roast Acquisition Editor Robin de Jongh Lead Technical Editor Arun Nadar Technical Editors Soumya Kanti Veena Pagare Copy Editors Alda Paiva Laxmi Subramanian Ruta Waghmare Aditya Nair Project Coordinator Anugya Khurana Proofreader Bernadette Watkins Indexer Hemangini Bari Production Coordinator Arvindkumar Gupta Graphics Valentina Dsilva Cover Work Arvindkumar Gupta www.it-ebooks.info www.it-ebooks.info Foreword If you are new to programming, let me congratulate you for choosing one of the best ways to learn it. Writing games can be way more fun and more rewarding than playing them. It will keep you on the edge of your seat when you first make something that you can move on the screen, when you first make something that resembles a game, when you first make something that is fun to play, and when you first put something out on the Internet for others to enjoy. You will soon discover that programming is no black magic, but just a bunch of simple concepts glued together. If you are new to JavaScript, the syntax can be quite confusing and some of its concepts may seem alien at first. But hidden under all that "wait, what?" moments is a language that is actually quite powerful, elegant, and concise. Stick to the simple stuff at the beginning, but don't be too afraid to get your feet wet. If you come back to something you wrote a month ago, you will have discovered more explicit and easier ways to do it. This is true for every language, but the learning curve of JavaScript is an especially rewarding one. If you are new to game development, you will see that it's no more difficult than any other kind of development. Once you get the idea of a game loop in your head and understand how objects are moved over time, everything else will suddenly make sense. One of the biggest revelations when I started to make games was how almost comically fast computers are. The amount of things you can do in 16 milliseconds, 60 times per second, is truly astonishing. At the same time, it's astonishing how easily you can end up doing huge amounts of operations. Compare 100 objects with each other? That's 10,000 comparisons! Still, you can do such things and much more. So don't be afraid to try things that you think may be too slow. Your game will most likely not be bound by computation performance. www.it-ebooks.info If you are new to Impact and I would think you are, since you bought this book, you will find that it is just the aforementioned bunch of simple concepts, neatly arranged for you. One of Impact's most important aspects is its simplicity. I took great care to make the API, the functionality of Impact that is exposed to you as logical, consistent, and easy to grasp as possible. There are no callbacks anywhere; everything that's happening is happening in the game loop and it's happening in sequence. This makes it easy to reason about the state of your game at all times. But this API shouldn't discourage you to dig deeper. In fact, I would like to invite you to take a closer look at Impact's source code. Let's be clear here. Almost every time I had a look at the source code of a large software library or application, I felt quite lost. If I finally found the function I was interested in, it turned out to be just a stub with three lines of code that calls the actual implementation elsewhere, which in turn just calls five different functions with nondescript names in some other files. Impact is not that large a software library. It's a very concise framework, you don't have to read through thousands of pages of code scattered over hundreds of files. Most things are self contained and you don't have to jump around a lot to get an understanding of what a certain function does. No black magic involved. Dominic Szablewski Creator of ImpactJS www.it-ebooks.info About the Authors Davy Cielen is the co-owner of An Ostrich On Mars, a graphic design and marketing agency with a special branch of game design, graphics, and game development. He has a background in analytics, marketing, and mathematics. Davy is seriously in love with game design and web technologies. I want to thank my wife Filipa for the support she has given me. This book has cost Arno and me a lot of time. Filipa, you have always been there to support us and always push me to grow as a husband and as a person. A special thanks to my father, Nico Cielen, who passed away recently. He has always guided me in the journey of life. He is a great man. Jeanine, I will never forget how you have taken care of him. I also want to credit my family, friends, and colleagues for their support and understanding while we developed this book. It has consumed a lot of my time, but I could always count on your support. Last but not the least, I want to thank Arno for the hard work he has put into this book and the people at Packt Publishing for the opportunity they have given us to write this. www.it-ebooks.info Arno Meysman is the co-owner of An Ostrich On Mars, a graphic design and marketing agency with a special branch of game design, graphics, and game development. Arno Meysman is a specialist at customer and web analytics using statistics and has always been very interested in game development, including graphical design. He started using the ImpactJS engine for hobby projects when it was first released in 2010. I would like to give thanks to my family and friends who have supported me all the way through the process of writing this book. It has not always been easy to stay at home writing, while I could be out partying and discovering new things. I want to give special thanks to my parents, brother, and girlfriend for always being there for me, regardless of what crazy plans I come up with and execute. A big thank you to all the people of PacktPub involved in the process of making this book for guiding us all the way through. Last but not least I would like to thank my co-author Davy. Without his technical support, writing this book would have been near impossible. www.it-ebooks.info About the Reviewers Thomas Mak, also known as Makzan, is a developer who specializes in web development and game design. He has over 10 years of experience in building digital products, including real-time multiplayer interaction games and iOS applications. He is currently a founder of a game development company, 42games ( http://42games.net), where he makes game-development tutorials and online learning resources. He wrote two books and one screencast series for building a Flash virtual world and making games with HTML5 and related web standards. I would like to thank my family and my wife, Candy Wong, for supporting all my writings. www.it-ebooks.info [...]... in HTML5 Summary 208 208 210 216 217 219 219 222 223 224 230 232 233 234 Preparing your game for the web browser 236 Preparing our game for mobile web browsers 238 Turning the game into a web app for the Google Chrome Web Store 243 Pushing your game to Android's Google play store 247 Making your game available on Facebook 249 Direct canvas game acceleration with AppMobi 251 Summary 255 Your game development. .. they love: building the actual game ImpactJS also comes with a very intuitive level editor and debug system, which we will also get into during the course of this book ImpactJS is designed to build tile-based two-dimensional games For instance, if you like to build a side-scrolling game such as Mario or a top-down game such as Zelda, you will want to go with ImpactJS Now without much further ado, let's... First Impact Game, where we will prepare ourselves for game development by gathering the necessary resources for it What this book covers Chapter 1, Firing Up Your First Impact Game helps us to set up our development environment, get our first game up and running, and take a look at a few useful tools for the HTML5 game developer Chapter 2, Introducing ImpactJS dives into the basics of ImpactJS by exploring... Firing Up Your First Impact Game Installing the game engine: ImpactJS The next thing you will need is the actual ImpactJS game engine, which you can buy from the ImpactJS website at http:/ /impactjs. com/ or which comes as a package with AppMobi on the AppMobi website at http://www.appmobi.com Regardless of where you buy the engine, you will be looking for a (zipped) folder filled with JavaScript files This... type localhost/myfirstawesomegame in the address bar Debugging your game with the browser and ImpactJS Before you can debug the game, the least you should know is the general structure of ImpactJS code As you might have noticed, ImpactJS has a main script that is used for actually steering the entire game The main.js script includes all other necessary scripts and the ImpactJS library Every script... important trade-off Chapter 8, Adapting Your HTML5 Game to the Distribution Channels helps us take a look at a few of the options for deploying your game to the different devices out there and how it can be done technically This is the final step of the game development process Chapter 9, Making Money with Your Game takes a look at a few of the options to make money as a game developer, from taking care of... Debugging your game with the browser and ImpactJS Debugging with the browser Firebug – the Firefox debugger Chrome debugger Exercises in debugging with Chrome and Firebug 7 10 12 12 13 15 15 16 17 Debugging with ImpactJS 22 Which helpful tools are out there 25 Ejecta 25 AppMobi 25 PhoneGap 27 lawnchair 27 Scoreoid 28 Playtomic 29 one.com webhost 29 Summary 31 Chapter 2: Introducing ImpactJS Building... on Together with the use of JavaScript, it became possible to build browser games outside of Flash players However, JavaScript in itself is not geared towards building games In its raw form, you would be able to use it to build a game but it would prove dauntingly difficult Thus, the last necessary ingredient is a JavaScript library with the sole purpose of game development This is where ImpactJS comes... purpose of game development This is where ImpactJS comes into play ImpactJS is in essence a library of JavaScript code capable of making your life as a game developer a lot easier ImpactJS was developed by Dominic Szablewski, a German genius, to say the least The ImpactJS game engine has the advantage of enabling you to build a game very quickly with only a basic knowledge of JavaScript and HTML This allows... entity in the game They are like Lego blocks, brought together in one big (main.js) castle Indeed, the main script, as shown in the following code snippet, is a module in itself, requiring all other modules: ig.module( 'game. main' ) requires( 'impact .game' , 'impact.font', 'game. entities.player', 'game. entities.enemy', 'game. levels.main', [ 13 ] www.it-ebooks.info Firing Up Your First Impact Game Downloading . www.it-ebooks.info HTML5 Game Development with ImpactJS A step-by-step guide to developing your own 2D games Davy Cielen Arno Meysman BIRMINGHAM - MUMBAI www.it-ebooks.info HTML5 Game Development with ImpactJS Copyright. First Impact Game 7 Installing a XAMPP server 7 Installing the game engine: ImpactJS 10 Choosing a script editor 12 Running the premade game 12 Debugging your game with the browser and ImpactJS 13 Debugging. 255 Chapter 9: Making Money with Your Game 257 Your game development strategy 257 Making money with game apps 261 Google Play 262 iOS App Store 264 The Chrome Web Store 265 In -game advertising 266 Selling