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.

AIR Application generates virus false positive

Today I was startled to see that a Virus had been found in a program I created myself.
It was the presentation I made for my fathers wedding. I had conveniently put it in a AIR presentation, to be able to install it on a random computer attached to a beamer.

Just to translate this message: it says that my file (installation_presentation_16x9.exe has been infected and that another program tried to access it. The process that tried to access it was explorer.exe
So probalbly my son, who was using the computer at the time accidentally hit the installation icon when he was looking for minecraft.
Explorer tried to start the installation procedure and was interupted by the virus-scanner.

Now what worries me is NOT that I might have a virus. As stated, I created the AIR file myself via FLASH, using only program-code I wrote myself and resources (photo's and sound) that I own or shot myself. None of these reources sparked the interest of the virus-scanner. Ofcourse there might be a virus in AIR itself, but I think that's rather unlikely.

More probable is that the viruschecker saw AIR as a form of polymorphic malware and generated a false positive. Possibly someone has once used AIR to create malware and this led to the false positive, as the AIR installer is indeed a form of polymorphic code, but not per se polymorphic malware.

I am worried however, that future programs created in AIR might generate the same respons from this virus-scanner.
I was planning on charging people for software (games) written by me packaged in an AIR installer.
If this is the user experience I can expect, I fear for the succes of this endeavor even before I have begun..

Has anyone got information that might put this fear to rest?

Sinterklaas journaal games

For the Dutch site Sinterklaasjournaal, I'll be creating 7 pure HTML 5 games in the next 6 weeks.
So my deadline is somewhere around 30th of octobre.

The games need to be scalable (lineair like Flash) and respond to touch. On the Ipad sound will be just a music. On all other devices sound will be implemented.
I will create a preloader, splashpage and game per game.
Some games will have levels.

This may seem like a gargantuan task, but I have the benefit of having made many a flash game, even in the time when this wasn't easy. AS1 was buggy as hell and there was no real way to debug it.
Even so, I made a game in a couple of days in as3.

Now I face the same kind of technical difficulties: Dom-sprites are fine, but if you have to scale them lineairly aswell, you cannot use the background property,because background scaling is not supported in all browsers.
So I'll use a div and another clipping div as sprites.
This will give me very limited performance, so where ever possible, I'll not use spritesheets at all.

Primitive, but the result should work just about anywhere, because I'll use only div, overflow hidden, top and left.. I use Jquery to navigate around the DOM (and for little else).

I'll be posting examples and general findings here, in the coming six weeks or if I really don't have the time to post, later after I'm finished.

For now, my finding is that with this technique my Phone (HTC Desire, with Android 2.2.2) is the bottleneck performance wise. But I have succesfully had 20 moving sprites, depthsorted live at 25 fps, with multitouch enabled, this gives me hope.

Sitelocking experiment

Building a gamesite.. We had a lot of trouble with leeching before. So I've been looking at different ways to protect against that. One way is checking the HTTP_REFERER, but you shouldn't exclusively rely on that. Another is sending a javascript that breaks out of any Iframes etc, but Adobe kind of blew that for us with the allowscriptacces parameter. Still might work. Then there is a technique, where you load in a asset cross-domain and then fix your crossdomain.xml to allow just that. I don't know how that holds up agains referer spoofing, but for now, it seems to be working. Also rotating filenames and using a container to get them is something I'm going to look at.

Test met sitelocking:

Trying to include the following file here: http://www.snoep.at/labs/flash/sitelocking/sitelocking.swf

Iframes and frames:

It is also possible to circumvent most types of protection in an iframe, so let's try that:

Allowing legit use

Not withstanding all this security the file can still be viewed from: http://www.snoep.at/labs/flash/sitelocking/ The big drawback offcourse is caching. If you have been to this site, the swf file has been cached and WILL display on another site, no matter what I do. So time to kill caching by rotating filenames etc.

More on this subject later.