Practical works, MISS2, FII, UAIC, January 2013

1. Web browser game development
Cristian Catalin Mihai, MISS2,
Faculty of Computer Science, UAIC, Iasi, January 2013
1 Why web browser games?
Abstract. In a socially active world social interaction is easily facilitated in
online environments. Games are also a part of this interaction. The next thing in
web browser experience is HTML5, and following we will get a glimpse at
players and what challenges a developer must take when creating a HTML5
game.
Keywords. GAMVAS, HTML5, gamer, RPG.
1.1 The gamer side
What is a gamer? Being a gamer is being passionate more or less about games.
In a social web environment playing games is a common activity. Social online
networks are already present and constantly evolving, take for example Facebook,
Yahoo! or Google+; they provide a good source for gamers and game interaction.
Almost anyone that has a computer played a game, and almost anyone with a com-
puter and an internet connection played a web browser based game.
Either at home, at work or school sharing fun and enjoying time with others is a
common activity especially now when you can interact with friends and other people
in a constantly growing online community from the tips of your fingers with some-
thing as basic as your cell phone. Games are a good way to have fun during your
spare time and since web browsing reached the mobile, so did the web browser
games.
There are multiple types of gamers from the casual ones that just want a few
minutes of fun, the longtime hour spending guys that made from a game world their
second life.
Games are also known to create communities on their own. Take for example bat-
tle.net from Blizzard Entertainment that evolved from a game server to a full grown
community with individuals that share the same passion for the company games.

2. Zynga is another good example. They made a community through their games and
developed this into a standalone social network.
Games tend to form on their own communities. Take for example football; it’s just
a game after all, or a cult to some and many of the supporters are casual weekend
players and not even close to those on the field.
To think about it, there are many gaming communities today. The rugby communi-
ty, the chess community etc.
Such as in the real world gaming communities, there are also online gaming com-
munities based on online games. It is a natural step for things to evolve in a similar
direction also in the online world.
Being a gamer had never been easier with the evolution of information technology
allowing easy and fast access to games and other content almost anywhere, anytime.
1.2 The developer side
As a game developer one must take into consideration many aspects especially
when it comes to online games.
The delivered content must be specially targeted at a certain type of gamer class.
These gamers are separated by the genre of the game they play, life first person
shooter players or real time strategy game players. None of gamer class can be a gam-
er class on its own. So it is a constant reinventing and evolution for the game designer
and the developers themselves.
Unlike developing games for a targeted operating system, where you can leave
aside the other ones, for example you develop games for Windows because it has a
large and strong community, a web browser game developer must take into account
the fact that web browser is the development platform. A good side to this is that a
web browser such as Mozilla Firefox is available on many different operating systems
such as Linux based ones, OSX etc., but the good side is also a bad side. You don’t
just have a web browser, you have many more, and many of them are also popular.
The browser is a necessity for the user in order to access online content. Like any
human being, the user, gets used to one browser, ignoring the rest. Just like going to
see a movie at the favorite cinema or eat at a favorite restaurant.
When developing a game for the web browser you must make sure it behaves the
same on all of them, or at least on the most popular of them. As a developer, you must
ensure you deliver the same user experience on all of the targeted browsers.
Also, taking into account that social networks exist, the developed game must in-
teract with these communities in order to access the potential player base, and in-
crease the odds of getting successful.
Social networks like Facebook or Google+ are making available frameworks to
help developers make their applications interact and take advantage of their services.
The main thing is that the game must get one way or the other social, from simple
score sharing to getting inside and affecting the game world itself.
The web scene provides a great opportunity for developers to get their games
shared and known trough social interaction.

3. 2 Designing a role playing game
Abstract. Computer games come in many different forms genres.
Games are based on a common player personality and interest. Each individual
relates in one way or another to the type of game he plays, sharing certain char-
acteristics. A game offers freedom to do things that the real world would not let
you do without supporting the consequences. You shape yourself anew.
2.1 Characteristics
A role playing game involves getting immersed in a game world with a character
that you shape according to your own style of play.
The character you impersonate has attributes that you can adjust to fit your needs.
These attributes involve aspects like how much damage you can take in a conflict
situation, how fast can you run how hard you can hit something with your weapon or
the ability to perform a certain action.
Also, the impersonated character can be affected by the choices made by the player
in the game world itself, such as deciding to accept a task or not, the choice of taking
on or baking of from a fight to the areas you visit themselves.
In response the game world is affected by the impersonated player character by
changing and altering certain characteristics.
The characteristics of the game world are dictated by the way the game plays. The
world has its rules.
A role playing game world usually employs a virtual non playing character com-
munity that provides the basic input and scope to the player. Also the world has its
own historic events, forms of organization, factions and location just like in the real
world.
The environment is grouped on regions or areas. Such an area can be a town or a
forest. Each such area has its own playing characteristics, for example in a forest you
can attack hostile creatures and improve your character by acquiring experience while
in a town you can sell the loot you have gathered along the way and accept new chal-
lenges given by the NPCs present there or by other players.
The thing about role playing games is that you get to drive the story behind the
game itself by acting with your character. You are part of it.
2.2 Our game world
The game world we are developing will be comprised out of two main types of ar-
eas:

4. o The Wilderness Areas
o The Town Areas
The Wilderness regions are made out of mainly forests, fields, caverns and aban-
doned human (or not) settlements. Each main area will have a checkpoint that will
allow fast travel to other checkpoints in the area or from other areas and will be popu-
lated with encounters that will be hostile or not based on the choices that the player
character makes. The main purpose of these areas is to help the player improve his
characters attributes by acquiring experience from completing tasks and destroying
encounters.
The Town regions will allow the player to train into different skills and to purchase
equipment. In the town the player will notice three main types of interest points:
o The shop
o The trainer
o The quest giver
The shop interest points will allow the player to trade its items in order to achieve
the optimal configuration for his character.
The trainer interest points will allow the player character to learn new abilities that
will help to progress through the game.
The quest giver interest points will assign new missions to the player character to
different area in The Wilderness.
The Town regions will be populated with NPC characters that will interact with the
player character by providing services such as shops, training and quests.
2.3 Our player character
The player character will have four main attributes:
─ health, this attribute indicates the amount of damage that the character can take
before dying;
─ dexterity, this attribute increases the speed with which the character can act (at-
tack, cast spells, run, dodge, critical);
─ strength, this attribute will affect the amount damage the players inflicts, take
and resistance to magic elements;
─ energy, this attribute indicates how much understanding of the magic elements
has, this ability will help the player to cast various spells;
The skills that the player character will learn are grouped by the way it affects the
player. The passive skills that give a passive benefit: bow handling, sword handling,
staff handling, spell casting, and item crafting. Other skills that will affect the charac-
ter in an active manner are: focus that improves damage for a period of time, spirit

5. guide that improves health and energy attributes and natures bless that improves the
strength and dexterity attributes.
The player character will be able to equip various items like armor and weapons
that will further improve his attributes.
The player character will be able to learn spells such as launching fire bolts, ice
bolts and healing.
2.4 Our NPCs
The NPCs will be present all over the game world in the form of encounters that
will attack the player in The Wilderness or will provide services and guidance in The
Town.
The encounter NPCs will have attributes on their own that will affect the way they
react to the player character and the game world. The attributes are the same as the
ones the player character has.
3 Developing the game
3.1 Resources
The resources used by the game are composed out of the following two categories:
the sound and the graphics.
For both the sound and the graphics open source resources will be used such as the
ones found on the Open Game Art community and also the ones from Liberated Pixel
Cup.
3.2 The technology
The main player on the browser stage is Adobe Flash. There are many browser
based games that run with the help Flash Player plugin. The advantage of flash is that
it runs the regardless the browser version or the operating system. It encapsulates
highly performing functions for vector graphics and fast 2D rendering and audio
playback.
Another alternative is Unity. It is continuously maintained and further developed.
Unity has excellent 3D support that the Flash Player lacks. It is solid and stable and it
is specially designed for browsers.
The newly emerged standard for HTML, HTML5, is the new standard regarding
the future of the interactive web content without the usage of external plugins such as
Flash or Unity. This standard is to be supported in all future browsers.
For this game HTML5 will be used.

6. 3.3 The Framework
The framework used to handle the HTML5 game development is GAMVAS.
It is a MIT licensed game development framework written in java script that han-
dles all the aspects of web browser game development like graphics, game actors,
physics, etc.
GAMVAS uses for physics part a java script implementation of Box2D which is
the best 2D physics out there, capable of delivering fast rigid body dynamics and
collision detection.
GAMVAS main unit is composed out of states. A state can be the main game
menu, the game itself or a game stage.
An actor in GAMVAS is the main interacting unit of the engine. An actor can be a
menu button, a static wall in the game or the player character himself. An actor has
attached physics properties and graphics (images or animations). Each actor has as-
signed one or more actor states. The actor states are actually the actor brain, for ex-
ample the state of patrolling, or attacking of an actor.
The workflow is simple: you create a game state which you populate it with game
actors and game logic. The player interacts with controls that interact with player
character actor that interacts with the game environment.
3.4 What needs to be done
Having the basic part that handles basic game functionality taken care of, there are
few other things to be done next:
 The character composer, it takes various graphics and combines them into the
character graphics, useful for showing the character with different items equipped;
 The area manager, it handles transitions between areas, like getting from a Town
area to an expected Wilderness area and not in another Town;
 The quest tracker;
 The event handler, it makes the game world and the NPCs to change during certain
events or as a result of player character actions;
 Shop system;
 Inventory system for the player character;
 Player character level advancement system;
 Encounter spawning system, makes creatures to fight with the player;
 The area manager, loads resources related to the environment, like walls, houses
trees, etc.

7. 4 The demo
4.1 About the environment
The player starts in a town where he has two NPC characters that will help him
along the way of completing his quest to destroy the evil skeleton leader that plagues
the land with his minions.
One NPC is a vendor that will allow the character to buy apples and the other one
is a trainer that will allow the character to improve and evolve to be able to compete
against the enemy.
The town area is followed by multiple forest areas that are heavily populated with
skeleton enemies. At the last forest area there is a dagger that the player can use to
inflict more damage against the enemy forces.
After the forest areas, there is a big tree area where the player can climb inside and
find a better weapon than the dagger.
After the big tree area there is a final one that represents the entrance to the cave in
which the boss is waiting.
4.2 Gameplay
The player character movement is handled by pressing the left mouse button and
pointing at the direction at which the character is expected to go. Also the player uses
the left mouse button when attacking an enemy by pointing and clicking.
In combat the player suffers damage that needs to be healed. If the player health is
0 the game ends and the player is defeated. Healing is handled by eating apples. The
player can heal the hero by pressing the “A” key. The player must always be on guard
and ready to heal itself because the enemies will chase the hero up to some point.
Apples can be dropped by the enemies after they die or can be bought in town from
a vendor. The currency of the game is represented by coins that are dropped by ene-
mies after they are defeated.
With each enemy vanquished the player character gains experience up to a max, af-
ter that max is reached the hero levels up and gains improved attributes and also skill
points to spend. The skill points can be spent in town at a trainer to improve the hero
attributes.
Along the way the hero may find weapons. The player can switch between weap-
ons in the inventory with the right mouse button at any time.
The character statistics can be observed by pressing key “C” and the quest log by
pressing key “Q”.
To interact with an NPC the hero must simply approach that NPC and follow the
instructions presented by each.
The player wins the game if he defeats the boss in the cave.

8. 4.3 Implementation notes
For each area in the game a GAMVAS state was used, each state displays common
dialogs such as hero statistics and is able to populate itself with the necessary actors.
Every object that can interact in the game is called an actor. Each actor has a state
(brain) and can switch between those states at any time.
There are multiple types of actors in the game; there are actors for transitions be-
tween areas, enemies, walls, coins, apples, weapons and npc characters.
GAMVAS uses a javascript implementation of Box2D physics engine to handle
the game physics such as collisions and movement. Also no matter how many area
states are created GAMVAS uses just one Box2D World, this resulting in weird be-
havior such as colliding invisible objects that are not present in this state but are pre-
sent in other states. To avoid this, each area state populates itself when requested with
the necessary actors and resets the physics world. To be able to create the necessary
actors the area uses actor templates from which the actual actors are created. When
switching from an area state to another all the actors from the area are discarded and
new ones are created based on the templates.
The text drawing is handled directly in the HTML5 canvas by getting a context
reference.
5 Conclusions
Although the specification of HTML5 are still getting worked upon and may still
change in the future, especially the specifications for the canvas element, that is of
uttermost importance to the game developers, HTML5 is the way to go. After will be
natively supported by all modern browsers the other solutions used for displaying
interactive content will eventually be completely replaced (such as Adobe Flash).
Web browser games are already a big time waster on the internet this resulting in a
lot poorly and unsatisfying game being released just to get some more market share,
finding a good one is indeed a challenge for the gamer and also a big challenge for the
developer in order to create one.
References
1. http://gamvas.com/, tutorials and the api documentation
2. http://www.w3schools.com/html/html5_intro.asp
3. http://www.gamedev.net/topic/636190-web-browser-game-development/
4. http://buildingbrowsergames.com/
5. http://students.info.uaic.ro/~mihai.cristian/, you can play the demo here
Contact
 mihai.cristian@info.uaic.ro