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:
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.
Links voor zelfstudie:
Gratis animatieprogramma: PAP4, http://plasticanimationpaper.dk/
Geen opmerkingen:
Een reactie posten