Vul je mailadres in:

Met dank aan FeedBurner

 

Wie is online

Er zijn momenteel 0 gebruikers en 0 gasten online.

Gebruikerslogin

Start

edubits

Tools om te programmeren binnen HTML5

 TAGO

Het is helemaal niet mijn bedoeling om een cursus programmeren te schrijven.  Ik wil gewoon mijn ervaringen delen in mijn zoektocht naar een alternatief voor Flash.  Ondertussen heb je kunnen lezen dat ik gekozen heb voor Javascript in combinatie met Phaser.  Tijdens mijn leerproces met Javascript maak ik vaak gebruik van W3SCHOOLS een overzichtelijke, gestructureerde website, waar je ook nog eens alles kunt uittesten in een digitale zandbak. 

Tijdens het programmeren, heb je een editor nodig.  In principe kan je daarvoor kladblok gebruiken, maar ik gebruik liever een editor die tips geeft over de syntaxis van de programmeertaal.  Ik gebruikte eerst Brackets van, jawel Adobe, maar ik las heel positieve kritieken over Webstorm van Jetbrains.  Die laatste is niet gratis, maar is zijn geld waard.

Voor het grafisch deel, zoals het maken van de knoppen, boxen en tekeningen, gebruik ik zowel Flash als Paintshop Pro, mijn vertrouwd tekenprogramma.  Flash blijft ook nog altijd een goede vectoranimator, waarmee je afbeeldingen zonder kwaliteitsverlies kunt vergroten en webwerken.  Om alle assets op de juiste plaats te krijgen, gebruik ik de MightyFingers Game editor, maar als programmeereditor raakte ik er geen wijs uit.

Het uittesten van het programma gebeurt binnen de brower.  Via logs in de console van Chrome vraag ik de inhoud van variabelen op.  Het debuggen is niet zo gebruiksvriendelijk als onder Flash, maar het lukt.

Programmeren is voor mij een proces van leren uit jouw fouten.  Je steekt soms uren in het vissen naar een fout in je programma en dan blijkt dit een hoofdleter te zijn waar een kleine letter verwacht wordt.  Soms is het een , i.p.v. een ;  Maar tijdens dit zoekproces leer je eigenlijk ook veel bij.  Wanneer ik een probleem echt niet kan oplossen, dan ga ik te rade op het forum van HTML5 Game Devs waar  gebruikers van overal ter wereld je gratis bijstaan met raad en daad.  

Ondertussen is mijn eerste educatief programma in HTML5 (bijna) klaar.  Volgende week blog ik over TAGO.  Ik hoop daarna met de Intel XDK developerstool het programma in een app te gieten voor Android en/of iOS.  Deze tool is volledig gratis, je moet enkel een account aanmaken.

Toen ik twintig jaar geleden leerde programmeren in Visual Basic, stond ik er helemaal alleen voor.  Nu zijn alle tools (bijna) gratis en vind je heel veel ondersteuning op blogs en forums.  Ik probeer mijn kiezelsteentje bij te dragen.

Van Phaser naar elk multimedia-apparaat

In een vorige blog beschreef ik, waarom ik uiteindelijk Flash begraven heb.  Vandaag stond nog toevallig op zdnet.be dat Chrome standaard Flashbanners bant.  Een kleine test leerde me dat flashprogramma's blijkbaar wel nog werken. 

De teloorgang van Flash begon toen ene Steve Jobs Flash bande op de iPad.  Daardoor konden programma's gemaakt in Flash zonder hulpmiddelen niet afspelen op dit toestel.  Ook Android die in den beginne nog Flash ondersteunde, stopte vanaf versie 3 -dacht ik- met het afspelen van Flash.  Met Adobe Air lukt Flash nog wel op beide besturingssystemen, maar gebruiksvriendelijk is anders.  Sommige browsers als de Puffinbrowser slagen er ook in om Flash op het scherm te toveren, maar je boet heel wat aan snelheid in op die manier.

Phaser is een framework dat de javascript een boost geeft en de mogelijkheden van deze programmeertaal op bijna gelijke hoogte brengt van Flash.  Flash is superieur, maar daar zie je als gebruiker niet veel van, je ervaart eerder de nadelen van Flash.  Phaser voegt functies toe aan javascript, die je heel wat werk uit handen nemen.  Standaard is het werken met geluid onder javascript een kleine kwelling, maar in combinatie met Phaser is dit behoorlijk eenvoudig.  Het grootste voordeel van Phaser is dat je platformonafhankelijk programmeert.  Je hoeft je weinig zorgen te maken waar je programma zal draaien: in een browser op een pc, tablet of smartphone, als app onder Android, iOS of Windows 10.  Phaser zorgt ervoor dat alles netjes geschaald wordt volgens de resolutie van het toestel waarop het draait.  

Phaser is volledig gratis, een groot verschil met Adobe Flash, waarvoor je behoorlijk diep in je zakken mag tasten.  Er zijn wel gratis alternatieven als FlashDevelop.  Om javascript te programmeren volstaat in principe een simpele editor als kladblok, maar die is voor mij te rudimentair.  In een volgende blog verklap ik welke editor ik heb gekozen.

Van Flash naar Phaser

Afbeeldingsresultaat voor phaser html

Op 24 november van vorig jaar schreef ik de blog Terug naar mijn eerste liefde.  Dit had gelukkig niets te maken met mijn eerste lief, ik voel me nog altijd perfect gelukkig bij mijn vrouw, maar ik schreef toen dat ik de draad had opgepikt om terug te programmeren.   Lang heeft dit niet geduurd omdat ik ernstige twijfels had over het voortbestaan van Flash.  Flash is een fantastische programmeertaal, maar jammer genoeg behoorlijk makkelijk te misbruiken.  Er bestaan alternatieven en het toverwoord is HTML5.  Ik had toen geen zin om opnieuw een programmeertaal te leren.  Ik was ook afgeschrikt dat je ook html en css moest beheersen.  Na mijn eerste programma memomuzi gaf ik er de brui aan.  Ik had ondertussen wel de nieuwe website Edubits opgezet waarop ik oudere programma's in Flash met AS2 presenteer.

Toen ik Actionscript 3 studeerde, kwam ik vaak de blog van Emanuele Feronato tegen, die in zijn blogs een jaar geleden plots stopte met artikels over Flash.  Ook hij was overgestapt naar een nieuwe programmeertaal.  Dit was eerst Cocos2D JS, maar plots kwam er een waterval aan artikels over Phaser.  Toen ik me ook begon te verdiepen in Phaser, merkte ik dat mijn angst voor html, css en een nieuwe programmeertaal ongegrond was.  Phaser is een framework om spelletjes te bouwen die draaien onder html.  De taal die hiervoor gebruikt wordt is Javascript en die taal is makkelijker dan AS3.  Phaser werkt ook met Typescript en ik ben gestart om die taal te leren, omdat die nauwer aansluit bij AS3.  Maar gaandeweg ontdekte ik dat mijn oude programma's in visual basic behoorlijk eenvoudig zijn om te zetten naar Javascript en Javascript kent ook een grote fanclub op allerlei fora, waar als programmeeur heel wat info te rapen valt.

Toen ik terug was van vier weken Schotland, had ik me voorgenomen om in augustus elke morgen te investeren in studie.  Ik kocht het e-boek From null to full HTML cross platform game en een online cursus van Zenva.  Ik stond versteld hoe snel mijn leercurve steeg dank zij deze twee cursussen.  Halfweg augustus begon ik aan mijn eerste educatieve programma Tago in Html5, waarover later meer.  In mijn volgende blog wil ik kort de kracht van Phaser uitleggen.