De website van Ronnie Overgoor is er sowieso eentje om regelmatig te checken voor nuttige informatie over digitale media.

Nalden is co-founder van WeTransfer, de simpelste manier om snel grote bestanden te versturen.

Daarnaast houdt hij een hippe, veelgelezen blog bij.

Inhoud

Inleiding
Wat is ‘zwaartekracht’ nou precies?
Stuiterbal
De code in gewone woorden
De code in stukjes
Alle code
Conclusie
Bronnen

Inleiding

Veel begrippen uit de natuurkunde zie je terugkomen als je objecten gaat animeren. Daar is een logische verklaring voor. Een overgroot deel van alle spellen en simulaties is het naspelen van de realiteit. En die realiteit wordt gevormd door een aantal verschijnselen die voor een deel benoemd worden in natuurwetten als evenwicht, snelheid en zwaartekracht. In deze paper nemen we een kijkje in het verschijnsel zwaartekracht en gaan we een bal een zwaartekracht meegeven.

Eerst kijken we naar het begrip ‘zwaartekracht’ en geef ik een voorbeeld hoe een stuiterbal zwaartekracht ervaart. Vervolgens leg ik in gewoon Nederlands uit wat we in code moeten vertellen om een bal zwaartekracht te geven. Daarna leg ik de code stapsgewijs uit, en tot slot zie je alle code van het document.

Wat is zwaartekracht nou precies?

Het woordenboek Van Dale geeft een korte beschrijving van het woord zwaartekracht: zwaar· te· kracht aantrekkingskracht van de aarde ^[1]

Uiteraard komt er volgens de theorie van Newton ^[2] wel iets meer bij kijken, maar in de animatie komt het eigenlijk wel neer op deze definitie. Afhankelijk van hun gewicht en horizontale snelheid worden objecten met een bepaalde snelheid aangetrokken tot de aarde, wat in de praktijk meestal betekent dat objecten naar beneden vallen als je ze los laat. Tenzij het heliumballonnen zijn…

Stuiterbal

Neem een stuiterbal. De snelheid waarmee de stuiterbal naar beneden valt is afhankelijk van z’n gewicht, en of hij naar voren gegooid wordt of dat je de bal gewoon laat vallen. Maar omdat deze variabelen de code behoorlijk gecompliceerd zullen maken, houden we het in deze paper even bij een bal die met een opgegeven snelheid naar beneden valt als hij de lucht in geslingerd wordt.

De code in gewone woorden

Een bekende ‘best practice’ in het ontwikkelproces is om te beginnen met het formuleren van alle logica in normaal Nederlands voordat je het vertaald naar ActionScript of een andere programmeertaal. In gewone Nederlandse woorden komt de code er ongeveer als volgt uit te zien:

Teken een blauwe bal, teken een rechthoek die de grond voorstelt.

Kijk bij elke frame of de bal op de grond ligt of in de lucht hangt,
hangt de bal in de lucht, moet hij vallen met de snelheid van de zwaartekracht totdat hij weer op de grond ligt.

Druk je op een willekeurige toets dan springt de bal weer de lucht in.

De code in stukjes

Om te beginnen gaan we wat voorgeprogrammeerde functies importeren uit de handige standaard bibliotheek van Flash:

import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.KeyboardEvent;

We geven de stage een vaste hoogte en breedte:

[SWF(height=600, width=800)]

Om de constructor schoon te houden verwijzen we naar een aanvangsfunctie die je meestal init noemt.

public function Zwaartekracht()
{
init();
}

In die functie maken we wat variabelen aan die we zometeen gaan gebruiken. Twee van het type sprite en twee getallen.

var bal:Sprite;
var grond:Sprite;
var jump:int;
var valsnelheid:int;

We zetten de stage linksboven en verhinderen dat hij automatisch mee schaalt met de browser.

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

Hij moet elke frame iets checken dus we maken een EnterFrame Event. Daarnaast maken we interactie met het toetsenbord daarom maken we ook een Keyboard Event. We geven beide events een passende naam: moveBall en onKeyDown.

addEventListener(Event.ENTER_FRAME, moveBall);
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);

We gaan de bal tekenen. We maken een nieuwe bal van het type sprite. Blauw lijkt me een mooie kleur hiervoor. Hij wordt 20 pixels groot. We plaatsen hem aanvankelijk 50 pixels hoog en op de helft van de stage. Met addChild zetten we hem tenslotte daadwerkelijk op de displaylist van de stage.

bal = new Sprite;
bal.graphics.beginFill(0x0000ff);
bal.graphics.drawCircle(0,0,20);
bal.graphics.endFill();
bal.y = 50;
bal.x = stage.stageWidth/2;
addChild(bal);

Er moet ook een grond zijn waar de bal op moet vallen. Die tekenen we als een zwarte rechthoek.

grond = new Sprite;
grond.graphics.beginFill(0x00000);
grond.graphics.drawRect(0,0,800,10);
grond.graphics.endFill();
grond.y = 500;
grond.x = 0;
addChild(grond);

We komen in de buurt van de allesbepalende functie. Eerst geven we nog twee variabelen een standaard waarde. De valsnelheid zetten we op 10. Als je die wijzigt verander je dus de snelheid waarmee de bal valt. De jump is de hoogte van de sprong als je op een toets drukt. Omdat ie standaard niet springt zetten we die eerst op nul.

valsnelheid = 10;
jump = 0;

Allereerst moeten we weten of de bal in het huidige frame in de lucht is. De bal is in de lucht als de huidige y-waarde (plus de straal van de bal) kleiner is dan de y-waarde van de grond.

if (bal.y + bal.height/2 < grond.y)

Als de bal in de lucht is moet de nieuwe y-waarde de huidige waarde worden plus de valsnelheid. En min de jump. Deze staat standaard op nul, behalve als er op een toets gedrukt wordt. Dus hij gaat standaard naar beneden, tenzij er op een toets gedrukt wordt.

bal.y = bal.y + valsnelheid - jump;


En als de bal niet in de lucht is (dus else) moet hij met een sprongetje de lucht in geslingerd worden. Hoe hoog? Nou, de hoogte van de jump. Let er op dat je – doet, omdat de 0-as bovenaan ligt. Je bent gauw geneigd hier + te gebruiken maar dan jumpt hij naar beneden.

bal.y = bal.y - jump;


Als de jump uitgevoerd wordt moet hij natuurlijk netjes afremmen anders vliegt de bal bovenaan het beeld uit. Dus als de jump groter is dan nul, moet hij elke frame de jump met 1 afremmen.

if (jump > 0)
{
jump--;
}


Alle code

Als je bovenstaande stukjes code netjes met alle accolades en tabs achter elkaar zet krijg je de volgende lap code:


/** Zwaartekracht.as - Mar 4, 2012
*
* Beschrijving: Uitleg zwaartekracht bij het laten springen van een bal
*
* @author Bernard Muller bernard.muller@hva.nl;
*
* Copyleft 2012, all wrongs reversed.
*/

Als je de code test in je browser ziet het er uit als in Figuur 1.0, en als je op een willekeurige toets drukt springt de blauwe bal omhoog als in Figuur 1.1 en zie je dat de code doet lijken alsof er zwaartekracht werkzaam is op de blauwe bal.

Conclusie

In dit voorbeeld zie je dat het niet heel ingewikkeld is om objecten een kunstmatige zwaartekracht te geven. Dynamische zwaartekracht is een bijzonder nuttig en toch eenvoudige manier om objecten een realistische beweging mee te geven die je behoorlijk kunt vergelijken met de beweging van fysieke
objecten. Door gebruik te maken van variabelen maak je het jezelf makkelijk later nog waarden te optimaliseren.

Bronnen

1. Opzoeken | Van Dale. Van Dale. 6 maart 2012. 


2. Gravitatiewet van Newton – Wikipedia. “Gravitatiewet van Newton”. Wikipedia. 2012. 6 maart 2012.

3. Keith Peters. ActionScript 3.0 Animation. Making Things Move! Apress. ISBN: 9781590597910.

Voor het vak programmeren op CMD Amsterdam mochten we een applicatie of game naar keuze ontwerpen en bouwen. Hij moest helemaal in Adobe Flash Builder gemaakt worden. Dat houdt in dat je dus niet Flash CS gebruikt om tekeningen te maken en in de tijdlijn te animeren. Alles moet via de code geïmporteerd worden en via code een gedrag gegeven worden. Na avonden en nachten door code heen geploeterd te hebben ben ik eigenlijk best tevreden met het resultaat.

Het is eigenlijk nog niet helemaal af. Er zou bijvoorbeeld een topscore toegevoegd moeten worden, en misschien ook levels. Maar voor nu is dit even goed genoeg. Als je op Spelen klikt kun je beginnen met spelen.

Note: In sommige browsers moet je nog een keer extra in het frame klikken om de besturing te activeren.

Het concept voor ons educatieve game Amnesia. Specifiek gericht op kinderen van 6 en 7 jaar. Het project is een samenwerking tussen CMD-studenten van de Hogeschool van Amsterdam en de Universiteit van Amsterdam.

Met een team van 4 enthousiaste studenten van CMD Amsterdam waren we wekenlang druk bezig met het ontwerpen van de diverse schermen en karakters om het vervolgens in Flash ook allemaal te bouwen met behulp van de open source Citrus Engine.

Het concept staat voor ons spel Amnesia. Specifiek gericht op kinderen van 6 en 7 jaar. Opdrachtgever: Universiteit van Amsterdam. Met een team van 4 enthousiaste studenten zijn we nu druk bezig met het ontwerpen van de diverse schermen en karakters.

Een sneak peek hoe Amnesia eruit zou kunnen zien.

Voor de Oase (CGN) mocht ik een paar tekeningen maken. Het was ontzettend leuk en leerzaam om te doen!

In onderstaande beeldenreeks zie je hoe één van deze tekeningen tot stand is gekomen. M’n nieuwe Wacom-tablet heb ik op deze manier ook goed ingewijd.

Je leert het proces van gebruikersgericht ontwerpen van A tot Z. Van uitleg over hoe je degelijk Design Research doet tot nuttige tips voor het inrichten van de interface. Volgens de schrijvers is het boek geschikt voor ontwikkelaars, alle diverse soorten designers die betrokken zijn bij digital product design, usability professionals en projectmanagers.

Klik op het onderstaande screenshot om direct naar de juiste pagina op bol.com te gaan!

Best leuk als je dit ziet in elk item wat je op je bureau ziet liggen.

Op bright.nl legt Martijn uit hoe hij te werk gaat. In de video zie je de tekening worden opgebouwd vanaf de schets. ‘Die is bij mij altijd slordig dus ik scan hem snel in. Met Photoshop ga ik hem pas mooi maken,’ zegt Van Dam. Lees meer op de website van bright.nl

Persoonlijk ben ik behoorlijk fan van deze tekenstijl. I love it!

In dit voorbeeld gebruik ik een foto die ik van stock.xchng heb gedownload: http://www.sxc.hu/photo/1362567
En een papier texture: http://www.flickr.com/photos/chefranden/3182589327/sizes/o/in/photostream/

Wat we gaan maken: