Gamedevelopment specifiek voor smartphones is nog een relatief jong ambacht, maar toch zijn er al enkele ‘klassiekers’ op te noemen. Angry Birds, Doodle Jump en Plants vs. Zombies zijn een paar bekende namen, maar Cut the Rope hoort ook zeker in dit rijtje thuis. De app is intussen al meer dan 60 miljoen keer gedownload en daarmee één van de meest succesvolle games voor de smartphone.
Om de game voor een groter publiek toegankelijk te maken, is het Microsoft Internet Explorer-team een samenwerking aangegaan met ZeptoLab, de makers van de game, en de HTML5-specialisten van Pixel Lab. Doel was om de game om te zetten naar een HTML5-versie, zodat iedereen met de laatste versie van Internet Explorer het kan spelen. Daarnaast is het een prachtige showcase voor alles wat HTML5 te bieden heeft: canvas-rendered graphics, browsergebaseerde audio en video, CSS3 styling en embedding van WOFF-fonts.
Van Objective-C naar JavaScript Omdat de originele game een iOS app is, is deze geschreven in Objective-C. Om de overstap naar de webbrowser te maken, is de game omgezet naar JavaScript. Dat de game erg complex is, blijkt wel uit het aantal regels code: maar liefst 15.000 (exclusief libraries!). Dit zit hem vooral in de physics, animatie en de engine om de vectoren te tekenen. Om de unieke physics, bewegingen en het algehele gevoel van de game te houden, is besloten om de IE-versie als ‘port’ te benaderen, in plaats van een complete herschrijving.
In het verleden stond JavaScript bekend als een trage programmeertaal. Dit was vroeger inderdaad het geval, maar tegenwoordig zijn de JavaScript-engines sterk geoptimaliseerd. Mede door features als just-in-time compilatie kan JavaScript op bijna de native snelheid worden uitgevoerd. Dit is nodig om de soepele game-ervaring van het origineel te behouden.
Naast het porten van de code is ook het omzetten van de grafische engine een belangrijk aandachtspunt geweest. Origineel is gebruik gebmaakt van de OpenGL graphics code, voor HTML5 moet uiteraard de Canvas API worden gebruikt. Canvas lijkt te zijn gemaakt voor dit soort toepassingen, het is een uitermate lichtgewicht en snel renderplatform. Met name in browsers waarbij de API gebruik maakt van hardwareversnelling (zoals Internet Explorer 9) is dit een groot voordeel.
Op sommige gebieden biedt de Canvas API zelfs méér functionaliteit dan OpenGL in het origineel. Een voorbeeld daarvan is het anti-alias tekenen van de touwtjes. Om dit in OpenGL te bereiken is een touwtje opgebouwd uit meerdere kleine driehoekjes (polygonen), die aan elkaar gekoppeld zijn. De randen van de cirkels faden naar buiten toe naar volledige transparantie, zodat ze er uitgezoomd vloeiend uitzien. Erg omslachtig, en het gebruik van de line-functie in de Canvas API maakt dit in één handeling overbodig. De canvas anti-aliast het geheel en klaar is kees!
Tools Pixel Labs was verantwoordelijk voor de code die deze game laat werken. Deze is grotendeels geschreven in Visual Web Developer 2010. Denis Morozov, director development bij Pixel Labs, is erg te spreken over de stabiliteit van deze editor, en geeft aan dat met name de auto-aanvulling voor JavaScript en CSS grote timesavers zijn geweest. Citaat? Het testen werd gedaan in Internet Explorer 9 op Windows 7. Soms werd ook getest in andere (webkit-gebaseerde) browsers, maar alle grote browsers zijn erg consistent in hun HTML5-implementatie. Hierdoor was vrijwel alles wat was getest voor IE9 ook ‘gewoon’ operationeel in andere browsers.
Let’s play! Nieuwsgierig geworden naar de game? Deze is gratis te spelen op www.cuttherope.ie. Have fun!
