Share
In deze Premium-zelfstudie leer je een leuke retro-game te maken met Flash en ActionScript 3.0. Bekijk de demo - het resultaat is gebaseerd op de klassieker Boksen voor de Atari.
Met behulp van de Flash-tekentools maken we de grafische interface die wordt aangedreven door verschillende ActionScript 3-klassen.
De speler kan zich binnen de gegeven tijd verplaatsen en tegen de tegenstander vechten.
Open Flash en maak een 320 pixels breed, 480 pixels lang document. Stel de beeldsnelheid in op 24 fps.
Een kleurrijke leuk ogende interface wordt getoond, dit omvat meerdere vormen, MovieClips en meer.
Ga door naar de volgende stappen voor meer informatie over het maken van deze GUI.
Een eenvoudige groene rechthoek vult het podium.
Selecteer het gereedschap Rechthoek (R) om een rechthoek van 320x480px # 649428 te maken en midden in het werkgebied te centreren.
'
Gebruik hetzelfde gereedschap om een reeks # FF9A2E-rechthoeken te maken om een 290x213 px-ring te bouwen.
Als u het pixeleffect op de tekens wilt gebruiken, gebruikt u het gereedschap Rechthoek om kleine rechthoeken en vierkanten te maken die overeenkomen met de bovenstaande afbeelding. Misschien wil je deze afbeelding downloaden en op een lagere laag in je tijdlijn plaatsen, en er dan rechthoeken overheen plaatsen.
Drie Dynamic TextFields worden in het werkgebied geplaatst, ze worden gebruikt als hit-tellers en een timer. Controleer de afbeelding hierboven en plaats ze overeenkomstig.
Als u een aangepast lettertype in een dynamisch tekstveld wilt gebruiken, moeten we dit eerst insluiten.
Ga met het tekstveld naar het eigenschappenvenster en klik op de knop Insluiten. Er verschijnt een dialoogvenster waarin u de benodigde tekens kunt selecteren die in uw spel worden gebruikt. U kunt ook gewoon "Hoofdletters", "Kleine letters", "Cijfers" en "Interpunctie" aanvinken.
Converteer de stadiumvormen naar MovieClip en geef ze de instantienamen die in de afbeelding worden weergegeven.
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 Tween Nano downloaden van de officiële website.
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.utils.Timer; import flash.events.TimerEvent; import flash.events.KeyboardEvent; import flash.events.Event; import com.greensock.TweenNano; import flash.events.MouseEvent; 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; sommige van hun namen spreken voor zich, dus daar zal geen commentaar zijn.
private var timer: Timer = new Timer (1000); // gebruikt om de tijd te verkleinen private var min: int = 2; // totale minuten van vechten privé var secs: int = 0; // starting seconds private var moveLeft: Boolean = false; // de volgende vars worden gebruikt om de speler vloeiend privé te bewegen var moveRight: Boolean = false; private var moveUp: Boolean = false; private var moveDown: Boolean = false; private var eTimer: Timer = new Timer (50); // de vijandelijke beweging lag
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 wordt uitgevoerd wanneer de SWF wordt geladen als onderdeel van deяDocument-klasse.
Het roept de nodige functies op om het spel te starten. Controleer die functies in de volgende stappen.
public final function Main (): void // code?
We beginnen met het aanroepen van de addListeners-functie en stoppen de animaties van de personages.
addListeners (); / * Stop MovieClips * / player.stop (); enemy.stop ();
Vervolgens voegen we de nodige key- en enterframe-listeners toe.
private finale functie addListeners (): void stage.addEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.addEventListener (KeyboardEvent.KEY_UP, stopPlayer); stage.addEventListener (KeyboardEvent.KEY_DOWN, hit); stage.addEventListener (KeyboardEvent.KEY_UP, resetHit); stage.addEventListener (Event.ENTER_FRAME, update);
? Gevolgd door de vereiste timers:
/ * Timers * / timer.addEventListener (TimerEvent.TIMER, updateCounter); timer.start (); eTimer.addEventListener (TimerEvent.TIMER, enemyUpdate); eTimer.start ();
Deze functie werkt elke seconde, het behandelt de timer in de fase.
private laatste functie updateCounter (e: TimerEvent): void / * Reduce Time * / secs--; if (sec < 0) secs = 59; min--; if(min == 0 && secs == 0) //remove listeners if out of time removeListeners();
We voegen een 0 links van de seconden toe als het aantal onder de 10 ligt (dus de timer heeft altijd twee cijfers).
/ * Tweecijferige klok * / var s: String = "; if (String (secs) .length == 1) s = '0'; else s ="; time.text = String (min) + ':' + s + String (secs);
Hier detecteren we de ingedrukte toets en veranderen de variabele dienovereenkomstig. We zouden de speler met dezelfde functie kunnen verplaatsen, maar de beweging zal niet soepel verlopen alsof we een enterframe-gebeurtenis hebben gebruikt.
private laatste functie movePlayer (e: KeyboardEvent): void / * Movement * / if (e.keyCode == 37) moveRight = false; moveLeft = true; else if (e.keyCode == 39) moveLeft = false; moveRight = true; if (e.keyCode == 38) moveDown = false; moveUp = true; else if (e.keyCode == 40) moveUp = false; moveDown = true;
Deze functie detecteert de vrijgegeven toets om de beweging van de speler te stoppen.
private finale functie stopPlayer (e: KeyboardEvent): void if (e.keyCode == 37) moveLeft = false; else if (e.keyCode == 39) moveRight = false; if (e.keyCode == 38) moveUp = false; else if (e.keyCode == 40) moveDown = false; if (e.keyCode == 90 || e.keyCode == 88) player.gotoAndStop (1);
Laten we hier stoppen om een snelle test uit te voeren en ervoor te zorgen dat onze spelcode werkt.
Voeg de klassenaam toe aan de Klasse veld in de Publiceren deel van de eigenschappen panel om de FLA te koppelen aan de hoofddocumentklasse.
Probeer het nu uit. De timer zou moeten aftellen en de afbeeldingen zouden moeten verschijnen, maar beweging zal nog niet werken:
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 wordt nagebootst, kijk dan eens naar de bron om te zien wat dat zou kunnen veroorzaken.
Deze functie verandert het kader in de MovieClip van de speler in het aanvalsframe.
private finale functietreffer (e: KeyboardEvent): void if (e.keyCode == 90) // Z-sleutel stage.removeEventListener (KeyboardEvent.KEY_DOWN, hit); player.scaleY = 1; player.gotoAndPlay (2); else if (e.keyCode == 88) // X-sleutel stage.removeEventListener (KeyboardEvent.KEY_DOWN, hit); player.scaleY = -1; // Verander de schaal om andere Arm Player.gotoAndPlay (2) te gebruiken;
Stopt de speleraanvallen.
private laatste functie resetHit (e: KeyboardEvent): void if (e.keyCode == 90 || e.keyCode == 88) stage.addEventListener (KeyboardEvent.KEY_DOWN, hit);
Een van de belangrijkste functies in de klasse, bevat de logica-code die wordt uitgevoerd op het enterframe. Ik heb de uitleg in de volgende paar stappen opgebroken.
update van privé-finale functie (e: Event): void
Controleer de bewegingsvariabelen om de speler te verplaatsen.
/ * Besturing * / if (moveLeft) player.x - = 4; else if (moveRight) player.x + = 4; if (moveUp) player.y - = 4; else if (moveDown) player.y + = 4;
Voorkom dat de speler de ring verlaat.
/ * Player Borders * / if (player.hitTestObject (topWall)) player.y = topWall.y + topWall.height + player.height * 0.5; else if (player.hitTestObject (bottomWall)) player.y = bottomWall.y - player.height * 0.5 - bottomWall.height; if (player.hitTestObject (leftWall)) player.x = leftWall.x + leftWall.width + player.width * 0.5; else if (player.hitTestObject (rightWall)) player.x = rightWall.x - player.width * 0.5;
Voorkom dat de vijand de ring verlaat.
/ * Vijandelijke grenzen * / if (enemy.hitTestObject (topWall)) enemy.y = topWall.y + topWall.height + enemy.height * 0.5; else if (enemy.hitTestObject (bottomWall)) enemy.y = bottomWall.y - enemy.height * 0.5 - bottomWall.height; if (enemy.hitTestObject (leftWall)) enemy.x = leftWall.x + leftWall.width + enemy.width * 0.5; else if (enemy.hitTestObject (rightWall)) enemy.x = rightWall.x - enemy.width * 0.5;
De personages worden afgestoten als er een botsing plaatsvindt (niet aanvallen).
/ * Hit * / if (player.hitTestObject (vijand)) player.x = player.x - 5; vijand.x = vijand.x + 5;
Laten we nog een pauze nemen om te zien hoe onze code werkt. Gebruik de pijltjestoetsen om te bewegen en Z / X om te slaan:
Er wordt een treffer aan het loket toegevoegd wanneer de speler / vijandelijke vuist het hoofd van de vijand / speler raakt.
/ * Head Hit * / if (player.currentFrame! = 1 && player.fist.hitTestObject (enemy.head)) playerHits.text = String (int (playerHits.text) + 1); player.x = enemy.x - player.width - 26; if (enemy.currentFrame! = 1 && enemy.fist.hitTestObject (player.head)) enemyHits.text = String (int (enemyHits.text) + 1); enemy.x = player.x + enemy.width + 26;
De tweede hoofdfunctie, deze keer omgaan met de vijandelijke AI.
private final function enemyUpdate (e: TimerEvent): void
Deze lijnen controleren de vijandelijke beweging.
/ * Vijandelijke beweging * / if (enemy.x> player.x + 40) enemy.x - = 4; if (enemy.x < player.x) enemy.x += 4; if(enemy.y > player.y) enemy.y - = 4; if (vijand.y < player.y) enemy.y += 4;
Deze code behandelt de aanval van de vijand. Het controleert in feite zijn positie en stoten wanneer de vuist het hoofd van de speler kan raken.
/ * Vijandaanval * / if (vijand.y> player.y + 10 && enemy.y < player.y + 21) enemy.scaleY = 1; enemy.gotoAndPlay(2); else if(enemy.y < player.y - 10 && enemy.y > player.y - 21) enemy.scaleY = -1; enemy.gotoAndPlay (2); else if (player.x - enemy.x> = -40 && player.x - enemy.x <= -30) enemy.gotoAndPlay(2); else enemy.gotoAndStop(1);
De luisteraars worden verwijderd als de tijd voorbij is.
private finale functie removeListeners (): void stage.removeEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.removeEventListener (KeyboardEvent.KEY_UP, stopPlayer); stage.removeEventListener (KeyboardEvent.KEY_DOWN, hit); stage.removeEventListener (KeyboardEvent.KEY_UP, resetHit); stage.removeEventListener (Event.ENTER_FRAME, update);
? Net als de timers.
/ * Stop Timers * / timer.stop (); timer.removeEventListener (TimerEvent.TIMER, updateCounter); eTimer.stop (); eTimer.removeEventListener (TimerEvent.TIMER, enemyUpdate); enemy.gotoAndStop (1); showAlert ();
Daarna wordt een waarschuwing weergegeven, deze code geeft een waarschuwing voor de melding.
private final-functie showAlert (): void var alert: AlertView = new AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5;
Om de juiste tekst in de waarschuwing weer te geven, controleren we de hits-tellers om het resultaat te bepalen.
/ * Controleer op winst of verlies op basis van hits * / if (int (playerHits.text)> int (enemyHits.text)) alert.msg.text = 'je wint!'; else if (int (playerHits.text) < int(enemyHits.text)) alert.msg.text = 'you lose!'; else alert.msg.text = 'draw!'; TweenNano.from(alert, 0.3, scaleX: 0.5, scaleY: 0.5); alert.addEventListener(MouseEvent.MOUSE_UP, restart); addChild(alert);
De volgende functie laadt de SWF opnieuw, stelt alle variabelen opnieuw in en keert terug naar het eerste scherm.
privé laatste functie opnieuw opstarten (e: MouseEvent): void navigateToURL (nieuwe URLRequest (stage.loaderInfo.url), '_level0');
We zijn nu klaar om onze game te testen en te controleren of alles werkt zoals verwacht.
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!
Accentsconagua