Welk spel wil ik?

Spellen worden gebruikt voor de meest uiteenlopende doeleinden. Gek genoeg verloopt een gepsrek met een klant voor een serious game vaak lang dezelfde lijnen als met een klant voor een branded game.
De grote vraag is vaak: Is het budget leidend, of de doelstelling?
Een goede gamedesigner kan bij een leidend budget snel schakelen en zeggen welke onderdelen in het spel kunnen worden verwerkt voor welke prijs. Daarbij is het echter moeilijk vaste prijzen te geven, die zijn altijd afhankelijk van graad van uitwerking en combinaties van onderdelen.
Daarbij is het handig de volgende checklist in je hoofd te hebben:

 Welk spel wil ik? 

1. Doelen

   • Doelgroep (leeftijd, computervaardigheid)
   • Doelstelling (gedrags modificatie, serious, education, reclame)
   • Emotionele waarden (Hoe bereik je de doelstelling, vertaal je deze naar de gamethematiek
   • Beleving: Gewenste speelduur, verslaving etc.

2. Thematiek

   • Welk thema (aansluitend bij doelgroep)
   • Hoe uit de branding / sponsoring zich in thema en grafisch/ stijl?
   •  Beperkingen in gameDesign door wensen van sponsor/klant (bijv geen geweld)

3. Budget

   • Game budget in geld
   • Game budget in tijd (deadline!)
   • Landingssite/integratie in bestaande site

4. Spel elementen

   • GamePlay / gameEngine 
   • Levels (arcade style?)
   • Worlds (platform games, racing games etc)
   • Feedback: vrij te spelen, achiements, missions
   • Extra's: bonussen, lives, specials
   • GameShop

5. Spel content /screens

   • Loading
   • Splash
   • Menu
   • Gameresults
   • Prijzenpagina
   • Options
   • Credits
   • Help / integrated help?
   • Walkthrough
   • Highscores
   • Invite friends (social, tellafriend)
   • Design traject: Karakters / Kenmerkende Game elementen

6. Delivery

   • Context(s) (standalone/sitewarmer, campaign, nomad-, social-)
   • Platforms (App/web.. Flashfallback?, backward compatible)
   • Medium keuze (Unity, Flash, HTML5, Accelerated app, Native App, console, rig)

javascript en Physics.

Ik wilde een physics object toevoegen aan een game voor het sinterklaasjournaal.


Het ging erom, dat er een physics object reageert op wat er in de game gebeurt.
 De blokjes verschuiven door acties van de gebruiker en hierop moet door de physics library adequaat worden gereageerd. Als het physics object onder een bepaalde hoogte komt is het spel gewonnen.
Leek me een simpele taak voor een physics engine, ik twijfelde of ik het niet gewoon zelf zou schrijven op het springbox principe. Maar omdat een van de objecten erg dun was, wilde ik toch liever voor een 'echte' library gaan, die al eerder en algemener getest was dan mijn eigen code.

Goden zij dank is er JSFiddle. Met deze bron voor een snelle opzet en heel wat lezen over verschillende soorten bodies en armaturen in box2d. Kwam ik eruit. Het Physics object kan nu alle vormen hebben, ook heel erg dun!

Dit is de bron in jsFiddle
Hier is de box2d download link

FIX: localtoGlobal missing in HTML5

To get a local position in a div is not directly possible.
Usually this is easy, just get the position of the parent and subtract.

But when the parent has been transformed (rotated or translated) it can be a REAL problem.
If you do not want to use matrix, because you are animating your divs with rotate and left and top, there is a solution that works cross-browser.

It's just not very simple.

Here is the JSfiddle: http://jsfiddle.net/Cr5wF/6/


Div (id:rot) is moved and rotated. The yellow dot is inside the grey area. On mouse move over the grey area the yellow dot is repositioned to fall exactly over the mouse.
NOTE: We cannot use transform-origin, because it is not supported by IE.

This is not a practical library, but more a proof of concept.
Note: just checked on my iPad and something is wrong... The grey object isn't moving.. No idea why yet..

Icons in scrolling menu

As an experiment I am writing this on my iPad.
Testing things in a touch environment can be a bit trying if you are used to working in a desktop environment like me.
So I've been playing around with jsfiddle directly on the iPad. It takes some getting used to, but it's possible. As a proof of concept I made this:

http://jsfiddle.net/RfDv6/7/

Debugging html5 games

Debugging games can be VERY annoying.
Especially if you have to debug android 2.2 for instance.
You are on a mobile device, without debug messages.
Android provides remote debugging, but not for really old browsers or all phones.

What to do?

Well the easiest way I could come up with was create my own debug-console in javascript.

Here is a jsFiddle:
http://jsfiddle.net/GfmxT/3/

In Chrome it works fine, but I checked on Android this morning and found there was no scrolling (even though scroll is on auto), and on IE and firefox it doesn't scroll down automatically! But you can use the scrollbars. I've been fiddling on the iPad and saw I needed a function to stop the autoscroll so you can swipe-scroll through the debug statements.

So there IS more than meets the eye to this simple concept.
I allready had some great experiences with clients testing and copying information from the debug console to communicate an error. That's a lot better than a bug report saying: "It doesn't work on...".
Now I often don't even have to reproduce the error to be able to fix it.

It's only too bad that the real error messages don't come through like they do on the desktop console. But I think there is a jQuery function to do (part) of that as well. So I'll be updating this soon.

PathFinding

For my first game (which was in isometrics) I needed to do some path-finding.

I found a nice js example first try:
http://qiao.github.io/PathFinding.js/visual/
Checking on my iPad: there is no way to start the search or move the begin and endpoint. We live in a strange world where something can be broken just on the iPad and we still don't blame the iPad. But hey, IE held that position for years and there are still people unaware it has fallen from grace.
But I keep thinking it should be a lot easier than all that.
The topology of my level is very simple so couldn't I write something that would do the job.
I took on the challenge in Flash and arrived at a simple solution. I'll show it here soon, but I am writing this on the iPad, so it's not gonna be right now.

transparent divs in IE

I was creating a game that should work fine in IE (9), iPad, and Chrome.
Halfway through I noticed my 'buttons' stayed stationary.

I decided to create a 'hotspot' layer on top of the game using transparent layers.
This way my events would fire, even when there are sprites (transparent, but with a square bounding box floating over the hotspots.
Everything worked fine in Chrome and on Ipad.
Then I tested IE.

No events fired whatsoever. So much so, that I made the hotspots visible by setting the background-color, just to check if they were not building up for some reason on IE.
When I did that, IE worked fine. Turns out transparent divs don't get any mouse or touch events.

Seems logical, but it's really not.
If you have a (partially) transparent image the click does not travel through the transparent part.
And that's how I managed to fix it: to get consistent behaviour, I added a 1 pixel transparent gif (remember those from the old days) to every hotspot.

So using bugs to fix bugs.. Isn't life wonderfull.