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

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

  • Beste ICTscripters!

    In deze tutorial maak ik samen met jullie een eenvoudige Flashgame in actionscript 3. Na het afronden zouden jullie een goed idee moeten hebben van bepaalde belangrijke elementen van de OOP-taal. Ik ga dat doen, door samen met jullie een creatievere versie van Arkanoid te maken. De tutorial zal worden gemaakt in meerdere delen, waarvan dit de eerste is. Hetvolgende zal je bereikt hebben na deel 1:

    KLIK

    Dit is waar we in 4 delen naartoe werken:

    Volledige Game

    Hoe ga je tewerk?

    Om te beginnen dien je Flash CS4+ te hebben, om het mogelijk te maken met AS3 te werken. Wanneer we Flash openen kiezen we voor een actionscript-3 project: and there we go.

    1. De speler en de bal laten bewegen

    We beginnen met een paddle te tekenen met de rectangle-tool, en daarna ons balletje. Na het tekenen drukken we op F8, en maken we van beiden een movieclip-symbool. Vervolgens klikken we op onze movieclips, en geven we ze in het propertiesmenu de instantienamen speler_mc en bal_mc; zodat we ze later aan kunnen spreken in ActionScript.

    [Blocked Image: http://www.zelf-maken.net/screenshot1_tutorial-flash.jpg]

    Vervolgens openen we het actionscript panel, door in onze tijdlijn op de ene keyframe te klikken, en daarna F9 in te toetsen.

    Om te beginnen gaan we enkele variabelen maken:

    Source Code

    1. var linksgedrukt:Boolean = false;
    2. var rechtsgedrukt:Boolean = false;
    3. var snelheid:Number = 0;
    4. var wrijving:Number = 0.9;


    Er zijn twee Booleans: linksgedrukt en rechtsgedrukt, waarmee we gaan nagaan of het pijltje naar links, dan wel rechts is gedrukt (of is losgelaten). We geven ook meteen een snelheid mee waarmee we de speler_mc willen laten bewegen naar links en rechts. De wrijving zullen we gebruiken om hem wat soepeler te laten bewegen (wanneer je de toets loslaat zal hij zachtjes aan stoppen, en niet abrupt).

    Het volgende wat we gaan doen, is controleren of een bepaalde toets is ingedrukt. Dat doen we door een 'Event Listener' aan te maken. Event Listeners zijn eigenlijk voorwaarden die voldaan moeten zijn om functies in flash uit te voeren. Functies worden bij het verklaren hiervan niet automatisch uitgevoerd: we kunnen ze laten uitvoeren a.d.h.v. deze. Zo worden de events onder meer gebruikt wanneer er op iets wordt geklikt, wanneer een toets wordt ingedrukt, zomaar bij elke frame, e.d. De code die we gaan gebruiken is:

    Source Code

    1. stage.addEventListener(KeyboardEvent.KEY_DOWN,toetsgedrukt);


    Met stage bedoelen we het hoofdpanel van Flash, je kan er ook voor kiezen, bijvoorbeeld bij een muisklik, om de EventListeners op bepaalde symbolen te plaatsen (zoals op speler_mc.addEventListener, …). Vervolgens verklaren we dat er een toets moet zijn ingedrukt, en wanneer die voorwaarde is voldaan gaat hij de functie ‘toetsgedrukt’ uitvoeren.

    Hieronder gaan we ook al meteen een EventListener definiëren voor wanneer een toets wordt losgelaten. Dus bij elke toetsaanslag en het loslaten daarvan zal de functie worden uitgevoerd. Welke toets dat is komt later. Voeg hetvolgende toe:

    Source Code

    1. stage.addEventListener(KeyboardEvent.KEY_UP, toetslosgelaten);


    Waarna we de functie toetsgedrukt gaan maken..

    Source Code

    1. function toetsgedrukt(e:KeyboardEvent){
    2. if(e.keyCode== 37)//pijltje links
    3. {
    4. linksgedrukt= true;
    5. }
    6. if(e.keyCode== 39)//pijltje rechts
    7. {
    8. rechtsgedrukt= true;
    9. }
    10. }
    Display All


    In de functie testen we of het het pijltje links of rechts was dat is ingedrukt, en passen we de eerder gedefinieerde Booleans hieraan aan. Tussen de haakjes van de functie verklaren we gewoon dat het een keyboardevent is. De ‘e’ is gewoon een naam, maar daar kan gelijk wat staan. Op dezelfde manier gaan we de Booleans terug aanpassen naar false, wanneer de toetsen worden losgelaten. Op een gelijkaardige wijze gaan we dus de functie toetslosgelaten schrijven:

    Source Code

    1. function toetslosgelaten(e:KeyboardEvent){
    2. if(e.keyCode== 37)//pijltje links
    3. {
    4. linksgedrukt= false;
    5. }
    6. if(e.keyCode== 39)//pijltje rechts
    7. {
    8. rechtsgedrukt= false;
    9. }
    10. }
    Display All


    Natuurlijk gebeurt er nu nog niet veel, enkel de verandering van de waarden die we de booleans gaven. Willen we dat er iets gebeurdt, dan gaan we dat doen door een nieuwe EventListener aan te maken: eentje die ongeacht de verschillende gebeurtenissen elk frame (dus vierentwintig keer per seconde) de functie afspeelt en de verschillende acties test.

    Source Code

    1. addEventListener(Event.ENTER_FRAME, hoofdspelloop);
    2. function hoofdspelloop(e:Event){
    3. }


    We maken de functie ook al aan waarin we het meeste van onze volgende code zullen schrijven.

    Vervolgens gaan we ervoor zorgen dat onze speler_mc ook daadwerkelijk naar links of rechts beweegt, als de bijhorende Booleans true zijn. Dit doen we als volgt:

    Source Code

    1. function hoofdspelloop(e:Event){
    2. if(linksgedrukt== true){
    3. snelheid= -10;
    4. }
    5. if(rechtsgedrukt== true){
    6. snelheid= 10;
    7. }
    8. snelheid*= wrijving;
    9. speler_mc.x+= snelheid;
    10. }
    Display All


    We testen hier of links dan wel rechts is ingedrukt, en geven de bijhorende snelheden mee. Vervolgens vermenigvuldigen we ze met de wrijving, en wijzen we de snelheid toe aan onze speler_mc, op de x-positie.

    Wanneer we nu ons project bekijken (CTRL/CMD+ENTER), dan zien we de speler mooi bewegen:

    KLIK

    Als dit gedaan is gaan we hetzelfde doen met de bal: het een snelheid geven, en het laten botsen met alle muren. Dit gaan we onder onze snelheidstoewijzing doen in de hoofdloop functie, maar we gaan beginnen om bij onze variabelen bovenaan er twee nieuwe toe te voegen, namelijk balsnelheidx en balsnelheid y.

    Source Code

    1. var balsnelheidx:Number = 5;
    2. var balsnelheidy:Number = -5;


    We geven ze de startwaarden 5 en -5, zodat de bal bij het begin van het spel zich richting de rechter bovenhoek begeeft.

    In onze hoofdloop functie voegen we dan toe:

    Source Code

    1. if(bal_mc.x>550-6.5){
    2. balsnelheidx = 0 - balsnelheidx;
    3. }
    4. if(bal_mc.x<6.5){
    5. balsnelheidx = 0 - balsnelheidx;
    6. }
    7. if(bal_mc.y>400-6.5){
    8. balsnelheidy= 0 - balsnelheidy;
    9. }
    10. if(bal_mc.y<6.5){
    11. balsnelheidy= 0 - balsnelheidy;
    12. }
    Display All


    Hier zie je dat we de snelheden veranderen, wanneer de x of y posities de grenzen van onze werkruimte overschrijden. De straal van de bal trek ik daarvan af of tel ik erbij op, zodat de bal niet half buiten ons kader is als hij botst. Vervolgens draai ik de snelheid van de bal om door het af te trekken van 0. Een snelheid van -5 wordt dan: 0 - (-5) = 5, en van 5: 0 – 5 = -5. Dit doen we zowel voor balsnelheidx als balsnelheidy. Wanneer je je project opnieuw bekijkt zien we de bal tegen alle muren botsen, mits we nog even de snelheden toewijzen aan de x –en ypositie van de bal:

    Source Code

    1. bal_mc.x += balsnelheidx;
    2. bal_mc.y += balsnelheidy;


    Tenslotte geef ik je nog het bronbestand mee om te downloaden, zodat je de codes kan bekijken als er iets niet goed werkt.

    In het volgende deel gaan we de botsingen definiëren, en verschillende opties toevoegen zoals levens enz. Daarna gaan we een tegenstander toevoegen (een beest dat kogels uitspuwt), en zijn levens definiëren.

    Tot kijk!

    2,352 times read

Comments 7

  • Gloriane -

    &quot;Les rêves n&#39;existent plus beaucoup dans la mode? La désir non plus remarquez... Et je trouve ça hyper triste.À voir n&#39;importe qui s&#39;acheter un sac à 1000 boules, s&#39;en lasser en 3 semaines, ça me rassure pas.&quot;Je suis bien d&#39;accord avec toi ! Je suis avec plaisir plusieurs blogs de mode et je trouve ça dommage et triste de voir certaines blogueuses achetaient un sac de luxe et le revendre 3 semaines après pour le reprendre dans une autre couleur ou un autre modèle.J&#39;ai mis presque 5 ans avant de m&#39;acheter le sac qui me plaisait, parce qu&#39;il coutait cher, il me fallait donc économiser et parce que je voulais être sure que c&#39;était celui-ci et pas un autre.Ça fait quelques années que je l&#39;ai et je ne m&#39;en suis toujours pas lassée :)

    findlifequotesonline.com/ comparecheapinsur.com/

  • Lettice -

    &quot;Les rêves n&#39;existent plus beaucoup dans la mode? La désir non plus remarquez... Et je trouve ça hyper triste.À voir n&#39;importe qui s&#39;acheter un sac à 1000 boules, s&#39;en lasser en 3 semaines, ça me rassure pas.&quot;Je suis bien d&#39;accord avec toi ! Je suis avec plaisir plusieurs blogs de mode et je trouve ça dommage et triste de voir certaines blogueuses achetaient un sac de luxe et le revendre 3 semaines après pour le reprendre dans une autre couleur ou un autre modèle.J&#39;ai mis presque 5 ans avant de m&#39;acheter le sac qui me plaisait, parce qu&#39;il coutait cher, il me fallait donc économiser et parce que je voulais être sure que c&#39;était celui-ci et pas un autre.Ça fait quelques années que je l&#39;ai et je ne m&#39;en suis toujours pas lassée :)

    findinsurrates.com/ comparecheapinsur.com/

  • jmhzmfonq -

    b6AcGN , [url=http://jsiaxcenpobx.com/]jsiaxcenpobx[/url], [link=http://ykjtsulqztrz.com/]ykjtsulqztrz[/link], uverdiztrapm.com/

  • rffmjj -

    xnmZk3 <a href="http://clyyxtoccnry.com/">clyyxtoccnry</a>

  • Ana -

    I played a liltte with some programming languages before (mostly PHP and JavaScript, but just a liltte) and, recently, I became interested in learning a bit more about programming and chose AS3.Lots of people told me about AS3 and I've had my eyes on things like FlashPunk and Flixel before, so I thought I'd give it a try.Since I don't have Flash Pro (my trial has expired and no money to buy it =/), just mixed a few tutorials I've found on the web (for textField, drawRect, movieClips and etc.) with this tutorial to build the example on Flashdevelop and the result was great!I thought it was fairly easy to build functions and make a (very) simple title screen and a game over screen.Great Tutorial! Hope I can finish at least one original game soon. =PThanks from Brazil! =P

  • N. Vermeiren -

    Graag gedaan. Deel twee komt eraan en ik heb mijn kromme zinnen er al uitgehaald. Ik post hem morgen :)

  • K.Rens -

    Bedankt, interessant.
    Lang geleden dat ik nog in Flash heb gewerkt.