Tutorial Actionscript 3: Arkanoid-like Flash Game (Deel 4)

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Welkom terug bij het vierde (en laatste) deel van de Arkanoid Flash Tutorial serie. In het derde deel waren we geëindigd met het kopiëren van enkele regels code van de levens van de speler, voor die van vleermuis te prepareren. Hier gaan we voornamelijk het grootste deel van deel 4 mee bezig zijn, want voor de vleermuis gaan we een health bar maken. Daarna gaan we ons bezig houden met te bepalen wanneer de speler dan wel de vleermuis heeft gewonnen. Na het voltooien zal dit het eindresultaat zijn.

    KLIK

    Health bar voor de vleermuis
    Beginnen doen we, door onze health bar te designen. Maak op je werkgebied een nieuwe laag aan en teken daarop een kleine rechthoek zonder omlijning linksboven. Klik er op, en converteer het naar een movieclip symbool. Geef de movieclip de instantienaam Health bar en ga erin door erop te dubbelklikken. Maak hier twee nieuwe lagen hebt, zodat je een totaal van drie lagen hebt. Op de onderste laag heb je jouw rechthoek. Op de laag erboven herhaal je deze rechthoek maar geef je hem een rode kleur, en op de bovenste laag teken je de omlijning rondom. Maak van de rode rechthoek in de middelste laag een movieclip en geef het de instantienaam barkleur mee.

    [Blocked Image: http://www.zelf-maken.net/foto4.1.jpg]

    Dan kunnen we nu beginnen met het scripten van de health bar. Keer terug naar de stage en open het actionscript paneel. We gaan beginnen met de volgende variabelen toe te voegen aan ons lijstje.

    Source Code

    1. var maxHP:int = 100;
    2. var huidigHP:int = maxHP;
    3. var percentHP:Number = huidigHP/maxHP;


    We stellen een variabele maxHP in om een waarde van honderd aan toe te wijzen. Daarnaast definiëren we een variabele huidigHP, die we als beginwaarde eveneens honderd meegeven (de vleermuis begint met 100hp). Dan gaan we het percentage berekenen van het aantal procent door de twee te delen.
    Dan kan je nu alvast hetvolgende stukje code buiten de hoofloop toevoegen, ik leg het daaronder wel uit.

    Source Code

    1. function updateHealthBar():void{
    2. if(balraaktvleermuis == false){
    3. percentHP = huidigHP/maxHP;
    4. healthbar.barkleur.scaleX *= percentHP;
    5. balraaktvleermuis = true;
    6. }
    7. }


    We maken een functie updateHealthBar, die straks voor ons gaat berekenen hoe groot de healthbar moet zijn. In die functie moet de balraaktvleermuis gelijk zijn aan false (zodat het een nieuwe botsing betreft), en berekenen we daarin nogmaals de percentHP. Vervolgens maken we gebruik van de functie scaleX, die de geneste movieclip barkleur in de movieclip healthbar gaat schalen. Het huidige schalen wordt vervolgens vermenigvuldigd met het zopas berekende percentHP. Ik ben er mij goed van bewust dat de health bar daardoor licht exponentieel zal gaan afnemen, maar dat doe ik omdat het mij goed uitkomt (het is programmeren, laten we een beetje flexibel zijn). Ik kon het op een betere manier doen: door gewoon de variabele af te trekken van de huidige x width.
    Vervolgens zetten we de variabele balraaktvleermuis gelijk aan true, omdat we willen voorkomen dat de functie zich blijft herhalen.
    Dan gaan we nu het een en het ander toevoegen aan de collission tests van de bal en de vleermuis. Dat is hetvolgende:

    Source Code

    1. updateHealthBar();
    2. levensVleermuis --; // verwijderen, ook uit variabelen
    3. vtimer.start();
    4. huidigHP -= 10;


    Wanneer de bal de vleermuis raakt en de boolean balraaktvleermuis gelijk is aan true, gaan we de updateHealthBar functie uitvoeren. Let er op dat ik de regel waarin ik de boolean balraaktvleermuis gelijk stelde aan true, rechtstreeks heb geknipt van hieruit. We hoeven hem geen twee keer op true te zetten. Daarna kan je de levensVleermuis variabelen weghalen uit de code, ik had hem de vorige keer aangemaakt zodat je de gelijkenis beter kon zien met het scripten van de levens van de speler.

    Daarna starten we de vtimer die de vleermuistimer functie in werking zet en onze balraakvleermuis boolean gelijk zet aan false. Vervolgens trekken we tien af van de huidigHP variabele. We doen dit pas nadat de health bar wordt geupdateted, omdat de bal de eerste keer naar de rechterbovenhoek beweegt waar de vleermuis op dat moment is (bij mij, heb je dat niet dan kan je het voor de functie zetten).

    Wanneer je nu kijkt naar je animatie, heb je een werkende health bar. Dan is het nu straks tijd om te bepalen wie wanneer wint!

    Maar eerst gaan we de voorwaarde van de collission test van de bal met de vleermuis licht aanpassen. Omdat we willen dat de vleermuis botst met de bal, en niet de kogels met de bal (die zit immers in dezelfde movieclip), aan we in onze vleermuis en voegen we op de laag van de vleermuis nog een movieclip toe, die we de naam vleermuis geven. In onze code, maken we de voorwaarden er als volgt uitzien.

    Source Code

    1. if(bal_mc.hitTestObject(vleermuis_mc.vleermuis) && balraaktvleermuis == false){
    2. updateHealthBar();
    3. levensVleermuis --;
    4. vtimer.start();
    5. huidigHP -= 10;
    6. }


    Merk op dat alleen de voorwaarden zijn veranderd.

    Gewonnen of verloren
    Terug naar de stage, gaan we twee gloednieuwe laagjes maken waarop we gaan tonen of je gewonnen of verloren hebt. Je mag zelf kiezen hoe en wat je maakt, maar je moet er alleen voor zorgen dat je daarna er movieclips van maakt en ze de instantienamen gewonnen_mc en verloren_mc van maakt. Dit is wat ik ervan heb gemaakt.

    [Blocked Image: http://www.zelf-maken.net/foto4.2.jpg]

    Terug naar de actionscript, gaan we Flash vertellen wanneer we hebben gewonnen. In de updatehealthbar functie schrijven we onderaan deze nieuwe voorwaarde.

    Source Code

    1. if(huidigHP == 30){
    2. gewonnen_mc.visible = true;
    3. balsnelheidx = 0;
    4. balsnelheidy = 0;
    5. snelheidvleermuis = 0;
    6. }


    We zeggen dat wanneer huidigHP gelijk is aan dertig (tegen dan is onze healthbar leeg), we de movieclip gewonnen_mc gaan tonen. Maar we hebben zijn zichbaarheid nog niet gelijkgesteld aan true, dus zet daarom ook buiten de hoofdloop

    Source Code

    1. gewonnen_mc.visible = false;
    2. verloren_mc.visible = false;


    Vervolgens gaan we enkele dingen doen om het spel niet te kunnen laten doorgaan, namelijk de snelheid van de bal en de snelheid van de vleermuis op nul zetten.
    Hetzelfde doen we nu voor wanneer we verliezen, bij de kogels met speler test, maar dan voor verloren_mc, en voor de variabele levensSpeler.

    Source Code

    1. if(levensSpeler == 0){
    2. verloren_mc.visible = true;
    3. balsnelheidx = 0;
    4. balsnelheidy = 0;
    5. snelheidvleermuis = 0;
    6. }


    Nu lijkt onze game klaar, maar we vergeten nog iets belangrijks! Onze levens gaan ook omlaag als de bal in aanraking komt met de onderkant van onze stage, dus gaan we de net gemaakte code simpelweg kopiëren en plakken daarginds.

    Open je Flash Game, en wat zien we? Je eerste eigen dijk van een game! Ik hoop dat je er iets van hebt opgestoken, en dat je interesse in verdere Actionscript is gewekt :) Hoe dan ook, bedankt voor het volgen van mijn tutorial, en de volledige broncode van het resultaat kan je hier downloaden.

    1,207 times read

Comments 5