html5 game development with gamemaker

HTML5 Game Development

with GameMaker

Experience a captivating journey that will take you from

creating a full-on shoot 'em up to your first social web

browser game

Jason Lee Elliott

BIRMINGHAM - MUMBAI

HTML5 Game Development with GameMaker

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 author, 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: April 2013

Production Reference: 1150413

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-410-0

www.packtpub.com

Cover Image by Suresh Mogre ([email protected])

Credits

Author

Jason Lee Elliott

Reviewers

Dave Hersey

Chris Sanyk

Acquisition Editors

Antony Lowe

Grant Mizen

Lead Technical Editor

Mayur Hule

Technical Editors

Saumya Kunder

Amit Ramadas

Project Coordinator

Arshad Sopariwala

Proofreader

Bernadette Watkins

Indexer

Hemangini Bari

Graphics

Ronak Dhruv

Aditi Gajjar

Production Coordinator

Arvindkumar Gupta

Cover Work

Arvindkumar Gupta

About the Author

Jason Lee Elliott is a digital media expert with a passion for game design. He

started his career as an all-purpose Artist at Konami, working his way up to the

position of Lead Artist on Spawn for the Game Boy Color. Jason then returned to

school to study film at the Vancouver Film School, where the shot he wrote, directed,

and produced was selected as a finalist for the BC Film Director Internship Program.

Games were never far away from his thoughts and with his new cinematic skills

in hand, Jason returned to the industry as a Level and Game Designer at Radical

Entertainment. While there, Jason became a proficient scripter, working on several

acclaimed titles including Hulk, Hulk Ultimate Destruction, and The Simpsons:

Hit & Run. Since 2005, Jason has been a teacher at the Art Institute of Vancouver,

and is currently a senior faculty member in the Game Art and Design program. In

his spare time, he develops indie games, dabbles in web and graphic design, is the

webmaster for the Vancouver chapter of ACM SIGGRAPH, and occasionally blogs at

jasonleeelliott.com.

I would like to thank my wife Su and my daughter Pixel, for

allowing me the time to write this book. I would also like to give a

shout out to Bert Dennison for his help with the artwork, and Brian

Werst for all of his music and sound effects used in this book.

About the Reviewers

Dave Hersey has over 35 years of experience in Apple software development, dating

back to the Apple II personal computer in 1977. In 2000, after more than six years in

software engineering at Apple, Dave started Paracoders, Inc., focusing on custom Mac

OS X-based application and driver development. In 2008, Dave's company expanded

into iOS (iPhone) mobile applications, followed by Android applications soon after.

Some bigger named clients include Paramount Home Entertainment, Lionsgate

Entertainment, Seagate, Creative Labs, and Kraft Foods. Most recently, Dave's business

expansion has included additional mobile and server-side platforms as well as support

services. As a result, the custom software development division of Paracoders now

operates as torchlight apps (http://www.torchlightapps.com).

Dave was also a technical reviewer for Creating Games with cocos2d for iPhone 2 by

Packt Publishing, and stays busy with his wife raising 3 children, 3 dogs, 2 parakeets,

and about 25 ducks, at the last count.

Chris Sanyk is a life-long videogame enthusiast, whose love affair with

gaming started in the early 1980s with the Atari 2600 and the golden age of

the arcade. He began designing his first videogame on paper at age six, and

has been using GameMaker since 2010. He is an active member of the Cleveland

Game Developers, the International Game Developers Association, and is a regular

participant in Global Game Jam and Ludum Dare. He blogs and releases his game

projects at http://csanyk.com, and his Twitter handle is @csanyk.

Chris is the coauthor of Wireless Reconnaissance in Penetration Testing by Matt Neely,

Alex Hammerstone, and Chris Sanyk, published by Elsevier Press.

I would like to thank Mike Substelny, for providing me with my

first introduction to GameMaker; my many friends at the Cleveland

Game Developers, for their continued support and camaraderie; the

communities of indie game developers around the world who put

together Global Game Jam, Ludum Dare, and similar events; and

the many designers, engineers, programmers, and artists who've

inspired me over the years and provided me with endless hours of

entertainment, challenge, and frustration, and everyone who has

ever played one of my games.

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: Getting to Know the Studio with Your First Game 7

Making HTML game development easy 7

Setting up the software 8

Our first look at the Studio 10

The Menu 10

The Toolbar 11

The Resource tree 11

The Workspace 11

Exploring the resource editors 11

Loading your art assets with the Sprite Properties editor 12

The wall sprite 12

The player sprite 13

Creating game objects with the Object Properties editor 14

The Wall object 16

The Player object 16

Creating worlds with the Room Properties editor 20

Running the game 23

Introducing code with the Script Properties editor 23

Filling the scene with the Background Properties editor 24

Bringing noise with the Sound Properties editor 27

A little background music 28

Controlling the game with the Overlord 28

The collectible 29

Writing text and the Font Properties editor 32

Creating complex movements with the Path Properties editor 35

Using the Time Line Properties editor to spawn collectibles 38

Tools for debugging your games 41

Using the HTML5 DEBUG console 42

Table of Contents

[ ii ]

Using the Windows version debugger 44

Taking a look at the JavaScript code 45

Summary 47

Chapter 2: Triple 'A' Games: Art and Audio 49

Manufacturing art assets 49

Understanding the image file formats 50

Importing sprite sheets 51

Introducing the image editor 53

Creating backgrounds with tilesets 54

Animating and creating sprites 65

The illusion of action 65

Maximize the sprite space 66

Looping an animation 66

Manufacturing audio 71

Understanding the audio file formats 71

Using the GM:S Audio engine 72

Raising the quality bar 74

Consistency 74

Readability 75

Polish 76

Summary 76

Chapter 3: Shoot 'em Up: Creating a Side-scrolling Shooter 77

Coding conventions 78

Building the player 79

Setting up the player sprite 80

Controlling the player object 82

Building the bullet 85

Firing the bullet 87

Removing bullets from the world 88

Constructing three little enemies 88

Making the enemy parent 88

Building the FloatBot 91

Creating the SpaceMine 93

Making the Strafer 97

Controlling the game with the Overlord 100

Spawning waves of enemies 100

Building the Overlord 102

Dealing with the life and death of the player 104

Setting up the win condition 105

Respawning with a Ghost object 106

Table of Contents

[ iii

]

Drawing the user interface 109

Adding the finishing details to the game 113

Adding the game music 113

Making the background move 114

Creating the explosions 115

Summary 117

Chapter 4: The Adventure Begins 119

Creating animated characters 120

Simplifying the character movement 120

Implementing a melee attack 124

Navigating between rooms 126

Setting up the rooms 126

Creating Room Portals 129

Teleporting a persistent player 132

Bringing enemies to life 133

Summoning the Ghost Librarian 133

Building a wandering Brawl 140

Creating the Coach 146

Adding finishing details to the game 157

Summary 159

Chapter 5: Platform Fun 161

Structuring systems-based code 161

Creating gravity 162

Building an animation system 163

Creating a collision forecasting system 166

Checking the keyboard 169

Building the player 169

Setting up the room 177

Building a boss battle 179

Creating the indestructible Gun 179

Constructing the first phase: The Cannons 184

Building the second phase: The giant LaserCannon 190

Setting the final stage: The shielded Boss Core 195

Winding it up 200

Summary 201

Chapter 6: Toppling Towers 203

Understanding the physics engine 203

Activating the world 204

Defining properties with fixtures 205

Connecting objects with Joints 210

Table of Contents

[ iv

]

Applying forces to objects 214

Building a tower toppling game 219

Constructing the Pillars and Debris 219

Breaking the Pillars into Debris 224

Adding in the collision sounds 229

Building the demolition equipment 232

Creating a Wrecking Ball 232

Making a Magnetic Crane 235

Completing the game 239

Setting the win condition 240

Creating the Equipment Menu 245

Constructing the towers 250

Summary 253

Chapter 7: Dynamic Front Ends 255

Setting up the rooms 255

Initializing the main menu 257

Selecting levels with 2D arrays 259

Preparing the Shop using data structures 266

Rebuilding the HUD 272

Adding risk and reward to destruction 279

Adding introductory text to each level 286

Saving the player's progress 290

Understanding local storage 290

Writing to local storage 291

Saving multiple game profiles 294

Summary 297

Chapter 8: Playing with Particles 299

Introducing particle effects 299

Understanding particle systems 299

Utilizing particle emitters 300

Applying particles 301

HTML5 limitations 302

Adding particle effects to the game 302

Creating a Dust Cloud 302

Adding in Shrapnel 306

Making the TNT explosion 309

Cleaning up the particles 313

Summary 314

Table of Contents

[ v ]

Chapter 9: Get Your Game Out There 315

Releasing a game on your own site 315

Creating the application 315

Hosting the game 317

Uploading the game with FTP 318

Integrating with Facebook 321

Adding a Facebook login button 325

Tracking the game with Flurry Analytics 329

Setting up Flurry Analytics 330

Tracking events in the game 332

Sending the data to Flurry 334

Understanding the Analytics 335

Making money with your games 337

Summary 338

Index 339