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

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.

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.

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!

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:

Lopende mickey: http://jsfiddle.net/th6TK/3/

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.

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

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