Share
Volg de eenvoudige stappen van deze Premium-zelfstudie om een leuke shoot-'em-up te maken met Flash en AS3.
Door gebruik te maken van vooraf gemaakte sprites en de Flash-hulpmiddelen, creëren we een goed uitziende grafische interface die wordt aangedreven door verschillende ActionScript 3-klassen.
De gebruiker kan een ruimteschip besturen en meerdere vijanden fotograferen terwijl hij in de ruimte reist.
Open Flash en maak een 320 pixels breed, 480 pixels lang document. Stel de beeldsnelheid in op 24 fps.
Onze interface zal bestaan uit verschillende sprites, tekstvelden en filmclips.
Ga door met de volgende stappen en we zullen kijken hoe je het kunt maken.
De achtergrond zal heel eenvoudig zijn, omdat de sterren worden gegenereerd met behulp van ActionScript.
Maak een rechthoek van 320x480 px en vul deze met zwart. Je zou een licht radiaal verloop kunnen toevoegen.
Gebruik het uitlijnpaneel (Cmd + K) om het in het werkgebied te centreren.
Ik heb een geweldige Sprite-bibliotheek gebruikt in de demo van deze tutorial, deze maken deel uit van de SpriteLib van Flying Yogi.
Importeer de sprites naar de stage (Cmd + R), converteer ze naar MovieClips en pas de frames aan om een leuke animatie weer te geven.
Een dynamische tekstveld is nodig om de score van het spel weer te geven. Gebruik het tekstgereedschap (T) om er een te maken; Noem maar op scoreTF en plaats het in de linkerbenedenhoek van het podium.
Als u een aangepast lettertype in een dynamisch tekstveld wilt gebruiken, moet u het in uw toepassing insluiten. Selecteer het tekstveld en gebruik de eigenschappen panel insluiten? om de benodigde tekens toe te voegen.
De waarschuwingsweergave wordt weergegeven wanneer de gebruiker een spelstatus bereikt (winnen, verliezen). Gebruik het gewenste lettertype om een eenvoudig scherm te maken met twee dynamische tekstvelden; noem ze titleTF en msgTF, converteer het vak naar een MovieClip en stel de klassenaam in op AlertView.
We gebruiken Geluidseffecten om het gevoel van het spel te verbeteren, je kunt de geluiden die in dit voorbeeld worden gebruikt in Soungle.com vinden met de sleutelwoorden ruimte, explosie en laser.
We gebruiken een andere tween-engine dan de standaard die is opgenomen in Flash, dit vergroot de prestaties en is eenvoudiger 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.ui.Mouse; import com.greensock.TweenNano; import com.greensock.easing.Expo; import flash.events.MouseEvent; import flash.events.Event; import flash.utils.Timer; import flash.events.TimerEvent;
Dit zijn de variabelen die we zullen gebruiken, lees de opmerkingen in de code om meer over hen te weten.
privé var sterren: Sprite; // Zal de sterren achtergrond opslaan private var starsCopy: Sprite; // Een andere versie van de achtergrond sterren privé var schip: Schip; privé var kogels: Vector.= nieuwe Vector. (); // Houdt de kogels in het stadium privé var vijanden: Array = new Array (); // Houdt de vijanden in het stadium privé var timer: Timer = nieuwe Timer (500); // De tijd waarin een nieuwe vijand verschijnt privé var alertView: AlertView; privé var leeft: Vector. ; // Zal de lives graphics opslaan. Private var boss: Boss; private var bossHealth: int = 20; private var laserSound: Laser = nieuwe laser (); private var bossSound: UFO = nieuwe UFO (); private var exSound: Explosion = new Explosion ();
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 of wordt uitgevoerd met behulp van de documentklasse.
Het roept de nodige functies op om het spel te starten. Controleer die functies in de volgende stappen.
public final function Main (): void
buildStars (200); // Deze functie start het maken van de game.
De buildStars () methode gebruikt de Star MC in de bibliotheek om een achtergrond te maken met willekeurig geplaatste sterren. Er worden twee sprites gemaakt om beide te tweenen en beweging te simuleren, met dezelfde truc als in deze parallax-scrollinghandleiding.
private laatste functie buildStars (n: int): void stars = new Sprite (); for (var i: int = 0; i < n; i++) var star:Star = new Star(); star.alpha = Math.random() * 1; star.scaleX = Math.random() * 1; star.scaleY = star.scaleX; star.x = Math.floor(Math.random() * stage.stageWidth); star.y = Math.floor(Math.random() * stage.stageHeight-20); stars.addChild(star); /* Create another stars sprite to make animation */ starsCopy = new Sprite(); for(var j:int = 0; j < n; j++) var star2:Star = new Star(); star2.alpha = Math.random() * 1 + 0.2; star2.scaleX = Math.random() * 1; star2.scaleY = star.scaleX; star2.x = Math.floor(Math.random() * stage.stageWidth); star2.y = Math.floor(Math.random() * stage.stageHeight-20); starsCopy.addChild(star2); starsCopy.y = -stage.stageHeight; addChild(starsCopy); addChild(stars); addShip(); //Add ship (player) to stage
Deze functie maakt een exemplaar van het Ship MC in de bibliotheek en plaatst het op het podium met een nette animatie.
private finale functie addShip (): void ship = new Ship (); ship.x = stage.stageWidth * 0.5; ship.y = stage.stageHighight + ship.height; addChild (schip); TweenNano.to (schip, 2, y: (stage.stageHeight - ship.height) - 10, ease: Expo.easeOut, onComplete: listeners ()); addLives ();
Hergebruik van het Ship MC, drie schipsprites worden aan het podium toegevoegd als een levensindicator. De schepen worden later in het spel toegevoegd aan een Vector om te controleren of het spel is afgelopen.
private finale functie addLives (): void lives = new Vector.(); for (var i: int = 0; i < 3; i++) var live:Ship = new Ship(); live.stop(); live.width = 16; live.height = 16; live.x = (stage.stageWidth - live.width * 0.7) - (5 * i+1) - live.width * i; live.y = stage.stageHeight - live.height * 0.7; addChild(live); lives.push(live);
Deze lijnen zullen de nodige luisteraars toevoegen aan het podium en de timer; dit omvat muisgebeurtenissen, timergebeurtenissen en en EnterFrame-evenementen die het spel elk frame zullen bijwerken.
privé finale functie luisteraars (actie: String = 'toevoegen'): void if (action == 'add') stage.addEventListener (MouseEvent.MOUSE_MOVE, moveShip); stage.addEventListener (MouseEvent.MOUSE_DOWN, shoot); timer.addEventListener (TimerEvent.TIMER, addEnemy); stage.addEventListener (Event.ENTER_FRAME, update); timer.start (); else stage.removeEventListener (MouseEvent.MOUSE_MOVE, moveShip); stage.removeEventListener (MouseEvent.MOUSE_DOWN, shoot); timer.removeEventListener (TimerEvent.TIMER, addEnemy); stage.removeEventListener (Event.ENTER_FRAME, update); timer.stop ();
Het schip van de speler wordt muisgestuurd, de volgende functie verwerkt dat:
private laatste functie moveShip (e: MouseEvent): void ship.x = mouseX;
Ons schip zal kogels kunnen schieten om zichzelf te vernietigen en zichzelf tegen vijanden te beschermen. Deze functie wordt uitgevoerd telkens wanneer de gebruiker op het podium klikt en een kogel voor het schip plaatst die later door het platform wordt verplaatst bijwerken() functie. Het speelt ook een schietgeluid.
privé uiteindelijke functie shoot (e: MouseEvent): void var bullet: Bullet = new Bullet (); bullet.x = ship.x; bullet.y = ship.y - (ship.height * 0.5); laserSound.play (); // Speel sound bullets.push (opsommingsteken); addChild (kogel);
Het zou geen schutter zijn zonder iets om te schieten. De vijanden worden gemaakt door de volgende functie, een timer wordt gebruikt om elke 500 milliseconden een vijand te creëren (je kunt die waarde in de stap variabelen wijzigen) die later wordt verplaatst door de bijwerken() functie.
private laatste functie addEnemy (e: TimerEvent): void var enemy: Enemy = new Enemy (); enemy.x = Math.floor (Math.random () * (stage.stageWidth - enemy.width)); vijand.y = -enemy.height; enemies.push (vijand); addChild (vijand);
De Waarschuwingsweergave toont de speler informatie over de status van het spel, het wordt getoond wanneer een spelgebeurtenis wordt bereikt.
Twee parameters worden gebruikt in deze functie:
Accentsconagua
private laatste functie alert (t: String, m: String): void listeners ('remove'); / * Aanmaken en tonen alert * / alertView = nieuwe AlertView (); alertView.x = stage.stageWidth * 0.5; alertView.y = stage.stageHeight * 0.5; alertView.titleTF.text = t; alertView.msgTF.text = m; alertView.addEventListener (MouseEvent.MOUSE_UP, restart); addChild (alertView); De bijwerken() functie wordt uitgevoerd in elk frame, het behandelt alle bewegingen van het spel en botsingen. Het is de spelloopfunctie voor deze game. Bekijk de volgende stappen om het gedrag te zien.
update van privé-finale functie (e: Event): void // code
De achtergrond wordt elk frame verplaatst om ruimtevaart te simuleren; wanneer de sprite van de onderste sterren de limiet bereikt, wordt deze terug naar de top verplaatst, waardoor een lus ontstaat.
stars.y + = 5; starsCopy.y + = 5; if (stars.y> = stage.stageHeight - 20) stars.y = -stars.height; else if (starsCopy.y> = stage.stageHeight - 20) starsCopy.y = -stars.height;
De volgende regels code controleren of er kogels in fase zijn; indien waar, worden de kogels omhoog bewogen; wanneer een kogel niet meer zichtbaar is, is deze vernietigd.
if (bullets.length! = 0) for (var i: int = 0; i < bullets.length; i++) bullets[i].y -= 10; /* Destroy offstage bullets */ if(bullets[i].y < 0) removeChild(bullets[i]); bullets[i] = null; bullets.splice(i, 1);
We voegen een grote en slechte baas toe aan het spel. Wanneer de gebruiker een bepaalde score bereikt, verschijnt de baas:
if (int (scoreTF.text) == 500 && boss == null) boss = new Boss (); bossSound.play (); boss.x = stage.stageWidth * 0.5; boss.y = -boss.height; TweenNano.to (baas, 3, y: 80); addChild (boss);
De vijanden worden ook elk frame verplaatst. Deze code vindt alle vijanden in het werkgebied met behulp van de array en verplaatst ze 5px naar beneden.
if (enemies.length! = 0) for (var j: int = 0; j < enemies.length; j++) /* Move enemies */ enemies[j].y += 5;
Hier controleren we of een vijand botst met het schip van de speler; als dat zo is, wordt een reeks acties uitgevoerd beginnend met het explosiegeluid:
/ * als de vijand speler * / if raakt (vijanden [j] .hitTestObject (schip)) exSound.play ();
Nadat het geluid is gespeeld, wordt de vijand uit het werkgebied en de array verwijderd en op nul gezet om het (uiteindelijk) uit het geheugen te verwijderen.
/ * Verwijder vijand * / removeChild (vijanden [j]); vijanden [j] = nul; enemies.splice (j, 1);
Een van de pictogrammen van de lives counter zal ook op dezelfde manier worden verwijderd als de vijand.
/ * Verwijder Live * / removeChild (leeft [lives.length-1]); lives [lives.length-1] = null; lives.plice (lives.length-1, 1);
Dan controleren we het levensnummer, als de speler geen levens heeft, gebruiken we de waarschuwingsmethode om een waarschuwing weer te geven die het spel aangeeft, als er nog steeds levens beschikbaar zijn, wordt het schip geanimeerd naar het podium.
/ * Als er geen levens meer zijn, game over * / if (lives.length == 0) alert ('Game Over', 'Click to continue'); else / * Tween Ship * / ship.y = stage.stageHeight + ship.height; TweenNano.to (schip, 2, y: (stage.stageHeight - ship.height), gemak: Expo.easeOut); De volgende code behandelt de botsingen van de baas, deze maakt gebruik van dezelfde methode die wordt gebruikt bij de botsing tussen vijand en schip. Hier gebruiken we de bossHealth variabele om te bepalen wanneer de baas verslagen is.
voor (var k: int = 0; k < bullets.length; k++) /* Hit Boss */ if(boss != null && bullets[k].hitTestObject(boss)) exSound.play(); removeChild(bullets[k]); bullets[k] = null; bullets.splice(k, 1); bossHealth--; scoreTF.text = String(int(scoreTF.text) + 50); if(bossHealth <= 0 && boss != null) removeChild(boss); boss = null; alert('You Won', 'Click to continue'); Nog een botsingsdetectiecode. De kogels in de array worden getest op aanvaring met de vijanden; Wanneer dit gebeurt, worden beide verwijderd van het werkgebied en hun arrays.
/ * als kogel de vijand raakt * / if (bullets.length! = 0 && vijanden [j]! = null && bullets [k] .hitTestObject (vijanden [j])) exSound.play (); // Speel geluid removeChild (vijanden [j]); vijanden [j] = nul; enemies.splice (j, 1); removeChild (kogels [k]); kogels [k] = null; bullets.plice (k, 1); scoreTF.text = String (int (scoreTF.text) + 50); // Score toevoegen aan het tekstveld in fase
De herstart functie() wordt aangeroepen door de alert () functie, handelt het de nodige bewerkingen af om het spel opnieuw in te stellen en opnieuw te starten.
privé laatste functie opnieuw opstarten (e: MouseEvent): void // code
Het eerste deel van de herstarten() functie verwerkt de sprites, de volgende regels code verwijderen alle afbeeldingen uit het werkgebied.
/ * Graphics verwijderen * / removeChild (verzenden); schip = nul; for (var i: int = 0; i < bullets.length; i++) removeChild(bullets[i]); bullets[i] = null; bullets.length = 0; for(var j:int = 0; j < enemies.length; j++) removeChild(enemies[j]); enemies[j] = null; enemies.length = 0; for(var k:int = 0; k < lives.length; k++) removeChild(lives[k]); lives[k] = null; lives.length = 0; removeChild(stars); stars = null; removeChild(starsCopy); starsCopy = null; if(boss != null) removeChild(boss); boss = null;
Het volgende deel van herstarten() verwijdert de waarschuwingsweergave van het werkgebied:
/ * Waarschuwing verwijderen * / removeChild (alertView); alertView = null;
In het volgende deel van herstarten(), de score en de variabelen voor chef-gezondheid worden opnieuw ingesteld:
/ * Reset Score * / scoredTF.text = '0'; / * Reset Boss Health * / bossHealth = 50;
Eindelijk, aan het einde van herstarten(), we noemen de methode die alles start:
/ * Start * / buildStars (200) opnieuw;
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 geleerd hoe je een Space Shooter-game kunt maken met alle basisfuncties, probeer het uit te breiden met wat je al weet!
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
