Introduction to html5 game programming with ImpactJs
36
-
Upload
luca-galli -
Category
Education
-
view
1.212 -
download
3
Transcript of Introduction to html5 game programming with ImpactJs
Mobile Applications Development – HTML5 Games
Click here to add textWhy choosing HTML5 for Web Games?
Mobile Applications Development – HTML5 Games
Click here to add textWhy 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
Mobile Applications Development – HTML5 Games
Click here to add textWhat 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
Mobile Applications Development – HTML5 Games
Click here to add textWhat 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.
Mobile Applications Development – HTML5 Games
Click here to add textLet’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.
Mobile Applications Development – HTML5 Games
Click here to add textLet’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
Mobile Applications Development – HTML5 Games
Click here to add textApache/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:
Mobile Applications Development – HTML5 Games
Click here to add textDownload 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
Mobile Applications Development – HTML5 Games
Click here to add textDirectory Structure
● media/ Contains Images, Sounds, Musics
● 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
Mobile Applications Development – HTML5 Games
Click here to add textTest the environment:
● http://localhost/impact
Mobile Applications Development – HTML5 Games
Click here to add textThe Index File
Mobile Applications Development – HTML5 Games
Click here to add textThe main.js file
Mobile Applications Development – HTML5 Games
Click here to add textImpact 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 module11 });
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 to 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.
Mobile Applications Development – HTML5 Games
Click here to add textClasses 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
Mobile Applications Development – HTML5 Games
Click here to add textClasses 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
Mobile Applications Development – HTML5 Games
Click here to add textCore Classes: The Impact Engine Source Code
Mobile Applications Development – HTML5 Games
Click here to add textThe 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
Mobile Applications Development – HTML5 Games
Click here to add textImpact.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.
Mobile Applications Development – HTML5 Games
Click here to add textAnimation
● 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.
Mobile Applications Development – HTML5 Games
Click here to add textBackground 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.
Mobile Applications Development – HTML5 Games
Click here to add textCollision 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.
Mobile Applications Development – HTML5 Games
Click here to add textEntity
● 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.
Mobile Applications Development – HTML5 Games
Click here to add textGame
● 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.
Mobile Applications Development – HTML5 Games
Click here to add textInput
● 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 startig.input.bind( ig.KEY.UP_ARROW, 'jump' );
// In your game's or entity's update() methodif( ig.input.pressed('jump') ) {
this.vel.y = -100;}
Mobile Applications Development – HTML5 Games
Click here to add textSystem
● 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.
Mobile Applications Development – HTML5 Games
Click here to add textAnd 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
Mobile Applications Development – HTML5 Games
Click here to add text
• 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
Mobile Applications Development – HTML5 Games
Click here to add textImpact 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.
Mobile Applications Development – HTML5 Games
Click here to add textImpact 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.
Mobile Applications Development – HTML5 Games
Click here to add textTest the editor
● http://localhost/test/weltmeister.html
Mobile Applications Development – HTML5 Games
Click here to add text
Coding Magic!
Metroidvania Like Game
Mobile Applications Development – HTML5 Games
Click here to add text
• Endless Swarm Game
• Kill the enemies by typing their name
• Exclusive Demofrom the Developer
Mobile Applications Development – HTML5 Games
Click here to add textImpact++
● Free Boilerplate for
ImpactJs
● Dynamic Lights, AI,
Pathfinding and
optimizations for
ImpactJs
Mobile Applications Development – HTML5 Games
Click here to add textQuestions?
Mobile Applications Development – HTML5 Games
Click here to add textReferences, 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
Note: For the students of the course, agreement for 10 ImpactJs licenses for 300$, 30$ per Licence! Email me for details
