Monday, February 26, 2007

[TUT] Besturing met Toetsenbord

Besturing via Toetsenbord


In deze tutorial zal ik een aantal dingen uitleggen over besturing via het toetsenbord in games. Een groot deel van de flashers(zeker van de beginnende) willen graag spelletjes maken. Ik zal de basis uitleggen van games met het toetsenbord.


Wat gaan we behandelen?

  • (Natuurlijk)Hoe je opvraagt welke Key ingedrukt is
  • _x en _y posities van een object
  • Welken met variabelen, die veranderen door de key's en de omgeving
  • Depths
  • movieclips verwijderen van je stage



Wat gaan we maken?

Een simpele movie warin je een object kan bewegen, en objecten 'oppakken' die invloed hebben op variabelen of variabele eigenschappen van een object


Laten we beginnen met een aantal zaken die te maken hebben met besturing via toetsenbord. Het is belangrijk te bedenken dat er gecontroleerd word of een key is ingedrukt om een korte tijd. Als je het om de seconde checkt, heb je kans dat de key al weer is losgelaten. waneer je het in een onEnterFrame zet, word er(uitgaande van een framerate van 12 fps) 12 keer per seconde uitgevoerd.

Hoe vraag je dan op welke key er in gedrukt is? Dit kan je opvragen in een 'if statement'. Een wat er binnen deze 'if statement' staat, word aleen uitgevoerd als het aan de eisen van dit statement voldoet. In het geval van de key is het dus zo:

this.onEnterFrame = function(){

if(Key.isDown(Key.SPACE)){

trace("je hebt zojuist de spatiebalk ingedrukt");

}

}


Wat wij willen bereiken is dat er bij het indrukken van een key, de x of y positie van een MC(=MovieClip) willen beinvloeden, zodat deze naar rechts/link of onder/boven beweegt. De x en y positie vraag je op en defineer je op de volgende manier:

mc1._x = 100

mc1._y = 100;

mc1.onEnterFrame = function(){

mc1._x+=4;

}


Wat gebeurd er hier als je dit script zal gebruiken? Bij het laden van je movie zal de MC met instancename "mc1" beginnen op een positie van (100,100). Bij een framerate van 12 frames per seconde zal deze dus door de onEnterFrame 12 keer per seconde 4 pixels naar rechts verschuiven. Voor de duidelijkheid zal ik in de volgende afbeelding laten zien hoe het 'assenstelsel' van flash er uit ziet.



Iets wat ook een veel voorkomt element in spelletjes is hitTest. Dit test of de 2 opgegeven objecten elkaar raken. Dit word ook weer vaak gebruikt in combinatie met een if statement. Een voorbeeld: je wilt een actie ondernemen waneer mc1 mc2 raakt:

this.onEnterFrame = function(){

if(mc1.hitTest(mc2)){

trace("u heeft zojuist mc2 geraakt");

}

}


Deze Onderdelen gaan we gebruiken om een klein, simpel spelletje in elkaar te zetten. Ik heb deze onderdelen apart uit proberen te leggen omdat waneer je zelf een spelletje wilt maken, dit bijna altijd wel voorkomt.



Om te beginnen gaan we dit maken:


Zoals je ziet kan je bewegen, objecten 'oppakken'die invloed hebben op variabelen of eigenschappen.



Om te beginnen gaan we eerst de objecten maken, daarna gaan we over op het script. De volgende objecten kan je naar eigen keus maken:

  • Het poppetje wat bestuurd kan worden(instancename='mc1')
  • Een object die je op kan pakken die je snelheid verhoogd(instancename='mc2')
  • Een object die je op kan pakken die je figuurtje kleiner maakt.(instancename='mc3')

That's All. Nou komt het belangrijkste pas: het script. Als je de stukken over de onderdelen van AS die ik ga gebruiken die hier boven staan hebt doorgelezen. Zal het misschien al duidelijk zijn, maar ik ga er toch even stap voor stap door heen.



Ten eerste zullen we eerst er voor zorgen de de mc die je kan besturen, ook echt bestuurbaar is. Dit doen we door middel van het aanpassen van de x en y positie door de keys. Vergeet niet dat deze code op je frame komt, en niet op je mc's timeline.

moveSpeed = 5;

mc1.onEnterFrame = function() {

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

this._x -= moveSpeed;

}

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

this._x += moveSpeed;

}

if (Key.isDown(Key.UP)) {

this._y -= moveSpeed;

}

if (Key.isDown(Key.DOWN)) {

this._y += moveSpeed;

}


Misschien vraag je jezelf af warom ik de variable 'moveSpeed' gebruik, terwijl hij overal 5 is. Dit doe ik omdat je zo makkelijker de snelheid kan beinvloeden. Wil ik hem sneller laten bewegen, hoef ik alleen maar die variabele aan te passen.

Als het goed is kan als je je movie nu test je mc laten bewegen met je pijltjestoetsen. Het enige wat er nu nog moet gebeuren is het 'oppak' gedeelte.

Hiervoor heb ik de hitTest uitgelegd. Eerst moet flash controleren of de mc's elkaar raken. Waneer dit zo is, moet de variabele aangepast worden, en de MC verwijderd. Dat kan je doen door deze code op je frame te zetten.

moveSpeed = 5;

mc1.onEnterFrame = function() {

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

this._x -= moveSpeed;

}

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

this._x += moveSpeed;

}

if (Key.isDown(Key.UP)) {

this._y -= moveSpeed;

}

if (Key.isDown(Key.DOWN)) {

this._y += moveSpeed;

}

if (this.hitTest(mc2)) {

moveSpeed = 10;

mc2.swapDepths(getNextHighestDepth());

mc2.removeMovieClip();

}

if (this.hitTest(mc3)) {

mc1._width *= .5;

mc1._height *= .5;

mc3.swapDepths(getNextHighestDepth());

mc3.removeMovieClip();

}

};


Als je de stukken aan het begin van deze tutorial hebt gelezen zal je de hittest wel begrijpen. Ik zal alleen het stuk uitleggen warin de mc word verwijderd:

mc2.swapDepths(getNextHighestDepth());

mc2.removeMovieClip();


Met swapDepths kan je een mc een andere depth geven. De depth is de volgorde van welke op de voorgrond, en welke verder naar achter ligt. Bijvoorbeeld: mc1 heeft depth 1 en mc2 heeft depth 2. Ze overlappen elkaar, welke zie je totaal, en overlapt dus de ander? mc2 heeft een hogere depth, en zal dus volledig te zien zijn. MC's die je op je stage hebt gemaakt, en dus niet via AS, staan op een depth die niet verwijderd kan worden. Vandaar de swapdepths. getNextHighestDepth() geeft het getal van de eerstvolgende hoogste depth. Daar gaan we heb dus heen verplaatsen en direct daarna verwijderen.

No comments: