zaterdag 28 juni 2014

Mouse / Touch input cross browser

Ons voorbeeld is noodgedwongen niet cross-browser, dus jullie mogen dit negeren, maar is even voor mijn eigen referentie:
Basic mouse:
http://jsfiddle.net/hD3Xm/

This  should work for all (tested on iPad, Chrome, windows8 tablet):
http://jsfiddle.net/hD3Xm/6/
Enige is, dat bij iedere nieuwe touch ALLE id's wisselen...
Maar ok, dat is dan wel consequent.

Dit werkt, maar het kan moderner, alleen moeten we dan een fallback bedenken:
http://jsfiddle.net/hD3Xm/9/
Ook zijn er in dit voorbeeld geen pointer-id's zodat het herkennen van multi-touch gestures moeilijker is.
Deze kan echter ook pen events detecteren.

http://blogs.msdn.com/b/davrous/archive/2013/02/20/handling-touch-in-your-html5-apps-thanks-to-the-pointer-events-of-ie10-and-windows-8.aspx

Ook is er een polyfill library voor oude browsers en support voor basic-gestures.
Klinkt goed.
Het enige probleem dat ik zie is dat de code WEL werkt voor Windows8, maar niet voor desktop.
In de huidige vorm. Maar het geeft wel aan, welke kant we opgaan.

Voorlopig is hammer.js misschien toch een goeie oplossing?
Hammer helpt alleen niet echt, omdat hun voorbeelden niet werken op windows8.

Dus terug naar wat WEL werkte in de test:
http://jsfiddle.net/hD3Xm/6/

Ik zou het graag via jquery doen, maar aan de andere kant, nodig is het niet.
http://jsfiddle.net/hD3Xm/10/
gebruikt jQeury, maar het stoort niet..


Index schijnt dus te starten bij 1.. En wordt 2, als er twee vingers naar beneden zijn.
Wellicht is de volgorde, waarin de events binnen komen bepalend voor welke vinger we hebben.
Daar zou ik mee kunnen experimenteren.

Voor nu


woensdag 25 juni 2014

Gameproject Trappenberg 1 - les 11 - redesign

Geen kuikenzombievoetbal

Er was weinig gebeurd, maar veel gediscussieerd over hoe vreemd het spel was geworden. Te vreemd, was de consensus. Kuikens, Zombies, Voetbal. We moesten kiezen.
We hebben gestemd en de kuikens waren de grote winnaar. Coop mode kwam erbij en de shooter blijft er ook in. Towerdefense kwam in de discussie keer op keer voorbij al had men er niet op gestemd.

Ok, wat willen kuikens: graan. Dus toch een soort garden-defense.

De coop-modus scheid de strateeg (beheert de muis) van de action-hero (de avatar).
Dit betekent dat de hero towers moet activeren met de toetsen alleen.

 Vervolgens hebben we gepraat over de stijl die we dan wel willen. We kwamen er niet uit, dus hebben we de stijl losgelaten. Ieder maakt deze vakantie minimaal een TOREN, een KUIKEN (of ander wezen, maar kuikens zijn het uitgangspunt) en een HELD.
Dit betekent, dat we van alles gemiddeld 3 zullen hebben.

Er komt een lijst met alle (tot nu toe bedachten) mogelijke eigenschappen van een kuiken, toren of held.
Bijvoorbeeld: snelheid, look, opladen, life, kosten, geluiden, animatie, damage, wapens etc etc.
Neem deze als uitgangspunt, maar kijk ook wat JOUW monster/held/toren uniek maakt en welke rol deze in het spel gaat spelen.



maandag 23 juni 2014

GameProject2014-Trappenberg 1,les 10, schieten en zombies.

De eerste werkende versie van onze game:
http://jsfiddle.net/MxLGL/ (Bekijken met CHROME!)


Er is nog maar 1 level.
Er komen daarin 4 zombies naar benenden.
Deze worden gedefinieerd op de volgende wijze:

var o={};
o.title='LEVEL 01';
o.spawn=[];
o.spawn.push({type:0,time:0});// zombie type 0 of tijd 0
o.spawn.push({type:0,time:50});
o.spawn.push({type:0,time:80});
o.spawn.push({type:0,time:110});
game.level.push(o);

Ik maak een object,o.
Binnen dit object maak ik een aantal variabelen, waaronder spawn (lijst of array)
Spawn is een lijst met momenten in het level, waarop ik een zombie wil laten 'spawnen' (nieuwe game entiteit maken, meestal gebruikt voor vijanden. Bullets spawn je ook, maar daar hoor je vrijwel nooit iemand zo over praten.)
In mijn spawnlist voor dit level, stop ik een viertal objecten. In de objecten zit het type zombie dat ik wil hebben en de tijd, waarop ik hem wil heben. De tijd wordt uitgedrukt in frames. (25 frames = 1 seconde)

Verder heb ik een aantal objecten gemaakt en lijsten aangepast.
Je zult zien, dat je eerste idee niet altijd klopt en dan moet je even rustig nadenken over wat je doet en stukjes opnieuw schrijven.

Ons programma wordt ondertussen zo groot, dat het niet echt meer makkelijk is om het te maken in Fiddle. Klik HIER  (voor een lifted-fullscreen-preview van onze game en druk met rechts en druk op opslaan als)
Je hebt de 'game' dan op je harde schijf staan. Speel het een paar keer en laat het je inspireren.

Dan zou ik willen vragen of je google Chrome en Notepad++ installeert. Beiden gratis programma's.

Als je de html-pagina in Notepad opent, kun je hem veranderen, in Chrome zie je het resultaat.
Als je in Chrome op ctrl-shift-i drukt, open je het debug-paneel.
Dit geeft heel handige informatie, als je iets fout doet. Bijvoorbeeld, op welke regel Chrome iets ziet, wat hij niet had verwacht. (Bijvoorbeeld een type of denkfout).

Goed, op deze wijze heb ik het schieten in de game gezet en daarna heb ik alles weer teruggezet als fiddle. Als je klikt in de cirkel dicht bij de toren waar de held inzit, schiet je.

Ik heb een data-url met een achtergrond (het gras) erin gestopt. Op deze wijze kunnen we in een gratis programma als "The Gimp" de achtergrond makkelijk bewerken.

Het programma detecteert twee mogelijke 'eindes' aan het spel:
1 als de zombies beneden zijn:
2 als er geen zombies meer zijn en er ook geen meer worden gespawned

Bovenstaande link is het resultaat. We zullen woensdag hiermee verder gaan.

-Er zit een bug in,ben benieuwd wie hem vind en of je kan bedenken hoe je hem oplost.


donderdag 19 juni 2014

GameProject2014-Trappenberg 1,les 9


Layout in een paar stappen.

Basis interacties en grafische mogelijkheden...
Ik heb een canvas element gecentreerd en een absolute grootte te geven.
Ik heb hem laten luisteren naar de muis. Omdat het canvas gechaald kan zijn, afhankelijk van hoe groot de pagina is, moet je de muis coordinaten delen door een factor. De muiscoordinaten komen binnen als pageX en pageY, dus ten opzichte van de pagina. Wij zijn geinteresseerd waar we zijn op het canvas.

http://jsfiddle.net/hWj75/

Het data model:

http://jsfiddle.net/hWj75/1/

Je data model is waar alle informatie van de game zit. De posities van grafische elementen sla je traditioneel ergens anders op. Je houdt model en view (bekijken) en controls (knoppen, muis etc) zoveel gescheiden.
Ik ben geen MVC aanhanger. Ik denk dat weinig game-developers dat van nature zijn.
Toch heeft het zijn nut, om te weten waar je mee bezig bent.
Doe je dat niet, hou ze dan maar gescheiden!

De HUD

HUD toegevoegd met 1 knop.
HUD = Heads Up Display. Dat is de in game informatie, die je ziet terwijl je speelt. Normaal alleen score enzo, in dit spel VEEL meer.

http://jsfiddle.net/hWj75/2/

Nog wat knoppen en hud/shop toegevoegd
http://jsfiddle.net/hWj75/3/
Ik heb de opzet van Bloons TD overgenomen voor de HUD/layout.
In de Hud zitten twee 'knoppen', flink wat torens, credits en levens. Deze reageren allemaal nog niet.
Het veld is nu onderverdeeld in te kleine stukjes. Dat ga ik nog veranderen.

Kleur

Vakjes in het veld een goede grootte gemaakt en gekleurd. De buttons voor de torens/turrets heb ik cosy kleurtjes gegeven.
http://jsfiddle.net/hWj75/6/
Hiervoor heb ik een palet toegevoegd.
game.palet={};

game.palet.greens=["#66CC33","#33CC4D","#8BD864"];

game.palet.pastel=["#66CC99","#66CCCC","#6699CC","#66CC66","#3DB87A","#2E8A5C","#9966CC","#99CC66","#B83D7A","#CC66CC"];
game.palet.cosy=["#66CC33","#33CC99","#33B3CC","#AFE495","#3366CC","#CC9933","#B164D8","#CC4D33","#CC9966","#993366"];

Gewoon een verzameling (object) met kleuren erin.
Hoe kom ik zo gauw aan al die codes?
Een goeie manier om snel kleuren-sets te maken:
http://www.colorschemer.com/online.html

MODULO


De groenen heb ik afwisselend gemaakt in een patroontje.
Ik loop door x en y om de blokken te tekenen (horizontaal en verticaal)
Ik gebruik dan de modulo operator. Dit is een rekenkundige bewerking, net als delen of vermenigvuldigen en je leert hem op school, alleen niet, dat het zo heet.
Wij noemen dat 'rest'.
Dus 9/4 is 2 rest 1, weet je nog.. Nou 9%4 is 1.. Dus 9 modulo vier betekent: delen door 4 en neem dan de rest.
Dus (x%2+y%3) betekent: (0 of 1) + (0 of 1 of 2) en geeft dus een uitkomst van ergens tussen de 0 en 3. Ik haal dan de juiste kleur op uit de verzameling greens. (Ik gebruik dus alleen de eerste 4 kleuren)
Maar ik heb maar 3 kleuren in game.palet.greens. Om te zorgen dat ik niet buiten het gedefinieerde gebied van de lijst kleuren ga, geef ik de lengte van de verzameling op en neem de modulo.
De rest van een deling kan nooit meer zijn dan de deler.. (klinkt ingewikkeld, maar denk maar eens)
(een positief getal)%5 kan 0,1,2,3,4 zijn. Nooit 5, want is het antwoord gewoon 1 meer.

Modulo is ongelooflijk handig en het is schandalig dat we dat niet uitgebreider op school krijgen!


woensdag 18 juni 2014

GameProject2014-Trappenberg 1,les 7 (geluid!)

Geluiden programmeren

Het enige waar we het nog niet over hebben gehad is geluid.
Geluid in HTML5 is niet makkelijk.
Bovendien kun je geluiden niet zo makkelijk in de cloud kwijt (zoals plaatjes op DeviantArt, blogger of Flickr) Dus zullen we iets moeten verzinnen om met gratis middelen geluid te maken.

Als we ze niet uit de cloud kunnen halen, stoppen we ze gewoon IN de game:
Je kunt in HTML5 dingen in een data-url stoppen. Dan verander je een geluids- of beeld-bestand in text.
Deze tekst kun je niet lezen. Maar je kunt hem wel laten zien of horen.

Voor geluid geld wel, dat je een browser moet hebben, die dat geluid aankan. Ik stel voor, dat we (om het onszelf nu even gemakkelijk te maken) kiezen voor Chrome. Deze is ook op de mac te installeren en heeft een goede support voor alle basis-technieken die we zouden willen gebruiken.

Hier is de fiddle.
http://jsfiddle.net/PLJjv/4/

Geluidseffecten via een data url, kun je vrij makkelijk maken of opnemen.
Er is WEL een size-limiet. Dus het is geen oplossing voor alles! (muziek bijvoorbeeld)

Zelf een data url maken:
http://dopiaza.org/tools/datauri/index.php

Geluid editen

Tegenwoordig kun je prima open-source software gratis gebruiken. Het risico op virussen is minimaal, omdat de source voor iedereen te zien is. Toch is het altijd verstandig een virusscanner te hebben.
http://audacity.sourceforge.net/?lang=nl

Hier kun je audacity downloaden, een COMPLETE editor voor geluid en instant opname studio.
Met audacity kun je loops knippen (voor muziek) en geluidseffecten maken, opnemen of bewerken.
Een goede grondregel is dat geluidseffecten kort zijn en een muziekloop niet veel meer dan 20 seconden hoeft te zijn.

Geluid Genereren

Een andere optie is het genereren van geluid. Een truuk die door vroege games (8-bit) veel werd gebruikt omdat opslagcapaciteit beperkt was. Aangezien we daar nu weer mee te maken hebben, omdat we GRATIS een game willen maken (en dus niet willen betalen voor de opslag van onze geluiden), is het best een idee dit te gaan doen.
Met BFXR kun je gratis geluiden maken en opslaan.
BFXR is Flash, hetgeen tegenwoordig een beetje uit de mode is. Dus we gaan het proberen op te lossen in HTML5, maar het programma geeft een goed idee van de geluiden die je zou kunnen genereren en opnemen als een receptjes in je game.  (met riffwave js lib, bijvoorbeeld).

http://www.bfxr.net/

GameProject2014-Trappenberg 1,les 8

Games Maken in HTML5 , les 7

Je eigen game designen

Zombie Kuiken Voetbal Defense Shooter (18/6/2014)

Met de kinderen van Mytylschool de trappenberg ben ik in brainstorm gegaan over wat voor game wij gaan maken in JSFiddle met de technieken uit de vorige lessen.

De plaatjes van de allereerste brainstorm zijn helaas verloren gegaan, maar het ging ongeveer zo:
Iemand riep "RPG", daarna "Zombie Gore" en ook voetbal kwam langs. Toen ik het verschil uitlegde tussen game-genre en game-thema, kwamen ook nog "Kuikens" en "Tower Defense" aan de orde.

Et voila: Zombie Kuiken Voetbal Defense Shooter was geboren. Nu nog een coole naam!


Op het digibord hebben we gezet wat we nodig denken te hebben

  • Basis is een towerdefense game, zoals bloons, maar je kunt er ook mee schieten. (Een beetje zoals je in een voetbal-spel alle rollen speelt, maar niet tegelijk. Als jij een speler niet bestuurt, wordt hij bestuurd door de computer, zoiets noem je een AI! (Artificial Intelligence)
  • Het thema is voetbal. (maar ook een beetje kuikentjes en zombie)
  • De zombie-kuikens komen in golven, ze hebben een bal bij zich. Ze trekken langzaam (het zijn wel zombies) op naar het doel.
  • Je kunt op de kuikens schieten (en als het kuiken met bal dood is op de bal zelf)
  • Er vallen stukjes van de kuikens af, want het zijn zombie kuikens.
  • Schieten met de muis, maar alleen vanuit een klein gebied rondom de toren, anders is het te moeilijk.
  • Een avatar, die kan lopen en torens kan repareren! Als je loopt en dus niet in de 'keepertower' zit, ben je kwetsbaar.
  • Een shop om torens te kopen of te upgraden.
  • Credits 'veren?' om torens te kopen en te repareren.
  • Een game doel: win de competitie
    Level doel:  Laat de kuikens NIET scoren in je goal (speel de bal weg)
    Je zit in een competitie, win je een level, dan schuif je een stukje omhoog.
  • Je levens zijn de score, het level begint met een wedstrijd, waarin je voor staat, bijvoorbeeld 5-2. Als de kuikens 4x scoren, verlies je de wedstrijd (het level). Afhankelijk daarvan krijg je je plek in de competitie.
  • Gamemodes: We willen ook gewoon eindeloos kuikens knallen, want dat vinden we leuk.
  • Help: we moeten van alles uitleggen, dit kan met een youtube filmpje, of met een oefenwedstrijd
  • Levels (we zullen een pad van de kuikens, kuikensoorten en aantal kuikens moeten bepalen per level.


Poging om een technisch ontwerp en teams te maken:


  • We hebben een splash scherm (waar je binnenkomt), een competitiescherm, een gamescherm en een help scherm (eventueel opties), het menu zit als een spin in het web. Ieder scherm kan terug naar het menu en het menu kan (vrijwel ieder scherm bereiken)
  • Het gameveld wordt verdeeld in blokken, waarover de kuikens lopen. Onderin staat je doel, je krijgt alvast 1 toren, dat is de keepertoren. Je kunt schieten door te klikken op een gebied rond de toren.
  • Naast het gameveld is een menu, waar je nieuwe torens kan kopen, als je tenminste genoeg geld/credit/veren hebt.
  • Er moeten plekken zijn, waar je torens kan neerzetten door te slepen vanuit de shop deze plekken zijn per level anders.
  • Er moeten een level-voortgang te zien zijn.


Teams/verantwoordelijken

  • Geluid: Robin (Hij gaat piepjes opnemen van zijn kanaries, misschien deze verlagen) Er zullen ook schietgeluiden moeten zijn, impact geluiden, een win en een verlies geluid.
  • Muziek: Enzo (Hij gaat rechtenvrije muziek scoren. Denk aan: game, competitie en splash en eventueel highscore muziek, loopjes!)
  • Tekenen: Maurits, Nina (Ieder ontwerp is welkom. Denk in stukjes. Van ieder kuiken hebben we stukjes nodig die eraf kunnen, snaveltjes, pootjes, vleugels, staart. Die stukjes laten ze achter. 
  • Programmeren: Bas, Karan, Emiel (Jullie kunnen alvast oefenen met de lessen op dit blog, ik zal de basis game-engine maken, jullie doen het fijnslijpen.)
  • Allemaal: Iedereen mag ALLES doen, maar deze mensen zijn verantwoordelijk.
    Dus heb je een leuk idee voor muziek (zoals al werd geopperd: de vogeltjesdans, maar dan erg traag) zeg het dan tegen Enzo. Heb je een leuk idee voor een kuiken, zeg het tegen Nina of Maurits. Zij verzamelen alles. Tekeningen, ideeen, schetsen.

Technisch:
We gaan proberen het programmeren in JSFiddle op te lossen (ik weet niet hoe groot je een fiddle kan maken, nog nooit geprobeerd. Lukt het niet, dan gaan we verder bij mij op de server, maar dan wordt het lastiger samenwerken)
Plaatjes kunnen we hier op blogger plaatsen of includen, wellicht geluid ook, dat zoek ik even uit.
Om het makkelijk te maken, gaan we uit van ultramoderne browsers, dus kijk niet op InternetExplorer9 ofzo..

Volgende week kijken we wat we verzameld hebben en verwacht ik een rapport van alle verantwoordelijken.

Eerste schets gamescherm:

LET OP: DIT ZIJN EERSTE SCHETSEN
DEZE GRAPHICS NIET EEN OP EEN OVERNEMEN.
Het is de bedoeling, dat het JULLIE spel wordt..
Het zijn eerste grafische verkenningen om te kijken naar ontwerp, contrast, kleurstellingen, mogelijkheden..
Gebruik het gerust als inspiratie. Maar zie het als een speelveld: Gaan we naar Cute? 8-bit? Stupid? Gore?
Of van alles een beetje? Moet het nacht zijn of dag op het voetbal veld? Hoe ziet zo'n zombie kuiken eruit?
Hoe de avatar, is dat een voetballer? Hoe ziet een kanon eruit en de voetbal?
We kunnen alle kanten op. Wees creatief, alle ideen zijn welkom. (al is het niet gezegd, dat hij het wordt!)

v
Naar les 9: De engine.. ..... ik moet hem nog ff schrijven...

Games Maken - Spritessheets - les6

Games Maken in HTML5 , les 6

Animeren met spritesheets

Je hebt vast wel eens een tekenfilm gezien. Door plaatjes heel snel af te wisselen (12 plaatjes per seonde minimaal) ontstaat de illusie van beweging. 25 plaatjes per seconde is vloeiende beweging. Meer dan 50 plaatjes per seconde kan een mens niet waarnemen. (Ondanks dat mijn TV 200 Hz aankan)

Goed, we moeten plaatjes hebben, dus. Ik heb deze plaatjes gemaakt van een oud project, dat ik voor Sanoma heb gedaan (DONALD DUCK.nl) Wellicht heb je het spel ooit gespeeld in het clubhuis:"Magische Mickey"
Om Mickey te laten lopen heb ik deze spritesheet gebruikt:

Zoals je kan zien is hij verdeeld in rechthoekige blokken, die allemaal even groot zijn. De blokken staan er om dat duidelijk te maken, in werkelijkheid, ziet het spritesheet er natuurlijk uit als hieronder: met een transparante achtergrond.

Je kunt het lezen als een strip, je begint links boven en gaat naar rechts. Aan het einde van de regel begin je op de tweede regel enz totdat je beneden bent aangekomen.

Dan begin je weer bovenaan, want het is een loop.

In plaats van je ogen te bewegen, zou je ook het plaatje kunnen bewegen. Als je nu het plaatje zo zou verschuiven, dat iedere keer precies de afstand van 1 blok wordt afgelegd, zou het lijken alsof mickey loopt.
.
In deze fiddle heb ik precies dat gedaan:
 http://jsfiddle.net/th6TK/

Zoals je ziet is er al bijna beweging..
Het aantal plaatjes per seconde is nu 5.
We gaan dit opvoeren en tegelijkertijd maken we het doosje, waarin
het plaatje zich beweegt kleiner. Precies zo klein als 1 blok.
Daardoor is er maar 1 blok tegelijk zichtbaar.

Als we dan ook de snelheid opvoeren krijg je dit: http://jsfiddle.net/th6TK/1/

Het knipperen van de lichte en donkergroene blokken leidt me teveel af.Ik pas het aan naar de transparante versie.
Transparante mickey: http://jsfiddle.net/th6TK/2/

Ja, nou begint het wat te worden.
We hebben een geanimeerde 'sprite'

Als we nu deze 'sprite' laten bewegen, krijgen we de illusie van een lopende mickey:

EXPERIMENT:
Kun je mickey laten moonwalken?
Hoe ziet het eruit als je de block grootte fout instelt?

Volgende les gaan we gamedesign doen.
We gaan bedenken wat voor game we willen maken en dan zetten we al deze technieken (en nog een erbij) in om een spel te maken.

Links voor zelfstudie:
Gratis animatieprogramma: PAP4, http://plasticanimationpaper.dk/




zaterdag 14 juni 2014

Canvas, Games Maken, les 5

Games Maken in HTML5 , les 5

Physicsmodel uitbreiden

Na de reset-stylesheet heb ik wat wijzigingen gemaakt in de style (css) en html. Alles blijft hetzelfde, alleen heb ik block hernoemd en een vaste breedte en hoogte gegeven. Ook heb ik de achtergrond geel gemaakt.

Nu wil ik het physics model een beetje uitbreiden, zodat we ook zwaartekracht hebben (en wrijving) en dus een wat natuurlijker gedrag krijgen..

Eerst spelen we nog even wat verder met ons physcis model.
http://jsfiddle.net/Lt6LZ/4/

In de gameloop typen we het volgende erbij:
    // gravity
    block.dy+=0.5;

dy kon je zien als de snelheid. Als we continu iets bij deze snelheid optellen, kun je dat zien als een kracht. In dit geval de zwaartekracht:

EXPERIMENT:
probeer te voorspellen wat er gebeurd als je de + in een - veranderd. Doe het, druk op run en kijk of je gelijk had.
Vraag: hoe zou je er wind bij kunnen maken als kracht?

In de gameloop (na of voor zwaartekracht,dat maakt niet veel uit) typen we:
    // air friction
    block.dx*=0.99;
    block.dy*=0.99;

Dit is misschien niet het meest toegankelijke.. als a+=1 betekent a=a+1..
Dan betekend a*=2; -> a=a*2; Ok, ik vermenigvuldig block.dx en block.dy dus met iets.
Met 0.99. Dat betekend, dat welke kant de snelheid ook op is: positief of negatief, hij wordt kleiner en wel met 1 honderdste per keer.
Dit is ook zo met luchtweerstand: Hoe harder je gaat, hoe meer luchtweerstand.
Sta je stil (dus is je snelheid 0, dan is de luchtweerstand ook 0)

EXPERIMENT: verander de waarde in een 0.999 of 0.9 en bekijk het effect. Wellicht ziet het er logischer uit, als je dx met een andere waarde vermenigvuldigd dan dy. Dit klopt natuurkundig gezien niet. Heb je daar een verklaring voor?

Canvas

Goed. We snappen een beetje hoe HTML in elkaar zit.
Deze manier van animeren is niet de meest efficiente, maar hij werkt wel op alle browsers.

Om het onszelf wat makkelijker te maken, gebruiken we voortaan canvas.
Op een canvas kun je tekenen. Oudere browsers kunnen een canvas helaas niet laten zien.

Als het allemaal vanaf nu niet meer werkt is het dus tijd om je browser te updaten!

Hier is hetzelfde programma, maar dan met een canvas:

http://jsfiddle.net/Lt6LZ/5/

Je ziet nu goed het verschil tussen de manier van animeren op een canvas en op een html-pagina.
Op een canvas teken je, op een HTML pagina schuif je met blokken.
Om ECHT hetzelfde effect te krijgen, moeten we wat we getekend hebben ook weer wissen.

http://jsfiddle.net/Lt6LZ/6/


Events

Nu wil ik klikken afvangen en iedere keer dat ik ergens klik, wil ik dat het blokje daarheen beweegt.
Klikken kun je ook op een canvas afvangen.
Dat maakt het wel makkelijker:

Kijk eens hier: http://jsfiddle.net/Lt6LZ/7/

Ik heb een EventListener toegevoegd op het canvas.
Events is een belangrijk concept en behoorlijk complex.Het komt hierop neer:
Als er iets gebeurd, maakt de computer een nieuwsbrief waarop staat wat er gebeurd.
Dit gaat naar ALLE onderdelen die zich abonneren middels een EventListener.
Alleen gaan er heel wat nieuwsbrieven uit. In het geval van mousemove events honderden per seconde.

Maar het principe is ongeveer hetzelfde.. (Er is VEEEL meer over te zeggen, natuurlijk..)

Voor nu is het genoeg: kijk wat er gebeurd in de fiddle als je klikt op het gele vlak.
Ik heb block (ons bewegende block) een variabele "state" gegeven. In het begin zet ik de state op
"fall". In dat geval doet block precies wat hij eerder al deed.
In de functie die wordt aangeroepen door de eventlistener.(Mousedown) wordt block.staat gezet op "follow".
In de gameloop kijk ik eerst wat voor waarde er in state zit.
Afhankelijk van die waarde ("fall" of "follow") doe ik iets.
Of het blok valt, of het blok krijgt een continue kracht in de richting van het punt, waar mijn muis het laatst klikte.

Hartstikke leuk, maar nu wil ik het ook horen, als mijn muis stopt met klikken.
Daarom voeg ik nog een listener toe:
http://jsfiddle.net/Lt6LZ/8/

met mouseup en mousemove is het stel compleet. Zodra de gebruiker nu iets met zijn muis doet (behalve het muiswiel) hoor ik ervan.
Ik verander block.state weer terug in "fall" als de muis omhoog gaat en ik zet tx en ty (target x, target y) weer als de muis beweegt. Op die manier beheers je het blok volkomen.
En zie je dat je het gemakkelijk kunt slepen.

Ik hoop dat jullie al een beetje een spelletje beginnen te zien.
Het is moeilijk voor te stellen met alleen een blok.
Laten we DAAR eens wat aan doen.

In de volgende les gaan we animeren.

Links voor zelfstudie:
Canvas: http://www.w3schools.com/tags/tag_canvas.asp
Switch: http://www.w3schools.com/js/js_switch.asp
Events: http://www.w3schools.com/js/js_htmldom_events.asp

Physics model, Games Maken in HTML5 , les 4

Games Maken in HTML5 , les 4

Restyling

Na de reset-stylesheet heb ik wat wijzigingen gemaakt in de style (css) en html. Alles blijft hetzelfde, alleen heb ik block hernoemd en een vaste breedte en hoogte gegeven. Ook heb ik de achtergrond geel gemaakt.
Ook heb ik 'block', onze 'div' een absolute positionering gegeven, zodat ik hem overal kan plaatsen op de pagina.

Kijk maar of je er uit kan komen, waar dit gebeurd, als je alle vorige lessen hebt gevolgd, zou je dat moeten kunnen volgen.
(straks duiken we in de javascript)
http://jsfiddle.net/Lt6LZ/3/


Physics model

In het javascript gedeelte heb ik alles weggehaald.. En dit er voor in de plaats gezet:

var block={};
block.ref=document.getElementById("block");
block.x=15;
block.y=35;
block.dx=3;
block.dy=3;

Block wordt een {}. Dit is een leeg object. Een object is een manier om dingen te groeperen.  In dit geval is het een verzameling van variabelen.
Binnen in een object, mag je variabelen maken, zonder 'var'.
De eerste variabele die ik maak in block is 'ref'. In 'block.ref' stop ik een verwijzing naar de 'div' met id='block'.
Vervolgens zet ik de variabelen x en y. In wiskunde staan x en y voor horizontale en verticale positie.
Samen bepalen ze de plek op een twee dimensionaal vlak.
Bij computers is x=0 en y=0 de linker bovenhoek. (In Wiskunde zou het de linker onderhoek zijn)
block.dx en block.dy kun je zien als de snelheid van 'block'. Dat gaan we later regelen, voorlopig zetten we ze op 3.

var loop_interval=window.setInterval(gameloop, 40);

In het vorige voorbeeld maakten we animatie met setTimeOut. Dit is een andere manier. Met window.setInterval is een standaard functie van window. We geven deze functie een block code dat we periodiek willen uitvoeren. In dit geval iedere 40 milliseconden.
Dat betekend dus dat de functie 'gameloop' 25 keer per seconde wordt uitgevoerd.
(1000 milliseconden / 40 milliseconden =25)
var w = window.innerWidth;
var h = window.innerHeight;

Als laatste vraag ik aan window wat de breedte en hoogte van het results window zijn.
Deze waarden stop ik in w en h. (omdat window.innerWidth nogal een mond vol is)

function gameloop()
{

Met function geven we aan dat er een block code aankomt. Deze code kunnen we aanspreken met de naam 'gameloop'

    // calculate new position

Met // geef je aan, dat wat er op die regel staat commentaar is. Commentaar wordt NIET uitgevoerd. Je zet het erin voor jezelf. Ook is het makkelijk (als je veel code hebt) om op te zoeken.
Ik zet mijn commentaren in het Engels, dat is een afspraak met mezelf. Zo weet ik dat ik moet zoeken op 'position' ipv 'positie'

    block.x+=block.dx;
    block.y+=block.dy;


Als eerste in het codeblock gameloop zetten we dus een nieuwe positie (x,y) voor block.
a+=2 is een kortere manier om a=a+2 te zeggen. Dus block.x+=block.dx betekent, dat de waarde in block.dx wordt opgeteld bij waarde in block.x en het resultaat wordt opgeslagen in block.x
Omdat block.dx=3 en block.x=15, zal block.x na deze operatie 18 zijn.
De volgende keer is hij 21, daarna 24 etc.
Hetzelfde doen we voor block.y.

    // bounce
    if(block.x>(w-15)) block.dx=-Math.abs(block.dx);

'if' bekijkt wat er tussen de haakjes staat (...) . Als deze uitdrukking waar is, wordt de code erna uitgevoerd. Zoniet,dan niet.
Dus if kijkt of 'block.x>(w-15)' waar is. > betekent groter dan. Dus er staat:
Is de horizontale positie van de linkerkant van block groter is dan de breedte van het window minus de breedte van block, dan ....
In het Nederlands:
Als block aan de rechterkant is aangekomen dan ....

Wat dan..? Nou, block.dx=-Math.abs(block.dx);
Math.abs is een standaard rekenkundige functie.
Math.abs(1)=1, Math.abs(-1)=1, Math.abs(-3.15)=3.15
-Math.abs(1)=-1, -Math.abs(-1)=-1 enz.
Dus, als je Math.abs een negatief getal geeft, maakt hij er hetzelfde positieve getal van. En als je daar een minnetje voor zet, wordt het altijd een negatief getal.
Dus block.dx blijft block.dx, behalve als block.dx positief is, dan wordt hij even groot, maar negatief.
In het Nederlands:
Als block aan de rechterkant is aangekomen dan ..verandert hij van richting. (Want dx is de snelheid, weet je nog?).

Dit is niet makkelijk leesbaar, maar gelukkig krijg je genoeg regels om te oefenen.
Want dit bepaald alleen de rechterkant. Ook de linkerkant en boven- en onderkant wil ik bepalen.

    if(block.x<0) block.dx=Math.abs(block.dx); 
    if(block.y>(h-15)) block.dy=-Math.abs(block.dy);
    if(block.y<0)block.dy=Math.abs(block.dy); 

< betekent kleiner dan. Voor de rest is het hetzelfde als net uitgelegd..
Dit is de code die zorgt voor het stuiteren.
Hierna volgt nog een klein stukje.

    block.ref.style.left=block.x+"px";
    block.ref.style.top=block.y+"px";
}

Dit lijkt op de code die we in het vorige voorbeeld gebruikte om de breedte te zetten. Want block.reg wat gelijk aan getElementById('block'), weet je nog?
Alleen gebruiken we nu de eigenschap left (linkerkant) en top (bovenkant). Deze zetten we op de positie, die opgeslagen is in block.x en block.y.


In de volgende les gaan we dingen laten bewegen. We gaan kijken naar het javascript vak!

NAAR LES 5
Beginnen bij les 1: http://games-maken.blogspot.nl/2014/06/games-maken-les-1.html


Links voor zelfstudie:
CSS (opmaak pagina's): http://www.w3schools.com/css/DEFAULT.asp
Kleur in HTML: http://www.w3schools.com/tags/ref_colorpicker.asp
Basis cursus HTML: http://www.homepage-maken.nl/htmlcursus/lessenoverzicht.php
HTML-escape characters: http://www.theukwebdesigncompany.com/articles/entity-escape-characters.php




Reset stylesheet, Game Maken, Les 3.

Games Maken in HTML5 , les 3

Alles is in beweging.

Het belangrijkste om te weten over ontwikkelen voor internet is: Alles is continu in beweging.
Er werken vele mensen aan het internet en ze hebben vele meningen. Het gevolg is dat we nu bij HTML5 zijn, CSS 3 en javascript 1.8.5. De vorige versies worden deels ondersteund, deels niet.
Ik probeer me hier te beperken tot dingen die universeel waar zijn, maar helaas kom je er dan niet.
Volgend jaar is een hoop van wat ik hier zeg misschien niet meer waar. DUS:
Kijk naar de datum van posts (zoals deze) die praten over techniek, kijk naar de datum van de bronnen en doe zelf OOK onderzoek.

Het idee is niet, dat je hier leert hoe het moet, maar dat je leert hoe je het moet uitzoeken.

Basis CSS en Cross Browser

Er zijn (helaas) kleine verschillen tussen de verschillende browsers (Chrome, Internet Explorer, Safari etc) Dezelfde pagina ziet er vaak net iets anders uit. Dit komt (voornamelijk) omdat de basis instellingen van de style (css) voor iedere browser anders is.
Voor internet pagina's maakt dat niet echt uit, maar voor games is het wel belangrijk..

Om alle (moderne) browsers dezelfde grpahics te laten zien hebben we wat basis instellingen nodig.
Dit wordt wel een 'RESET STYLESHEET' genoemd.
De meningen over hoe wijs dit is zijn verdeeld, maar het heeft absoluut zijn voordelen.

In het CSS vak type je:
html, body, div, iframe,
img, canvas, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
body{
 line-height: 1;
    font-family: sans-serif;
}
/***********EINDE RESET******************/
#tekst1{
    background-color: rgb(255,0,0);
}

Dit is een uitgeklede versie van een reset stylesheet, dat alleen gebruikt wat we nodig hebben.
JSFiddle : http://jsfiddle.net/Lt6LZ/2/

EXPERIMENT: Wat gebeurd er als je op run drukt?
De marges verdwijnen ten opzichte van de vorige fiddle. Dit is belangrijk als we dingen precies willen plaatsen in plaats van ongeveer. (En dat wilen we natuurlijk in een spel)
Verder zou er hetzelfde moeten gebeuren. Kijk in een andere browser naar het vorige experiment en dan naar deze. Als je in dit laatste experiment nog onderlinge verschillen ziet, dan faalt de reset-stylesheet.

In de volgende les gaan we een simpel physics model maken.
NAAR LES 4
Beginnen bij les 1: http://games-maken.blogspot.nl/2014/06/games-maken-les-1.html


Links voor zelfstudie:
Verschillende meningen over reset-stylesheets.

CSS reset styelsheet:
VOOR:

dinsdag 10 juni 2014

Programmeren, Game maken, les 2

Games Maken in HTML5 , les 2

Programmeren

In het javascript vak geef je opdrachten, waarmee je zowel de inhoud (HTML) als stijl (CSS) kan veranderen. Daarvoor gebruik je de id's die je aan objecten geeft.
Ook gebruik je javascript voor allerlei (andere) vormen van input en output. Input is alles wat je programma in gaat. Output is alles wat je programma uit gaat.
Bijvoorbeeld voor het reageren op de muis of het toetsenbord (input) of het afspelen van geluid op het juiste moment (output).

Een voorbeeld van het veranderen van de stijl/css:
Tik in het vak javascript:

var block=document.getElementById("tekst1");
block.style.width='150px';

UITLEG: var block=
Het woordje 'var' staat voor 'variabele'. Als je dat niet kent uit de wiskunde, mij is het ooit zo uitgelegd.
Stel je een kast voor met laadjes. Op deze laadjes staat een naam. Zo'n laadje is een 'variabele' en de kast is het geheugen van de computer. Door de namen van de laadjes kun je dingen die je in het geheugen stopt terugvinden. Het sleutelwoord 'var' betekent dat er een nieuw laadje moet worden gemaakt, genaamd block.
Vanaf dat moment is voor de computer 'block' gelijk aan wat ik erin stop.

We vullen de variabele 'block' met een formule om bij de 'div' tekst1 te komen.
Op de tweede regel, veranderen we de breedte van het blok naar 150 pixels. (Pixels zijn beeldpunten in CSS worden ze afgekort tot px)

Nu type je eronder:
block.innerHTML = "test";
en drukt op RUN.

Hiermee veranderen we wat er in de div tekst1 (block) zit. Het geeft hetzelfde effect als wanneer we
<div id="tekst1">test</div>
hadden getikt. Met javascript kun je dus achteraf, programmatisch de look en content van je pagina bepalen.

JSFiddle: http://jsfiddle.net/6W5f4/

EXPERIMENT: verander de breedte naar een andere waarde en als je jezelf dapper voelt:
kleur programmatisch het block met: 'style.background-color'
Je kunt in feite alles wat je in CSS gebruikt, ook in javascript gebruiken en vaak is de syntax (een computerterm voor woorden/correcte spelling, letterlijk: zinsbouw) hetzelfde.

Beweging

Als we javascript zover krijgen meerdere malen uit te voeren, kunnen we de breede van het block iedere keer een beetje veranderen. Daar is een functie voor:
setTimeout (of requestanimationframe, maar daarover later meer!)

Verander je javascript naar het volgende:
var block=document.getElementById("tekst1");
block.innerHTML = "test";
var w=200;
move();

function move()
{
  w=w-1;
  block.style.width=w+'px';
  if(w>30)
  {
    setTimeout(move,40);
  }
}
Of ga naar: http://jsfiddle.net/Lt6LZ/1/

In plaats van de breedte (width) eenmalig te zetten, willen we het nu meerdere keren doen.
Daarom maken we er een functie van. Dat is de functie move.
Ook hebben we een variabele nodig om de breedte bij te houden, dat is de nieuwe variabele w.

Nu moeten we de functie 'move' nog schrijven.
Functies zien er ALTIJD zo uit:
function naam(...)
{
    .....
}

In de functie gebeurd het volgende:
    
   w=w-1;
We veranderen w naar w-1; Dus de inhoud van het laadje wordt de inhoud van het laadje -1. W begint op 200. Als we de functie hebben uitgevoerd,

 block.style.width=w+'px';
We veranderen de breedte van block op dezelfde manier als eerder. Maar nu naar 'w' pixels.

Vervolgens komt een beslissing. Als w groter is dan 30 willen we move NOG een keer uitvoeren, maar na een kleine vertraging. Is w kleiner dan 30, dan stoppen we met het uitvoeren van javascript.


JS FIDDLE: http://jsfiddle.net/Lt6LZ/1/
EXPERIMENT: Druk op run.
Kijk of je de animatie kan laten stoppen bij 40 pixels. En of je hem kan laten beginnen bij 100 pixels.
Ook interessant: kun je hem omdraaien? Verander steeds 1 ding en druk op run.
Gebeurt er niks, verander het dan terug.

In de volgende les gaan we alles zo instellen, dat we makkelijk een simpel spelletje kunnen maken.
NAAR LES 3 ,
Beginnen bij les 1: http://games-maken.blogspot.nl/2014/06/games-maken-les-1.html

Links voor zelfstudie:
Wat is Javascript: http://en.wikipedia.org/wiki/JavaScript#Version_history

maandag 9 juni 2014

Basis HTML, Games Maken, Les 1

Games Maken in HTML5 , les 1

Voor wie?

Deze lessen zijn specifiek gemaakt met vragen die gesteld werden door leerlingen die ik een gameworkshop gaf. Ik heb de afgelopen vijf jaar regelmatig game-workshops gegeven.

Ik vermoed dat deze lessen geschikt zijn voor iedereen die nog nooit iets met games heeft gedaan, maar dat wel graag wil. Het is ook een goeie bron om voor het eerst te leren programmeren.

Wat heb je nodig?

Een computer met internet. Verder NIKS! Je kunt dit in een internetcafé huren voor de prijs van een kop koffie..
We gebruiken alleen software die gratis (op het web) toegankelijk is en je hoeft niks te installeren.

Wat gaan we doen?

We gaan een eigen game maken.
Games maken bestaat uit een aantal onderdelen:
  • GameDesign (de regels van je spel)
  • GameDevelopment (programmeren van je spel) 
  • Game Artwork (beeld en geluid in je game)
Natuurlijk kun je deze onderdelen verder uitsplitsen, hetgeen we zullen zien als we deze onderwerpen behandelen. Je zult zien dat je sommige onderdelen leuker vindt dan andere, maar iemand die aan een spel werkt, hoort op zijn minst een beetje te begrijpen hoe alle onderdelen werken.

Je zult ook al een idee hebben over hoe moeilijk dingen zijn. Laten we afspreken, dat we kijken hoe moelijk dingen waren, als we ze gedaan hebben. Daarvoor heeft het toch geen zin.
Om je te helpen daarme,e beginnen we direct met datgene, wat de meeste mensen zien als het moeilijkste:

We beginnen met development, programmeren:

We maken ons spel in HTML, HTML is de taal waarin alle internetpagina's (ook deze) geschreven zijn. HTML-pagina's kun je maken met een tekst-editor, die op iedere computer bijgeleverd zit.

Experimenteren is dan wat minder makkelijk en van experimenteren leer je het snelst.
Daarom zijn er diverse web-services onstaan, die dit experimenteren makkelijker maken. Een goed voorbeeld is JSfiddle. Met JS fiddle maak je dynamische HTML-pagina's. Maar je kunt ook dingen veranderen, die je nog niet goed begrijpt. Ideaal voor experimenten die lijden tot meer begrip!

EXPERIMENT 1: Ga naar JSfiddle, door te klikken op bovenstaande link.. Open de link in een apart window of kijk even rond en kom dan weer terug hier.. (Druk op <= bovenaan..)


Je ziet hier overzichtelijk de splitsing tussen HTML (inhoud pagina) , CSS (grafische opmaak pagina) en Javascript (interactiviteit op de pagina).
Bijvoorbeeld: schrijf je in het vak HTML:
Hallo wereld.
en druk je op "run", dan zie je in het vak RESULT de woorden "hallo wereld" verschijnen.

Klik je hier, dan zie je wat ik bedoel: http://jsfiddle.net/4US2Z/

Verander de tekst in html, druk op run en kijk wat er gebeurd.

EXPERIMENT 2:
Nu vullen we bij CSS in:

body{
font-family: sans-serif;
}
We geven hiermee aan, dat de tekst in een schreefloos lettertype moet.
Drukken we op RUN, dan zien we de tekst veranderen.

Je zult misschien zien, dat als je iets fout typt, dat het niet werkt. Daarom laat ik ook alle stappen in jsfiddle zien, hoe simpel ze ook zijn.: http://jsfiddle.net/gXHFK/

Verander "sans-serif" in een lettertype dat op je computer staat, bijvoorbeeld "courier", druk op run, kijk wat er gebeurd.

We weten nu al half hoe JSfiddle werkt.
We hebben een pagina gemaakt en iets bepaald van het uiterlijk van de pagina.

EXPERIMENT 3:
Klik je met rechts op result in JSfiddle en dan op "FRAMEBRON WEERGEVEN", dan krijg je de volledige code voor de pagina die je hebt gemaakt:
<html>
<head>
  <title> - jsFiddle demo
<script src="/js/lib/dummy.js" type="text/javascript">
  <link href="/css/result-light.css" rel="stylesheet" type="text/css">
  <style type="text/css">
    body{
font-family: sans-serif;
}
  </style>
<script type="text/javascript">//<![CDATA[ 
window.onload=function(){
}//]]>  
</script>
</head>
<body>
  Hallo Wereld.
</body>
</html>
Je hoeft dit NIET te begrijpen. Dat komt vanzelf als je meer ervaring hebt. Wat je moet weten is:
Als je deze pagina op internet zou publiceren, zou hij "hallo wereld" weergeven in het juiste font/lettertype.
Dit blijft zo binnen deze hele les. Je kunt telkens de volledige code bekijken en kopiëren met deze oersimpele tool.
Toch gaan we een volledige game maken.

Je hebt nu ALLE tools die je nodig hebt om internetpagina's te maken EN om een game te maken.

Aan de slag: Gebieden aangeven in HTML

In het vak HTML schrijf je: 
<div id="tekst1">Hallo Wereld.</div>

EXPERIMENT4: En je drukt op run.. Geen verschil, toch?

Toch heb je iets wezenlijks gedaan, je hebt een gebied gedefinieerd met een tag. In HTML beginnen tags altijd met <tag> en eindigen met </tag>. De tag in dit geval is "div" (Div staat voor division, engels voor afdeling) Er zijn veel verschillende tags, ik behandel alleen die die we nu nodig hebben.

We hebben het gebied een 'id' gegeven. Een identificatie-code. De code waarmee we dit gebied aangeven is: "tekst1"

Als je in het CSS gebied nu tikt:
#tekst1{
    background-color: rgb(255,0,0);
}
en op run drukt, krijg je het volgende:
http://jsfiddle.net/yhRNq/

Je maakt in het HTML gebied "div"s, die je kan besturen, door eigenschappen ervan te zetten in het CSS gebied. Ook zien we in het resultaat welk gebied een 'div' beslaat: een hele regel. Als je meer tekst in het vak zet: meer regels.

EXPERIMENT5: Kleur op de computer.. Speel met de cijfertjes achter rgb en kijk welke kleuren dat oplevert als je op run drukt.

In dit geval heb ik de achtergrond-kleur (background-color) veranderd naar een rgb-waarde (Rood=255, groen=0, blauw=0). Maar kleuren mengen met een computer is niet hetzelfde als op papier.

Misschien heb je wel eens gehoord van het feit dat wit licht eigenlijk bestaat uit alle kleuren licht?
Het makkelijkste is om deze waarden te zien als rode, groene en blauwe lampen. 255 is vol aan, 0 is uit. 128 is half aan. 255,0,0 betekent dus: we zetten de rode lamp vol aan en de groene en blauwe uit.
De resulterende kleur is rood. Om geel te maken, zet je de groene lamp ook aan!


Dit is het einde van de eerste les. Als je alle experimenten hebt gedaan, alle links hebt bekeken en stappen hebt gevolgd, weet ik vrij zeker dat je nu een idee hebt wat HTML is en wat je met CSS kunt. Veel meer dan dit heb je niet nodig om je eerste spel te maken.

In de volgende les gaan we dingen laten bewegen. We gaan kijken naar het javascript vak!

NAAR LES 2 (hij is al beschikbaar!)

Links voor zelfstudie:
CSS (opmaak pagina's): http://www.w3schools.com/css/DEFAULT.asp
Kleur in HTML: http://www.w3schools.com/tags/ref_colorpicker.asp
Basis cursus HTML: http://www.homepage-maken.nl/htmlcursus/lessenoverzicht.php
HTML-escape characters: http://www.theukwebdesigncompany.com/articles/entity-escape-characters.php