[TUTORIAL] Auto beweging met toetsenbord

In deze tutorial ga ik het rijden van een auto in flash behandelen. Zeker voor de beginnende flasher kan dit al snel een leuk resultaat geven. Ik behandel zowel de simpele vorm, en de wat realistischere vorm.

De simpele vorm:


De wat realistischere vorm:


De simpele vorm

Moeilijkste bij nieuwe dingen is altijd bedenken hoe je het aan gaat pakken. Hoe zal je dit nou aanpakken? Denk even goed na welke variabelen afhangen van de x en de y waarden. Dat zijn natuurlijk de snelheid en de rotatie. Waneer je hier een plaatje van tekent zal het je misschien wel opvallen, wiskunde!

Je ziet met de rode stip aangegeven de huidige positie van de auto, en de andere rode stip de positie waar hij moet eindigen met deze rotatie en snelheid.
Als je het nog goed herinnert van school, is dit makkelijk uit te rekenen met cos, sin en tan:

this._x += Math.sin(this._rotation*(Math.PI/180))*speed;

this._y += Math.cos(this._rotation*(Math.PI/180))*speed*-1;

Let op: vergeet niet de rotatie te vermenigvuldigen met PI/180, aangezien de rotatie in flash in graden gaat, en je de rotatie in radialen moet hebben (180 graden = 1PI radialen).

Met een beetje basis moet de rest helemaal simpel zijn:

var speed:Number = new Number(0);

car.onEnterFrame = function() {

if (Key.isDown(Key.UP) && speed<7) {

speed += .2;

} else if (Key.isDown(Key.DOWN) && speed>-3) {

speed -= .1;

}
if (Key.isDown(Key.LEFT)) {

car._rotation -= 4;

}
if (Key.isDown(Key.RIGHT)) {

car._rotation += 4;

}
this._x += Math.sin(this._rotation*(Math.PI/180))*speed;
this._y += Math.cos(this._rotation*(Math.PI/180))*speed*-1;

speed *= .98;
};

De realistischere vorm

Wat gebeurd er nou meer/minder dan bij de simpele vorm. Hier is een simpel truckje voor. Wat in de simpele vorm de x en y waarde worden, worden nu eerst virtuele x en y posities. Deze punten zijn als het ware het 'streven', je auto wil daar heen bewegen. Maar om het slippen mogelijk te maken zal hij er niet helemaal komen. We laten hem er elk frame als het ware naar toe easen. Bij een Framerate van 31 fps:

var vx:Number = car._x;
var vy:Number = car._y;
var speed:Number = new Number(0);

car.onEnterFrame = function() {

if (Key.isDown(Key.UP) && speed<7) {

speed += .2;

} else if (Key.isDown(Key.DOWN) && speed>-3) {

speed -= .1;

}
if (Key.isDown(Key.LEFT)) {

car._rotation -= 7;
speed -= .15;

}
if (Key.isDown(Key.RIGHT)) {

car._rotation += 7;
speed -= .15;

}
vx += Math.sin(this._rotation*(Math.PI/180))*speed;
vy += Math.cos(this._rotation*(Math.PI/180))*speed*-1;

this._x += (vx-this._x)/15;
this._y += (vy-this._y)/15;

speed *= .98;
};

Zoals je misschien wel is opgevallen, er is nu bij het draaien ook voor gezorgd dat je iets af remt, probeer het maar eens zonder en zie het resultaat.