Jump to content

  • Log In with Google      Sign In   
  • Create Account

Mippy's Beehive

Highway Toad

Posted by , 29 November 2013 - - - - - - · 668 views
html5
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.


HTML5 and game development - my bookmarks

Posted by , 24 November 2013 - - - - - - · 865 views
HTML5
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.

HTML5 communities

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)


Forum discussions - Slashdot


I like slashdot because it's populated with mix of performance geeks and pragmatic people.

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.

LinkedIn Groups

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


Highway Tennis - development story

Posted by , 30 October 2013 - - - - - - · 1,464 views
pong, contest, javascript, html5
  • gameScreen
  • mainScreen
  • slomo
  • nowwithmussak
  • firstingame
  • first screen
  • screenshot
  • launchScreen
  • hwt01

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

Architecture
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.

Physics
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.

Publicity
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:

Developer vs. Player Perspectives




Pong field notes

Posted by , 27 October 2013 - - - - - - · 816 views
Pong, arcade classics, fieldnotes
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.
pong original



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

Posted by , 23 October 2013 - - - - - - · 1,346 views
GIS, analysis, quality, hack and 1 more...
Public Draft

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

Descriptive analysis
  • 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.
Predictive analysis
  • 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?
Data mining
  • Where in the levels are players getting lost?
  • Where does big battles take place?
Player event logging
  • 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
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.

Data
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.

Metadata
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.

Rasters
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".

File formats
I'm not good enough at GIS to give recommendations on file-formats but here are some starting points:


~


Overkill?
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.

StarCraftII simple heatmap

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

Post-mortem

Summary
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>>


~

Career
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.

Summary
  • 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.






December 2016 »

S M T W T F S
    123
45678910
11 121314151617
18192021222324
25262728293031