SlideShare a Scribd company logo
1 of 12
Download to read offline
TECHNICAL PRESENTATION
Merkur Gaming India Pvt. Ltd.
Noida.
For : Online Gaming Team
Presented By :
Abhishek Singhal
Senior Developer
Online Gaming Team
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.
HTML Gaming Frameworks
Insight
● 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
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
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
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.
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
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.
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
EXAMPLES
HEXGL CrossCode
Treasure_Arena Swoop
THANK
YOU !

More Related Content

What's hot

What's new in Shader Graph: ready for production – Unite Copenhagen 2019
What's new in Shader Graph: ready for production – Unite Copenhagen 2019What's new in Shader Graph: ready for production – Unite Copenhagen 2019
What's new in Shader Graph: ready for production – Unite Copenhagen 2019Unity Technologies
 
Introduction to android (and mobile) game development
Introduction to android (and mobile) game developmentIntroduction to android (and mobile) game development
Introduction to android (and mobile) game developmentRuslan Novikov
 
Software Engineer- A unity 3d Game
Software Engineer- A unity 3d GameSoftware Engineer- A unity 3d Game
Software Engineer- A unity 3d GameIsfand yar Khan
 
DIY Mobile VR with Unity 3d & Cardboard SDK
DIY Mobile VR with Unity 3d & Cardboard SDKDIY Mobile VR with Unity 3d & Cardboard SDK
DIY Mobile VR with Unity 3d & Cardboard SDKBond University
 
Final project report of a game
Final project report of a gameFinal project report of a game
Final project report of a gameNadia Nahar
 
Developing Virtual Reality Application using Google Cardboard
Developing Virtual Reality Application using Google CardboardDeveloping Virtual Reality Application using Google Cardboard
Developing Virtual Reality Application using Google Cardboardapurvmmmec
 
Car racing game for android
Car racing game for androidCar racing game for android
Car racing game for androidravijot singh
 
Final year project presentation
Final year project presentationFinal year project presentation
Final year project presentationSulemanAliMalik
 
Unite Los Angeles 2018 - Unity 2019 R&D Roadmap
Unite Los Angeles 2018 - Unity 2019 R&D RoadmapUnite Los Angeles 2018 - Unity 2019 R&D Roadmap
Unite Los Angeles 2018 - Unity 2019 R&D RoadmapUnity Technologies
 
Optimizing Apps for Better Performance
Optimizing Apps for Better PerformanceOptimizing Apps for Better Performance
Optimizing Apps for Better PerformanceElif Boncuk
 
Android Fish Game Development
Android Fish Game Development Android Fish Game Development
Android Fish Game Development Rasel Khan
 
【Unite 2017 Tokyo】NVIDIA Gameworks アップデートおよびAnselとVRWorksの紹介
【Unite 2017 Tokyo】NVIDIA Gameworks アップデートおよびAnselとVRWorksの紹介【Unite 2017 Tokyo】NVIDIA Gameworks アップデートおよびAnselとVRWorksの紹介
【Unite 2017 Tokyo】NVIDIA Gameworks アップデートおよびAnselとVRWorksの紹介Unity Technologies Japan K.K.
 
Construct 2 ggj 2013
Construct 2 ggj 2013Construct 2 ggj 2013
Construct 2 ggj 2013Chiheb Chebbi
 
Before starting android game development
Before starting android game developmentBefore starting android game development
Before starting android game developmentBeing Programmer
 
Game Development Step by Step
Game Development Step by StepGame Development Step by Step
Game Development Step by StepBayu Sembada
 
Using High-Rising Cities to Visualize Performance in Real-Time
Using High-Rising Cities to Visualize Performance in Real-TimeUsing High-Rising Cities to Visualize Performance in Real-Time
Using High-Rising Cities to Visualize Performance in Real-TimeHideaki Hata
 
A Tale Of Ten SDKs: Cross-Platform Development Best Practices - Unite LA
A Tale Of Ten SDKs: Cross-Platform Development Best Practices - Unite LAA Tale Of Ten SDKs: Cross-Platform Development Best Practices - Unite LA
A Tale Of Ten SDKs: Cross-Platform Development Best Practices - Unite LAUnity Technologies
 

What's hot (20)

What's new in Shader Graph: ready for production – Unite Copenhagen 2019
What's new in Shader Graph: ready for production – Unite Copenhagen 2019What's new in Shader Graph: ready for production – Unite Copenhagen 2019
What's new in Shader Graph: ready for production – Unite Copenhagen 2019
 
Introduction to android (and mobile) game development
Introduction to android (and mobile) game developmentIntroduction to android (and mobile) game development
Introduction to android (and mobile) game development
 
Software Engineer- A unity 3d Game
Software Engineer- A unity 3d GameSoftware Engineer- A unity 3d Game
Software Engineer- A unity 3d Game
 
DIY Mobile VR with Unity 3d & Cardboard SDK
DIY Mobile VR with Unity 3d & Cardboard SDKDIY Mobile VR with Unity 3d & Cardboard SDK
DIY Mobile VR with Unity 3d & Cardboard SDK
 
Final project report of a game
Final project report of a gameFinal project report of a game
Final project report of a game
 
Developing Virtual Reality Application using Google Cardboard
Developing Virtual Reality Application using Google CardboardDeveloping Virtual Reality Application using Google Cardboard
Developing Virtual Reality Application using Google Cardboard
 
Car racing game for android
Car racing game for androidCar racing game for android
Car racing game for android
 
Final year project presentation
Final year project presentationFinal year project presentation
Final year project presentation
 
Unite Los Angeles 2018 - Unity 2019 R&D Roadmap
Unite Los Angeles 2018 - Unity 2019 R&D RoadmapUnite Los Angeles 2018 - Unity 2019 R&D Roadmap
Unite Los Angeles 2018 - Unity 2019 R&D Roadmap
 
Optimizing Apps for Better Performance
Optimizing Apps for Better PerformanceOptimizing Apps for Better Performance
Optimizing Apps for Better Performance
 
Android Fish Game Development
Android Fish Game Development Android Fish Game Development
Android Fish Game Development
 
【Unite 2017 Tokyo】NVIDIA Gameworks アップデートおよびAnselとVRWorksの紹介
【Unite 2017 Tokyo】NVIDIA Gameworks アップデートおよびAnselとVRWorksの紹介【Unite 2017 Tokyo】NVIDIA Gameworks アップデートおよびAnselとVRWorksの紹介
【Unite 2017 Tokyo】NVIDIA Gameworks アップデートおよびAnselとVRWorksの紹介
 
Game salad evaluation
Game salad evaluationGame salad evaluation
Game salad evaluation
 
Construct 2 ggj 2013
Construct 2 ggj 2013Construct 2 ggj 2013
Construct 2 ggj 2013
 
Before starting android game development
Before starting android game developmentBefore starting android game development
Before starting android game development
 
Game Development Step by Step
Game Development Step by StepGame Development Step by Step
Game Development Step by Step
 
Using High-Rising Cities to Visualize Performance in Real-Time
Using High-Rising Cities to Visualize Performance in Real-TimeUsing High-Rising Cities to Visualize Performance in Real-Time
Using High-Rising Cities to Visualize Performance in Real-Time
 
Video game design
Video game designVideo game design
Video game design
 
A Tale Of Ten SDKs: Cross-Platform Development Best Practices - Unite LA
A Tale Of Ten SDKs: Cross-Platform Development Best Practices - Unite LAA Tale Of Ten SDKs: Cross-Platform Development Best Practices - Unite LA
A Tale Of Ten SDKs: Cross-Platform Development Best Practices - Unite LA
 
Resume
ResumeResume
Resume
 

Viewers also liked

técnica de desenvolvimento de jogos para web
técnica de desenvolvimento de jogos para webtécnica de desenvolvimento de jogos para web
técnica de desenvolvimento de jogos para webAndrews Medina
 
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...Pablo Farías Navarro
 
Phaser Workshop Internet World 2014
Phaser Workshop Internet World 2014Phaser Workshop Internet World 2014
Phaser Workshop Internet World 2014Alvinsight
 
La ecuación de Batman
La ecuación de BatmanLa ecuación de Batman
La ecuación de BatmanJesus Garcia
 
Flappy Bird Game Dev by Phaser Framework
Flappy Bird Game Dev by Phaser FrameworkFlappy Bird Game Dev by Phaser Framework
Flappy Bird Game Dev by Phaser FrameworkRyan Chung
 
Making Native Browser Games in The Modern Age
Making Native Browser Games in The Modern AgeMaking Native Browser Games in The Modern Age
Making Native Browser Games in The Modern AgeCatt Small
 
Lasertron lt 12 vs zone nexus fec
Lasertron lt 12 vs zone nexus fecLasertron lt 12 vs zone nexus fec
Lasertron lt 12 vs zone nexus fecejeffers2010
 
HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015
HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015
HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015Pablo Farías Navarro
 
Making HTML5 Games with Phaser
Making HTML5 Games with PhaserMaking HTML5 Games with Phaser
Making HTML5 Games with PhaserIndieOutpost
 
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
 
Introduction to HTML5 game development (with Phaser)
Introduction to HTML5 game development (with Phaser)Introduction to HTML5 game development (with Phaser)
Introduction to HTML5 game development (with Phaser)Valerio Riva
 

Viewers also liked (14)

técnica de desenvolvimento de jogos para web
técnica de desenvolvimento de jogos para webtécnica de desenvolvimento de jogos para web
técnica de desenvolvimento de jogos para web
 
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
 
Phaser Workshop Internet World 2014
Phaser Workshop Internet World 2014Phaser Workshop Internet World 2014
Phaser Workshop Internet World 2014
 
La ecuación de Batman
La ecuación de BatmanLa ecuación de Batman
La ecuación de Batman
 
Html5 game development
Html5 game developmentHtml5 game development
Html5 game development
 
Flappy Bird Game Dev by Phaser Framework
Flappy Bird Game Dev by Phaser FrameworkFlappy Bird Game Dev by Phaser Framework
Flappy Bird Game Dev by Phaser Framework
 
Making Native Browser Games in The Modern Age
Making Native Browser Games in The Modern AgeMaking Native Browser Games in The Modern Age
Making Native Browser Games in The Modern Age
 
Marketing 360 - 2011
Marketing 360 - 2011Marketing 360 - 2011
Marketing 360 - 2011
 
Lasertron lt 12 vs zone nexus fec
Lasertron lt 12 vs zone nexus fecLasertron lt 12 vs zone nexus fec
Lasertron lt 12 vs zone nexus fec
 
HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015
HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015
HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015
 
Phaser presentation
Phaser presentationPhaser presentation
Phaser presentation
 
Making HTML5 Games with Phaser
Making HTML5 Games with PhaserMaking HTML5 Games with Phaser
Making HTML5 Games with Phaser
 
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...
 
Introduction to HTML5 game development (with Phaser)
Introduction to HTML5 game development (with Phaser)Introduction to HTML5 game development (with Phaser)
Introduction to HTML5 game development (with Phaser)
 

Similar to HTML5 Game Development frameworks overview

Introduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJsIntroduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJsLuca Galli
 
Introduction to html5 game programming with impact js
Introduction to html5 game programming with impact jsIntroduction to html5 game programming with impact js
Introduction to html5 game programming with impact jsLuca Galli
 
Dot Net Project Mini Game
Dot Net Project Mini GameDot Net Project Mini Game
Dot Net Project Mini Gamevarun arora
 
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
 
The Basics of Unity - The Game Engine
The Basics of Unity - The Game EngineThe Basics of Unity - The Game Engine
The Basics of Unity - The Game EngineOrisysIndia
 
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...DevClub_lv
 
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJSFestUA
 
Ha4 displaying 3 d polygon animations
Ha4   displaying 3 d polygon animationsHa4   displaying 3 d polygon animations
Ha4 displaying 3 d polygon animationsJordanSmith96
 
Seattle javascript game development - Overview
Seattle javascript game development - OverviewSeattle javascript game development - Overview
Seattle javascript game development - OverviewGrant Goodale
 
IRJET- Technical Graphic Showcase
IRJET- Technical Graphic ShowcaseIRJET- Technical Graphic Showcase
IRJET- Technical Graphic ShowcaseIRJET Journal
 
Metodologías de desarrollo de software en Gaming
Metodologías de desarrollo de software en GamingMetodologías de desarrollo de software en Gaming
Metodologías de desarrollo de software en GamingGlobant
 
Adobe gaming today tomorrow Trento
Adobe gaming today tomorrow TrentoAdobe gaming today tomorrow Trento
Adobe gaming today tomorrow TrentoInSide Training
 
Y1 gd engine_terminologyhj
Y1 gd engine_terminologyhjY1 gd engine_terminologyhj
Y1 gd engine_terminologyhjShaz Riches
 
Introduction to Game Engine: Concepts & Components
Introduction to Game Engine: Concepts & ComponentsIntroduction to Game Engine: Concepts & Components
Introduction to Game Engine: Concepts & ComponentsPouya Pournasir
 
Lessons Learned: Designer/Developer Productivity in Windows Presentation Foun...
Lessons Learned: Designer/Developer Productivity in Windows Presentation Foun...Lessons Learned: Designer/Developer Productivity in Windows Presentation Foun...
Lessons Learned: Designer/Developer Productivity in Windows Presentation Foun...goodfriday
 
HTML5 & JavaScript Games
HTML5 & JavaScript GamesHTML5 & JavaScript Games
HTML5 & JavaScript GamesRobin Hawkes
 
Y1 gd engine_terminology
Y1 gd engine_terminologyY1 gd engine_terminology
Y1 gd engine_terminologyJordanianmc
 

Similar to HTML5 Game Development frameworks overview (20)

Introduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJsIntroduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJs
 
Introduction to html5 game programming with impact js
Introduction to html5 game programming with impact jsIntroduction to html5 game programming with impact js
Introduction to html5 game programming with impact js
 
Presentation3
Presentation3Presentation3
Presentation3
 
POV | Unity vs HTML5 | Affle Enterprise
POV | Unity vs HTML5 | Affle EnterprisePOV | Unity vs HTML5 | Affle Enterprise
POV | Unity vs HTML5 | Affle Enterprise
 
Dot Net Project Mini Game
Dot Net Project Mini GameDot Net Project Mini Game
Dot Net Project Mini Game
 
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...
 
The Basics of Unity - The Game Engine
The Basics of Unity - The Game EngineThe Basics of Unity - The Game Engine
The Basics of Unity - The Game Engine
 
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
 
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
 
Ha4 displaying 3 d polygon animations
Ha4   displaying 3 d polygon animationsHa4   displaying 3 d polygon animations
Ha4 displaying 3 d polygon animations
 
Seattle javascript game development - Overview
Seattle javascript game development - OverviewSeattle javascript game development - Overview
Seattle javascript game development - Overview
 
IRJET- Technical Graphic Showcase
IRJET- Technical Graphic ShowcaseIRJET- Technical Graphic Showcase
IRJET- Technical Graphic Showcase
 
Metodologías de desarrollo de software en Gaming
Metodologías de desarrollo de software en GamingMetodologías de desarrollo de software en Gaming
Metodologías de desarrollo de software en Gaming
 
Adobe gaming today tomorrow Trento
Adobe gaming today tomorrow TrentoAdobe gaming today tomorrow Trento
Adobe gaming today tomorrow Trento
 
LightWave™ 3D 11 Add-a-Seat
LightWave™ 3D 11 Add-a-SeatLightWave™ 3D 11 Add-a-Seat
LightWave™ 3D 11 Add-a-Seat
 
Y1 gd engine_terminologyhj
Y1 gd engine_terminologyhjY1 gd engine_terminologyhj
Y1 gd engine_terminologyhj
 
Introduction to Game Engine: Concepts & Components
Introduction to Game Engine: Concepts & ComponentsIntroduction to Game Engine: Concepts & Components
Introduction to Game Engine: Concepts & Components
 
Lessons Learned: Designer/Developer Productivity in Windows Presentation Foun...
Lessons Learned: Designer/Developer Productivity in Windows Presentation Foun...Lessons Learned: Designer/Developer Productivity in Windows Presentation Foun...
Lessons Learned: Designer/Developer Productivity in Windows Presentation Foun...
 
HTML5 & JavaScript Games
HTML5 & JavaScript GamesHTML5 & JavaScript Games
HTML5 & JavaScript Games
 
Y1 gd engine_terminology
Y1 gd engine_terminologyY1 gd engine_terminology
Y1 gd engine_terminology
 

Recently uploaded

Revolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridRevolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridMathew Thomas
 
renewable energy renewable energy renewable energy renewable energy
renewable energy renewable energy renewable energy  renewable energyrenewable energy renewable energy renewable energy  renewable energy
renewable energy renewable energy renewable energy renewable energyjeyasrig
 
Enterprise Content Managements Solutions
Enterprise Content Managements SolutionsEnterprise Content Managements Solutions
Enterprise Content Managements SolutionsIQBG inc
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptxAGATSoftware
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleShane Coughlan
 
8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdfOffsiteNOC
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...Maxim Salnikov
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developersmichealwillson701
 
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxCYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxBarakaMuyengi
 
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial FrontiersRaphaël Semeteys
 
Mobile App Development company Houston
Mobile  App  Development  company HoustonMobile  App  Development  company Houston
Mobile App Development company Houstonjennysmithusa549
 
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Inc
 
8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.Ritesh Kanjee
 
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...jackiepotts6
 
VuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckVuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckNaval Singh
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern
 
User Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeUser Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeKaylee Miller
 
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfFlutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfMind IT Systems
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tipsmichealwillson701
 

Recently uploaded (20)

Revolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridRevolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM Grid
 
renewable energy renewable energy renewable energy renewable energy
renewable energy renewable energy renewable energy  renewable energyrenewable energy renewable energy renewable energy  renewable energy
renewable energy renewable energy renewable energy renewable energy
 
Enterprise Content Managements Solutions
Enterprise Content Managements SolutionsEnterprise Content Managements Solutions
Enterprise Content Managements Solutions
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scale
 
8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developers
 
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxCYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
 
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
 
20140812 - OBD2 Solution
20140812 - OBD2 Solution20140812 - OBD2 Solution
20140812 - OBD2 Solution
 
Mobile App Development company Houston
Mobile  App  Development  company HoustonMobile  App  Development  company Houston
Mobile App Development company Houston
 
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
 
8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.
 
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
 
VuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckVuNet software organisation powerpoint deck
VuNet software organisation powerpoint deck
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data Mesh
 
User Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeUser Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller Resume
 
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfFlutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tips
 

HTML5 Game Development frameworks overview

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