SlideShare ist ein Scribd-Unternehmen logo
1 von 36
Downloaden Sie, um offline zu lesen
Luca GalliEmail: luca.galli@polimi.it 
An Introduction to HTML5 Game Programming with ImpactJS
Mobile Applications Development –HTML5 Games 
Click here to add text 
Why choosing HTML5 for Web Games?
Mobile Applications Development –HTML5 Games 
Click here to add text 
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
Mobile Applications Development –HTML5 Games 
Click here to add text 
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 preloaderthat 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 text 
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, Impactis 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 text 
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.
Mobile Applications Development –HTML5 Games 
Click here to add text 
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
Mobile Applications Development –HTML5 Games 
Click here to add text 
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:
Mobile Applications Development –HTML5 Games 
Click here to add text 
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
Mobile Applications Development –HTML5 Games 
Click here to add text 
Directory 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 text 
Test the environment: 
●http://localhost/impact
Mobile Applications Development –HTML5 Games 
Click here to add text 
The Index File
Mobile Applications Development –HTML5 Games 
Click here to add text 
The main.js file
Mobile Applications Development –HTML5 Games 
Click here to add text 
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 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 text 
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
Mobile Applications Development –HTML5 Games 
Click here to add text 
Classes in Impact 
// Create a new class "Person" 
varPerson = ig.Class.extend({ 
name: '', 
init: function( name ) { 
this.name = name; 
} 
}); 
// Instantiate an object of the first class 
vare = new Person('John Doe'); 
e.name; // => John Doe 
// Extend the "Person" class 
varZombie = Person.extend({ 
init: function( name ) { 
this.parent( 'Zombie: ' + name ); 
} 
}); 
// Instantiate a Zombievarp = new Zombie('John Doe'); 
p.name; // => Zombie: John Doe
Mobile Applications Development –HTML5 Games 
Click here to add text 
Core Classes: The Impact Engine Source Code
Mobile Applications Development –HTML5 Games 
Click here to add text 
The Game Loop 
●Agame loopruns continuously during gameplay. Each turn of the loop, it processes user inputwithout blocking,updates the game state, andrenders the game. It tracks the passage of time tocontrol 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 text 
Impact.js -> ig namespace 
●the igobject provides the Module definition and loading capabilities as well as some utility functions. 
●igis not an instance of a ig.Class, but just a simple JavaScript object and thus can't be subclassed. 
●Impact extends some of JavaScriptsnative objects, such as Number, Array and Function.
Mobile Applications Development –HTML5 Games 
Click here to add text 
Animation 
●An ig.Animationobject 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 frameTimeand sequence.
Mobile Applications Development –HTML5 Games 
Click here to add text 
Background Map 
●An ig.BackgroundMapdraws tiles from a Tileset, as indicated by its 2D data Array. 
●The size of the tilesetimage must a multiple of the tilesize, otherwise Impact will get confused with the tile numbering. E.g. with a tilesizeof 32 the width and height of your tilesetimage should be one of: 32, 64, 96, 128… 
•You can either create a BackgroundMapby hand, or use the ig.Gameclass' .loadLevel() method, which takes the save data from the level editor and creates BackgroundMapsaccording to it.
Mobile Applications Development –HTML5 Games 
Click here to add text 
Collision Map 
●An ig.Collisiontakes a 2D tilemapand allows tracing against it for collisions. 
●The ig.Gameclass' .loadLevel() method takes the save data from Weltmeisterand creates a CollisonMapif present. 
●By default, all entities trace against the ig.game.collisionMapas part of their update cycle.
Mobile Applications Development –HTML5 Games 
Click here to add text 
Entity 
●Interactive objects in the game world are typically subclassedfrom this base entity class. It provides animation, drawing and basic physics. Subclassingyour entities from ig.Entityensures 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 text 
Game 
●ig.Gameis 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 text 
Input 
●ig.Inputhandles 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.Inputis 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; 
}
Mobile Applications Development –HTML5 Games 
Click here to add text 
System 
●ig.Systemtakes 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.Inputand provides some utility methods. 
●An instance of ig.Systemis automatically created at ig.system(lowercase) by the ig.main() function.
Mobile Applications Development –HTML5 Games 
Click here to add text 
And more... 
Several other classes are present in the Engine: 
●Loader: takes care of preloading the resources and showing a loading bar 
●Music, Sound, Soundmanagerto handle sounds within the game 
●Timerto handle timers and time intervals 
●Fontto 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 text 
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.
Mobile Applications Development –HTML5 Games 
Click here to add text 
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.Entityand ig.Gamesub-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 text 
Test 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 text 
Impact++ 
●Free Boilerplate for ImpactJs 
●Dynamic Lights, AI, Pathfindingand optimizations for ImpactJs
Mobile Applications Development –HTML5 Games 
Click here to add text 
Questions?
Mobile Applications Development – HTML5 Games 
Click here to add text 
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 
Note: For the students of the course, 
agreement for 10 ImpactJs licenses for 
300$, 30$ per Licence! Email me for details

Weitere ähnliche Inhalte

Was ist angesagt?

2%20-%20Scripting%20Tutorial
2%20-%20Scripting%20Tutorial2%20-%20Scripting%20Tutorial
2%20-%20Scripting%20Tutorialtutorialsruby
 
Y1 gd engine_terminology ig2 game engines
Y1 gd engine_terminology ig2 game enginesY1 gd engine_terminology ig2 game engines
Y1 gd engine_terminology ig2 game enginesLewis Brierley
 
Y1 gd engine_terminology ig2 game engines
Y1 gd engine_terminology ig2 game enginesY1 gd engine_terminology ig2 game engines
Y1 gd engine_terminology ig2 game enginesLewis Brierley
 
Plug yourself in and your app will never be the same (2 hour edition)
Plug yourself in and your app will never be the same (2 hour edition)Plug yourself in and your app will never be the same (2 hour edition)
Plug yourself in and your app will never be the same (2 hour edition)Mikkel Flindt Heisterberg
 
Luis Catald IGDA Sept 2015
Luis Catald IGDA Sept 2015Luis Catald IGDA Sept 2015
Luis Catald IGDA Sept 2015Luis Cataldi
 
Android 3D by Ivan Trajkovic and Dotti Colvin
Android 3D by Ivan Trajkovic and Dotti ColvinAndroid 3D by Ivan Trajkovic and Dotti Colvin
Android 3D by Ivan Trajkovic and Dotti Colvinswengineers
 
Silverlight
SilverlightSilverlight
Silverlightreynolds
 
Making VR games and experiences in Unreal Engine
Making VR games and experiences in Unreal EngineMaking VR games and experiences in Unreal Engine
Making VR games and experiences in Unreal EngineLuis Cataldi
 
On Ramp to Unreal Engine
On Ramp to Unreal EngineOn Ramp to Unreal Engine
On Ramp to Unreal EngineUnreal Engine
 
From Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesFrom Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesPatric Lanhed
 
Intro to unreal with framework and vr
Intro to unreal with framework and vrIntro to unreal with framework and vr
Intro to unreal with framework and vrLuis Cataldi
 
Luis cataldi-siggraph 2015
Luis cataldi-siggraph 2015Luis cataldi-siggraph 2015
Luis cataldi-siggraph 2015Luis Cataldi
 
Migrating to real time - Learning Unreal Engine 4
Migrating to real time - Learning Unreal Engine 4Migrating to real time - Learning Unreal Engine 4
Migrating to real time - Learning Unreal Engine 4Luis Cataldi
 

Was ist angesagt? (17)

2%20-%20Scripting%20Tutorial
2%20-%20Scripting%20Tutorial2%20-%20Scripting%20Tutorial
2%20-%20Scripting%20Tutorial
 
Y1 gd engine_terminology ig2 game engines
Y1 gd engine_terminology ig2 game enginesY1 gd engine_terminology ig2 game engines
Y1 gd engine_terminology ig2 game engines
 
Y1 gd engine_terminology ig2 game engines
Y1 gd engine_terminology ig2 game enginesY1 gd engine_terminology ig2 game engines
Y1 gd engine_terminology ig2 game engines
 
Plug yourself in and your app will never be the same (2 hour edition)
Plug yourself in and your app will never be the same (2 hour edition)Plug yourself in and your app will never be the same (2 hour edition)
Plug yourself in and your app will never be the same (2 hour edition)
 
Luis Catald IGDA Sept 2015
Luis Catald IGDA Sept 2015Luis Catald IGDA Sept 2015
Luis Catald IGDA Sept 2015
 
touch
touchtouch
touch
 
Android 3D by Ivan Trajkovic and Dotti Colvin
Android 3D by Ivan Trajkovic and Dotti ColvinAndroid 3D by Ivan Trajkovic and Dotti Colvin
Android 3D by Ivan Trajkovic and Dotti Colvin
 
Silverlight
SilverlightSilverlight
Silverlight
 
Making VR games and experiences in Unreal Engine
Making VR games and experiences in Unreal EngineMaking VR games and experiences in Unreal Engine
Making VR games and experiences in Unreal Engine
 
On Ramp to Unreal Engine
On Ramp to Unreal EngineOn Ramp to Unreal Engine
On Ramp to Unreal Engine
 
Sikuli
SikuliSikuli
Sikuli
 
From Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesFrom Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holes
 
Intro to unreal with framework and vr
Intro to unreal with framework and vrIntro to unreal with framework and vr
Intro to unreal with framework and vr
 
Luis cataldi-siggraph 2015
Luis cataldi-siggraph 2015Luis cataldi-siggraph 2015
Luis cataldi-siggraph 2015
 
Migrating to real time - Learning Unreal Engine 4
Migrating to real time - Learning Unreal Engine 4Migrating to real time - Learning Unreal Engine 4
Migrating to real time - Learning Unreal Engine 4
 
Js il.com
Js il.comJs il.com
Js il.com
 
HBD
HBDHBD
HBD
 

Andere mochten auch

Moonsubmarine Presentation @ Mobilesoft 2015
Moonsubmarine Presentation @ Mobilesoft 2015Moonsubmarine Presentation @ Mobilesoft 2015
Moonsubmarine Presentation @ Mobilesoft 2015Luca Galli
 
PlayerOne - Seminars Introduction
PlayerOne - Seminars IntroductionPlayerOne - Seminars Introduction
PlayerOne - Seminars IntroductionLuca Galli
 
A Brief Game Jam Survival Guide
A Brief Game Jam Survival GuideA Brief Game Jam Survival Guide
A Brief Game Jam Survival GuideLuca Galli
 
A draw and-guess game to segment images
A draw and-guess game to segment imagesA draw and-guess game to segment images
A draw and-guess game to segment imagesLuca Galli
 
Introduction to Games with a Purpose design and Playtesting
Introduction to Games with a Purpose design and PlaytestingIntroduction to Games with a Purpose design and Playtesting
Introduction to Games with a Purpose design and PlaytestingLuca Galli
 
Matching Game Mechanics and Human Computation Tasks in Games with a Purpose
Matching Game Mechanics and Human Computation Tasks in Games with a PurposeMatching Game Mechanics and Human Computation Tasks in Games with a Purpose
Matching Game Mechanics and Human Computation Tasks in Games with a PurposeLuca Galli
 
Achievement systems explained
Achievement systems explainedAchievement systems explained
Achievement systems explainedLuca Galli
 

Andere mochten auch (7)

Moonsubmarine Presentation @ Mobilesoft 2015
Moonsubmarine Presentation @ Mobilesoft 2015Moonsubmarine Presentation @ Mobilesoft 2015
Moonsubmarine Presentation @ Mobilesoft 2015
 
PlayerOne - Seminars Introduction
PlayerOne - Seminars IntroductionPlayerOne - Seminars Introduction
PlayerOne - Seminars Introduction
 
A Brief Game Jam Survival Guide
A Brief Game Jam Survival GuideA Brief Game Jam Survival Guide
A Brief Game Jam Survival Guide
 
A draw and-guess game to segment images
A draw and-guess game to segment imagesA draw and-guess game to segment images
A draw and-guess game to segment images
 
Introduction to Games with a Purpose design and Playtesting
Introduction to Games with a Purpose design and PlaytestingIntroduction to Games with a Purpose design and Playtesting
Introduction to Games with a Purpose design and Playtesting
 
Matching Game Mechanics and Human Computation Tasks in Games with a Purpose
Matching Game Mechanics and Human Computation Tasks in Games with a PurposeMatching Game Mechanics and Human Computation Tasks in Games with a Purpose
Matching Game Mechanics and Human Computation Tasks in Games with a Purpose
 
Achievement systems explained
Achievement systems explainedAchievement systems explained
Achievement systems explained
 

Ähnlich wie Introduction to html5 game programming with ImpactJs

Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...Himanshu Sharan
 
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...Himanshu Sharan
 
Flutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textFlutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textToma Velev
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Webmasuland
 
(Js) Export your own WebGL Viewer
(Js) Export your own WebGL Viewer(Js) Export your own WebGL Viewer
(Js) Export your own WebGL ViewerJooinK
 
Html5 Game Development with Canvas
Html5 Game Development with CanvasHtml5 Game Development with Canvas
Html5 Game Development with CanvasPham Huy Tung
 
JS digest. Mid-Summer 2017
JS digest. Mid-Summer 2017JS digest. Mid-Summer 2017
JS digest. Mid-Summer 2017ElifTech
 
Android 3.1 - Portland Code Camp 2011
Android 3.1 - Portland Code Camp 2011Android 3.1 - Portland Code Camp 2011
Android 3.1 - Portland Code Camp 2011sullis
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React NativeEric Deng
 
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorOSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorGail Frederick
 
Getting started with immersive technologies
Getting started with immersive technologiesGetting started with immersive technologies
Getting started with immersive technologiesUchechukwu Obimma
 
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014Gil Irizarry
 
HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!Iker Jamardo
 

Ähnlich wie Introduction to html5 game programming with ImpactJs (20)

HTML5 Game Development frameworks overview
HTML5 Game Development frameworks overviewHTML5 Game Development frameworks overview
HTML5 Game Development frameworks overview
 
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
 
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
 
POV | Unity vs HTML5 | Affle Enterprise
POV | Unity vs HTML5 | Affle EnterprisePOV | Unity vs HTML5 | Affle Enterprise
POV | Unity vs HTML5 | Affle Enterprise
 
Flutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textFlutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - text
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
(Js) Export your own WebGL Viewer
(Js) Export your own WebGL Viewer(Js) Export your own WebGL Viewer
(Js) Export your own WebGL Viewer
 
Presentation3
Presentation3Presentation3
Presentation3
 
Html5 Game Development with Canvas
Html5 Game Development with CanvasHtml5 Game Development with Canvas
Html5 Game Development with Canvas
 
JS digest. Mid-Summer 2017
JS digest. Mid-Summer 2017JS digest. Mid-Summer 2017
JS digest. Mid-Summer 2017
 
Silverlight
SilverlightSilverlight
Silverlight
 
Android 3.1 - Portland Code Camp 2011
Android 3.1 - Portland Code Camp 2011Android 3.1 - Portland Code Camp 2011
Android 3.1 - Portland Code Camp 2011
 
mobicon_paper
mobicon_papermobicon_paper
mobicon_paper
 
I dragon-adventures
I  dragon-adventuresI  dragon-adventures
I dragon-adventures
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
 
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorOSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
 
Getting started with immersive technologies
Getting started with immersive technologiesGetting started with immersive technologies
Getting started with immersive technologies
 
Ffd 05 2012
Ffd 05 2012Ffd 05 2012
Ffd 05 2012
 
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
 
HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!
 

Kürzlich hochgeladen

In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationMJDuyan
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxDr. Santhosh Kumar. N
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesMohammad Hassany
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and stepobaje godwin sunday
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
How to Print Employee Resume in the Odoo 17
How to Print Employee Resume in the Odoo 17How to Print Employee Resume in the Odoo 17
How to Print Employee Resume in the Odoo 17Celine George
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapitolTechU
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice documentXsasf Sfdfasd
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxEduSkills OECD
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxKatherine Villaluna
 
How to Filter Blank Lines in Odoo 17 Accounting
How to Filter Blank Lines in Odoo 17 AccountingHow to Filter Blank Lines in Odoo 17 Accounting
How to Filter Blank Lines in Odoo 17 AccountingCeline George
 

Kürzlich hochgeladen (20)

In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive Education
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptx
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming Classes
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and step
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
How to Print Employee Resume in the Odoo 17
How to Print Employee Resume in the Odoo 17How to Print Employee Resume in the Odoo 17
How to Print Employee Resume in the Odoo 17
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptx
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice document
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptx
 
How to Filter Blank Lines in Odoo 17 Accounting
How to Filter Blank Lines in Odoo 17 AccountingHow to Filter Blank Lines in Odoo 17 Accounting
How to Filter Blank Lines in Odoo 17 Accounting
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 

Introduction to html5 game programming with ImpactJs

  • 1. Luca GalliEmail: luca.galli@polimi.it An Introduction to HTML5 Game Programming with ImpactJS
  • 2. Mobile Applications Development –HTML5 Games Click here to add text Why choosing HTML5 for Web Games?
  • 3. Mobile Applications Development –HTML5 Games Click here to add text 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. Mobile Applications Development –HTML5 Games Click here to add text 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 preloaderthat 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. Mobile Applications Development –HTML5 Games Click here to add text 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, Impactis a good fit if you want to LEARN about game engines or even Javascript programming in general.
  • 6. Mobile Applications Development –HTML5 Games Click here to add text 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. Mobile Applications Development –HTML5 Games Click here to add text 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. Mobile Applications Development –HTML5 Games Click here to add text 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. Mobile Applications Development –HTML5 Games Click here to add text 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. Mobile Applications Development –HTML5 Games Click here to add text Directory 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
  • 11. Mobile Applications Development –HTML5 Games Click here to add text Test the environment: ●http://localhost/impact
  • 12. Mobile Applications Development –HTML5 Games Click here to add text The Index File
  • 13. Mobile Applications Development –HTML5 Games Click here to add text The main.js file
  • 14. Mobile Applications Development –HTML5 Games Click here to add text 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 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.
  • 15. Mobile Applications Development –HTML5 Games Click here to add text 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. Mobile Applications Development –HTML5 Games Click here to add text Classes in Impact // Create a new class "Person" varPerson = ig.Class.extend({ name: '', init: function( name ) { this.name = name; } }); // Instantiate an object of the first class vare = new Person('John Doe'); e.name; // => John Doe // Extend the "Person" class varZombie = Person.extend({ init: function( name ) { this.parent( 'Zombie: ' + name ); } }); // Instantiate a Zombievarp = new Zombie('John Doe'); p.name; // => Zombie: John Doe
  • 17. Mobile Applications Development –HTML5 Games Click here to add text Core Classes: The Impact Engine Source Code
  • 18. Mobile Applications Development –HTML5 Games Click here to add text The Game Loop ●Agame loopruns continuously during gameplay. Each turn of the loop, it processes user inputwithout blocking,updates the game state, andrenders the game. It tracks the passage of time tocontrol 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. Mobile Applications Development –HTML5 Games Click here to add text Impact.js -> ig namespace ●the igobject provides the Module definition and loading capabilities as well as some utility functions. ●igis not an instance of a ig.Class, but just a simple JavaScript object and thus can't be subclassed. ●Impact extends some of JavaScriptsnative objects, such as Number, Array and Function.
  • 20. Mobile Applications Development –HTML5 Games Click here to add text Animation ●An ig.Animationobject 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 frameTimeand sequence.
  • 21. Mobile Applications Development –HTML5 Games Click here to add text Background Map ●An ig.BackgroundMapdraws tiles from a Tileset, as indicated by its 2D data Array. ●The size of the tilesetimage must a multiple of the tilesize, otherwise Impact will get confused with the tile numbering. E.g. with a tilesizeof 32 the width and height of your tilesetimage should be one of: 32, 64, 96, 128… •You can either create a BackgroundMapby hand, or use the ig.Gameclass' .loadLevel() method, which takes the save data from the level editor and creates BackgroundMapsaccording to it.
  • 22. Mobile Applications Development –HTML5 Games Click here to add text Collision Map ●An ig.Collisiontakes a 2D tilemapand allows tracing against it for collisions. ●The ig.Gameclass' .loadLevel() method takes the save data from Weltmeisterand creates a CollisonMapif present. ●By default, all entities trace against the ig.game.collisionMapas part of their update cycle.
  • 23. Mobile Applications Development –HTML5 Games Click here to add text Entity ●Interactive objects in the game world are typically subclassedfrom this base entity class. It provides animation, drawing and basic physics. Subclassingyour entities from ig.Entityensures 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. Mobile Applications Development –HTML5 Games Click here to add text Game ●ig.Gameis 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. Mobile Applications Development –HTML5 Games Click here to add text Input ●ig.Inputhandles 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.Inputis 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. Mobile Applications Development –HTML5 Games Click here to add text System ●ig.Systemtakes 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.Inputand provides some utility methods. ●An instance of ig.Systemis automatically created at ig.system(lowercase) by the ig.main() function.
  • 27. Mobile Applications Development –HTML5 Games Click here to add text And more... Several other classes are present in the Engine: ●Loader: takes care of preloading the resources and showing a loading bar ●Music, Sound, Soundmanagerto handle sounds within the game ●Timerto handle timers and time intervals ●Fontto draw text based on bitmap fonts into the canvas
  • 28. 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
  • 29. Mobile Applications Development –HTML5 Games Click here to add text 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. Mobile Applications Development –HTML5 Games Click here to add text 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.Entityand ig.Gamesub-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. Mobile Applications Development –HTML5 Games Click here to add text Test the editor ●http://localhost/test/weltmeister.html
  • 32. Mobile Applications Development –HTML5 Games Click here to add text Coding Magic! Metroidvania Like Game
  • 33. Mobile Applications Development –HTML5 Games Click here to add text •Endless Swarm Game •Kill the enemies by typing their name •Exclusive Demofrom the Developer
  • 34. Mobile Applications Development –HTML5 Games Click here to add text Impact++ ●Free Boilerplate for ImpactJs ●Dynamic Lights, AI, Pathfindingand optimizations for ImpactJs
  • 35. Mobile Applications Development –HTML5 Games Click here to add text Questions?
  • 36. Mobile Applications Development – HTML5 Games Click here to add text 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 Note: For the students of the course, agreement for 10 ImpactJs licenses for 300$, 30$ per Licence! Email me for details