CuuDuongThanCong.com https://fb.com/tailieudientucntt Table of Contents HTML5 Game Development with ImpactJS Credits Foreword About the Authors About the Reviewers www.PacktPub.com Support files, eBooks, discount offers and more Why Subscribe? Free Access for Packt account holders Preface What this book covers What you need for this book Who this book is for Conventions Reader feedback Customer support Downloading the example code Errata Piracy Questions Firing Up Your First Impact Game Installing a XAMPP server Installing the game engine: ImpactJS Choosing a script editor Running the premade game 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 Debugging with ImpactJS Which helpful tools are out there Ejecta AppMobi PhoneGap lawnchair Scoreoid Playtomic one.com webhost CuuDuongThanCong.com https://fb.com/tailieudientucntt Summary Introducing ImpactJS Building your own levels Creating, loading, and saving levels in Weltmeister Layers and the z axis Adding and removing entities and objects The collision layer Connecting two different levels Objects – playable and non-playable characters The ImpactJS entity Setting up player controls Position, acceleration, and speed The game's graphics: sprites and animation sheets Spawning, health, and death The camera view The game canvas Free to move camera Automatically following camera Adding music and sound effects Playing background music Introducing sound effects Game physics with Box2D Gravity and force Collision impact and bounciness Summary Let's Build a Role Playing Game The RPG game setting Building an RPG level Adding a playable character Introducing a defeatable opponent Giving the player some weapons Spawning a projectile Causing harm with a projectile Bringing your NPCs to life with artificial intelligence The NPC's behavior The NPC's decision making process Pickup items to help out your player Healing your player with a potion Becoming rich with coins Keeping score for player feedback Transitioning from one area to another NPCs and conversation The speech balloon CuuDuongThanCong.com https://fb.com/tailieudientucntt Adding a talking non-playable character The final battle Summary Let's Build a Side Scroller Game The side scroller game setting Preparing the game for Box2D Building a side scroller level The playable character Adding a minor foe Introducing formidable weapons Shooting a projectile Building an actual bomb Artificial intelligence Pickup items Adding a normal crate Implementing a healing crate Keeping score Transitioning from one level to another The final battle Summary Adding Some Advanced Features to Your Game The Start and Game-over screen The game's Start screen The Victory and Game-over screens More advanced debugging options Short introduction to unit testing Adding your own debug panel to the ImpactJS debugger Handling game data Adding data to your game Using cookies to store data on the player's computer Local storage Using lawnchair as a versatile way of storing data Extra functionalities for the RPG Moving the player with a mouse click Adding intelligent spawn locations Introducing basic conversation Adding a basic Head-Up Display Artificial intelligence: The hive mind Implementing Playtomic for game analytics Summary Music and Sound Effects Making or buying the music Buying tunes and sound effects CuuDuongThanCong.com https://fb.com/tailieudientucntt Making a basic tune using FL Studio Adding background music to your game Playing a sound when an action has happened Tips when using sound files in your game Summary Graphics Making/buying the graphics Where to buy graphics Introduction to vector graphics Creating your own avatar using Adobe Photoshop Adding your creation to the RPG Hints for graphics in HTML5 Summary Adapting Your HTML5 Game to the Distribution Channels Preparing your game for the web browser Preparing our game for mobile web browsers Turning the game into a web app for the Google Chrome Web Store Pushing your game to Android's Google play store Making your game available on Facebook Direct canvas game acceleration with AppMobi Summary Making Money with Your Game Your game development strategy Making money with game apps Google Play iOS App Store The Chrome Web Store In-game advertising Selling distribution rights with MarketJS Summary Index CuuDuongThanCong.com https://fb.com/tailieudientucntt HTML5 Game Development with ImpactJS CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt Indexer Hemangini Bari Production Coordinator Arvindkumar Gupta Graphics Valentina Dsilva Cover Work Arvindkumar Gupta CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 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 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 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt Google Project ID about / Pushing your game to Android's Google play store Google webmaster tool / Turning the game into a web app for the Google Chrome Web Store graphics in HTML5 tips / Hints for graphics in HTML5 H healthpotion entity, RPG / Healing your player with a potion hive mind intelligence about / Artificial intelligence: The hive mind HTML5 local storage using, without lawnchair application / Using cookies to store data on the player's computer HTML game preparing, for web browser / Preparing your game for the web browser preparing, for mobile web browsers / Preparing our game for mobile web browsers turning, to web app for Google Chrome Web Store / Turning the game into a web app for the Google Chrome Web Store pushing, to Android Google play store / Pushing your game to Android's Google play store making available, on Facebook / Making your game available on Facebook direct canvas acceleration, implementing with AppMobi / Direct canvas game acceleration with AppMobi distribution channels / Making money with game apps HUD plugin adding to RPG / Adding a basic Head-Up Display I IDE about / Choosing a script editor ig.assert() function / Short introduction to unit testing ig.cookie array / Using cookies to store data on the player's computer CuuDuongThanCong.com https://fb.com/tailieudientucntt ig.defines() method / Adding a playable character ig.game.addCoin() method / Keeping score for player feedback ig.game.spawnEntity method / Spawning, health, and death ig.input.pressed / Adding a playable character ig.input.state / Adding a playable character ig.Lawnchair() method / Using lawnchair as a versatile way of storing data ig.module() method / Adding a playable character ig.requires() method / Adding a playable character ig.spawnlocations variable / Adding intelligent spawn locations ig.system.setGame() function / The Victory and Game-over screens IIS (Internet Information Services) / Installing a XAMPP server Impact game debugging, with browser and ImpactJS / Debugging your game with the browser and ImpactJS debugging, with browser / Debugging with the browser debugging, with ImpactJS / Debugging with ImpactJS player controls, setting up / Setting up player controls Start and Game-over screen / The Start and Game-over screen game start screen, adding / The game's Start screen victory screen, adding / The Victory and Game-over screens debugging options / More advanced debugging options game data, handling / Handling game data extra functionalities, for RPG / Extra functionalities for the RPG music, creating / Making or buying the music music, buying / Making or buying the music tunes and sound effects, buying / Buying tunes and sound effects basic tune, creating FL Studio used / Making a basic tune using FL Studio background music, adding / Adding background music to your game sound, playing when action happens / Playing a sound when an action has happened ImpactJS installing / Installing the game engine: ImpactJS tools / Which helpful tools are out there Ejecta / Which helpful tools are out there, Ejecta PhoneGap / Which helpful tools are out there, PhoneGap lawnchair / Which helpful tools are out there, lawnchair Scoreoid / Which helpful tools are out there, Scoreoid Playtomic / Which helpful tools are out there, Playtomic AppMobi / AppMobi webhost / one.com webhost levels, building / Building your own levels CuuDuongThanCong.com https://fb.com/tailieudientucntt objects / Objects – playable and non-playable characters positioning / Position, acceleration, and speed acceleration, setting / Position, acceleration, and speed speed, setting / Position, acceleration, and speed camera view / The camera view music and sound effects, adding / Adding music and sound effects game physics, with Box2D / Game physics with Box2D unit testing / Short introduction to unit testing ImpactJS debugger custom debug panel, adding / Adding your own debug panel to the ImpactJS debugger ImpactJS entity about / The ImpactJS entity Void entity / The ImpactJS entity in-game advertising about / In-game advertising Google AdSense / In-game advertising Ad4Game / In-game advertising summary / In-game advertising increaseScore function / Keeping score for player feedback init() function / Adding a playable character Inkscape about / Introduction to vector graphics downloading / Introduction to vector graphics inputnumber variable / Short introduction to unit testing intelligent spawn locations adding, to RPG / Adding intelligent spawn locations iOS App Store about / Making money with game apps, iOS App Store versus, Google Play / iOS App Store iOSImpact / Ejecta J JSON about / Debugging your game with the browser and ImpactJS CuuDuongThanCong.com https://fb.com/tailieudientucntt K kill() function / Causing harm with a projectile, Building an actual bomb kill() method / Spawning, health, and death komodo edit about / Choosing a script editor L LAMP about / Installing a XAMPP server lastpressed variable / Spawning a projectile lawnchair about / lawnchair advantages / lawnchair working / lawnchair URL / lawnchair lawnchair application used, for storing data / Using lawnchair as a versatile way of storing data downloading / Using lawnchair as a versatile way of storing data League Of Legends about / Google Play level, Impact game building / Building your own levels creating / Creating, loading, and saving levels in Weltmeister Layers menu / Layers and the z axis z axis / Layers and the z axis entities and objects, adding / Adding and removing entities and objects entities and objects, removing / Adding and removing entities and objects collision layer / The collision layer levels, connecting / Connecting two different levels level, RPG building / Building an RPG level grass layer / Building an RPG level vegetation_back layer / Building an RPG level vegetation_front layer / Building an RPG level CuuDuongThanCong.com https://fb.com/tailieudientucntt collision layer / Building an RPG level level, side scroller game building / Building a side scroller level levelchange entity, RPG about / Transitioning from one area to another levelchange entity, side scroller game about / Transitioning from one level to another levels connecting / Connecting two different levels LMMS about / Making a basic tune using FL Studio download link / Making a basic tune using FL Studio load() function / Adding your own debug panel to the ImpactJS debugger LoadGame / The game's Start screen loadlevel() function / Preparing the game for Box2D, Adding your own debug panel to the ImpactJS debugger local storage about / lawnchair Lord of the Rings / Your game development strategy M main.js update function / Position, acceleration, and speed MAMP about / Installing a XAMPP server manifest.json file / Turning the game into a web app for the Google Chrome Web Store map transition, RPG creating / Transitioning from one area to another map transitioning, side scroller game about / Transitioning from one level to another MarketJS used, for selling distribution rights / Selling distribution rights with MarketJS about / Selling distribution rights with MarketJS CuuDuongThanCong.com https://fb.com/tailieudientucntt URL / Selling distribution rights with MarketJS contract options / Selling distribution rights with MarketJS features / Selling distribution rights with MarketJS menu init() function about / Introducing basic conversation Minecraft about / The RPG game setting Minesweeper / Your game development strategy minor foe adding, to side scroller game / Adding a minor foe MMORPGs (Mass Multiplayer Online Role Playing Game) / The RPG game setting mobile web browsers HTML game, preparing for / Preparing our game for mobile web browsers mousemovement() method / Moving the player with a mouse click mousewalking command / Moving the player with a mouse click movementspeed variable / Moving the player with a mouse click multiple-strategy AI about / Bringing your NPCs to life with artificial intelligence music creating / Making or buying the music buying / Making or buying the music music.play() method / Adding background music to your game music.volume method / Adding background music to your game music and the sound effects adding / Adding music and sound effects background music, playing / Playing background music sound effects / Introducing sound effects MyGame / The game's Start screen MySQL about / Installing a XAMPP server N niche games examples / Your game development strategy CuuDuongThanCong.com https://fb.com/tailieudientucntt about / Your game development strategy properties / Your game development strategy advantage / Your game development strategy disadvantage / Your game development strategy non-exclusive contract / Selling distribution rights with MarketJS notepad++ about / Choosing a script editor npcreply() method about / Introducing basic conversation NPCs, RPG bringing, to life / Bringing your NPCs to life with artificial intelligence speech balloon / The speech balloon talking NPC, adding / Adding a talking non-playable character NPCs behaviour, RPG about / The NPC's behavior NPCs decision making process, RPG about / The NPC's decision making process O object literal notation about / Debugging your game with the browser and ImpactJS objects adding, to game / Adding and removing entities and objects removing, from game / Adding and removing entities and objects spawning / Spawning, health, and death death process / Spawning, health, and death health, deducting / Spawning, health, and death onDeviceReady() event listener / Direct canvas game acceleration with AppMobi one.com webhost about / one.com webhost URL / one.com webhost OpenAL / Ejecta OpenGL / Ejecta OpenScreen function / The game's Start screen OS (operating system) CuuDuongThanCong.com https://fb.com/tailieudientucntt about / PhoneGap outputnumber variable / Short introduction to unit testing P parameters, explosion() method minimum blast-zone / Building an actual bomb maximum blast-zone / Building an actual bomb blast damage / Building an actual bomb blastforcex / Building an actual bomb blastforcey / Building an actual bomb PayPal about / PhoneGap Perl about / Installing a XAMPP server PhoneGap about / PhoneGap URL / PhoneGap PHP about / Installing a XAMPP server pickup items, side scroller game normal crate, adding / Adding a normal crate healing crate, implementing / Implementing a healing crate Pixlr about / Creating your own avatar using Adobe Photoshop URL / Creating your own avatar using Adobe Photoshop PlanetSide about / Google Play playable and non-playable characters creating / Objects – playable and non-playable characters, The ImpactJS entity playable character adding, to RPG / Adding a playable character adding, to side scroller game / The playable character CuuDuongThanCong.com https://fb.com/tailieudientucntt player.js init() function / Position, acceleration, and speed player.mousewalking variable / Moving the player with a mouse click player.takemouseinput variable / Moving the player with a mouse click player controls setting up / Setting up player controls Playtomic about / Playtomic, Implementing Playtomic for game analytics URL / Playtomic, Implementing Playtomic for game analytics implementing, for game analytics / Implementing Playtomic for game analytics positioning, objects about / Position, acceleration, and speed premade game running / Running the premade game R ready() function / Adding your own debug panel to the ImpactJS debugger receiveDamage() method / Spawning, health, and death receive damage function / The NPC's behavior requires() method / Introducing a defeatable opponent revenue share / Selling distribution rights with MarketJS Rockstar about / Your game development strategy Role Playing Game (RPG) setting / The RPG game setting level, building / Building an RPG level playable character, adding / Adding a playable character defeatable opponent, adding / Introducing a defeatable opponent weapons, adding / Giving the player some weapons items, picking up for player / Pickup items to help out your player player, healing with potion / Healing your player with a potion coin entity / Becoming rich with coins score, monitoring / Keeping score for player feedback map transition, creating / Transitioning from one area to another final battle / The final battle final Boss entity / The final battle RPGs (Role Playing Game) / Building your own levels CuuDuongThanCong.com https://fb.com/tailieudientucntt S saveScore() function / Using lawnchair as a versatile way of storing data saveScore() method / Implementing Playtomic for game analytics score, RPG monitoring / Keeping score for player feedback score, side scroller game monitoring / Keeping score Scoreoid about / Scoreoid leaderboards / Scoreoid player login / Scoreoid ingame notifications / Scoreoid URL / Scoreoid script editor selecting / Choosing a script editor script editors Eclipse / Choosing a script editor notepad++ / Choosing a script editor komodo edit / Choosing a script editor sublime edit / Choosing a script editor Textmate / Choosing a script editor Xcode / Choosing a script editor setCookie() function / Using cookies to store data on the player's computer setHealth() function / Using cookies to store data on the player's computer setMaxHealth() method / Adding a basic Head-Up Display setScore() function / Using lawnchair as a versatile way of storing data setUserName() function / Using cookies to store data on the player's computer shotgun strategy about / Your game development strategy advantages / Your game development strategy limitations / Your game development strategy side scroller game about / The side scroller game setting setting / The side scroller game setting preparing, for Box2D / Preparing the game for Box2D level, building / Building a side scroller level CuuDuongThanCong.com https://fb.com/tailieudientucntt playable character / The playable character minor foe, adding / Adding a minor foe spawnEntity() function / Adding a minor foe weapons, adding / Introducing formidable weapons artificial intelligence, adding / Artificial intelligence pickup items / Pickup items score, monitoring / Keeping score map transitioning / Transitioning from one level to another final battle / The final battle boss entity / The final battle single strategy AI about / Bringing your NPCs to life with artificial intelligence Skyrim about / The RPG game setting sniper strategy about / Your game development strategy sortEntitiesDeferred() method / Position, acceleration, and speed sound playing, when action happens / Playing a sound when an action has happened sound files tips, for using in game / Tips when using sound files in your game spawnEntity method / Spawning a projectile spawnIf() method / Adding intelligent spawn locations speed, objects setting up / Position, acceleration, and speed sprite about / The game's graphics: sprites and animation sheets used, for enhancing game graphics / The game's graphics: sprites and animation sheets Sprites4games about / Where to buy graphics URL / Where to buy graphics StarCraft about / Your game development strategy Star Wars / Your game development strategy CuuDuongThanCong.com https://fb.com/tailieudientucntt store.save() method / Using lawnchair as a versatile way of storing data strategies about / Bringing your NPCs to life with artificial intelligence sublime edit about / Choosing a script editor submitComplete() function / Implementing Playtomic for game analytics substractprojectile() function / Keeping score for player feedback T Talkie about / Adding a talking non-playable character Tetris / Your game development strategy textballoon entity, RPG about / The speech balloon Textmate about / Choosing a script editor The Smurfs games about / Google Play this.container.innerHTML function / Adding your own debug panel to the ImpactJS debugger this.parent() about / The speech balloon this.username command / Using cookies to store data on the player's computer Tictacti about / In-game advertising example / In-game advertising tilesets about / Creating, loading, and saving levels in Weltmeister downloading / Where to buy graphics tips, graphics in HTML5 about / Hints for graphics in HTML5 tips, sound files about / Tips when using sound files in your game CuuDuongThanCong.com https://fb.com/tailieudientucntt trace() function / Adding intelligent spawn locations trigger entity, RPG about / Transitioning from one area to another tunes and sound effects buying / Buying tunes and sound effects U unit testing about / Short introduction to unit testing update() function / Adding a playable character, Causing harm with a projectile V variables, init() method this.selectedChoice / Introducing basic conversation this.cursorLeft / Introducing basic conversation this.cursorRight / Introducing basic conversation this.cursorLeftWidth / Introducing basic conversation this.cursorRightWidth / Introducing basic conversation _choices[i].labelWidth / Introducing basic conversation this.Menubackground / Introducing basic conversation variables, menu init() function _fonrt / Introducing basic conversation _choice_spacing / Introducing basic conversation _choices / Introducing basic conversation _entity / Introducing basic conversation vector graphic design about / Introduction to vector graphics drawing / Introduction to vector graphics vegetation_back layer, RPG about / Building an RPG level vegetation_front layer, RPG about / Building an RPG level victory screen CuuDuongThanCong.com https://fb.com/tailieudientucntt adding / The Victory and Game-over screens virtual buttons about / Preparing our game for mobile web browsers W WAMP server installing / Installing a XAMPP server weapons adding, to RPG / Giving the player some weapons adding, to side scroller game / Introducing formidable weapons weapons, RPG projectile, spawning / Spawning a projectile harm, causing with projectile / Causing harm with a projectile weapons, side scroller game adding / Introducing formidable weapons projectile, shooting / Shooting a projectile bomb, building / Building an actual bomb web app about / Turning the game into a web app for the Google Chrome Web Store web browser HTML game, preparing for / Preparing your game for the web browser webhost about / one.com webhost Webkit-SQLite / Using lawnchair as a versatile way of storing data Weltmeister / Debugging with ImpactJS levels, creating / Creating, loading, and saving levels in Weltmeister level1 level / Creating, loading, and saving levels in Weltmeister levels, loading / Creating, loading, and saving levels in Weltmeister levels, saving / Creating, loading, and saving levels in Weltmeister layers menu / Layers and the z axis collision layer / Layers and the z axis Is collision layer option / Layers and the z axis Repeat option / Layers and the z axis Link with Collision option / Layers and the z axis CuuDuongThanCong.com https://fb.com/tailieudientucntt layers, rearranging / Layers and the z axis window.Menu class / Introducing basic conversation WordWrap class about / The speech balloon World of Tanks about / Google Play World of Warcraft about / Your game development strategy X X about / Installing a XAMPP server XAMPP about / Installing a XAMPP server XAMPP server downloading / Installing a XAMPP server installing / Installing a XAMPP server Xcode about / Choosing a script editor, PhoneGap XDK (Cross platform Development Kit) / AppMobi CuuDuongThanCong.com https://fb.com/tailieudientucntt ... Published by Packt Publishing Ltd Livery Place 35 Livery Street Birmingham B3 2PB, UK ISBN 97 8-1 -8 496 9-4 5 6-8 www.packtpub.com Cover Image by Shutterstock CuuDuongThanCong.com https://fb.com/tailieudientucntt... 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... a Role Playing Game is a guide to building a top-down game from the ground up Chapter 4, Let's Build a Side-Scroller Game helps us build a side-scroller game from scratch, making use of the Box2D