Share
Neem een kijkje in deze Premium Tutorial en maak een leuk vallende platforms game met behulp van Flash en ActionScript 3.0. Raak de paarse platforms niet aan of ga niet naar buiten van het scherm, anders verlies je een leven!
Met behulp van de Flash-tekengereedschappen maken we een goed uitziende grafische interface die wordt aangedreven door verschillende ActionScript 3-klassen.
De gebruiker kan een personage verplaatsen over het podium en de platforms, u kunt de parameters in de klasse aanpassen om het spel aan te passen.
Open Flash en maak een 320 pixels breed, 480 pixels lang document. Stel de beeldsnelheid in op 24 fps.
Er zal een kleurrijk uitziende interface worden getoond, dit gaat over meerdere vormen, knoppen, geluiden en meer.
Ga door naar de volgende stappen voor meer informatie over het maken van deze GUI.
Selecteer het gereedschap Rechthoek (R) om een rechthoek van 320x480px # DEBDA0 te maken en centreer deze in het werkgebied. Dupliceer de vorige vorm en verander de breedte in 2px en de kleur in # C3A287, dupliceer de vorm (Cmd + D) verschillende keren en verplaats elke 2px naar rechts om het hierboven weergegeven resultaat te krijgen.
Selecteer het tekstgereedschap (T), kies een goed uitziend lettertype en schrijf de titel van je spel. Ik heb dit formaat gebruikt: Candara Bold, 80pt, # 746253. Je kunt ook de speler- en platformafbeeldingen toevoegen die we in de volgende stappen zullen maken.
Gebruik dezelfde techniek om twee knoppen te maken, lijn ze uit op het midden en benoem ze startB en creditsB. Alles converteren naar een Filmclip en stel de naam van het exemplaar in menuView.
Dit zal het zijn GameView. Voeg de achtergrond toe MC naar het podium en maak er twee Dynamische tekstvelden en plaats ze zoals getoond in de afbeelding. Je kunt ook enkele eenvoudige vormen toevoegen achter de TextFields om de tekst duidelijker te maken.
Gebruik de Rechthoek primitief gereedschap (R) om een vierkant van 30x30px te maken en dit te vullen met # CC6600. Dupliceer de vorm, verander de grootte in 28x28 px en gebruik deze verloopvulling: # F9D03 tot # EA7736. U kunt een pictogram of letter toevoegen om uw karakter te identificeren, ik heb de een van het ActiveTuts + -logo.
Selecteer ten slotte het onderste deel van de vorm (zoals weergegeven in de afbeelding) en converteer het naar Filmclip en noem het hArea, dit is erg handig om ongewenste botsingen met de blokken te voorkomen. Selecteer alle vormen en converteer ze naar een enkele MC; Noem maar op Speler en markeer de Exporteren voor ActionScript doos.
Gebruik dezelfde techniek als in de laatste stap om twee blokken van 60x14px te maken, converteer ze naar MC, noem de grijze Blok en de paarse BadBlock. Vergeet niet om het te markeren Exporteren voor ActionScript doos.
Een waarschuwing wordt getoond als je je hele leven verliest, het geeft de uiteindelijke score weer die je hebt bereikt. Gebruik de Rechthoek primitief gereedschap om het te maken en het filter in de afbeelding toe te voegen voor een beter uiterlijk. Stel de naam van het exemplaar in op AlertView en markeer de Exporteren voor ActionScript doos.
Dit scherm is eenvoudig te maken omdat we al alle grafische weergaven hebben. Stel de naam van het exemplaar in op CreditsView en markeer de Exporteren voor ActionScript doos.
We gebruiken een andere tween-engine dan de standaard in Flash, dit verhoogt de prestaties en is gemakkelijker in gebruik.
Je kunt Tween Nano downloaden van de officiële website. Lees deze tutorial voor informatie over het installeren ervan.
We gebruiken Geluidseffecten om het gevoel van het spel te verbeteren (in dit geval om de speler te laten weten wanneer hij een leven verloren heeft), je kunt het geluid dat in dit voorbeeld wordt gebruikt op Soungle.com vinden met het sleutelwoord echo. Sla het geluid op in uw bibliotheek met een klassenaam van echo.
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.events.Event; import flash.events.KeyboardEvent; import flash.events.TimerEvent; import flash.utils.Timer; import flash.events.MouseEvent; import flash.net.navigateToURL; import flash.net.URLRequest; import com.greensock.TweenNano; import com.greensock.easing.Elastic;
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 blocks: Vector.= nieuwe Vector. (); // Een vector om de bewegende blokken private var player op te slaan: Player = new Player (); private var zwaartekracht: int = 3; // De zwaartekrachtvar die wordt gebruikt om de speler te verplaatsen en private var te blokkeren moveLeft: Boolean = false; // sla de richting van de speler op private var moveRight: Boolean = false; private var blockTimer: Timer = new Timer (800); // tijd om te wachten voordat een nieuw blok wordt gegenereerd privé var leven: leven; privé var leeft: int = 3; private var lifeTimer: Timer = new Timer (8000); // tijd om te wachten voordat een nieuw leven wordt getoond private var blip: Blip = new Blip (); // Een geluidsinstantie
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 instantie van een object maakt, of de eerste die wordt uitgevoerd wanneer het project is geladen als het in de documentklasse is.
Het roept de nodige functies op om het spel te starten. Controleer die functies in de volgende stappen.
Accentsconagua
public final function Main (): void initialListeners ('add'); We beginnen met het toevoegen van de muisluisteraars aan de knoppen in de menuweergave, deze brengen ons naar het spelscherm of het creditsscherm.
private finale functie initialListeners (actie: String = 'add'): void if (action == 'add') menuView.startB.addEventListener (MouseEvent.MOUSE_UP, gameView); menuView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCreditsView);
Wanneer de Begin op de knop is gedrukt, de focus is ingesteld om te worden opgevoerd om de toetsenbordacties te ontvangen om de speler te verplaatsen, waarna de menuweergave wordt getweend en verwijderd.
private final-functie gameView (e: MouseEvent): void / * Focus Stage * / stage.focus = stage; / * Verwijder MenuView, Start Game * / TweenNano.to (menuView, 0.5, y: -menuView.height, onComplete: function (): void removeChild (menuView); menuView = null; addInitialBlocks (););
Het credits scherm wordt getoond wanneer de gebruiker op de credits knop klikt, een muis luisteraar wordt toegevoegd aan de volledige MC om het te verwijderen.
private finale functie showCreditsView (e: MouseEvent): void var credits: CreditsView = new CreditsView (); addChild (credits); TweenNano.from (credits, 0.4, x: stage.stageWidth); credits.addEventListener (MouseEvent.MOUSE_UP, function (): void TweenNano.to (credits, 0.4, x: stage.stageWidth, onComplete: function (): void removeChild (credits); credits = null;); );
De volgende code voegt de blokken die in de parameter zijn gespecificeerd op een willekeurige positie toe, het zal ook de functie aanroepen om de speler aan het podium toe te voegen.
private laatste functie addInitialBlocks (n: int = 3): void for (var i: int = 0; i < n; i++) var block:Block = new Block(); block.x = Math.random() * (stage.stageWidth - block.width); block.y = (stage.stageHeight * 0.5) + Math.random() * (stage.stageHeight * 0.5); addChild(block); blocks.push(block); addPlayer();
De speler wordt toegevoegd als de eerste blokken op het podium staan. Het verschijnt in het midden X van het podium.
private finale functie addPlayer (): void player.x = (stage.stageWidth * 0.5) - (player.width * 0.5); player.y = player.height; addChild (speler); gameListeners ();
Met de volgende code wordt de juiste waarde voor de verplaatsingsvariabele ingesteld op true of false, afhankelijk van de toets die is ingedrukt. Vervolgens wordt de variabele in elk frame gecontroleerd (in een andere functie). Hierdoor beweegt de speler volgens die variabele.
private laatste functie movePlayer (e: KeyboardEvent): void if (e.keyCode == 37) moveRight = false; moveLeft = true; else if (e.keyCode == 39) moveLeft = false; moveRight = true;
Wanneer de pijltjestoetsen worden losgelaten, wordt de betreffende variabele ingesteld op vals om beweging te stoppen.
private finale functie stopPlayer (e: KeyboardEvent): void if (e.keyCode == 37) moveLeft = false; else if (e.keyCode == 39) moveRight = false;
Deze functie wordt aangeroepen door een timer; het berekent een willekeurig geheel getal van 0 tot 3, wanneer het resultaat gelijk is aan 0, zal een slecht blok worden toegevoegd, als het resultaat anders is dan 0, zal een normaal blok worden toegevoegd. De blokken worden toegevoegd aan een geroepen Vector-eigenschap blokken, op deze manier hebben we toegang tot hen buiten deze functie.
private laatste functie addBlock (e: TimerEvent): void var r: int = Math.floor (Math.random () * 4); if (r! = 0) var block: Block = new Block (); block.x = Math.random () * (stage.stageWidth - block.width); block.y = stage.stageHeight + block.height; addChild (blok); blocks.push (blok); else var badBlock: BadBlock = new BadBlock (); badBlock.name = 'slecht'; badBlock.x = Math.random () * (stage.stageWidth - badBlock.width); badBlock.y = stage.stageHeight + badBlock.height; addChild (badBlock); blocks.push (badBlock);
Een andere getimede functie, een levensafbeelding wordt toegevoegd wanneer de timer voltooid is. De levenspositie is het laatste blok in de vector - 1.
private finale functie addLife (e: TimerEvent): void life = new Life (); life.x = blokken [blocks.length - 1] .x; life.y = blocks [blocks.length - 1] .y - life.height; addChild (leven);
Met deze functie worden de benodigde luisteraars toegevoegd en verwijderd om het spel te starten.
private slotfunctie gameListeners (actie: String = 'add'): void if (action == 'add') stage.addEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.addEventListener (KeyboardEvent.KEY_UP, stopPlayer); stage.addEventListener (Event.ENTER_FRAME, update); blockTimer.addEventListener (TimerEvent.TIMER, addBlock); blockTimer.start (); lifeTimer.addEventListener (TimerEvent.TIMER, addLife); lifeTimer.start (); else stage.removeEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.removeEventListener (KeyboardEvent.KEY_UP, stopPlayer); stage.removeEventListener (Event.ENTER_FRAME, update); blockTimer.removeEventListener (TimerEvent.TIMER, addBlock); blockTimer.stop (); lifeTimer.removeEventListener (TimerEvent.TIMER, addLife); lifeTimer.stop ();
Wanneer de speler een leven verliest, wordt een kleine animatie weergegeven in het tekstveld 'lives' en wordt er een geluid afgespeeld om de gebruiker te waarschuwen.
privé-finale functie animateLives (): void TweenNano.from (livesTF, 0.8, x: livesTF.x - 3, ease: Elastic.easeOut); blip.play ();
In dit deel starten we de hoofdfunctie van het spel, deze functie wordt elk frame uitgevoerd.
De volgende coderegels controleren de bewegingsvariabelen, indien waar, wordt de speler verplaatst.
update van privé-finale functie (e: Event): void / * Controls * / if (moveLeft) player.x - = 4; else if (moveRight) player.x + = 4;
Deze code creëert onzichtbare muren aan de zijkanten van het podium om te voorkomen dat de speler eruit springt.
/ * Schermgrenzen * / if (player.x <= 0) //Left player.x = 0; else if(player.x >= (stage.stageWidth - player.width)) // Right player.x = (stage.stageWidth - player.width);
De speler wordt ingedrukt door de zwaartekrachtvariabele.
/ * Speler Zwaartekracht * / speler.y + = zwaartekracht;
De volgende regels controleren op botsingen tussen de speler en de blokken. Wanneer de speler botst met een normaal blok, blijft deze er bovenop liggen. Wanneer een slecht blok wordt geraakt, gaat een leven verloren en wordt de speler verplaatst.
for (var i: int = 0; i < blocks.length; i++) if(player.hArea.hitTestObject(blocks[i]) && blocks[i].name == 'bad') for(var j:int = 3; j < blocks.length; j++) if(blocks[j].name != 'bad') player.x = blocks[j].x; player.y = blocks[j].y - player.height; lives--; animateLives(); livesTF.text = 'x' + String(lives); j = blocks.length; if(player.hArea.hitTestObject(blocks[i])) player.y = blocks[i].y - (player.height + 3);
De zwaartekracht beïnvloedt ook de blokken, maar in de tegenovergestelde richting.
blokken [i] .y - = zwaartekracht;
De blokken worden vernietigd als ze niet meer zichtbaar zijn op het podium.
if (blokken [i] .Y < -blocks[i].height) removeChild(blocks[i]); blocks[i] = null; blocks.splice(i, 1);
De spelscore verhoogt elk frame, deze code wijzigt het tekstveld om dat weer te geven.
scoreTF.text = String (int (scoreTF.text) + 1);
De volgende regels behandelen de grafische leven en variabelen.
Als een Life (een 1-Up) op het podium staat, wordt deze naar boven verplaatst en verwijderd als deze door de speler wordt geraakt of niet meer zichtbaar is op het podium.
if (life! = null) life.y - = zwaartekracht; / * Remove + Life * / if (life.y < 0) removeChild(life); life = null; /* Grab +Life */ if(life != null && player.hitTestObject(life)) removeChild(life); life = null; lives++; livesTF.text = 'x' + String(lives); /* Lose Lives */ if(player.y > stage.stageHeight || player.y < -5) player.x = blocks[3].x; player.y = blocks[3].y - player.height; lives--; animateLives() livesTF.text = 'x' + String(lives);
Wanneer de speler geen levens heeft, is de showAlert () functie wordt aangeroepen. Deze functie stopt het spel en onthult de uiteindelijke score.
if (levens < 0) showAlert();
U kunt zoveel niveaus toevoegen als u wilt, dit is een voorbeeld van hoe u een niveau kunt toevoegen.
Toen de score 500 bereikte, neemt de zwaartekracht met 1 toe, hierdoor wordt het spel sneller en moeilijker om op de platforms te landen, het vermindert ook de tijd dat de levens worden toegevoegd.
if (int (scoreTF.text)> 500 && int (scoreTF.text) < 502) gravity = 4; lifeTimer = new Timer(12000);
Probeer de snelheid na elke 500 punten te verhogen.
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.
private final-functie showAlert (): void gameListeners ('rmv'); var alert: AlertView = nieuwe AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5; alert.scoreTF.text = score TF.text + '!'; livesTF.text = "; alert.addEventListener (MouseEvent.MOUSE_UP, restart); addChild (alert); TweenNano.from (alert, 0.7, y: -alert.height, ease: Elastic.easeOut); De volgende functie laadt de SWF opnieuw, stelt alle variabelen en methoden opnieuw in en keert terug naar de Menuscherm.
privé laatste functie opnieuw opstarten (e: MouseEvent): void navigateToURL (nieuwe URLRequest (stage.loaderInfo.url), '_level0');
Voeg de klassenaam toe aan de Klasse veld in de Publiceren deel van de eigenschappen panel om de FLA te koppelen aan de hoofddocumentklasse.
Je hebt een heel leuk spel gemaakt, probeer je eigen functies en afbeeldingen toe te voegen.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
