html5 game development with impactjs

HTML5 Game Development

with ImpactJS

A step-by-step guide to developing your own 2D games

Davy Cielen

Arno Meysman

BIRMINGHAM - MUMBAI

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

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

Alfida 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

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.

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

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.

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.

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.

Kevin Roast is a frontend software developer with 15 years, professional experience

and a lifelong interest in computer science and computer graphics. He has developed

web software for several companies and is a founding developer at Alfresco Software

Ltd. He is very excited by the prospect of the HTML5 standardization of the Web and

the progress of web-browser software in recent years. He was the co-author of a book,

Professional Alfresco: Practical Solutions for Enterprise Content Management, and has been

a technical reviewer on several HTML5 and development related books.

I would like to thank my wife for putting up with me tapping away

in the evenings reviewing book chapters, and to my three kids Ben,

Alex, and Izzy for being little funsters.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related

to your book.

Did you know that Packt offers eBook versions of every book published, with PDF

and ePub files available? You can upgrade to the eBook version at www.PacktPub.

com and as a print book customer, you are entitled to a discount on the eBook copy.

Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign

up for a range of free newsletters and receive exclusive discounts and offers on Packt

books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online

digital book library. Here, you can access, read and search across Packt's entire

library of books.

Why Subscribe?

• Fully searchable across every book published by Packt

• Copy and paste, print and bookmark content

• On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access

PacktLib today and view nine entirely free books. Simply use your login credentials

for immediate access.

Table of Contents

Preface 1

Chapter 1: Firing Up Your 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 with the browser 15

Firebug – the Firefox debugger 15

Chrome debugger 16

Exercises in debugging with Chrome and Firebug 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 33

Building your own levels 34

Creating, loading, and saving levels in Weltmeister 34

Layers and the z axis 36

Adding and removing entities and objects 39

The collision layer 41

Connecting two different levels 42

Table of Contents

[ ii ]

Objects – playable and non-playable characters 46

The ImpactJS entity 46

Setting up player controls 51

Position, acceleration, and speed 55

The game's graphics: sprites and animation sheets 58

Spawning, health, and death 60

The camera view 63

The game canvas 63

Free to move camera 64

Automatically following camera 65

Adding music and sound effects 66

Playing background music 66

Introducing sound effects 67

Game physics with Box2D 68

Gravity and force 69

Collision impact and bounciness 70

Summary 71

Chapter 3: Let's Build a Role Playing Game 73

The RPG game setting 74

Building an RPG level 75

Adding a playable character 80

Introducing a defeatable opponent 84

Giving the player some weapons 87

Spawning a projectile 87

Causing harm with a projectile 91

Bringing your NPCs to life with artificial intelligence 93

The NPC's behavior 94

The NPC's decision making process 97

Pickup items to help out your player 101

Healing your player with a potion 101

Becoming rich with coins 102

Keeping score for player feedback 103

Transitioning from one area to another 106

NPCs and conversation 108

The speech balloon 108

Adding a talking non-playable character 112

The final battle 114

Summary 116