• MelonJS vs EaselJS

    Net nadat ik mijn studie had afgerond, ben ik een tijdlang zeer intensief met (toen nog) Macromedia Flash bezig geweest. Flash 5 was nog niet eens uit, voor ik al bezig was met allerlei 3D-effecten en trucage waarmee je meer kon doen dan het programma standaard beloofde. Dit pionierswerk is mij altijd bijgebleven en ik zoek al lange tijd naar een alternatief voor Flash waarin ik mij net als toen vertrouwd kan voelen. Na 2010 werd duidelijk dat Apple geen ondersteuning ging bieden voor Flash binnen haar snel groeiende marktaandeel. Het werd tijd voor een alternatief en al snel riep iedereen: HTML5!

    Maar dat was niet helemaal terecht. Ten eerste weten veel mensen niet precies wat HTML5 nu precies betekent. Eigenlijk is het tweeledig. Aan de ene kant de gewone HTML-tags zoals we die al kenden, daar zijn er nu een aantal bijgekomen die meer betekenis geven aan content op pagina's -handig voor zoekmachines, en aan de andere kant heb je het scala aan uitbreidingen dat min of meer gelijktijdig lijkt te zijn geintroduceerd door veel browsers: HTML5 Canvas en CSS3. Over CSS3 niets dan lof, nooit was het stylen van pagina's zo flexibel en leuk. Met HTML5 Canvas heb ik meer problemen. Standaard is Canvas namelijk helemaal niet zo'n leuke toevoeging, alles dat met Canvas kan, kan eigenlijk ook met gewoon Javascript en is in elk geval net zo omslachtig en inefficient. Ik heb wel eens geprobeerd een website te schrijven in Canvas, en dat ging best aardig, tot ik afbeeldingen klikbaar wilde maken en ontdekte dat ik daarvoor allerlei coordinaten moest gaan zitten uitrekenen. Dat was totaal niet waar ik op hoopte en ik raakte dan ook snel gefrustreerd.

    Frameworks
    Maar de redding was nabij. Ik was natuurlijk niet de enige die problemen had met het Canvas-object, tal van ontwikkelaars waren me voor geweest (tot zover mijn pionierambities) en waren al aan de slag met libraries en frameworks om het leven van een Canvas-ontwikkelaar aangenamer te maken. Deze toevoegingen kun je met een eenvoudige include in je pagina opnemen, waarna ze allerlei functionaliteiten beschikbaar maken en tijdrovende klusjes uit handen nemen. Niks coordinaten uitrekenen, gewoon een clickHandler toevoegen aan een object, klaar! Er was nog maar een probleem. Welk framework is de beste? En geloof mij, er is heel veel keus! Ember, Lime, Fabric, Paper, Impact, Crafty, D3, Processing, Three, en nog veel meer. Ik heb elk framework onderzocht op toegankelijkheid, ondersteuning en snelheid en vond er maar 2 die boven de rest uitstegen:

    MelonJS
    Dit framework zet zichzelf neer als een framework voor spelontwikkelaars. Het biedt vreselijk veel handige hulpmiddelen, zoals geavanceerde spritesheetmogelijkheden (dankzij Tiled) en collision detection, zaken waar spelontwikkelaars blij van worden. Ook merk je aan alles dat de spelontwikkelaar in het middelpunt staat. Dit is ook meteen het grootste nadeel, het is niet eenvoudig om af te wijken van de standaardoplossingen die het framework biedt. Bijvoorbeeld: standaard kun je er een prima horizontaal scrollend spel mee maken. Maar wil je een verticale maken, dan moet je veel standaard instellingen opeens gaan overloaden, en daar is veel meer kennis voor nodig dan voor een horizontale scroller. Dit doet afbreuk aan de flexibiliteit. Ik heb zelf ook een spel geschreven in MelonJS (nee, die laat ik niet zien) en wat me daarbij opviel was dat ik steeds het gevoel had dat mijn code in een soort 'black box' verdween, ik wist niet precies waarom ik iets op een bepaalde manier moest doen, of ik begreep niet hoe dingen automatisch werkten. Iets dat ik mij bij Flash of concurrent CreateJS nooit heb afgevraagd. Ik loop wat op de zaken vooruit, maar MelonJS was voor mij een beetje een tegenvaller. Best een krachtige library, maar nog lang geen framework. Mist flexibiliteit, transparantie en helderheid. De syntax is ook erg anders dan ik gewend was van Actionscript of Javascript. Met de ondersteuning zit het wel goed, er is veel te vinden over MelonJS.

    CreateJS
    De naamgeving is wat verwarrend, want vroeger stond dit framework bekend als EaselJS. Nu het echter is samengevoegd met een paar andere libraries (het extreem handige preloadJS en soundJS) is het zich als 'totaaloplossing' CreateJS gaan noemen. En dat is niet voor niets, want een totaaloplossing biedt het zeker. In basis lijkt het wel of je Javascript schrijft, maar dat is met name te danken aan de transparantie waarmee de toevoegingen in je code worden opgenomen, je hebt nauwelijks in de gaten dat je CreateJS functionaliteiten gebruikt. Dit betekent erg weinig verwarring of opzoeken van codes, na een middagje syntax leren kun je al best indrukwekkende dingen bouwen. Als je echter een probleem hebt, blijkt het grootste nadeel van CreateJS: erg slechte ondersteuning. Informatie is wel te vinden online, maar een duidelijke, en vooral up-to-date documentatie is nauwelijks te vinden en de meeste antwoorden op je vragen vind je op stackoverflow, niet op de site van CreateJS zelf. En dat is wel jammer, want ik weet dat Lanny (die leer je snel genoeg kennen als je aan de slag gaat) het erg graag groot wil maken. Dat dit hem al deels is gelukt zie je aan de namen die CreateJS inmiddels omarmen, daarbij noem ik expliciet alleen.. Adobe. Ik denk dat wel duidelijk is waarom!

    Wat dit betekent voor de toekomst? Nog geen idee. Maar ben je op zoek naar een framework of library die allerlei tijdrovende zaken van HTML5 Canvas voor je kan overnemen? Dan kan ik CreateJS van harte aanbevelen. En nee, daar word ik niet voor betaald :)

‹ HOME Meer research