Martin Kool

How I brought HTML5 to the Space Quest Creators' Kickstarter

Wed, 09 May 2012 09:18:54 +0200

When I heared about the Guys From Andromeda teaming up again to make another Space Quest-ish sci-fi adventure game I was thrilled. Mark Crowe and Scott Murphy have been my adventure game heroes since I was 8, and have no doubt influenced my interest in computer game development.

Let’s rewind time to two weeks ago.

I tweeted if they were considering HTML5 as a viable option for their upcoming game (at the time I thought it was going to be another Space Quest). They did, but that was it. So on Tuesday I thought:

“Why don’t I create a small two-screen adventure game in HTML5 together with our artist Richard and send it to them?”

The mission was just to convince the Guys From Andromeda to consider HTML5 as an option and know we exist on planet Earth.

We limited ourselved to two days. Whatever wasn’t in the demo would just be left out.

Day 1

So we started throwing ideas at eachother and came up with a short story of Roger Wilco (the Space Quest protagonist) working at the Monolith Burger and delivering food to the Two Guys who were relaxing on their tropical in-space-island.

Richard started sketching and I started coding from scratch. After 2 minutes we were discussing this sketch:

I loved it, but I wanted to aim for a more recognizable Monolith Burger from Space Quest 3 which looked more like this:

Richard went back to work and came up with this new sketch:

That was very close to the original but we both liked it. So he went ahead and started working on the original artwork while I was making good progress on the engine.

The engine had a walking avatar (using code from scratch but a sprite from sarien.net’s version of Space Quest II) and definable walking-paths that would limit that avatar from walking all over the place.

I started cutting out pieces of his sketch, like the bay doors and closet doors, and used CSS transitions to smoothly slide them open and closing them - tweaking the pixels using webkit inspector in Chrome.

Artwork was dropped in dropbox again:

We were moving forward at ludicrous speed, and the work I had prepared on the sliding doors really sped up the process of making the actual doors open and close, and adjusting the walking boundaries was a matter of clicking the polygons back together.

Day 2

The next day we put in text dialogs, cursors, and even came up with an interface for use on the iPad (we were going to send the Two Guys this demo by means of a public pitch - one on the Chrome Web Store and one on the App Store).

Richard started working on the second scene:

And he created a new Roger Wilco sprite to put in the game:

We didn’t have time to put that in, so we stuck with SQ2 Roger and the island sketch. Just for fun, Richard later finished the island scene - here it is:

We also included flickering lights, object transitions and many other details - and the game engine also knew scene states and inventory items.

Richard also did a sketch for the splash screen while I was hacking away:

With this as the result:

We had fun animating the backdrop using hardware accelerated CSS tricks, but didn’t have the time to put in a little loading icon to prevent the screen being built up visually.

But for me, the trick was not hand over the perfect demo, but to illustrate what can be done from absolute scratch with HTML5. And not just canvas and pixels, but DOM manipulations, CSS and a lot of enthousiasm - not to mention a strong belief in the web platform for adventure gaming.

Sending the demo

At that time I was in contact with Chris Pope - one of Guys From Andromeda taking care of public relations and all business-related stuff. We were talking about how my little sarien.net could be used as a promotion, so I told him I had a surprise.

Then he asked me to sign an NDA so he could openly speak about their plans - about the kickstarter campagin and when that would start.

I had just submitted the game to the Chrome Web Store and Apple’s App Store (wrapped as a true app with Phonegap) and wanted to hold off passing it on to them so they could experience it fully on the iPad, but knowing now time was limited I sent Chris the Chrome Web Store URL and he shared it with Mark and Scott.

The Demo

This is the URL I gave:

https://chrome.google.com/webstore/detail/pcbhpogkmlpjhpjmohlnpdojdcmelhfd

The response

Martin,

Ok, wow.. so first let me say that we have had a ridiculous amount of pitches, resumes, emails, you name it. From the beginning I’ve felt HTML 5 might be the way to go, but thats because I’ve worked on mobile stuff before.. but in saying that, your pitch was the only that actually showed us something real, not to mention brilliant! You guys proved what you could do by creating a demo. You gave me something solid to actually take to Scott and Mark and show them.. and guess what? They loved it!!

The rest?

Well, it’s two weeks later and we’ve worked on quite some cool stuff together already. And I am still amazed. The goal of this demo was to create HTML5 platform awareness. I didn’t even consider the possibility of working with this team, so being involved in the kickstarter is, well, uhm, I don’t know. It’s beyond awesome and I bet Douglas Adams would’ve had a word for it.

And as I don’t want to reveal what it is that’s coming, I can assure everyone that this Kickstarter is going to be really unique in terms of fan collaboration and updates.

And hey - I’ve CHILLED with Mark Crowe and Scott Murphy!!!!!!!1 ;)

What more can a simple fan want? ;) Oh perhaps hang out with them, invite Tim Shafer, Notch and Al Lowe to the party and put a picture of it on facebook. Now that’s something I don’t think Douglas Adams would have a word for.

(and for fun - try the above at sarien.net :) )

Q42 Games: Gameplay, And The Importance Of Intrinsic Motivation

Thu, 29 Mar 2012 20:54:13 +0200

Q42 Games: Gameplay, And The Importance Of Intrinsic Motivation:

q42games:

A few days per week we are now working on a new game for iOS and the Chrome Web Store with a small team. We know what direction we’re heading, and we take our time to experiment with artistic twists, new gameplay elements, unlockables, collectible items and different approaches in terms of…

Should funded Kickstarters remain open for funding?

Thu, 15 Mar 2012 22:10:40 +0100

God I love adventure games. So oh boy did I back the Double Fine kickstarter. Hey, it ended 2 days ago, so your money and mine was transferred to Double Fine - for great justice.

$3,336,371 gets you a long way, but what if more people want to “back” it? Impossible this way, as kickstarter is about starting new ideas by funding them and once the time is up it’s a done deal.

Since Double Fine, we’ve seen more projects pass $1M in funding, and governments discussing on whether or not crowdfunding should be regulated - though that’s another discussion.

But I wonder: what would happen if, say, the Double Fine kickstarter still left the payment option open for people to back that project post-fundem? Where would they be in a month? And more importantly; what more would the (financially) connected community get beyond what they are already getting?^*

(* a sarien.net kinda hosted online version up in the Chrome Web Store or on Facebook perhaps? Hey Tim, if you read this - “how you doin?” ;) )

iPad 3 Web Developers: Know The 2 Megapixel Limit

Fri, 02 Mar 2012 17:30:00 +0100

Apple’s iPad 3 is set to launch a few days from now, and if the rumors are true it will feature a retina display of 2048 × 1536 pixels. That’s about π megapixels for games and apps to make use of.

Mobile Safari has a few resource limits that web developers may not have encountered yet as full-screen 1024 × 768 images did not exceed that limit. If Apple doesn’t change the limitations then you will want to know this.

In short, the limitation states that:

JPEG images of any size between 2 and 32 megapixels are subsampled down to 2, regardless of the amount of RAM you have.
PNG, GIF and TIFF have a 3 megapixel limit for devices with 256 MB of RAM, and a 5 megapixel cap for devices with 512 MB of RAM.

It means your JPEG images will not remain as crisp as you have designed them when their width × height exceeds 1024 × 1024 × 2 pixels, which they will when designed for the iPad 3 retina display.

So when the iPad 3 is launched, check if this limitation is still active. If so, break up large images into multiple smaller pieces that - when combined - offer the original crisp and sharp visual that you had designed.

This post by Dave Spurr might give you some more information about this resampling behavior, and my experiences early last year got me to debugging different image sizes exactly like that until I found Apple’s resource limit information.

If you want to better prepare yourself for designing and developing retina iPad (web) apps, Luke Wroblewski’s Designing for the Retina Display is a great place to start.

boobga: Catch Aliens http://bit.ly/boa_iphone

Fri, 02 Mar 2012 07:25:09 +0100

boobga:

Catch Aliens http://bit.ly/boa_iphone

Dr.Boxmodel or: How I Learned To Stop Worrying And Love The 1997 IE Version

Tue, 28 Feb 2012 13:12:38 +0100

Take a cardboard box.

Measure its width and height.

Put something in it. Om Nom for example.

Add some padding.

Now measure that box again.

Guess what? It’s still the same width and height!

Now then, what if we tried this in HTML and CSS? Today?

For the record, today is 2012. We’re in the midst of a rapidly evolving web that has brought us hardware accelerated 3D transforms, webGL shaders, audio processing, gamepad support, notifications, offline local SQL storage, mouse pointer locking and laserbeams that can destroy entire planets.

With all that artillery in place, let’s make a box, give it a certain width and add some padding.

We specify a box with a width of 100 pixels.

#box { width: 100px; }

Saying our box is 100 pixels wide is like saying our box is 100 pixels wide and it kindof means that “OUR BOX IS 100 PIXELS WIDE”. That’s 100 pixels. Wide.

Now add a ten pixels of padding inside.

#box { width: 100px; padding: 10px; }

Measure the box again. Guess what? It’s 120 pixels wide.

Jeff Kaufman’s post “The Revenge Of the IE Boxmodel?“ came at the perfect timing and reminded me to stop going at this the hard way and adopt the old IE box model in a similar fashion that giveupandusetables.com has been the pragmatic programmer’s best friend over the advice of many white-bearded committee members.

All you need is this:

* { box-sizing: border-box; }

Or, as Paul Irish recommends:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

And BAM! Our box is 100 pixels wide. We’re in sense-making mode again. The one that the loving people at Microsoft came up with back in 1997. Back when IE was bashed at for doing their own browser enhancements (which is deemed perfectly normal for other browser vendors for many years now).

To get a compatibity overview of how box-sizing is supported in different browsers, you could also check HTML5Please.

Today I have switched to the border-box model for a real project I’m working on for a real client with a really big team. Already it has saved me loads of stupid calculations (“okay, so the box is 496 pixels wide and there’s 18 pixels padding, and …”) and I wish I had done this 10 years earlier.

So here’s my advice. Stop using todays box-model and party like it’s 1997.

jQuery Support for Cross Domain XHR in IE - Native or Plugin?

Fri, 24 Feb 2012 11:06:00 +0100

Today I stumbled upon what seems to be a cross-dmain issue in IE when trying to obtain data from server at domain A to client at domain B through an XmlHttpRequest (XHR) using jQuery.ajax for coding convenience.

Servers disallow such requests by default and setting the Access-Control-Allow-Origin header will whitelist other domains (or all domains by setting its value to “*”).

I was working on an html/js page on my localhost debug environment and I tried to get content from our staging server at a different domain. The Access-Control-Allow-Origin header was set to “*” and I am doing the required requests by said jQuery ajax call. Everything works fine in Chrome and Firefox.

IE however gave an error without many details and after some googling it seems this was due to IE XmlHttpRequests not allowing cross-domain requests regardless of the server’s setting. Instead, one needs to use IE’s proprietary XDomainRequest.

All well and good, but I was surprised to find that jQuery doesn’t work around this. There’s a ghist that adds XDomainRequest support to jQuery so the solution to this problem was simple, but I found this discussion far more interesting:

Ticket #8283 BUILT-IN SUPPORT FOR XDOMAINREQUEST

In short, the discussion is about wether jQuery should offer built-in support for XDomainRequest or if it should be provided as a plugin. I agree with some of the posters that jQuery’s main use is two-fold:

Work around browser inconsistencies
Simplifying complex operations

To me, a difference in XHR implementation in regard to cross domain requests falls under the same category as working around the difference is setting up DOM event listeners, and jQuery should offer built-in support.

What do you think?

Game Developer Gives 7-Year-Old Best Birthday Present Ever

Tue, 14 Feb 2012 18:09:00 +0100

UPDATE Feb 24: CultOfMac covers this story and informs us Zias’ level will be added to iOS as well!

Being a gaming father I try to raise my kids with a healthy balance of analog and digital fun. To the surprise of me and Mrs Kool they don’t seem to care about digital games that much, and prefer paper, glue and scissors and playing outside over anything else.

But recently my son Zias discovered Edge. And that changed things.

He loves it. The game, the puzzles, the music, the levels, everything. He knows which music belongs to what level, what secret passages can be reached when traversing through the level a certain way and when his gaming time is over he tends to his lego and builds his own Edge levels. He is a little me ;)

At first it seemed he was starting some sort of addiction, but it became his top Lego creativity booster and his creations give joy to the whole family. He really thinks each level through, and not only have my wife and I played many of his levels, even his two youger sisters like to play them.

And soon you can too…

You could say that I know the feeling of doing more with a certain game :) So I wanted to give Zias something Edge-related for his birthday, as I knew it would make him a very happy little guy.

I sent a tweet to Edge creator Two Tribes where I asked if they had any promotional material such as a poster, flyer or business card perhaps. As Two Tribes is a Dutch game developer, I got a tweet back in Dutch from company founder Collin van Ginkel where he asked me to to send him an email.

Then he wrote me:

“Hi Martin,

I don’t have much marketing material except for some digital flyers. But I thought it would be nice if Zias could make a Lego level for us, which we would rebuild and put back in the actual game. The level will have his name and be put on Steam.

Not sure if this can be arranged, but would that be a nice present?

Cheers,

Collin”

I was amazed. That would be such a special gift. It’s really special for a game developer to step out and do something this extraordinary for a little soon-to-be-seven-years-old guy somewhere in the world.

The e-mails that followed led to their lead level designer Hessel Bonenkamp to create the following invite:

It translates to

“Hi Zias!

We made Edge.
Would you like to come over
And show us your coolest Lego level?
We’ll then put it in the real Edge.

Cheers from Two Tribes
in Amersfoort”

Which was written specifically so that a 7-year old can immediately understand what it’s all about. In fact, he even knows where Amersfoort is :)

The reason I write this, is that I think such a nice gesture from Two Tribes deserves a lot of credit.

The actual birthday is next Saturday, and me and Zias will go over to Two Tribes somewhere early in March. We usually get a custom printed cake for our kids’ birthdays too, so when I asked Zias what kind of print he wanted his answer was simple:

“Edge”

To be continued…

Inside Flipboard The App

Mon, 23 Jan 2012 21:22:20 +0100

Just for fun, I am working on an html5 version of Flipboard. Not that I am recreating the entire app, but it’s a great way of geeking around with CSS and javascript to mimic its page flip using webkit transforms.

When it’s done I’ll post a full writeup here, but for now enjoy a sneak preview which doesn’t yet run on tablets (I think the final result will run on the iPad, Galaxy Tab, Kindle Fire, etc). In fact I’m pretty sure it only runs in Chrome right now ;)

http://dl.dropbox.com/u/3397654/flipboard/index.html

Hosted as a public dropbox page for now, it’s slow too. But it’s just a preview.

But here’s what I wanted to talk about: the cover images. It’s what you see when you start Flipboard for the first time. I got them by downloading Flipboard through iTunes and unzipping the .ipa file. And in it, I found a lot of great stuff that I thought I’d share (and asked permission for).

Not only are the beautiful cover images there in high-resolution, but also these so called “nano-first-time” images:

Or what about this image dubbed “flipboard-ios-team.gif”?

Then, there are a lot of json files that expose their CDN which turns out is located at

http://cdn.flipboard.com

The json files are labeled

config.json
default-covers.json
defaultSections.json
firstLaunchSections.json
layouts.json
popularSearches.json
sections.json
services.json

Now if you are interested in digging into more files, download the app yourself and do as I described above. But to highlight a few interesting bits:

The json files link to many images that I haven’t seen before such as this one:

And they expose some nice urls used for displaying RSS feeds:

“FeedTemplateHTMLURLString” :
”http://cdn.flipboard.com/flipmag/lib/fliprss.html”,
“FeedTemplateCSSURLString” :
“http://cdn.flipboard.com/flipmag/lib/fliprss.css”,
“FeedTemplateCSSURLStringLarge” :
“http://cdn.flipboard.com/flipmag/lib/fliprss-large.css”,
“FeedTemplateCSSURLStringXLarge” :
“http://cdn.flipboard.com/flipmag/lib/fliprss-Xlarge.css”,

Check out the used html if you (like me) enjoy building any html, css or javascript yourself that is slightly inspired by this beautiful app.

If you’d like to get more info on what’s all in there, let me know if I need to do a follow-up post. And if you like to stay tuned on the HTML5 Flipboard demo I am working on, be sure to follow me, mrtnkl, on twitter.

Textbooks in iBooks 2 can access online audio and video

Fri, 20 Jan 2012 09:07:00 +0100

One of the caveats of Apple’s attempt to disrupt the textbook industry is that the entry-level iPad not only costs $500 but it comes with a mere 16 Gb of storage. Have a few interactive books with video on the shelf like the new media-rich Life On Earth and you’ll run out of disk space in no time.

But here’s an interesting new setting in iBooks 2 that might help in addressing that challenge:

“Online Audio & Video”

Will it be used for embedding hosted video’s, piecharts, sound clips as an extra bonus to the book, or will authors use it to keep a trimmed download size of their books?

Het Fronteers certificaat: AJAX of WC Eend?

Thu, 12 Jan 2012 12:09:00 +0100

Ik heb het persoonlijk niet zo op Fronteers. Dat komt mede door mijn allergische reactie op de elitaire wijze van oprichting destijds door de op “international guru level” functionerende Peter-Paul Koch en het chauvinisme wat weer boven komt drijven bij de discussie of de “vakvereniging” niet toch een eigen front-end certificaat in het leven moet roepen.

Even terugspoelen naar 2007

De kandidaatstelling voor het voorzitterschap van de vereniging vond plaats op ppk’s persoonlijke site, en de aanmelding van Lon Boonen als tweede kandidaat daarvoor werd meermalen verwijderd. Lon’s verontwaardigde reacties daarop overigens ook.

Lon, ikzelf en anderen waren huiverig voor het idee dat onze international guru een ridikuul certificaat zou opstellen met zijn eigen richtlijnen om front-enders te bestempelen als “goed” of “slecht”. 1 van de voorgestelde geboden was “gij zult geen tabellen gebruiken”, of je nou genoeg braincells had om traditioneel out-of-the-box-model te denken of niet. Ook werd de visualisering overwogen om een gouden sterretje achter je naam te mogen plaatsen. I kid you not.

Instellingen zoekend naar een creatief team (bv de overheid en bedrijven) kunnen onwetend zijn wbt de kwaliteit van een front-end developer, en zouden best waarde kunnen gaan hechten aan zo’n certificaat, terwijl het zo kansloos is om concreet waarde daaraan toe te schrijven. Hoe ga je de waarde bepalen, waarborgen en handhaven? Het is allemaal vrij dubieus, en het vakgebied is nu eenmaal een enorm grijs gebied aan mogelijkheden die je op een miljard manier slim kunt combineren. Het is geen verkeersexamen waar je dingen goed of fout kunt doen.

“U wilt deze span een padding-top geven van 42 pixels. Kan dat?”

En dan de norm. Hoe leg je die, en op welke schaal bepaal je de resultaten. Mijn voorstel toen was om een “ppk level” in het leven te roepen dan maar. Ik ben nog maar level 7 ppk hoor, dus ik zal het vast allemaal verkeerd zien.

Maar goed, het is nu dus 2012 en de drang om te certificeren komt weer naar boven drijven blijkbaar.

Waarom deze post?

Om twee redenen:

1. Om op het Fronteers forum te reageren moet je registreren, maar dat kan niet, dus zul je wel lid moeten worden. Dan maar mijn mening op mijn eigen site. Gelukkig mag je met #frontcert op twitter reageren, ware het niet dat…

2. Je nu ook op twitter te maken krijgt met fronteers censuur [update: Krijn zegt de tweet met een biertje op niet als censuur te hebben bedoeld maar snapt dat het zo opgevat kan worden. Zie onder voor details]

Vandaar ook dat ik de censuur uit het verleden even aanstip. Ik wil graag mijn mening kwijt over dat certificaat zonder er geld voor te betalen, en zonder een weerwoord genuanceerder te moeten scrhijven.

Wat ik vind van zo’n certificaat

Om zo’n fronteers-certificaat te behalen moet je lid zijn van Fronteers. Naast de verenigingscontributie betaal je elke 2 jaar om je fronteers-certificaat te verlengen tegenover een deskundige vakjury bestaande uit… fronteers. Wel de beste natuurlijk (die met een ppk level van minimaal 80, je herkent ze aan een gouden sterretje achter hun naam).

Zo’n certificaat doet aan de onwetenden overkomen alsof het een kwaliteitsgarantie is. Maar wiskundig gezien scheidt het puur de fronteers-leden van niet-leden en maakt het van de vereniging zelf een Animal Farm. Het zegt niks over iemand’s creatieve vaardigheden, iemands vermogen tot oplossen van complexe problemen, iemands betrokkenheid bij klanten of iemands passie voor het vak. En net als bij de politie is handhaving een tweede. Ik zag dat Peter vd Zee op het forum met een alternatief komt wat in ieder geval al beter werkt, al denk ik dat je gewoon helemaal geen van deze kanten op zou moeten.

Het certificaat biedt enkel een extra vinkje bij hoe sommige instellingen tot hun keuze van uitvoerend creatief team komen; door RFP’s uit te sturen met een vergelijkingstabel:

Wat kost ‘t?
Wat voor CMaSs ga je gebruiken?
Hoeveel social media stop je er in?
Doe je AJAX of wc-eend?
…
[NIEUW!] Hoeveel werknemenrs hebben een fronteers diploma?

Oke, even alle gekheid op een stokje. Als ik de oprichting en ppk buiten beschouwing laat dan doet Fronteers een hoop goede goede dingen voor mensen die verder willen leren. Ze bieden cursussen aan, houden congressen en meetups, bieden een vacaturebank, prima allemaal. Een hoop collega’s en lui die ik respecteer zijn lid, volgen cursussen of zijn anderszijds betrokken.

Ik vind zo’n certificaat gewoon pure flauwekul.

Vraag een individu gewoon naar wat hij of zij in de vrije tijd allemaal heeft gedaan, dat geeft een retegoeie indruk, zelfs over de motivatie. En je wilt ook een persoonlijke klik als klant, dat haal je ook niet uit een certificaat. Ben je geinspireerd door iemands professionele werk of gehobby dan kun je ook nog naar een portfolio vragen en contact opnemen met voorgaande opdrachtgevers.

Laten we desnoods een manifest schrijven op iets als hoekiesikeenfrontender.org met een stappenplan hoe je als potentiele klant je selectie maakt om tot een goede front-ender te komen, en refereer daarnaar. Collectief, met z’n allen. Fronteer of niet.

Maar hou alsjeblieft op met dat elitaire certificatengezeur en al helemaal met die poging tot censuur. Als je een hashtag openstelt dan kun je ook commentaar verwachten. Ik verwacht ook een stormlading kritiek op deze post, vind ik prima. Discussie is gezond.

Zoals Stef Brooijmans zo mooi kan zeggen:

“Zonder wrijving geen glans”

De overeenkomst tussen een Fronteers certificaat en WC-Eend?

1. Daarom adviseren wij van Fronteers… Fronteers

2. Je kunt WC-Eend en een front-end certificaat door de plee spoelen

Fijne dag.

[disclaimert; bovenstaand is typisch mijn persoonlijke mening, eentje waar collega’s van ons op-guru-level-opererende bedrijf het mee oneens zouden kunnen zijn]

Update 1: diplomering zou ook gelden voor niet-fronteers

Update 2: Reactie op feedback van Krijn

Ik koester geen haat richting Fronteers, en als ik een tweet start met “@chriseidhof …” zonder #frontcert ben ik van mening dat ik ongenuanceerd mag tweeten tussen mij en die persoon, en ja, vanuit mijn eigen beleving en ervaringen met Fronteers. Het ging zelfs om een lolletje, maar de reactie die ik als censuur heb geschouwd zetten me aan om deze post te schrijven.

PPK vind ik gewoon een rare druif. Maar het vrijwilligerswerk van een aantal Fronteers heb ik wel degelijk respect voor, dus excuses als ik met deze post die personen raak.

Update 3: Heerlijk als blijkbaar een reply niet wordt geplaatst als ik gas geef tegen censuur :D Ging om een reactie van Sander en ook van mezelf. Beetje vragen om censuur grappen natuurlijk. Lijkt me eoa hickup met disqus ofzo. Vaag. Mail me anders op martin [ at ] q42 [ puntje ] nl dan plaats ik hem via een update erbij.

How to change the CSS hover state with webkit inspector

Mon, 02 Jan 2012 11:08:35 +0100

Chuck Norris can hover over an element and inspect it with Webkit Inspector at the same time. For us mere mortals, Webkit Inspector has a few tickboxes to toggle an element’s state.

Expand the Styles section and press the little arrow icon on the right. It opens a panel with the following states:

:active
:focus
:hover
:visited

Flipbird

Tue, 20 Dec 2011 10:11:00 +0100

The Flipboard logo will never be the same.

Wikipedia:

Finger (gesture)

The gesture has also been referred to flipping […] the bird.

PS. Sorry Mike ;)

6 UX suggestions for Grand Theft Auto III on iOS

Mon, 19 Dec 2011 15:51:00 +0100

GTA 3 is one of my all time favorites. If Rockstar would’ve created an app with the radio channels alone it would’ve been a justified purchase and perhaps a massive hit too, so bringing the full game to iOS is a treat. For that I thank Rockstar.

A treat that sadly has its caveats. So many even that the game is unplayable on my iPad (1). Literally. It crashes in between missions so frequently that after a few hours of trial and error I were forced to give up.

So while I await an update to fix these errors I wanted to share my thoughts on what could’ve done to improve this title’s playability on iOS. I won’t review the game, and many glitches where already mentioned in the TouchArcade and TechCrunch reviews (such as the crazy lock-on system).

1. Add quick-save

Ten years ago it seemed like a good idea to save your game by driving to a safehouse, parking the car in the garage and entering the building. Times have changed, and especially for iOS this is a no-go. When I’m about to leave the train I want to save my game in a second; tap menu, tap save, done.

2. Add auto-save when a mission is completed

The game crashed so many times for me that it was hard to finish a mission. When I did finish one, I immidiately tried to reach a safehouse prior to the game crashing, often without success. So if the crashes aren’t fixed, and the beforementioned quick-save isn’t added, the least Rockstar could do is auto-save after completing a mission. Right?

3. Extend the free-look touch area to the right side of the screen

Right now the touch-area is limited to the center of the screen. In the screenshot below, your right hand thumb usually is in the area of the wall you see there:

Right now you can’t look around when your hand is resting there (which is the default control scheme for many 3D shooter/action/RPG-like games). In GTA3 you have to lift your hand and touch the center of the screen to look around. Pity.

And there’s no way to change this touch area either :(

4. Don’t auto-pan on free-look and give us precise controls

When you look around, the camera feels laggy and tries to shift its panning and view back to a certain position that I really don’t understand. I’m sure it’s some perfectly sane calculation to optimize the viewport and prevent clipping issues, but the camera doesn’t feel free, nor does it feel responsive. Many iOS games have proven better camera controls, so from a company such as Rockstar I expected more.

5. Remove the unnecessary scrolling in menus

The menu options are a bit over-designed. Sure, they look really nice, but their big size requries you to scroll around to reach them, which really slows down navigation a lot. For instance, when you open the briefs option and return to the main menu again, it looks like this:

I am accustomed to hit the Play button in order to continue my game, but in this case it always shows “Start game” which causes a restart. In the screen above, the “Resume” button requires a swipe to the right in order to make it appear. It may be a minor detail, but details matter.

6. Make the target icon on the map more clear

When you’re on a mission, the destination is marked on the map. This marker is a small 5x5 green square on a brown map. So there’s hardly any contrast and it’s extremely easy to miss. I found myself searching for it quite often.

Add to these the ridiculous lock-on system when in a firefight and the huge amount of buttons they’ve put on screen without merging some into a more ambiguous trigger button and it feels the UI team should be sent back to the drawing board.

The thing that strikes me most is; most of these things feel so obvious that I don’t understand that the GTA3 iOS team itself didn’t feel bothered by these issues. I mean; we all know GTA 3 is a gem, so why not polish it?

Reason 42 why I hate Eclipse

Fri, 09 Dec 2011 11:15:48 +0100

I won’t beat around the bush. I love to rant and I hate Eclipse. I really utterly hate everything about it. To the bone. The GUI (the horror), the buttons glyphs (ONOES), the keyboard shortcuts (my god, the keyboard shortcuts), the dialogs (they haunt me), the annoying helper icons (MAKE IT STOP), AAAAAAaaaah!!!!!!

To pick just one of all the horrifying aspects I “dislike” about Eclipse is a difficult task, but for my rant of today I managed to do just that. As I was unable to terminate a running project as the uglified-square-with-rounded-corners thingy that ought to pass through as a “stop/terminate process” button was greyed out, it struck me that I didn’t even notice its positioning.

Yes. Its positioning.

Its terrible positioning that is the result of an utter lack of focus when its UI was put together by a disfocussed-whitebearded-enterprise-savy-open-source-loving-comittee of clueless people that tried to make every single pixel of the IDE configurable.

They came up with the following bright idea. Click on it to see a more detailed picture that - purely for the sake of this rant - was taken from a somewhat stretched window in order to allow me exaggerate my point.

What can I say? God I hate Eclipse. And Java. Oh, and aluminium.

My talk about game emulators in javascript at OnGameStart - The...

Fri, 02 Dec 2011 14:13:58 +0100

My talk about game emulators in javascript at OnGameStart - The first HTML5 Game Conference.

How to use Firebug on your iPad and iPhone

Fri, 02 Dec 2011 11:41:00 +0100

Web developers targetting HTML5 on iDevices would really benefit from having Web Developer Tools or Firebug on Mobile Safari. Enter Firebug Lite! However, iPads, iPhones and bookmarklets don’t go well together, so I put together this little howto.

All credits to Joe Hewitt for creating Firebug.

Surf to this page on your iPad or iPhone and bookmark it
Rename the bookmark to “Firebug”. As you can see, the URL is uneditable right now
Tap on this textarea …
Tap it again, choose “Select All” followed by “Copy”
Edit the Firebug bookmarklet, remove the URL and paste the bookmarklet
Choose “Done” (on the virtual keyboard) and you’re all set

Hitting that bookmarklet should give you a fully functioning Firebug at the bottom of your iPad’s viewport, like this:

It's on iPad like Donkey Kong

Wed, 14 Sep 2011 00:00:00 +0200

http://games.q42games.com/donkeykong2

One of my all time favorite games is Nintendo’s Game & Watch device “Donkey Kong II”. You can now play it on your iPad in HTML5. It is without sound on your precious tablet, but that’s due to Apple’s lack of proper audio support in Mobile Safari.

To play with sound effects, point your desktop browser there.

On the iPad it plays offline too, right after you’ve installed it on your home screen.

I hope that Nintendo will engage and support this tribute to a game long forgotten, in a similar way that Activision is endorsing sarien.net. Whatever Nintendo’s response will be (if any) - it would indicate that the games industry should take HTML5 more seriously, as it’s becoming a more mature gaming platform.

Here’s a video of my upcoming HTML5 game on the iPad: a...

Sat, 10 Sep 2011 00:00:00 +0200

Here’s a video of my upcoming HTML5 game on the iPad: a remake of the Game & Watch “Donkey Kong II”…

Leisure Suit Martin Goes Looking For Intellectual Properties (In Several Wrong Places)

Wed, 30 Mar 2011 00:00:00 +0200

It’s been a few weeks since the closure and reopening of Sarien.net. Codemasters is giving me the silent treatment and Activision has been very kind and helpful since, though they have been busy with other licenses such as Guitar Hero, so I understand that Space Quest is not top priority.

It seems that in the meantime Telltale Games has obtained a license to work on new King’s Quest episodes, and my own pursuits to obtain licenses (or even the actual IPs, seriously) have stranded thus far. Then one morning I received an e-mail from Al Lowe with the subject “Guess what?”:

I was just contacted by the company who is negotiating for the rights to the Larry IP with Codemasters and he wondered if I knew anyone who could get the games to work on mobiles and iPads! Do I?!

- Al

Is that awesome or what? We did a skype video chat and started planning, as this was a new opening towards reviving Leisure Suit Larry for the iPad. After a few discussions with all people involved we came to the conclusion that using ScummVM or Dosbox could not only lead to GPL issues, but also result in a game that lacks the user experience of playing an actual iPad game, or at least as I (being a real fan) would want to play it. Gamers would end up playing an emulated or ported game, and I know that it would show.

The other option, having me and Q42’s iOS team build the AGI engine from scratch, would exceed budgets, so as of now I don’t have much to go on.

It is by far the end of the Sarien saga however. As of today I have put the Black Cauldron and Gold Rush back online for iPad play while I track down the rightful owners of their respective intellectual properties. Also I will contact Codemasters again to see if Leisure Suit Larry at least can be restored on sarien.net again. And if anything else happens I’ll be sure to let you all know.