Luca Galli presented an introduction to HTML5 game programming using ImpactJS. ImpactJS is a JavaScript game framework that uses the HTML5 Canvas element to create 2D games that can be played on the web or mobile. Key points discussed include: - HTML5 allows for cross-platform game development and deployment without plugins or additional costs. - Using a framework like ImpactJS avoids needing to write boilerplate code from scratch and provides tools to handle issues like asynchronous loading and variable performance across devices. - ImpactJS uses a module system to organize code and classes to structure objects in a prototypal inheritance model. Core classes cover game loop, entities, backgrounds, collisions and input handling. -

1. LUCA GALLI
@Leyart86
PLAYER ONE
Videogame Design for all
Introduction to HTML5
Game Programming with
ImpactJS

2. WHY CHOOSING HTML5 FOR WEB GAMES?

3. 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

4. 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

5. 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.

6. 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.

7. 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

8. 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:

9. 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"xampphtdocs

10. 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

11. TEST THE ENVIRONMENT:
http://localhost/impact

12. THE INDEX FILE

13. THE MAIN.JS FILE

14. 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.

15. 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

16. 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 Zombie
var p = new Zombie('John Doe');
p.name; // => Zombie: John Doe

17. CORE CLASSES: THE IMPACT ENGINE SOURCE CODE

18. 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

19. 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.

20. 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.

21. 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.

22. 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.

23. 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.

24. 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.

25. 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;
}

26. 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.

27. 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

28. • 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

29. 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.

30. 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.

31. TEST THE EDITOR
http://localhost/test/weltmeister.html

32. CODING MAGIC!
Metroidvania Like
Game

33. IMPACT++
● Free Boilerplate for
ImpactJs
● Dynamic Lights, AI,
Pathfinding and
optimizations for
ImpactJs

34. QUESTIONS?

35. 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