Share
Een van de meest populaire Flash-spellen ooit is Bloons, waarin je een aap speelt die darts gooit om ballonnen te laten knallen. Het heeft vele vervolgspellen voortgebracht, zelfs vertakkend in andere genres zoals torenverdediging. Deze tutorial laat je zien hoe je je eigen ballon-knallende game kunt maken met behulp van de QuickBox2D-engine.
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Klik en houd ingedrukt om de hoek van de foto te bepalen. Probeer alle ballonnen te laten knappen!
In deze zelfstudie gebruiken we een reeks ActionScript-klassen om een Bloons geïnspireerd spel te maken. Het doel van het spel is om op de ballonnen te schieten om ze allemaal te laten knallen.
Open Flash en maak een 480 pixels breed, 320 pixels lang document. Stel de beeldsnelheid in op 24 fps.
Er wordt een kleurrijke en eenvoudige interface gebruikt met verschillende vormen, knoppen en MovieClips. In de volgende paar stappen zullen we deze GUI bouwen. De afbeeldingen van eekhoorns en eikels zijn van openclipart.org.
Deze achtergrond is gemaakt in Flash met behulp van eenvoudige rechthoek en ovale vormen. De bruine balk onderaan zal dienen als informatiebalk.
Als u de titel wilt maken, selecteert u het gereedschap Tekst (T) en wijzigt u de kleur in #EEEEEE; schrijf je titeltekst (ik heb het lettertype GoodDog gebruikt) en voeg een eenvoudige slagschaduw toe. Selecteer de ovale tool (O) voor de ballon en maak een # FFCE47 ovaal van 20 x 30 px. Gebruik de Poly Star Tool voor de kleine driehoek eronder.
Gebruik opnieuw de Text Tool om twee knoppen te maken zoals in de bovenstaande afbeelding. Converteer ze naar knoppen en geef ze beschrijvende instantienamen zodat we ze later eenvoudig in de code kunnen gebruiken. Converteer de graphics op het podium naar een single Filmclip en noem het TitleView - vergeet niet om de Exporteren voor ActionScript-box.
Dit is het spelscherm, dat alle dynamische en interactieve elementen van het spel bevat. Meer van hen zullen tijdens runtime worden gegenereerd met behulp van ActionScript. U kunt de instantienamen in de afbeelding hierboven lezen.
De credits scherm verschijnt voor de Titel scherm; gebruik de afbeeldingen en lettertypen van voordat u deze maakt. Noem maar op CreditsView en vergeet niet om de Exporteren voor ActionScript doos.
Een waarschuwing wordt getoond als alle ballonnen zijn gepoft; het toont een game over het bericht en de score. Gebruik de Rechthoekgereedschap om het te maken en de naam van het exemplaar in te stellen AlertView. Nogmaals, markeer de Exporteren voor ActionScript doos.
We zullen geluidseffecten gebruiken om het gevoel van het spel te verbeteren; je kunt het geluid dat in dit voorbeeld wordt gebruikt in Soungle.com vinden met behulp van het trefwoord knal.
We gebruiken een andere tween-engine dan de standaard die is opgenomen in Flash, dit verhoogt de prestaties en is gemakkelijker te gebruiken.
Je kunt TweenNano downloaden van de officiële website.
We zullen de handige natuurbibliotheek van QuickBox2D gebruiken om dit spel te maken. Als u hiermee niet vertrouwd bent, kunt u de Introductiereeks uit Activetuts volgen+.
U kunt QuickBox2D downloaden van de officiële website.
We zullen onze applicatie interactief maken door een externe klasse te gebruiken. Voeg de naam toe 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.MovieClip; import com.actionsnippet.qbox. *; import com.greensock.TweenNano; import com.greensock.easing.Expo; import flash.events.MouseEvent; import Box2D.Common.Math. *; import flash.events.Event; import flash.net.navigateToURL; import flash.net.URLRequest;
Dit zijn de variabelen die we zullen gebruiken. Lees de opmerkingen in de code om meer over hen te weten te komen; sommige van hun namen spreken voor zich, dus daar zal geen commentaar zijn.
private var titleView: TitleView = new TitleView (); private var credits: CreditsView; private var world: QuickBox2D; private var acorn: QuickObject; private var acorns: Array = []; // slaat de eikels op die door particuliere var contacten zijn gegooid: QuickContacts; // gebruikt om botsingen in quickbox2d privé var-ballonnen af te handelen: Array = []; // slaat de ballonnen op in het stadium privé var yImpulse: Number = 0; // verticale kracht om de eikel te schieten privé var xImpulse: int = 3; // standaard horizontale sterkte de eikel wordt gegooid private var pop: Pop = new Pop (); // het geluid in de bibliotheek
De constructor is een functie die wordt uitgevoerd wanneer een object wordt gemaakt op basis van een klasse. Deze code is de eerste die wordt uitgevoerd wanneer u een exemplaar van een object maakt. De constructor van de documentklasse is een speciaal geval: het draait aan het begin van het spel.
We gebruiken dit om de nodige functies te bellen om het spel te starten. Controleer die functies in de volgende stappen.
public final function Main (): void // Code
We beginnen met het toevoegen van de titelweergave van de bibliotheek aan het podium.
addChild (titleView); startButtonListeners ();
Hiermee worden de muisluisteraars toegevoegd aan de knoppen in de titelweergave, die ons naar het spel- of creditscherm leiden.
private final function startButtonListeners (action: String = 'add'): void if (action == 'add') titleView.creditsBtn.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.playBtn.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.creditsBtn.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.playBtn.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
De credits scherm wordt weergegeven wanneer de gebruiker op de knop Credits klikt. Een muisluisteraar wordt volledig toegevoegd Filmclip om het te verwijderen.
private finale functie showCredits (e: MouseEvent): void titleView.creditsBtn.visible = false; titleView.playBtn.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.creditsBtn.visible = true; titleView.playBtn.visible = true; credits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (credits); credits = null;);
De volgende regels verwijderen de Titel scherm en verlaat de Spel Scherm zichtbaar. Hier noemen we ook de nodige functies om het spel te starten; deze functies worden in de volgende stappen uitgelegd.
Accentsconagua
private finale functie showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: function (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = null; startGame ();); 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 weggelaten, 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 de oorzaak is.
Deze functie voegt de muisluisteraars toe die nodig zijn om de eikelschieten uit te voeren.
private slotfunctie gameListeners (actie: String = 'add'): void if (action == 'add') bg.addEventListener (MouseEvent.MOUSE_DOWN, startCharge); bg.addEventListener (MouseEvent.MOUSE_UP, shot); restartBtn.addEventListener (MouseEvent.MOUSE_UP, restartLvl); stage.addEventListener (Event.ENTER_FRAME, update); else bg.removeEventListener (MouseEvent.MOUSE_DOWN, startCharge); bg.removeEventListener (MouseEvent.MOUSE_UP, shot); restartBtn.removeEventListener (MouseEvent.MOUSE_UP, restartLvl); stage.removeEventListener (Event.ENTER_FRAME, update);
Hier beginnen we het spel door de Box2D-wereld te creëren en de functies aan te roepen die de ballonnen zullen maken en muisgebeurtenissen afhandelen.
private final function startGame (): void / * Hide gCircle * / gCircle.visible = false; / * Nieuwe B2D-wereld * / world = nieuwe QuickBox2D (deze, debug: 0); contacten = world.addContactListener (); contacts.addEventListener (QuickContacts.ADD, onAdd); / * Maak ballonfunctie * / gameListeners (); createBalloons ();
genesteld voor loops worden gebruikt om de ballonnen op het podium te plaatsen. Deze functie gebruikt de QuickBox2D addBox methode om een nieuw Box2D-object te maken dat wordt ingesteld als een Sensor - dit betekent dat er geen fysische reactie op de botsing zal zijn (d.w.z. de eikel zal er niet vanaf botsen), maar een botsing zal nog steeds worden gedetecteerd. Met behulp van deze methode kunnen we de ballon vernietigen, maar laat de eikel verder gaan alsof er niets gebeurd is.
De ballon wordt dan toegevoegd aan een array; dit geeft ons toegang tot alle ballonnen buiten deze functie.
private laatste functie createBalloons (h: int = 5, v: int = 3): void for (var i: int = 0; i < h; i++) for(var j:int = 0; j < v; j++) var balloon:QuickObject = world.addBox(x:10 + (i * 0.66), y:4 + (j * 1), width: 0.66, height: 1, skin:Balloon, fixedRotation:true, draggable:false, density:0); balloon.shape.m_isSensor = true; balloons.push(balloon); /* Set balloon counter */ targetTF.text = String(balloons.length); /* Start Physics */ world.start();
Natuurlijk hoeft u geen genest te gebruiken voor lussen om de ballonnen te positioneren; dit is de gemakkelijkste manier om ze in een raster te plaatsen, maar u kunt ze handmatig plaatsen als u dat wilt.
Deze functie handelt de botsing af die in stap 26 wordt genoemd. Het eerste dat u moet doen, is door de reeks van ballonnen gaan en elke ballon controleren om te zien of deze in botsing komt met de eikel.
private finale functie onAdd (e: Event): void for (var i: int = 0; i < balloons.length; i++) if(contacts.isCurrentContact(balloons[i], acorn))
Als de botsing waar is, noemen we de vernietigen() methode van de ballon QuickObject en verwijder het element uit de array.
ballons [i] .destroy (); balloons.plice (i, 1);
Daarna spelen we een geluid dat de slag aangeeft, waardoor het spelgevoel verbetert.
pop.play ();
De score- en doeltellers worden bijgewerkt volgens de ballonnen die zijn gepoft en de ballonnen zijn overgebleven.
scoreTF.text = String (int (scoreTF.text) + 50); targetTF.text = String (balloons.length);
Er wordt een melding gegeven wanneer alle ballonnen zijn gepoft; we zullen deze functie later in de tutorial zien.
if (targetTF.text == '0') alert ();
Deze code zal de richtingaanwijzer van de eikel onthullen, de y-impulsvariabele van de eikel resetten en een enterframe luisteraar toevoegen die het doel zal behandelen.
private finale functie startCharge (e: MouseEvent): void yImpulse = 0; gCircle.visible = true; gCircle.addEventListener (Event.ENTER_FRAME, charge);
De doelindicator draait om de richting weer te geven waarin de eikel zal worden afgevuurd en past de y-impulsvariabele dienovereenkomstig aan. De richting van de opname wordt beïnvloed door twee variabelen, xImpulse en yImpulse, die worden gecombineerd om een te vormen impuls vector later. xImpulse blijft constant, en yImpulse wordt gewijzigd als de gebruiker de muisknop ingedrukt houdt.
privé uiteindelijke functielading (e: Event): void gCircle.rotation - = 3; yImpulse - = 0,2; / * Voorkom overbrugging * / if (gCircle.rotation < -80) yImpulse = -5.4; gCircle.rotation = -80;
De volgende acties vinden plaats wanneer de muisknop omhoog staat.
privé uiteindelijke functie shot (e: MouseEvent): void / * Hide gCircle * / gCircle.removeEventListener (Event.ENTER_FRAME, charge); gCircle.visible = false; gCircle.rotation = 0; / * Maak nieuwe Acorn * / acorn = world.addBox (x: 2.76, y: 7.33, width: 0.66, height: 0.53, skin: Acorn, fixedRotation: true, draggable: false, density: 1); acorns.push (acorn); / * Schiet eikel * / var-impuls: b2Vec2 = nieuwe b2Vec2 (xImpulse, yImpulse); acorn.body.ApplyImpulse (impulse, acorn.body.GetWorldCenter ()); / * Update Acorn-teller * / acornsTF.text = String (int (acornsTF.text) -1);
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 weggelaten omdat deze functies nog niet zijn gemaakt.
De update-functie voert een reeks EnterFrame-bewerkingen uit. Laten we die acties in de volgende stappen bekijken.
update van privé-finale functie (e: Event): void
De volgende regels verwijderen elke eikel die van het podium af gaat.
/ * Verwijder eikels op het toneel * / for (var i: int = 0; i < acorns.length; i++) if(acorns[i].y > 10.66) eikels [i] .destroy (); acorns.splice (i, 1);
Het spel is afgelopen als de speler geen eikels meer heeft (of alle ballonnen vernietigt zoals eerder vermeld).
/ * Controleer of het niveau mislukt is * / if (int (acornsTF.text) <= 0) alert('lose'); Deze code wordt uitgevoerd wanneer op de knop Opnieuw opstarten wordt geklikt. Het zal de nodige variabelen en luisteraars resetten om het niveau opnieuw te starten.
private laatste functie restartLvl (e: MouseEvent): void / * Luisteraars verwijderen * / gameListeners ('rmv'); / * Vernietig World * / world = null; / * Vernietig ballonnen, reset score en eikels * / voor (var i: int = 0; i < balloons.length; i++) balloons[i].destroy(); scoreTF.text = '0'; acornsTF.text = '5'; balloons = [];//clear balloons array startGame(); Met deze functie wordt het spel gestopt en het bericht Game Over getoond. Het voegt ook een muisluisteraar toe om het spel te resetten wanneer erop wordt geklikt.
private laatste functie alert (gameState: String = 'win'): void gameListeners ('rmv'); world.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); if (gameState == 'lose') alert.titleTF.text = 'Level Failed!'; addChild (waarschuwing); TweenNano.from (alert, 0.6, scaleX: 0.2, scaleY: 0.2, ease: Expo.easeOut); Deze code laadt de SWF opnieuw, herstelt alle waarden en keert terug naar het beginscherm.
privé laatste functie opnieuw opstarten (e: MouseEvent): void navigateToURL (nieuwe URLRequest (stage.loaderInfo.url), '_level0');
Maak je eigen aanpassingen aan het spel en geniet ervan om het te maken. Misschien kunt u de lay-out van de ballonnen wijzigen of nieuwe niveaus toevoegen of de afbeeldingen wijzigen.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
