Unit - 1

Introduction to
Game
Development

Pinki Ruparel
 Introduction What is HTML?
★ HTML and Javascript are the ➔ HTML stands for HyperText
technologies widely used today for Markup Language.
multiple purposes. ➔ HTML is a markup language
★ The capabilities of HTML5 and JS keep written to develop Web pages and
on advancing every other day. connecting them using
★ The traditional Web browser has Hyper-Text.
evolved from a slow application to a ➔ By Markup language, we mean,
media application capable of rendering
language in the form of tags.
high performance games.
★ Some sort of games trying to possess What is JavaScript?
the capabilities of games played on
XBOX or Playstations. ➔ JavaScript is a Client-side
★ From simple document display model Scripting or say Programming
to highly interactive, graphics rich, language used for Web
geolocation support and game playing development.
has been added to their capabilities.
Web Technologies in Games
★ HTML5 and Javascript are the technologies relatively easy to learn as well as
easy to deploy.
★ No other fancy requirements to install extra softwares. Only requirement is to
have a Web-browser installed.
★ Now-a-days, almost all Web-browsers are capable and supportive of the
functionalities of HTML5 and JS.
★ Large community support is available to promote learning and development of
these technologies.
★ The major Web-browser manufacturers - Mozilla, Microsoft and Google
provide support to the latest and greatest features.
Web Technologies in Games What is a Web-browser?
(Cont..) ➔ Web-browser is a software application used
to access information on the World Wide
★ Easy to use API’s have been Web.
developed. For example, GPS What is an API?
feature, accelerometers, advanced
➔ API stands for Application Programming
audio, canvas tag and WebGL.
Interface.
★ Newer APIs are being added to the ➔ API is a library consisting of built-in functions
JavaScript language as time to support a particular functionality with
advances, making new features easy to use methods.

available to the developers in an What is WebGL?

easy to use format. ➔ WebGL is a JavaScript library for rendering
★ With the advent of libraries like 2D and 3D graphics within any compatible
JQuery, Angular JS and React JS web-browser without use of any plug-in.
easy to code options and high
performance are being supported.
Important Advancements
★ With several advancements in Web technology like introduction of Canvas
element, performance increase in JavaScript - Game development was made
possible.
★ Along with Canvas, support was provided for 2D (two-dimensional) and 3D
(three-dimensional) graphics.
★ Both enable JavaScript to draw into an HTML element to produce graphics.
★ 2D allows per-pixel manipulation while 3D allows access to lower-level
capabilities through the use of WebGL.
★ HTML5 Canvas gives the programmer a capability to draw into pixels inside the
bounds of the canvas’ width and height.
 Important Advancements
(Cont..)
★ The API provides basic functionalities of
drawing a rectangle, circle, lines and What is a Pixel?
images.
★ These shapes can then be used in an ➔ Pixels are the smallest elements on
animation loop. an image which is a unique
★ Also using events for user-interaction combination of X-axis (horizontal)
and drawing elements again in a slightly and Y-axis (vertical).
different place allows game-like
structure on an HTML page.
★ WebGL is a subset of OpenGL, used
primarily in the development of Desktop
Media.
★ With WebGL, the Game will have better
Graphics than a competitor’s Game
developed on any other platform.
Important Advancements (Cont..)
★ Lastly, the browser manufacturers have helped with extremely fast JS
execution times.
★ Major Browser manufacturers compete to design the fastest Javascript engine.
★ Game developers benefit from a scripting language that can run games with a
less performance hit.
★ Combination of the speed of a current JS engine with WebGL provides an
extremely easy environment to make games.
★ Hard-work and competition of Web browsers have helped in the emergence of
Game development for Web.
Where Games are played?
★ Developing Games using JS and HTML is that they are accessible nearly anywhere.
★ Any web-browser you target will be capable of rendering at-least 2D Canvas with
high performance making use of WebGL.
★ Games are no more restricted to Desktop environments.
★ Games can be played on wide-range of available options like Desktop, tablet and
Phone device.
★ Easiest way to deploy HTML5 Game is to host it on a Website. All we need is a Web
Host and a URL.
★ Once the Game has been uploaded, anyone with the URL can access the Game from
anywhere in the world.
★ One major limitation can be the bandwidth and the speed of the network accessed by
the user.
Where Games are played? (Cont..)
★ Games are rich in Assets as it consists of not only rich graphics support and
sound files, requiring high bandwidth.
★ Another method of Game deployment is to create an HTML5 game, use some
extra programs like Apache Cordova (formerly known as PhoneGap), Iconic,
React Native, etc. and deploy the Game as a Mobile App on a Play Store or an
App Store.
★ Converting Web-Game to a Mobile-App provides machine-rich features like
Notifications or a Game Hub used by PubG, PokemonGo, etc.
★ Once, you use these features, no one can identify if the game was originally
made for HTML5 Web or a Mobile App.
★ Other technology similar to PhoneGap is Cocoonjs, accomplished to support
fastest access to Game with 2D or 3D canvas context.
Web Development in the Modern Day
★ Past few years have brought tremendous changes to Web-development
profession.
★ Talented developers build Frameworks and approaches to make resulting sites
robust and easily maintainable.
★ With the development of technologies like JQuery and [Link], Web
development has become easier.
★ [Link] helps in providing a Web Server, breaking up the code into pieces and
build the JavaScript automatically.
★ All this, requires the study of these technologies and their proper usage and
application.
★ Again, there can be upgradations to the technologies making our code to be
obsolete in the future versions.
Web Development in the Modern Day (Cont..)
★ However, the benefits of the Web-browser being versatile and backward
compatible, outweigh the limitations of any concept getting deprecated.
★ Old and Traditional Web-browsers work with little technological help by
uploading all of the source files of their project to the Web and sending the URL
of that resource to our client.
★ Catching up with modern day, Web developers need to learn on how to get the
computer to write JS for them, how to run commands on the command prompt
and export their final build files before deployment.
Growth of interactive capabilities of a Web-browser
★ At the very beginning of a Web-browser creation, it was hardly used for
document or static-text display at a slower speed.
★ But with the advent of faster JS execution engines and rich support of graphics,
animations and multimedia capabilities, game development was possible.
★ Speed and bandwidth are one of the major improvement areas providing
responsiveness to the games with the user-events and animations.
★ This all evolved with the development of Plugins.
★ Two major Plugins used were: One for the support of Java Applets and another
is a for a Flash Player.
★ Java Applets had a major drawback with regards to execution times.
 Growth of interactive What is a Plugin?
capabilities of a ➔ Plugin is a software extension to a
Web-browser (Cont..) Web-browser that would access a
unique functionality in a particular
★ Flash was more successful and was part of a web-page.
used in display of interactive media.
★ The reason for success was two
factors: easy-to-use vector animation What is a Framework?
and relatively quick development ➔ A Framework is a structure that
times for files. you can build software on. It
★ With time, more advanced serves as a foundation, so you are
capabilities like Action-script, was not starting entirely from scratch.
added to provide programming Examples include Struts, Spring
support. and Hibernate for Java, Django for
★ Flash, was the only solution at that Python, MVC for [Link] and
time for providing support of Laravel for Php.
high-quality interactive media.
Growth of interactive capabilities of a Web-browser (Cont..)

★ With time, there was a realization that not-only with Plugin support but the
Web-browsers should be more capable and powerful and not dependent on
the plugin.
★ With this thought, modern day Web-browsers were developed and the
traditional web-browsers were improvised to provide more better facilities
than a Flash Player (Flash Plugin) on the Web-page.
★ Two major advancements included: Speed of code execution and graphical
capabilities.
★ If there are no faster execution, the user might feel useless with the software
and would quit using it. Responsiveness of user-events in real-time is very
important with regards to Game development.
Growth of interactive capabilities of a Web-browser (Cont..)

★ Early on Javascript, didn't need to be fast.

★ The basic usage of Javascript was for either Form-validation or little
animations.
★ With time, it was used in complex coding of Gmail or Online Maps, etc. These
systems require to increase execution speed.
★ For example, Graphical updates need to run on a preferable execution speed of
30 frames per second, for a smooth user experience.
★ In games, with lot of Actors, particles and physics, require lot of calculations
being done several times a second.
Growth of interactive capabilities of a Web-browser (Cont..)

★ Another important point, JavaScript is not a compiled language but an

interpreted language.
★ Compiled language vs Interpreted language.
★ Each browser has its own JS Engine - Chakra engine for Internet Explorer, V8
for Google Chrome, SpiderMonkey for Firefox and Nitro for Safari.
★ With upgradations in one engine, the other will compete to improvise and
optimize itself.
★ The optimizations include: JIT (Just-In-Time) Compilation, AOT
(Ahead-Of-Time) Compilation and several other in the instruction set.
★ AOT is the series of actions that the JS engine does before running the code.
★ “Use strict” code will force the code to run faster.
Growth of interactive capabilities of a Web-browser (Cont..)

★ New addition to it is [Link] technology introduced by Mozilla, which limits the

javascript with only instructions that are fast and close to native performance.
★ Game engines like Unreal export their games to JavaScript in order for their
game to run on a Website.
★ Graphical speed is another key portion for rich interactive web.
★ Early versions supported CSS, for which animations were difficult.
★ Once, the speed became an important factor.. All the browser manufacturers
rushed to catch-up, speeding their DOM updates and improving their CSS
support.
★ Canvas tag was added to HTML5
Growth of interactive capabilities of a Web-browser (Cont..)
★ Canvas tag helps draw on a rectangular box.
★ Canvas has two different ways to display graphics:
○ 2D - manipulate individual pixels under the Canvas
○ 3D - dealing with the lower-level graphical capabilities of the GPU.
★ For 3D canvas context, WebGL support is used.
★ WebGL has been derived from OpenGL 2.0.
★ A Shader must be designed to tell the Graphics Card what should be displayed
on the screen.
★ Shader must be programmed in OpenGL Shading Language (GLSL) and
compiled at run-time.
★ All this total combination of the above features gives the programmers all the
capabilities of a modern game design.
Growth of interactive capabilities of a Web-browser (Cont..)

★ Around 2010, it was clear that HTML and JS will provide the interactive future
of the Web.
★ New capabilities were getting added, browser were becoming faster.
★ Lot of Framework and JavaScript Libraries supported to make it possible to run
JavaScript faster and in an optimized way.
Wide Selection of HTML5 Game Engines
★ With the advancement in time, Multiple frameworks were available to support
game development and their respective game engines.
★ [Link] lists all the different game engines available.
★ Many of them were popular around 2010.
★ At that time, it was not difficult to code a Game engine, hence the results were
25 game engines available on JavaScript language.
★ After selecting the game engine, the programmer still needs to decide if the
type of game that they are planning to make with the design goals will match a
particular engine or not?
★ Each engine has strengths and weaknesses, some are known for being well-
maintained than another.
★ Some engines focus on mobile platform. While some focus on particular type of
game.
Wide Selection of HTML5 Game Engines (Cont..)
★ Some will provide editor support while some will be just following the previous
engine.
★ A Game engine must be decided based on the creative abilities of the
developer.
★ In general, HTML5 game engines fall into three different categories, each with a
different focus.
○ Pure JS and Web development workflow
○ Customized editor with a native HTML5 support
○ Professional game development suite with optimized export.
★ The first engine type is, pure JS workflow, is the closest to tooling the Web
developers currently building Web-pages and hybrid mobile applications.
★ These game engines are highly reliant on [Link] for performance.
★ Also selecting the right browser, which supports all the tags and functionalities
with a faster execution is a choice to be made.
Wide Selection of HTML5 Game Engines (Cont..)
★ Second category describes the community of new or beginner-level
developers, who focus more on the 2D graphics and have simpler codes to
execute.
★ Game Maker and Construct 2 fall into this category.
★ There are a number of Games built on Game Maker which are of a
professional quality.
★ The scripting languages for these engines are typically specialized to the
editor.
★ The only difficult part is if the Game needs to communicate with the rest of
the page via JS, the final result gets a little messy to deal with.
Wide Selection of HTML5 Game Engines (Cont..)
★ Third category is for developers of Cross-platform technology. Examples of the
technology would include Unity and Unreal. The coding is not based on
JavaScript but other languages. Although, they get deployment options for the
same.
★ Unity and Unreal are big game engines, teams work closely with the
web-browser to provide translated JS code and WebGL support.
★ Emscripten, is the software, needed to transpile the original code to JS code.
★ Optimization of code is performed with [Link] to ensure fastest execution times
for the final output game.
★ The games generated by this approach tend to be large and take some time to
download, so developer should take care while selecting the right approach
required to build the game.
Wide Selection of HTML5 Game Engines (Cont..)
★ After all this discussion, why do still people want to work with HTML and JS?
★ The answer lies in the monopoly Javascript has as a Client-side language.
★ Also, JS can be applied anywhere.
★ JS has become a de-facto standard.
★ JS can be found on Web-sites, for running robots, as a scripting language for
Web-servers and even behind powerful game engines (like Phaser).
★ Also, since it is a client-side scripting language, no translation is required to
convert into any other language.
Introduction to [Link]
★ [Link] is an HTML5 Game engine meant for use in creating graphically rich
2D games.
★ Originally created by Richard Davey, it has had future contributions by other
developers.
★ Currently, it ranks 6th on [Link] as a Free Framework.
★ Comparing it with other two game engines - [Link] and [Link], are not
full-featured game engines.
★ Instead, these game engines only provide a clear graphics API and are reliant on
developer for things like game step updates, physics or states.
★ The other two, [Link] and Construct2 are not only Game focused engines,
but they also come with a monetary cost associated with them.
★ Phaser is the only free Game Framework that works via normal HTML and JS in
top 6.
Introduction to [Link] (Cont..)
★ One of the best feature is - The Creator - Richard Davey, uses it for professional
projects.
★ Phaser has a great community support that helps drive it’s features set and
helps others who are also using the engine.
★ Discussion forums are open to questions and bug-solutions.
★ Phaser’s lineage is clearly inspired by the Flixel Game engine that was popular
in Flash game development world.
★ Improvements have been added and the code is re-written to support and work
with JS.
★ It has support to sprite animations, sounds, tile-maps, several different physics
engines and particles.
★ Important new features added to Phaser are touch input pointers and
screen-resizing to support variable-sized mobile devices.
Introduction to [Link] (Cont..)
★ Another important feature is its ability to quickly and easily switch between a
hardware-accelerated WebGL mode and a slower but widely supported 2D
context for its rendering.
★ The rendering of Game objects in the background is carried out by [Link]
Framework, which simplifies Graphic calls in JS and provides a single API to run
both WebGL and Canvas.
★ It is actually Pixi that does the heavy lifting of animations and image rendering
in different contexts.
Basic structure of an HTML5 Game Project
● Scripts/ (or js/)
○ Holds the Framework file (in our case [Link])
○ File for the Game code that uses the Framework
● Src/ (Optional)
○ A folder used to create the source files that will be compiled into the full game code
● Assets/
○ Images
■ Used for backgrounds and sprites
○ Maps
■ The data for any tilemaps in the game
○ Sounds
■ Sound effects for the game, often in multiple formats
○ Music
■ Music for the game, often in multiple formats
○ Misc
■ Any additional data
● [Link]
○ The HTML file that sets up the game and starts loading and sets-up a nice UI with the help of JS.
Client-side Scripting
Server-side Scripting