1. TECHNICAL PRESENTATION
Merkur Gaming India Pvt. Ltd.
Noida.
For : Online Gaming Team
Presented By :
Abhishek Singhal
Senior Developer
Online Gaming Team

2. HTML Gaming Frameworks
Insight
● JavaScript 3D game engines is a hot topic right now with everyone
building browser based 3D games using JavaScript, HTML5 and
WebGL technology. The best thing about browser based games is
platform independence they bring in and run on iOS, Android,
Windows or any other platform.
● There are tons of JavaScript resources out there that can be used for
building browser based games using HTML5 and WebGL. However,
selecting the right gaming engine can be a real challenge at times
and can end up making or breaking your project.

3. HTML Gaming Frameworks
Insight

4. ● Construct 2 is an HTML5 game maker, meaning you are not actually writing JavaScript.
Instead, you use actions, events and conditions to do the heavy lifting.
● The engine is heavily tested and used. It has a very active community and new releases
weekly.
HTML Gaming Frameworks
Insight
CONSTRUCT 2 :
IMPACT JS :IMPACT JS :
● ImpactJS is one of the more tested-and-true HTML5 game engines with the initial release all
the way back at the end of 2010. It is very well maintained and updated, and has a good-sized
community backing it. There exists plenty of documentation.
● ImpactJS is designed to work on all devices, including mobile, and has the Ejecta Framework
for publishing games to the iOS App Store with native-like performance.
● The engine includes both a level editor, and debug tools for much faster creation of games

5. EaselJS :
● EaselJS provides a display list to allow you to work with display elements on a canvas as
nested objects. It also provides a simple framework for providing shape based mouse
interactions on elements in the display list.
Phaser :
● Phaser is based heavily on Flixel. It is maintained by Richard Davey (Photon Storm) who has
been very active in the HTML5 community for years.
● The engine is relatively new, but has been actively maintained.
● EaselJS is part of a suite called CreateJS, which includes tools for sounds, preloading,
and tweening.
● The engine is a good choice if you come from a Flash/AS3 background as it is inspired by
Flash.
HTML Gaming Frameworks
Insight

6. Three.js :
Voxel.js :
● If you are developing a 3d game, this is probably the engine for
you.
● voxel.js makes it easy to create 3d voxel games (a la Minecraft). It requires webGL to run.
● The engine is frequently updated and maintained, and offers tools for everything from physics
to user interface to networked multiplayer - all via separate modules.
PlayCanvas :
● PlayCanvas is a cloud-based HTMl5 game engine and editor for 3D games, with a focus on
real-time collaboration.
● Three.js is currently the most widely used 3D/WebGL game engine, developed and maintained
by Mr. doob and AlteredQualia. The goal is to take the complicated webGL bindings and tack on
an easy-to-use framework on top of it.
HTML Gaming Frameworks
Insight

7. HEART OF THE GAME – THE GAME LOOP
All the code that makes the game interactive and dynamic goes in the game loop, but is separated
into different pieces. The game loop itself is a controlled infinite loop that makes your game keep
running; it's the place where all your little pieces will be updated and drawn on the screen.
When everything is properly updated and ready, we enter the draw phase where all this
information is put on the screen. This function should contain all the code to manage and
draw the levels, layers, chars, HUD and so on.
Initialize, Update and Draw :-
The game loop is the central code of your game, split into different parts. Generally, these
are: initialize, update and draw.
The initialize phase is used to do any necessary game setup and prepare the environment for
the update and draw phases. Here you should create your main entities, prepare the menu,
detect default hardware capabilities, and so on.
The main purpose of the update phase is to prepare all objects to be drawn, so this is where all
the physics code, coordinate updates, health points changes, char upgrades, damage dealt and
other similar operations belong. This is also where the input will be captured and processed.

8. In many ways a 2D game and a 3D are identical.
You need input, entities to represent the game world, a rendering loop and so on.
But...
3D requires a different set of disciplines to make the art assets and get them on screen.
3D art needs geometry, which is then UV-wrapped in textures.
To render the scene needs a more sophisticated scene hierarchy (probably a tree).
The representation of orientations needs matrices or quaternions (or both). We need to consider
lighting in a different way.
We need a 3D API like OpenGL to leverage hardware rendering.
And there are problems to solve relating to the size and complexity of the world. In a 2D screen,
only a segment of the world is visible, in a 3D setup it is possible to imagine a location from where
the entire world is visible. Drawing everything could be bad for performance.
DIFFERENCE in 2D and 3D
Game Development

9. BENEFITS
Cross-platform
This is the main feature why developers have originally turned into web technologies looking to fulfil
the promise of coding once and deploy everywhere. As some of the other advantages of the web,
cross-platform is in its nature, as it is meant to run on any device (hardware) and operating system
(software).
Based on open standards
This is more important than meets the eye. There have been various technologies in the past that
made the cross-platform promise but did not completely deliver. Amongst other reasons, they failed
because of being closed and tied to a specific company. Open standards allow both vendors and
developers to contribute and improve the final product. This is one of the key success factors of the
web. There is no head controlling it so it can evolve according to the needs and interests of many.
Full technology stack HTML5 in itself is a full technology stack.

10. CHALLENGES
Cross-platform is more than devices and operating systems
Cross-platform does not really mean same code or user interface/user experience
Low performance, especially on mobile
Access to the native features on each platform

11. EXAMPLES
HEXGL CrossCode
Treasure_Arena Swoop

12. THANK
YOU !