Web browser game development(lncs)


Published on

Practical works, MISS2, FII, UAIC, January 2013

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web browser game development(lncs)

  1. 1. Web browser game development Cristian Catalin Mihai, MISS2, Faculty of Computer Science, UAIC, Iasi, January 20131 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 onlinenetworks 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 acommon activity especially now when you can interact with friends and other peoplein 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 yourspare time and since web browsing reached the mobile, so did the web browsergames. There are multiple types of gamers from the casual ones that just want a fewminutes of fun, the longtime hour spending guys that made from a game world theirsecond 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 growncommunity with individuals that share the same passion for the company games.
  2. 2. Zynga is another good example. They made a community through their games anddeveloped this into a standalone social network. Games tend to form on their own communities. Take for example football; it’s justa game after all, or a cult to some and many of the supporters are casual weekendplayers 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 similardirection also in the online world. Being a gamer had never been easier with the evolution of information technologyallowing 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 especiallywhen 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 personshooter 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 designerand the developers themselves. Unlike developing games for a targeted operating system, where you can leaveaside the other ones, for example you develop games for Windows because it has alarge and strong community, a web browser game developer must take into accountthe fact that web browser is the development platform. A good side to this is that aweb browser such as Mozilla Firefox is available on many different operating systemssuch as Linux based ones, OSX etc., but the good side is also a bad side. You don’tjust 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 anyhuman being, the user, gets used to one browser, ignoring the rest. Just like going tosee 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 thesame on all of them, or at least on the most popular of them. As a developer, you mustensure 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 tohelp 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 simplescore sharing to getting inside and affecting the game world itself. The web scene provides a great opportunity for developers to get their gamesshared and known trough social interaction.
  3. 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 characterthat 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 conflictsituation, how fast can you run how hard you can hit something with your weapon orthe ability to perform a certain action. Also, the impersonated character can be affected by the choices made by the playerin the game world itself, such as deciding to accept a task or not, the choice of takingon or baking of from a fight to the areas you visit themselves. In response the game world is affected by the impersonated player character bychanging and altering certain characteristics. The characteristics of the game world are dictated by the way the game plays. Theworld 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 itsown historic events, forms of organization, factions and location just like in the realworld. The environment is grouped on regions or areas. Such an area can be a town or aforest. Each such area has its own playing characteristics, for example in a forest youcan attack hostile creatures and improve your character by acquiring experience whilein 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 thegame 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. 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 willallow 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 playercharacter makes. The main purpose of these areas is to help the player improve hischaracters attributes by acquiring experience from completing tasks and destroyingencounters. The Town regions will allow the player to train into different skills and to purchaseequipment. 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 achievethe optimal configuration for his character. The trainer interest points will allow the player character to learn new abilities thatwill help to progress through the game. The quest giver interest points will assign new missions to the player character todifferent area in The Wilderness. The Town regions will be populated with NPC characters that will interact with theplayer 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 theplayer. 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. 5. guide that improves health and energy attributes and natures bless that improves thestrength and dexterity attributes. The player character will be able to equip various items like armor and weaponsthat will further improve his attributes. The player character will be able to learn spells such as launching fire bolts, icebolts and healing.2.4 Our NPCs The NPCs will be present all over the game world in the form of encounters thatwill attack the player in The Wilderness or will provide services and guidance in TheTown. The encounter NPCs will have attributes on their own that will affect the way theyreact to the player character and the game world. The attributes are the same as theones the player character has.3 Developing the game3.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 theones found on the Open Game Art community and also the ones from Liberated PixelCup.3.2 The technology The main player on the browser stage is Adobe Flash. There are many browserbased games that run with the help Flash Player plugin. The advantage of flash is thatit runs the regardless the browser version or the operating system. It encapsulateshighly performing functions for vector graphics and fast 2D rendering and audioplayback. 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 itis specially designed for browsers. The newly emerged standard for HTML, HTML5, is the new standard regardingthe future of the interactive web content without the usage of external plugins such asFlash or Unity. This standard is to be supported in all future browsers. For this game HTML5 will be used.
  6. 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 isthe best 2D physics out there, capable of delivering fast rigid body dynamics andcollision detection. GAMVAS main unit is composed out of states. A state can be the main gamemenu, the game itself or a game stage. An actor in GAMVAS is the main interacting unit of the engine. An actor can be amenu button, a static wall in the game or the player character himself. An actor hasattached 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 gameactors and game logic. The player interacts with controls that interact with playercharacter 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 arefew 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. 7. 4 The demo4.1 About the environment The player starts in a town where he has two NPC characters that will help himalong the way of completing his quest to destroy the evil skeleton leader that plaguesthe land with his minions. One NPC is a vendor that will allow the character to buy apples and the other oneis a trainer that will allow the character to improve and evolve to be able to competeagainst the enemy. The town area is followed by multiple forest areas that are heavily populated withskeleton enemies. At the last forest area there is a dagger that the player can use toinflict more damage against the enemy forces. After the forest areas, there is a big tree area where the player can climb inside andfind a better weapon than the dagger. After the big tree area there is a final one that represents the entrance to the cave inwhich the boss is waiting.4.2 Gameplay The player character movement is handled by pressing the left mouse button andpointing at the direction at which the character is expected to go. Also the player usesthe 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 is0 the game ends and the player is defeated. Healing is handled by eating apples. Theplayer can heal the hero by pressing the “A” key. The player must always be on guardand 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 froma 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 skillpoints to spend. The skill points can be spent in town at a trainer to improve the heroattributes. 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 bypressing key “Q”. To interact with an NPC the hero must simply approach that NPC and follow theinstructions presented by each. The player wins the game if he defeats the boss in the cave.
  8. 8. 4.3 Implementation notes For each area in the game a GAMVAS state was used, each state displays commondialogs 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 handlethe game physics such as collisions and movement. Also no matter how many areastates 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 withthe necessary actors and resets the physics world. To be able to create the necessaryactors the area uses actor templates from which the actual actors are created. Whenswitching from an area state to another all the actors from the area are discarded andnew ones are created based on the templates. The text drawing is handled directly in the HTML5 canvas by getting a contextreference.5 Conclusions Although the specification of HTML5 are still getting worked upon and may stillchange in the future, especially the specifications for the canvas element, that is ofuttermost importance to the game developers, HTML5 is the way to go. After will benatively supported by all modern browsers the other solutions used for displayinginteractive 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 alot 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 thedeveloper 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 hereContact mihai.cristian@info.uaic.ro