Share
In deze tutorial leer je hoe je je eigen versie van het klassieke Whack-a-Mole-spel kunt maken - alleen onze ongelukkige wezens van keuze zullen wormen zijn. Je kunt de snelheid van het spel en de hitboxen van de wormen aanpassen.
We zullen met name veelgebruikte ActionScript 3-klassen gebruiken Muis evenementen om een vermakelijk te maken Sla een mol zoals game in Flash
Open Flash en maak een 480 pixels breed, 320 pixels lang document. Stel de beeldsnelheid in op 24 fps.
(Let op: er is een fout gemaakt in de afbeelding hierboven, de breedte en hoogte zijn de verkeerde kant op! Dank aan Roel Traa voor het wijzen van dit.)
Er zal een eenvoudige en vriendelijke interface worden gebruikt, met verschillende vormen, knoppen en MovieClips, ga verder met de volgende stappen om deze GUI te bouwen.
Selecteer de Rechthoekgereedschap (R) om een rechthoek van 320x480px # CC9866, # BA7743 te maken en in het werkgebied te centreren.
Gebruik de Text Tool (T) om een titel toe te voegen met uw favoriete lettertype. Je kunt ook een deel van de graphics van de game gebruiken om het mooier te maken. De wormafbeelding die in deze zelfstudie wordt gebruikt, is gedownload van hier onder a Creative Commons Licentie.
Gebruik opnieuw de Text Tool om drie knoppen te maken zoals in de bovenstaande afbeelding. Converteer ze naar knoppen en geef ze beschrijvende instantienamen zodat ze deze later in de code gemakkelijk kunnen gebruiken. Converteer de grafische afbeeldingen in een enkele fase Filmclip en noem het TitleView, vergeet niet om de Exporteren voor ActionScript-box.
Wis de laatste weergave behalve de achtergrond en maak een reeks Dynamische tekstvelden zoals weergegeven in de afbeelding, geef beschrijvende instantienamen en converteer ze naar knoppen. Gebruik de Rechthoekgereedschap (R) om een pijlknop te maken die wordt gebruikt om terug te gaan naar de Titelscherm.
De credits scherm verschijnt voor de Titel Scherm, gebruik de grafische elementen en lettertypen die u eerder hebt gebruikt om het te maken. Noem maar op CreditsView en vergeet niet om de Exporteren voor ActionScript doos.
Eenvoudige cartoonachtige afbeeldingen worden gebruikt in de Spel Scherm, er is niet echt een procedure om deze afbeeldingen te maken, gebruik alleen je fantasie en de Flash-tekengereedschappen om zoiets als de bovenstaande afbeelding te maken. Elke hole in het spelscherm is een Filmclip die een animatie bevat van de worm die uitkomt, het is in feite een eenvoudige beeld-voor-beeld animatie, zorg ervoor dat je de bron controleert voor een beter begrip.
Een waarschuwing wordt getoond als alle Wormen zijn getoond, het geeft de uiteindelijke score weer die je hebt bereikt. Gebruik de Rechthoekgereedschap om het te maken en een beschrijvende naam toe te voegen aan het onderste TextField, stel de instantienaam in AlertView en markeer de Exporteren voor ActionScript doos.
We gebruiken een andere tween-engine dan de standaard die is opgenomen in de flitser, dit vergroot de prestaties en is gemakkelijker te gebruiken.
Je kunt TweenNano downloaden van de officiële website.
We gebruiken Geluidseffecten om het gevoel van het spel te verbeteren, je kunt het geluid dat in dit voorbeeld wordt gebruikt in Soungle.com vinden met het sleutelwoord raken.
We zullen onze applicatie interactief maken door een externe klasse te gebruiken, zijn naam toevoegen aan de Klasse veld in de Publiceren deel van de eigenschappen panel om de FLA te koppelen aan de hoofddocumentklasse.
Maak een nieuwe ActionScript 3.0-klasse (Cmd + N) en sla deze op als Main.as in je klasmap.
Maak uw standaard klassenstructuur om te beginnen met het schrijven van uw code.
pakket import flash.display.Sprite; public class Hoofd breidt uit openbare functie Main (): void // constructor code
Dit zijn de klassen die we moeten importeren voor onze klas om te werken, de importeren richtlijn maakt extern gedefinieerde klassen en pakketten beschikbaar voor uw code.
import flash.display.Sprite; import flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.MouseEvent; import flash.net.navigateToURL; import flash.net.URLRequest; import com.greensock.TweenNano; import com.greensock.easing.Expo;
Dit zijn de variabelen die we zullen gebruiken, lees de opmerkingen in de code om meer over hen te weten, sommige van hun namen verklaren zichzelf, dus daar zal geen commentaar zijn.
private var titleView: TitleView = new TitleView (); privé var opties: OptionsView; private var credits: CreditsView; private var lastSelected: TextField; // de laatst geselecteerde snelheid in het optiescherm private var lastSelected2: TextField; // het laatste geselecteerde hitgebied in het optiescherm private var hitSize: Number = 1; // hit size mask is op volledige schaal aan het begin private var timer: Timer = new Timer (1400); // standaardtijd voor de wormen om privé var gaten te verschijnen: Vector.= nieuwe Vector. (); // slaat de 8 holes op in de fase private var currentWorms: int = 0; // wormen al getoond private var wormsHit: int = 0; private var totalWorms: String = '10'; // totaal aantal wormen dat moet worden weergegeven
De constructor is een functie die wordt uitgevoerd wanneer een object is gemaakt op basis van een klasse, deze code is de eerste die wordt uitgevoerd wanneer u een instantie van een object maakt of wordt uitgevoerd met de boedelDocumentklasse.
Het roept de nodige functies op om het spel te starten. Controleer die functies in de volgende stappen.
public final function Main (): void addChild (titleView); holes.push (h1, h2, h3, h4, h5, h6, h7, h8); startButtonListeners ();
We beginnen met het toevoegen van de muisluisteraars aan de knoppen in de titelweergave, dit brengt ons naar het spel, opties of credits scherm.
private final function startButtonListeners (action: String = 'add'): void if (action == 'add') titleView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.optionsB.addEventListener (MouseEvent.MOUSE_UP, addOptions); titleView.playB.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.creditsB.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.optionsB.removeEventListener (MouseEvent.MOUSE_UP, addOptions); titleView.playB.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
De opties Scherm wordt getweend wanneer de gebruiker op de optieknop klikt, een muisluisteraar wordt toegevoegd aan de pijlknop om deze te verwijderen wanneer hij klaar is.
private finale functie addOptions (e: MouseEvent): void options = new OptionsView (); addChild (opties); TweenNano.from (opties, 0.3, x: stage.stageWidth, onComplete: function (): void options.backBtn.addEventListener (MouseEvent.MOUSE_UP, hideOptions);); optionsListeners ();
Deze luisteraars worden toegevoegd wanneer de opties Scherm getoond, ze behandelen de knoppen op het podium. Meer van zijn gedrag in de volgende stappen.
private laatste functieoptiesListeners (actie: String = 'toevoegen'): void if (action == 'add') options.slowBtn.addEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.mediumBtn.addEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.fastBtn.addEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.smallBtn.addEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.mediumBtn1.addEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.bigBtn.addEventListener (MouseEvent.MOUSE_UP, selectHitArea);
De standaardopties worden ingesteld door deze regels, ze stellen de momenteel geselecteerde knoppen in die traag en groot zijn.
lastSelected = options.slowBtn.slowTF; lastSelected2 = options.bigBtn.bigTF;
Een parameter bepaalt of de listeners worden toegevoegd of verwijderd, de volgende regels worden uitgevoerd als die parameter niet aangeeft dat de listeners moeten worden toegevoegd.
else options.slowBtn.removeEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.mediumBtn.removeEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.fastBtn.removeEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.smallBtn.removeEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.mediumBtn1.removeEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.bigBtn.removeEventListener (MouseEvent.MOUSE_UP, selectHitArea);
De pijlknop verwijdert de opties scherm wanneer erop wordt geklikt.
private laatste functie hideOptions (e: MouseEvent): void TweenNano.to (opties, 0.3, x: stage.stageWidth, onComplete: function (): void options.removeEventListener (MouseEvent.MOUSE_UP, hideOptions); removeChild (opties) ; options = null;);
Deze functie wordt uitgevoerd wanneer de snelheidsknoppen worden ingedrukt, het eerste deel verandert de tekstkleur van de knoppen, het verandert de huidige optie in wit en de nieuwe geselecteerde waarde in geel.
private laatste functie changeSpeed (e: MouseEvent): void / * Wijzig doel en laatst geselecteerde kleur * / lastSelected.textColor = 0xFFFFFF; e.target.textColor = 0xFF9966;
Dit is het tweede deel van de snelheidsfunctie, het detecteert dat op de knop is geklikt, controleert de naam en verhoogt / verlaagt de naam timer overeenkomstig.
if (e.target.name == 'slowTF') timer = new Timer (1400); lastSelected = e.target als TextField; else if (e.target.name == 'mediumTF') timer = new Timer (1100); lastSelected = e.target als TextField; else if (e.target.name == 'fastTF') timer = new Timer (800); lastSelected = e.target als TextField;
De volgende functie wordt uitgevoerd wanneer op een knop op de selectie van het hitgebied wordt geklikt. Het gedraagt zich op dezelfde manier als de laatste functie.
private laatste functie selectHitArea (e: MouseEvent): void / * Wijzig doel en laatst geselecteerde kleur * / lastSelected2.textColor = 0xFFFFFF; e.target.textColor = 0xFF9966; / * Detecteer de geklikte knop en wijzig het treffergebied dienovereenkomstig * / if (e.target.name == 'smallTF') hitSize = 0; lastSelected2 = e.target als TextField; else if (e.target.name == 'mediumTF') hitSize = 0.5; lastSelected2 = e.target als TextField; else if (e.target.name == 'bigTF') hitSize = 1; lastSelected2 = e.target als TextField;
De credits scherm wordt getoond wanneer de gebruiker op de creditsknop klikt, een muisluisteraar wordt volledig toegevoegd Filmclip om het te verwijderen.
private finale functie showCredits (e: MouseEvent): void titleView.optionsB.visible = false; titleView.creditsB.visible = false; titleView.playB.visible = false; credits = nieuwe CreditsView (); addChild (credits); TweenNano.from (credits, 0.3, x: -credits.width, onComplete: function (): void credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits););
Wanneer de credits op het scherm wordt geklikt, het wordt terug getweend en van het werkgebied verwijderd.
private laatste functie hideCredits (e: MouseEvent): void TweenNano.to (credits, 0.3, x: -credits.width, onComplete: function (): void titleView.creditsB.visible = true; titleView.playB.visible = true; titleView.optionsB.visible = true; credits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (credits); credits = null;);
Laten we hier stoppen om een snelle test uit te voeren en ervoor te zorgen dat onze spelcode werkt:
Houd er rekening mee dat sommige regels zijn becommentarieerd omdat sommige functies nog niet zijn gemaakt.
Vergeet niet dat de mijlpalen zijn opgenomen in de bronbestanden, dus als dit om een of andere reden niet in dit bestand voorkomt, kijk dan eens naar de bron om te zien wat dat kan veroorzaken.
De volgende regels verwijderen de Titel scherm en verlaat de Spel Scherm zichtbaar. Het roept ook een functie op om het spel voor te bereiden.
Accentsconagua
private finale functie showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: function (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = nul;); prepareWorms (); We gebruiken hier een for-verklaring om een toe te voegen Muisluisteraar naar elke hole Filmclip in de fase. Dit maakt de Worms klikbaar.
private final function prepareWorms (): void for (var i: int = 0; i < 8; i++) /* Add Mouse Listeners */ holes[i].addEventListener(MouseEvent.MOUSE_DOWN, wormHit);
Als het gat Filmclip heeft meer dan één frame, het moet worden gestopt om te voorkomen dat alle wormen tegelijkertijd worden weergegeven.
/ * Wormen stoppen bij frame 1 * / holes [i] .gotoAndStop (1); startTimer ();
Deze timer start het aftellen en maakt Wormen verschijnen willekeurig in het werkgebied.
private finale functie startTimer (): void timer.addEventListener (TimerEvent.TIMER, showWorm); timer.start ();
Deze code controleert of de weergegeven wormen de limiet nog niet hebben overschreden en roept een alarm als het waar is.
private finale functie showWorm (e: TimerEvent): void if (currentWorms == int (totalWorms)) alert (); else var randomHole: int = Math.floor (Math.random () * 8); // Gebruikt om te berekenen welke worm zal verschijnen
Het geselecteerde hitgebied in de opties scherm wordt hier op elke worm gewijzigd met behulp van de schaaleigenschappen van AS3.
holes [randomHole] .addFrameScript (1, function () holes [randomHole] .worm.hArea.scaleX = hitSize; holes [randomHole] .worm.hArea.scaleY = hitSize;);
Enkele milliseconden gaan voorbij waar de Worm zichtbaar zal zijn, wanneer de MovieClip zijn laatste frame heeft bereikt, zal hij stoppen en terugkeren naar het eerste frame.
holes [randomHole] .addFrameScript (holes [randomHole] .totalFrames - 1, function () holes [randomHole] .gotoAndStop (1);); holes [randomHole] .play (); currentWorms ++;
Deze functie verwerkt wanneer er op een worm wordt geklikt, het zal in principe een geluid afspelen, de score verhogen en de worm weer verbergen.
private eindfunctie wormHit (e: MouseEvent): void if (e.target.name == 'hArea' || e.target.name == 'worm') var hit: Hit = new Hit (); hit.play (); wormsHit ++; e.target.parent.gotoAndPlay (18); scoreTF.text = wormsHit + '/' + totalWorms;
U kunt een aangepaste bonus toevoegen als alle wormen zijn geraakt door de volgende coderegels te wijzigen.
if (totalWorms == String (wormsHit)) alert ();
Deze functie zal het spel stoppen en de uiteindelijke score onthullen, het voegt ook een muisluisteraar toe om het spel te resetten wanneer erop wordt geklikt.
privé laatste functie alert (): void timer.stop (); var alert: AlertView = nieuwe AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5; alert.scoreTF.text = score TF.text; alert.addEventListener (MouseEvent.MOUSE_UP, restart); addChild (alert); TweenNano.from (alert, 0.6, scaleX: 0.2, scaleY: 0.2, ease: Expo.easeOut);
De volgende functie laadt de swf opnieuw, herstart een variabele, methode en keer terug naar de Titelscherm.
privé laatste functie opnieuw opstarten (e: MouseEvent): void navigateToURL (nieuwe URLRequest (stage.loaderInfo.url), '_level0');
Zoals je kunt zien, kunnen veel van de gamevariabelen / -parameters worden aangepast en aan jouw behoeften worden aangepast. Probeer je eigen versie van de game te maken!
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
