- Link to the game: http://www.mip-map.se/hwtoad
- Link to a summary of the lessons learned: http://mip-map.se/project/2013/november/
I have been using web technologies for a couple of years as a platform to experiment with programming. I also have an interest in game development, which made it natural for me to begin developing games in HTML5. When I started I was pretty enthusiastic, but these days I grow more skeptical.
From a historical perspective, HTML5 had a bit of a breakthrough in 2012. If you look a the [dates] you can see this reflected in the enthusistic headers. The more recent headlines are more skeptical.
- [Present] A community with developers who are working with HTML5 games. http://www.html5gamedevs.com/
- [Present] A collection of games made with HTML5 technology. http://html5games.com/
- [Present] A list of various engines/libraries that can be used in HTML5 game development. http://html5gameengine.com/
Google search results
These search results could be seen as a reflection on how many tutorials you will find, as well as how easy it will be to find help if you get stuck.
"iphone game development" 165 000 000 "android game development" 136 000 000 "windows game development" 119 000 000 "pc game development" 87 300 000 "mac game development" 63 900 000 "unity game development" 15 100 000 "html5 game development" 9 670 000 "gamemaker studio" 292 000 "createjs game development" 22 600 "kineticjs game development" 11 900
Articles about present/future of HTML5 in gaming (and general)
-  Writeup about what it's like developing games in HTML5 in 2013. http://gamasutra.com/blogs/MattHackett/20131220/207576/What_it_was_like_making_HTML5_games_in_2013.php
-  Some developers air opinions about the future of HTML5 as a games platform. http://www.gamesindustry.biz/articles/2012-03-23-future-proof-html5-native-client-and-the-battle-for-the-browser
-  A sceptical article about html5. http://www.gamesindustry.biz/articles/2012-05-11-html5-too-good-to-be-true
-  Intel, the processing company, wheighs the pros and cons about the use of HTML5 in games: http://software.intel.com/sites/billboard/article/future-html5
-  Web-app post about Zuckerberg's disliking of HTML5. http://news.cnet.com/8301-1023_3-57511142-93/html5-is-dead-long-live-html5/
-  Facebook notification about their use of HTML5. https://www.facebook.com/note.php?note_id=438532093919
Forum discussions - Slashdot
I like slashdot because it's populated with mix of performance geeks and pragmatic people.
-  Wolfenstein browser version. http://games.slashdot.org/story/12/05/10/222247/wolfenstein-3-d-celebrates-20-years-with-free-browser-based-version
-  Failed HTML5 game project goes open source http://games.slashdot.org/story/12/06/22/186249/the-death-of-an-html5-game-breeds-an-open-source-project
-  HTML5 games removes requirement of installation. http://games.slashdot.org/story/11/09/22/085251/game-devs-predict-death-of-flash-installed-games
-  Google Play/Chrome for HTML5 games. http://games.slashdot.org/story/11/08/28/192257/google-is-grooming-chrome-as-a-game-platform
-  Future discussion. http://games.slashdot.org/story/11/03/08/199212/browsers-the-gaming-platform-of-the-future
-  Facebook and HTML5 games. http://games.slashdot.org/story/11/02/19/2140253/facebook-develops-html5-gaming-benchmark
-  Quake II in Browser. http://games.slashdot.org/story/10/04/02/1812220/google-gets-quake-ii-running-in-html5
Stackoverflow posts about html5 games
I have skipped simple questions and only gathered questions of performance and structure. My titles are not the same as the posters.
-  About running a HTML5 game as a native app. http://stackoverflow.com/questions/19075208/html5-game-to-native-app
-  How do I make a multiplayer HTML5 game? http://stackoverflow.com/questions/17950739/html5-multiplayer-browser-game
-  How do I prevent players from cheating? http://stackoverflow.com/questions/3387057/html-5-games-can-i-secure-the-code-somehow-so-the-game-itself-wont-be-changed
-  How do I protect the source-code from being stolen? http://stackoverflow.com/questions/9612607/protecting-the-sources-of-html5-game
-  Rendering game elements on canvas. http://stackoverflow.com/questions/10961795/html5-canvas-and-game-programming
-  Second thoughts about HTML5 due to performance. http://stackoverflow.com/questions/12513685/performance-issues-with-html5-mobile-game
-  Is it possible to develop iOS games using HTML5? http://stackoverflow.com/questions/7375075/html5-for-ios-game-development
-  How do I make a game that runs on all browsers? http://stackoverflow.com/questions/4859716/how-can-i-use-html5-in-all-browsers-including-ie7-8
-  How important is canvas? http://stackoverflow.com/questions/6846622/html5-game-without-canvas
- [Present] http://www.linkedin.com/groups?gid=3908253&trk=myg_ugrp_ovr
- [Present] http://www.linkedin.com/groups/HTML5-Games-3286077?trk=myg_ugrp_ovr
In this entry I will discuss my experience of making a tennis game for the PUTT contest.
Even though I referenced all game-related variables such as ball-size and initial velocities into a Level() object, it was still hard to create different levels. I tried but it became hard to maintain and compare levels as they were represented in really long lists. A much better approach is to store all level variables in a local browser database and then load/unload data from there.
I started out with using paper.js to render the objects. The framework is built for vector graphics and is ill suited for rasters (sprites). Also it's method for animation was conflicting with the methods of stepping the game. As I removed paper.js from the game I decided not to use any frameworks, I wrote everything from scratch. If I would have gone for a framework I would have had to learn that framework first, before getting productive. In the end I think skipping frameworks was the right thing to do this time. In the future I will need something. Both a DOM manager and also a animations and asset loader. I think I will go for CreateJS, it seems well adapted for Web games.
From a simulation point of view the whole games was frame based and not time based. I thought this would be easier and it was. However it becomes tricky to regulate the pace of the game, which is important if you want to regulate difficulty level. For physics it could be hard to do a time based system from scratch (with my skills), so I would again have to use a framework. Anmations are easier though, so I would probably do something time-based there.
I used simplified AABB collision detection without corner checks and no gravity. Speed was done simply by having a 2d position and a 2d movement vector. It think it was good enough this time, but I need to find a way to include the corner checks in my next game. It made the balls slide in a glitch manner.
Animations and graphics
I made a very blunt home made animation system, based on frames. My graphics pipeline was pretty efficient in the beginning, but as the project grew and continued in scope it became very tedious. I worked like this:
- Make placeholder sprite in paint and bind it into the game.
- Sketch cars and items with pen/paper based on books and alter their designs to prevent copyright problems.
- Draw them in Inkscape and export high-resolution .pngs
- For background: make 6 big squares and paint entire background in each frame (the 500x500x9 image became quite big!).
Music and sound effects
Feedback and Help
I should have asked for more help about physics and collision testing. I was too proud and thought I could handle vector calculations and understand the concepts just by reading about it and drawing on my experience from university classes. I was wrong (I never really understood the courses) and it resulted in one and a half day wasted on nothing while working in a groked up mode. In another case I asked for help just to get attention to get me motivated to continue. This was childish and I need to channel this need in some other way in the future. Perhaps have a twitter feed like the rest of the self-absorbed netizens.
I was posting too many pictures in the gallery. One per day (at some times) was too much. I should have shown more restraint in this area. One of the rules in the article 'How NOT to Market Your Indie Game' (Dushan Chaciej) was that you should not publish every step of progress. I think I will post stuff in a twitter feed instead, If I feel like it.
I think I managed to include the mandatory features of the PUTT contest. It remains to be seen... :/ I can see how could improve the game now, but then I would need to rewrite the key structures. It's more fun to move on to another project, but reuse bits and pieces from this game.
Motivation and self management
The fact that the project was so well specified helped a lot. In the future I will work hard on the initial game design document. The fact it was an entry to a competition part was also important. Not because I necessarily want to win, but because it was a deadline to work against. Featurecreep was certainly a problem like it always is, but the deadline helped my prune the chaos quite a bit. Finally: here is an illustration that I think describe the development process:
Instead, they had mounted a replica of the control panel and had the game projected on the wall next to it. Here are some comments about my experience.
- The interface was extremely responsive. You had these industrial regulators that you could turn, like on a stove. Their angles set the target position of the pads.
- The pads could run outside the screen and balls bouncing-area.
- There was no powerups and the ball moved with constant speed.
- The pads had four trigger-areas, where only the tips of the pad triggered a larger bounce-angle (not the entire pad which I first thought). The two center trigger-areas did not seem to result in wider angle, it just flipped the x/y movement.
- The control was very sensitive in the sense that small movements in the control led to very fast movement. This made it feel a bit unstable but also more fun.
- As a player I was conflicted by my wish to hit the ball with the end cap to make it increase speed/unpredictable angle and and my wish to safely catch the ball.
In this entry I will argue that Geographic Information Systems can be useful in game development. I'm a hobbyist game developer and hobbyist GIS hacker. Please take my opinions with a grain of salt.
What is a Geographic Information System (GIS)?
A GIS consists of a database that supports spatiotemporal data and some form of interface that can make use of it. Somewhere in the tool chain you might find some analysis tools.
- Examples of rendering tools are are Open Streetmap (open source), Bing Mapsand Google Maps.
- Examples of analysis tools are Grass (open source), ArcGis and MapInfo.
- Examples of database systems that can handle spatiotemporal data are PostGis (open source), MySQL with spatial extentions and Oracle Spatial and Graph.
A GIS database have extra features to manage spatial data.
- Extended native datatypes: point, path, polygon, raster.
- Extended comparisions: contains, inside, length, area, volume etc.
- Examples on spatial SQL
Relevance to game development: stacking gameplay data
If you run many tests you will pile up a large quantity of data. Drawing conclusions from one game at a time can be useful, especially if you have player reactions on record. But in order to analyse patterns in larger sets of games; traditional replay features are not enough. You need to stack data and render it all at once. A GIS is very good at this as it can store large quantities of data and is optimized to query it using geometric and traditional attributes.
As a side-note: a game that actually has this feature is SuperMeatBoy, where you can see all your previous failures once you complete the level.
Relevance to game development: analysis ~
Many 2D and 3D games generate spatiotemporal data and a GIS is built to manage them. Gis analysis tools are used to analyse data.
- How many times does unit type A kill unit type B in the valleys and creeks outside the castle?
- In a set of 1000 games, how does the players behaviors affecting the random enemy-wave generation?
- How far into enemy territory are players generally able to make it before they die, on this asymmetric multiplayer map?
- How many "predefined incidents" occurred in the first 3 minutes of gameplay where the server was X, players were from countries A,B,E and how long did they continue to play after that.
- Where will players most likely diverge from the game-designers intended path?
- Where will the hardest battles take place? How will the AI move NPCs across the map?
- Where in the levels are players getting lost?
- Where does big battles take place?
- Gather data on special events that can be considered bad manners.
GIS tools are built to import/export industry standard file formats. If you make your game export data in one of these formats you won't have to do any processing before importing it into your database.
The data is points, lines, polygons, timestamps, game-event-ids and such.The data that games produced is "perfect" compared to real-world data which is full of imperfections. As a result you don't need the most advanced tools on the market because a large part of their features are there to manage these imperfections.
A very important aspect of any professional GIS is to use proper metadata, which are xml files containing information on how and when the data was created. If you follow industry standards in this aspect as well, the GIS software will help you stay organized as the project moves forward. In a game development setting the metadata can be build version, players, purpose and level/mission information.
A raster in a GIS environment are pre-rendered background maps, satellite photographs etc. They can also be heatmaps, where each pixel represents a aggregated value of that particular spatial "square".
I'm not good enough at GIS to give recommendations on file-formats but here are some starting points:
- Wikipedia - GIS file formats
- GML and GeoJSON GeoTIFF are my favorites and can be a good starting point.
One might argue that military grade mapping tools are overkill for a indie or any studio who has some xyzt coordinates to be rendered. However, if you stick to the standard formats you will be able to take advantage of already existing tools. Very clever persons have already done all the thinking. These tools are mature, free (in some cases), can handle large quantities of data and support very sophisticated analysis. Furthermore:
- Instead of spending developer time on in-game analysis tools you spend it on building export capability to these industry standard formats.
- Industry standard file formats are likely to have ready-made export libraries already written in your favorite language.
- The skills of the involved programmers are not a limitation to how complex analysis you can make.
Use case 1: 2D Tennis game ~
I have been building a Pong clone for a contest in the beginners forum. The game contains some random events: cars (AI-controlled pads) and the ball are launched at random velocities at random times. How does this play out in larger sets of games? Will the random elements really be random within the bounds I intend it to be?
One way of finding out is to let the game run for a long time with and without player input. The starting velocities, positions and time-to-death/loss would be logged into an array with simple (time,x,y,eventClass) coordinates. This data could be copied into a spreadsheet such as Excel or LibreOffice Calc.
In here, make a diagram. Set its background to be a screenshot of the game-board. Add the data to the board as a scatter-plot and filter out the classes you don't want. You might have to edit the x,y-axis span so that the points will be mapped to the correct parts of the screen.
An example where I did this in a StarCraft II map. I'ts a simple heatmap of unit-death events from one game.
Use case 2: StarCraft II - advanced ~
<< Logging game events, store them in PostGis database, run queries and render with OpenLayers. >>
Why doing it
How I did it
This adventure was mostly an experiment to see if it was possible, and it was. However the project grew out of scope so I never finished. The questions I wanted to have answered could be answered using Excel.
Use case 3: MMO super project
<<Set up a proper GIS with events/glitches/bugs with interface for bug-reporters, developers and player moderators to keep track of how game develops in real-time>>
The gaming industry can be quite stressful. If you at some point want to change career into something more stable, skills in GIS can be useful since government agencies and business worldwide use GIS quite a bit.
- It is a good way to organize player data
- I'ts made to handle large data-sets
- Products on market are mature
- Alternative career path
- Cartesian coordinate systems
- Mercator projection to translate round earth to flat map projections are used. Cylindrical projections such as the mercator projection have simple x,y coordinates and is thus useful as a projection for game data.
- Albert K.W. Yeung, G. Brent Hall (2007) Spatial Database Systems - Design, Implementation and Project Management.
Using Geographic Information Systems (GIS) as a game analysis toolmolehill mountaineer - Oct 24 2013 03:43 AM