LUCA GALLI@Leyart86

PLAYER ONEVideogame Design for allIntroduction to HTML5

Game Programming with ImpactJS

WHY CHOOSING HTML5 FOR WEB GAMES?

WHY CHOOSING HTML5 FOR WEB GAMES?

No need to install external plugins (e.g. Unity)

Crossplatform Development & Deployment with no additional costs

(Licencing for Unity, UDK and similars is a nightmare)

Optional Installation: the distribution of HTML5 games depends solely

upon the developer; live updates are possible if online distributed, cross

deployment as hybrid applications

...but still a futuristic technology, even if we are getting there

WHAT IF I WANT TO START FROM SCRATCH?

Starting from scratch is certainly possible but not a good idea if you want to start developing a game quickly:

Games require a lot of images, sound effects, libraries and other resources that are loaded asynchronously; the Javascript code will start executing before all the resources have been loaded. This results in popping images and sound effect not played when they should.Solution: create a preloader that defers script execution until all the resources have been downloaded

Different machines and browsers will run the game at different speeds. Animations and movement speeds should be independent of the frame rate the game is running at

You have to handle different resolutions targeting different devices (e.g. Desktop, Mobile...)

Lesson: There is a lot of boilerplate code that every game needs to work properly. No need to reinvent the wheel: Use a Framework!

Further details on:http://msdn.microsoft.com/en-us/hh563503

WHAT IS IMPACTJS?

JavaScript game framework.

Impact takes advantage of the modern browser’s Canvas element in order to create high-performance 2D games on the Web and even mobile.

Easy to pick up good code examples, active community, robust level editor

Why choosing it if it’s commercial?

• Once you buy the license, the engine source code it’s yours to be modified at will.

• You can dive into the code and actually read it, without jumping back and forth between dozens of layers of abstractions. Other game engines are more convoluted and don't make it as clear what a particular piece of code is doing.

• Accessible and consistent API that does not make use of cumbersome and obscure abstractions.

• Performance monitoring tools integrated within the engine

• For these reasons, Impact is a good fit if you want to LEARN about game engines or even Javascript programming in general.

LET’S START...

Must have:

• PHP

• The level editor has a php dependence for saving levels and baking the

game, and it’s a core tool.

• Apache

• Necessary for hosting the game locally and testing it out while developing

• IDEs

• Impact has no IDE dependencies; you can create your games with any

simple text editor.

• Hint: As Politecnico’s Students you have free access to the Jetbrains suite,

use it!

• Browsers

• Any modern browser with canvas and audio tag support will do but Webkit

based ones such as Chrome will offer better performances.

LET’S START...Handy Tools:

• IntelXdk: Development Framework for HTML5 Applications with devices emulation

• Shoebox: to handle spritesheets generation

• Spartan: Pixel Art animation software and procedurally generated textures

• Spriter: an editor for cutout animations

• Cxfr: Tool for dummies to create sound effects

APACHE/PHP/MYSQL

There are a number of possible choices to have such a stack, I

prefer a quick and easy environment just to start as soon as

possible:

DOWNLOAD AND DEPLOY THE ENGINE

Extract the zip file containing the engine and the editor, take the

«Impact» folder, rename it as you wish (the name of your game

could be a good idea) and place it in the root location of your

server, for XAMPP:

"your installation location"\xampp\htdocs

DIRECTORY STRUCTURE

media/ Contains Images, Sounds, Music files

lib/ Hosts the Javascript Files

lib/game/ Hosts the code of the game

lib/game/entities/ Hosts the code for the entities

lib/game/levels/ Hosts the levels of the game

lib/impact/ Hosts the Game Engine Libraries

lib/weltmeister/ Hosts the Level Editor Libraries

TEST THE ENVIRONMENT:

http://localhost/impact

THE INDEX FILE

THE MAIN.JS FILE

IMPACT MODULES

1 ig.module(

2 'game.main'

3 )

4 .requires(

5 'impact.game',

6 'impact.image',

7 'game.other-file'

8 )

9 .defines(function(){

10 // code for this module

11 });

Natively, javascript has not a way to load other javascript files within an object,

for this reason impact has implemented its own include system, similar in a way

to other Javascript libraries that load modules and dependeces (e.g.

Require.js). Modules and their dependencies typically reside in the lib/ folder of

your Impact project directory, and subdirectories are included in a path to these

files using object-model dot syntax. Defines the module name that corresponds

to the file name. Therefore, the main.js file

sits in the lib/game/main.js

Any additional files that have to be loaded

at runtime, before the module’s body and

define function. Are essentially the libraries

that we need to use when creating a game

The last step the module takes is to

execute the function passed to the

.defines() method.

CLASSES IN IMPACT

Javascript does not have a real notion of a traditional class structure like

the one you could have in other OOP languages, since it is a prototypal

language; everything is an Object.

This is the blessing and curse of Javascript, making it incredibly flexible

but also extremely difficult to structure the code in a reusable way.

Impact classes are derived from John Resig’s Javascript Inheritance

code, extended with deep copying of properties and static instantations

For further information regarding OOP in Javascript, refer to:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-

introduction_to_JavaScript

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-

Oriented_JavaScript

• http://www.crockford.com/javascript/private.html

• http://phrogz.net/js/classes/OOPinJS.html

CLASSES IN IMPACT

// Create a new class "Person"

var Person = ig.Class.extend({

name: '',

init: function( name ) {

this.name = name;

}

});

// Instantiate an object of the first class

var e = new Person('John Doe');

e.name; // => John Doe

// Extend the "Person" class

var Zombie = Person.extend({

init: function( name ) {

this.parent( 'Zombie: ' + name );

}

});

// Instantiate a Zombievar p = new Zombie('John Doe');

p.name; // => Zombie: John Doe

CORE CLASSES: THE IMPACT ENGINE SOURCE CODE

THE GAME LOOP

A game loop runs continuously during gameplay. Each turn of the loop,

it processes user input without blocking, updates the game state,

and renders the game. It tracks the passage of time to control the rate of

gameplay.

Actually more considerations could be done (like fixed or variable time

steps) , but we will not dig through all the details…

http://gameprogrammingpatterns.com/game-loop.html

IMPACT.JS -> IG NAMESPACE

the ig object provides the Module

definition and loading capabilities as

well as some utility functions.

ig is not an instance of a ig.Class, but

just a simple JavaScript object and thus

can't be subclassed.

Impact extends some of JavaScripts

native objects, such as Number, Array

and Function.

ANIMATION

An ig.Animation object takes care of

animating an Entity or Background Map tile.

Frames from an animation sheet – an image

with all animation frames – are drawn as

specified by the animations frameTime and

sequence.

BACKGROUND MAP

An ig.BackgroundMap draws tiles from a Tileset, as indicated by its 2D

data Array.

The size of the tileset image must a multiple of the tilesize, otherwise

Impact will get confused with the tile numbering. E.g. with a tilesize of 32

the width and height of your tileset image should be one of: 32, 64, 96,

128…

• You can either create a

BackgroundMap by hand, or use the

ig.Game class' .loadLevel() method,

which takes the save data from the

level editor and creates

BackgroundMaps according to it.

COLLISION MAP

An ig.Collision takes a 2D tilemap and

allows tracing against it for collisions.

The ig.Game class' .loadLevel() method

takes the save data from Weltmeister

and creates a CollisonMap if present.

By default, all entities trace against the

ig.game.collisionMap as part of their

update cycle.

ENTITY

Interactive objects in the game world are typically

subclassed from this base entity class. It provides

animation, drawing and basic physics. Subclassing

your entities from ig.Entity ensures that it can be

added to the game world, react to the collision map

and other entities and that it can be used in the

editor.

GAME

ig.Game is the main hub for your game. It hosts all currently active

entities, background maps and a collision map. You can subclass your

own Game Class from ig.Game.

Its .update() and .draw() methods take care of collision detection,

checking entities against each other and drawing everything to the

screen.

INPUT

ig.Input handles all Keyboard and Mouse input.

You can bind keys to specific actions and then ask if one of these actions is currently held down (.state()) or was just pressed down after the last frame (.pressed()).

Note that an instance of ig.Input is automatically created at ig.input(lowercase) by the ig.main() function.

// On game start

ig.input.bind( ig.KEY.UP_ARROW, 'jump' );

// In your game's or entity's update() method

if( ig.input.pressed('jump') ) {

this.vel.y = -100;

}

SYSTEM

ig.System takes care of starting and stopping

the run loop and calls the .run() method on

the current Game object. It also does the

housekeeping for ig.Input and provides some

utility methods.

An instance of ig.System is automatically

created at ig.system (lowercase) by the

ig.main() function.

AND MORE...

Several other classes are present in the

Engine:

Loader: takes care of preloading the

resources and showing a loading bar

Music, Sound, Soundmanager to handle

sounds within the game

Timer to handle timers and time intervals

Font to draw text based on bitmap fonts into

the canvas

• The Sequence

Diagram describes

the necessary

interactions between

the basic classes to

start a game loop

• Classes for handling

sounds have been

omitted for simplicity

IMPACTJS GAME ENGINE FLOW: SEQUENCE DIAGRAM

IMPACT GAME ENGINE FLOW SUMMARIZED – PT.1

As soon as you start your game, Impact will set up an interval that calls

the ig.system.run() method 60 times per second. This method does some

housekeeping stuff and then calls your game's .run() method - which, by

default, just calls .update() and .draw() on itself.

The ig.Game's .draw() method is pretty boring: it just clears the screen

and calls .draw() on each background layer and entity.

The .update() method updates the background layer positions and - this is

where it gets interesting - calls .update() on each entity. The default

.update() method of an entity moves it according to it's physics properties

(position, velocity, bounciness...) and takes the game's collision map into

account.

IMPACT GAME ENGINE FLOW SUMMARIZED – PT.2

After all entities have been updated, the game's .checkEntities() method is

called. This resolves all dynamic collisions - that is, Entity vs. Entity

collisions. It also calls an entities .check() method, if it overlaps with

another entity and "wants" checks (see the Class Reference for more

details).

You can overwrite any of these methods in your own ig.Entity and

ig.Game sub-classes - you can provide your own logic and then, if you

want, call the original methods with this.parent().

Remember, this all is happening for each and every frame. That is (if the

browser can keep up) 60 times per second.

TEST THE EDITOR

http://localhost/test/weltmeister.html

CODING MAGIC!

Metroidvania Like

Game

IMPACT++

● Free Boilerplate for

ImpactJs

● Dynamic Lights, AI,

Pathfinding and

optimizations for

ImpactJs

QUESTIONS?

REFERENCES, BIBLIOGRAPHY, USEFUL RESOURCES

http://impactjs.com/documentation

http://html5devstarter.enclavegames.com/

http://www.html5gamedevelopment.com/

http://gamemechanicexplorer.com/

https://hacks.mozilla.org/2013/09/getting-

started-with-html5-game-development/

http://www.pixelprospector.com/

http://html5gameengine.com/

http://www.jsbreakouts.org/

Free HTML5 Game Development Course

from Google’s Gurus:

https://www.udacity.com/course/cs255