Jump to content
  • Advertisement
Sign in to follow this  
  • entries
  • comments
  • views

Entries in this blog


Highway Toad

This months main hobby-project was to make a Frogger clone. I did not manage to finish it, but since the project was the project and not the game, I concider it finished.
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/




HTML5 and game development - my bookmarks

This post is a collection of links to posts and statistics about Web/HTML5 as a gaming platform.
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.
[subheading]HTML5 communities[/subheading]
[Present] A community with developers who are working with HTML5 games. [size=2]http://www.html5gamedevs.com/
[Present] A collection of games made with HTML5 technology. [size=2]http://html5games.com/
[Present] A list of various engines/libraries that can be used in HTML5 game development. [size=2]http://html5gameengine.com/

[subheading]Google search results[/subheading]
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
[subheading]Articles about present/future of HTML5 in gaming (and general)[/subheading]

[2013] Writeup about what it's like developing games in HTML5 in 2013. [size=1]http://gamasutra.com/blogs/MattHackett/20131220/207576/What_it_was_like_making_HTML5_games_in_2013.php
[2013] David Geary's detailed tutorial on creating a javascript sidescroller. [size=2]http://www.ibm.com/developerworks/web/library/wa-html5-game7/index.html
[2012] Some developers air opinions about the future of HTML5 as a games platform. [size=2]http://www.gamesindustry.biz/articles/2012-03-23-future-proof-html5-native-client-and-the-battle-for-the-browser
[2012] A sceptical article about html5. [size=2]http://www.gamesindustry.biz/articles/2012-05-11-html5-too-good-to-be-true
[2012] Intel, the processing company, wheighs the pros and cons about the use of HTML5 in games: [size=2]http://software.intel.com/sites/billboard/article/future-html5
[2012] Web-app post about Zuckerberg's disliking of HTML5. [size=2]http://news.cnet.com/8301-1023_3-57511142-93/html5-is-dead-long-live-html5/
[2010] Facebook notification about their use of HTML5. [size=2]https://www.facebook.com/note.php?note_id=438532093919

[subheading]Forum discussions - Slashdot[/subheading]
I like slashdot because it's populated with mix of performance geeks and pragmatic people.
[2013] Javascript is slow on mobile. [size=2]http://mobile.slashdot.org/story/13/07/10/2045253/why-javascript-on-mobile-is-slow
[2012] Mozilla Javascript MMO. [size=2]http://games.slashdot.org/story/12/03/27/1856205/mozilla-releases-html5-mmo-browserquest
[2012] Wolfenstein browser version.[size=2] http://games.slashdot.org/story/12/05/10/222247/wolfenstein-3-d-celebrates-20-years-with-free-browser-based-version
[2012] Failed HTML5 game project goes open source[size=2] http://games.slashdot.org/story/12/06/22/186249/the-death-of-an-html5-game-breeds-an-open-source-project
[2011] HTML5 games removes requirement of installation. [size=2]http://games.slashdot.org/story/11/09/22/085251/game-devs-predict-death-of-flash-installed-games
[2011] Google Play/Chrome for HTML5 games. [size=2]http://games.slashdot.org/story/11/08/28/192257/google-is-grooming-chrome-as-a-game-platform
[2011] Future discussion. [size=2]http://games.slashdot.org/story/11/03/08/199212/browsers-the-gaming-platform-of-the-future
[2011] Facebook and HTML5 games. [size=2]http://games.slashdot.org/story/11/02/19/2140253/facebook-develops-html5-gaming-benchmark
[2012] General discussion. [size=2]http://ask.slashdot.org/story/10/07/14/0632238/javascripthtml-5-gaming
[2010] Quake II in Browser. [size=2]http://games.slashdot.org/story/10/04/02/1812220/google-gets-quake-ii-running-in-html5
[2010] Freeciv (Civilization clone) in Browser. [size=2]http://developers.slashdot.org/story/10/01/29/0323200/freeciv-as-benchmark-of-html5-canvas-javascript-performance

[subheading]Stackoverflow posts about html5 games[/subheading]
I have skipped simple questions and only gathered questions of performance and structure. My titles are not the same as the posters.
[2013] About running a HTML5 game as a native app. [size=2]http://stackoverflow.com/questions/19075208/html5-game-to-native-app

[2013] How do I make a multiplayer HTML5 game? [size=2]http://stackoverflow.com/questions/17950739/html5-multiplayer-browser-game
[2012] General question about how suitable HTML5 is for game development. [size=2]http://stackoverflow.com/questions/3019499/making-javascript-and-html5-games
[2012] How do I prevent players from cheating? [size=2]http://stackoverflow.com/questions/3387057/html-5-games-can-i-secure-the-code-somehow-so-the-game-itself-wont-be-changed
[2012] How do I protect the source-code from being stolen? [size=2]http://stackoverflow.com/questions/9612607/protecting-the-sources-of-html5-game
[2012] Rendering game elements on canvas. [size=2]http://stackoverflow.com/questions/10961795/html5-canvas-and-game-programming
[2012] Second thoughts about HTML5 due to performance. [size=2]http://stackoverflow.com/questions/12513685/performance-issues-with-html5-mobile-game
[2011] Is it possible to develop iOS games using HTML5? [size=2]http://stackoverflow.com/questions/7375075/html5-for-ios-game-development
[2011] How do I make a game that runs on all browsers? [size=2]http://stackoverflow.com/questions/4859716/how-can-i-use-html5-in-all-browsers-including-ie7-8
[2010] How important is canvas? [size=2]http://stackoverflow.com/questions/6846622/html5-game-without-canvas

[subheading]LinkedIn Groups[/subheading]
[Present] [size=2]http://www.linkedin.com/groups?gid=3908253&trk=myg_ugrp_ovr
[Present] [size=2]http://www.linkedin.com/groups/HTML5-Games-3286077?trk=myg_ugrp_ovr

If you have any interesting reads yourself, or statistics of some form then send me a pm or comment below.




Highway Tennis - development story

In this entry I will discuss my experience of making a tennis game for the PUTT contest.

The whole project was written in JavaScript as a web application. Mainly because I have worked with web technologies before, but also because I wanted to see what I could do with it. The architecture was to have a global Game() object that contained a Renderer() and Simulator(). The game stepped the simulator one step forward and then moved data to the renderer to draw it. I liked this approach because it seemed simple and the domains would not mess with each other. However, when I tried to implement more complex game-logic such as victory/defeat and powerups it became complicated. A powerup has both graphics and affects the simulator. As a result I scattered these functions both in the global scope and in the Game/Renderer/Simulator objects. It was very messy! In the future I will need to think more about how I implement these things in such a way that it is more modular. I need to use arrays in which I push modifiers and graphics as well as some form database perhaps. Javscript is kind of built to do chaining and modules, so I should look into how I could facilitate that.

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 animations: make N frame-boxes (squares) and draw animation in them. Export whole strip as one image and step through it with javascript where one frame at a time is rendered.
For background: make 6 big squares and paint entire background in each frame (the 500x500x9 image became quite big!).

This was not good because if I wanted to do a small change and see how it played out in the game I would have to repeat lot's of irritating steps (exporting/moving files/cropping) to get it working. I have to look for a more professional way of producing sprites and managing them. Also, I did not make any resource loader, which made some sprites load slower then others. This in return could result in the game starting without all sprites not ready.

Music and sound effects
I found an article that described how to sculpt explosions out of white noise. I also found an old tune I made in Garage Band. I used these assets as sound effects. I knew I would not be able to make a fantastic job in this area so I decided to leave it at the most simple level. Implementing it into the code became a little problem. HTML5 and Javascript supports sound, but the variables that handled the music and sounds went in as global variables. This was bad so in the future I hope I can find some kind of sound manager. I had the same problem as with the images - they were downloaded asynchronously (in the background) and some of them started to play too late. Furthermore, a sound object in JavaScript can not be played more then one time at the same time. In the future, I definitely need to find a framework that can handle the downloading and sound effect stacking properly.

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.

Meeting targets
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:





Pong field notes

I visited this exhibition about games in Stockholm this weekend. Apart from beer and fellow gamers they had the original Pong game. Of course, you were not allowed to play the actual game, it was too much of a rarity.

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.





Using Geographic Information Systems (GIS) as a game analysis tool

[color=#ff0000]Public Draft[/color]

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 [color=#696969]rendering tools[/color] are are Open Streetmap (open source), Bing Maps and Google Maps.
Examples of [color=#696969]analysis tools[/color] are Grass (open source), ArcGis and MapInfo.
Examples of [color=#696969]database systems[/color] that can handle spatiotemporal data are PostGis (open source), MySQL with spatial extentions and Oracle Spatial and Graph.

There are of course many more on the market, but I think these are the biggest ones. The analysis tools can of course render data, and the renderings tools usually comes with some API:s which you can use for data analysis.

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.

[color=#696969]Descriptive analysis[/color]
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.

[color=#696969]Predictive analysis[/color]
[color=#696969]W[/color]here 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?

[color=#696969]Data mining [/color]
Where in the levels are players getting lost?
Where does big battles take place?

[color=#696969]Player event logging[/color]
Gather data on special events that can be considered bad manners.

I think the descriptive analysis, data mining and event logging are the most useful analysis forms. Predictions can be hard since games are in their essence models and predictive analysis are models, which would mean you are modeling model behavior.

Generating data
[color=#696969]GIS tools are built to import/export industry standard file formats. [/color]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 [color=rgb(105,105,105)]use proper metadata[/color], 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".

[color=#696969]File formats[/color]
I'm not good enough at GIS to give recommendations on file-formats but here are some starting points:
Wikipedia - GIS file formats
[color=rgb(0,0,0)][font=sans-serif]GML and GeoJSON GeoTIFF are my favorites and can be a good starting point. [/font][/color]


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. [color=#696969]Very clever persons have already done all the thinking.[/color] These tools are mature, free (in some cases), can handle large quantities of data and support very sophisticated analysis. Furthermore:
[color=#696969]Instead[/color] 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 [color=#696969]ready-made export libraries[/color] 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
[color=#696969]Why doing it[/color]

[color=#696969]How I did it[/color]

[color=#696969]Post-mortem [/color]

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

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

The tools for analysis are there, they are mature and there are plenty of experts in the field.

Further reading
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.



Sign in to follow this  
  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!