Share
Følg de fremadrettede trinnene i denne Premium Tutorial for å lage en underholdende skyting med Flash og AS3.
Ved å bruke pre-made sprites og Flash Tools, vil vi skape et flott grafisk grensesnitt som vil bli drevet av flere ActionScript 3-klasser.
Brukeren vil kunne styre et romskip og skyte flere fiender mens du reiser i rommet.
Åpne Flash og opprett et 320 piksler bredt 480 piksler høyt dokument. Still inn rammefrekvensen til 24fps.
Grensesnittet vårt vil bestå av flere sprites, tekstfelt og filmklipp.
Fortsett videre til de neste trinnene, og vi vil se på hvordan du lager den.
Bakgrunnen vil være veldig enkel, da stjernene genereres ved hjelp av ActionScript.
Lag et 320x480 px rektangel og fyll det med svart. Du kan legge til en liten radiell gradient.
Bruk Justeringspanelet (Cmd + K) for å sentrere det i scenen.
Jeg har brukt et flott sprite-bibliotek i demonstrasjonen av denne opplæringen, disse er en del av SpriteLib av Flying Yogi.
Importer sprites til scenen (Cmd + R), konverter dem til MovieClips, og juster rammene for å vise en fin animasjon.
En Dynamic TextField vil være nødvendig for å vise spillresultatet. Bruk tekstverktøyet (T) til å lage en; navngi det scoreTF og legg den i nederste venstre hjørne av scenen.
For å kunne bruke en egendefinert skrift i et dynamisk tekstfelt må du legge det inn i programmet. Velg tekstfeltet og bruk Eiendommer panelets embed? knappen for å legge til de nødvendige tegnene.
Varslingsvisningen vil bli vist når brukeren når en spilltilstand, (seier, tap). Bruk ønsket skrift for å lage en enkel skjerm med to dynamiske tekstfelter; navn dem titleTF og msgTF, konverter boksen til en MovieClip og angi klassenavnet til AlertView.
Vi bruker lydeffekter for å forbedre følelsen av spillet, du kan finne lydene som brukes i dette eksemplet i Soungle.com ved hjelp av søkeordene plass, eksplosjon og laser.
Vi bruker en annen tween-motor fra standard som er inkludert i Flash, dette vil øke ytelsen og være enklere å bruke.
Du kan laste ned Tween Nano fra sitt offisielle nettsted.
Opprett en ny (Cmd + N) ActionScript 3.0-klasse og lagre den som Main.as i klassemappen din.
Lag din grunnklassestruktur for å begynne å skrive koden din.
pakke import flash.display.Sprite; offentlig klasse Hoved utvider Sprite offentlig funksjon Main (): void // constructor code
Dette er klassene vi må importere for vår klasse for å jobbe; de importere Direktivet gir eksternt definerte klasser og pakker tilgjengelig for koden din.
importer flash.display.Sprite; importere flash.ui.Mouse; importer com.greensock.TweenNano; importer com.greensock.easing.Expo; importer flash.events.MouseEvent; importere flash.events.Event; importere flash.utils.Timer; importer flash.events.TimerEvent;
Dette er variablene vi skal bruke, les kommentarene i koden for å få vite mer om dem.
private var stjerner: Sprite; // Vil lagre stjernene bakgrunnen private var starsCopy: Sprite; // En annen versjon av stjernene bakgrunnen privat var skipet: Skip; private var kuler: Vector.= Ny Vector. (); // Vil holde kulene i scene private var fiender: Array = new Array (); // Vil holde fiender i scenen privat var-timer: Timer = Ny Timer (500); // Tiden der en ny fiende vil vises privat var alertView: AlertView; private var liv: Vector. ; // Vil lagre livene grafikk privat var sjef: Boss; privat var sjefHelse: int = 20; privat var laserSound: Laser = ny Laser (); privat var sjefSound: UFO = ny UFO (); privat var exSound: eksplosjon = ny eksplosjon ();
Konstruktøren er en funksjon som kjører når et objekt er opprettet fra en klasse, denne koden er den første som skal utføres når du lager en forekomst av et objekt eller kjører ved hjelp av dokumentklassen.
Det kaller de nødvendige funksjonene for å starte spillet. Kontroller disse funksjonene i de neste trinnene.
offentlig sluttfunksjon Main (): void
buildStars (200); // Denne funksjonen starter spillopprettelsen
De buildStars () Metoden bruker Star MC i biblioteket for å lage en bakgrunn med tilfeldig plasserte stjerner. To sprites er opprettet for å tween begge dem og simulere bevegelse, ved hjelp av det samme trikset som i denne parallellrulleopplæringen.
privat endelig funksjon buildStars (n: int): void stars = new Sprite (); for (var jeg: 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
Denne funksjonen skaper en forekomst av Ship MC i biblioteket og plasserer den på scenen med en fin animasjon.
privat endelig funksjon addShip (): void ship = new Ship (); ship.x = stage.stageWidth * 0,5; ship.y = scene.stageHeight + ship.height; addChild (skip); TweenNano.to (skip, 2, y: (scene.stageHeight - ship.height) - 10, lette: Expo.easeOut, onComplete: lyttere ()); addLives ();
Gjenbruk av Ship MC, tre skip sprites blir lagt til scenen som en liv indikator. Skipene legges til en Vector for å se etter spillet senere i spillet.
privat endelige funksjon addLives (): void lives = new Vector.(); for (var jeg: 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);
Disse linjene vil legge til de nødvendige lytterne til scenen og timeren; Dette inkluderer mushendelse, Timer-hendelser og og EnterFrame-hendelser som vil oppdatere spillet hver ramme.
private endelige funksjon lyttere (handling: String = 'add'): void if (action == 'add') stage.addEventListener (MouseEvent.MOUSE_MOVE, moveShip); stage.addEventListener (MouseEvent.MOUSE_DOWN, skyt); timer.addEventListener (TimerEvent.TIMER, addEnemy); stage.addEventListener (Event.ENTER_FRAME, oppdatering); timer.start (); else stage.removeEventListener (MouseEvent.MOUSE_MOVE, moveShip); scene.removeEventListener (MouseEvent.MOUSE_DOWN, shoot); timer.removeEventListener (TimerEvent.TIMER, addEnemy); stage.removeEventListener (Event.ENTER_FRAME, oppdatering); timer.stop ();
Spillerens skip vil være musekontrollert, den neste funksjonen håndterer at:
privat endelig funksjon moveShip (e: MouseEvent): void ship.x = mouseX;
Vårt skip vil kunne skyte kuler for å ødelegge og beskytte seg mot fiender. Denne funksjonen løper hver gang brukeren klikker scenen og vil plassere en kule foran skipet som senere flyttes av Oppdater() funksjon. Det spiller også en skytelyd.
privat endelige funksjonsskyting (e: MouseEvent): void var bullet: Bullet = new Bullet (); bullet.x = ship.x; bullet.y = ship.y - (ship.height * 0.5); laserSound.play (); // Spill lydkuler.push (kule); addChild (bullet);
Det ville ikke være en skytter uten noe å skyte. Fiender er skapt av den neste funksjonen, en Timer brukes til å lage en fiende hver 500 millisekunder (du kan endre verdien i variablertrinnet) som senere flyttes av Oppdater() funksjon.
privat endelig funksjon addEnemy (e: TimerEvent): void var fiende: Enemy = new Enemy (); enemy.x = Math.floor (Math.random () * (scene.stageWidth - enemy.width)); fiende.y = -emy.height; enemies.push (fiende); addChild (fiende);
Varslingsvisningen viser spillerens informasjon om statusen til spillet, det vises når en spillhendelse er nådd.
To parametere brukes i denne funksjonen:
Accentsconagua
privat sluttfunksjonsvarsel (t: String, m: String): void listeners ('remove'); / * Opprett og vis varsel * / alertView = ny AlertView (); alertView.x = stage.stageWidth * 0,5; alertView.y = scene.stageHeight * 0,5; alertView.titleTF.text = t; alertView.msgTF.text = m; alertView.addEventListener (MouseEvent.MOUSE_UP, start på nytt); addChild (alertView); De Oppdater() funksjonen utføres hver ramme, den håndterer alle spillbevegelser og kollisjoner. Det er spillsløyfen for dette spillet. Ta en titt på de neste trinnene for å se sin oppførsel.
privat endelig funksjon oppdatering (e: Event): void // code
Bakgrunnen flyttes hver ramme for å simulere romreise; når bunnstjernen sprite når scenegrensen, flyttes den tilbake til toppen, og skaper en loop.
stars.y + = 5; starsCopy.y + = 5; hvis (stars.y> = scene.stageHeight - 20) stars.y = -stars.height; annet hvis (starsCopy.y> = scene.stageHeight - 20) starsCopy.y = -stars.height;
De neste kodelinjene kontrollerer om det er kuler i scenen; Hvis det er sant, blir kulene flyttet oppover; Når en kule ikke lenger er synlig, blir den ødelagt.
hvis (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);
Vi legger til en stor og dårlig sjef i spillet. Når brukeren når bestemt score, vil sjefen vises:
hvis (int (scoreTF.text) == 500 && boss == null) boss = ny Boss (); bossSound.play (); boss.x = scene.stageWidth * 0,5; boss.y = -boss.height; TweenNano.to (sjef, 3, y: 80); addChild (boss);
Fiender blir også flyttet hver ramme. Denne koden finner alle fiender i scenen ved hjelp av arrayen og beveger dem 5px nedover.
hvis (enemies.length! = 0) for (var j: int = 0; j < enemies.length; j++) /* Move enemies */ enemies[j].y += 5;
Her ser vi om en fiende kolliderer med spillerens skip; hvis det gjøres, utføres en rekke handlinger som starter med eksplosjonslyden:
/ * hvis fienden treffer spilleren * / hvis (fiender [j] .hitTestObject (skip)) exSound.play ();
Etter å ha spilt lyden fjernes fienden fra scenen og arrayet, og er satt til null for å (til slutt) rydde det fra minnet.
/ * Fjern fiende * / removeChild (fiender [j]); fiender [j] = null; enemies.splice (j, 1);
En av livtellerens ikoner vil også bli fjernet på samme måte som fienden.
/ * Fjern Live * / removeChild (lever [lives.length-1]); lever [lives.length-1] = null; lives.splice (lives.length-1, 1);
Deretter sjekker vi livnummeret, hvis spilleren er ute av liv bruker vi varslingsmetoden for å vise et varsel som indikerer spillet over. Hvis det fortsatt er liv, er skipet animert inn i scenen.
/ * Hvis ingen lever igjen, spill over * / if (lives.length == 0) alert ('Spill over', 'Klikk for å fortsette'); ellers / * Tween Ship * / ship.y = scene.stageHeight + ship.height; TweenNano.to (skip, 2, y: (scene.stageHeight - ship.height), lette: Expo.easeOut); Følgende kode håndterer sjefskollisjonene, den bruker den samme metoden som brukes i fiendeskipskollisjonen. Her bruker vi bossHealth variabel for å bestemme når sjefen er beseiret.
for (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'); En annen kollisjonsdeteksjonskode. Kulene i gruppen er testet for kollisjon med fiender; Når dette skjer, blir begge fjernet fra scenen og deres arrays.
/ * hvis kulen rammer fienden * / hvis (bullets.length! = 0 && fiender [j]! = null && bullets [k] .hitTestObject (fiender [j])) exSound.play (); // Spill lyden fjernChild (fiender [j]); fiender [j] = null; enemies.splice (j, 1); removeChild (kuler [k]); kuler [k] = null; bullets.splice (k, 1); scoreTF.text = String (int (scoreTF.text) + 50); // Legg til poeng til tekstfeltet i scenen
Restart funksjon() kalles av varsling() funksjon, håndterer de nødvendige operasjoner for å tilbakestille spillet og starte det på nytt.
privat endelig funksjonstart (e: MouseEvent): void // code
Den første delen av omstart() funksjonen håndterer sprites, de neste kodelinjene fjerner alle bildene fra scenen.
/ * Fjern grafikk * / removeChild (skip); skip = null; for (var jeg: 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;
Den neste delen av omstart() fjerner varselvisningen fra scenen:
/ * Fjern varsel * / removeChild (alertView); alertView = null;
I neste del av omstart(), Resultatet og sjefshelsevariablene er tilbakestilt:
/ * Reset Score * / scoreTF.text = '0'; / * Tilbakestill Boss Helse * / bossHealth = 50;
Til slutt, på slutten av omstart(), vi kaller metoden som starter alt:
/ * Restart * / buildStars (200);
Legg klassenavnet til Klasse felt i publisere delen av Eiendommer panel for å knytte FLA til hoveddokumentklassen.
Du har lært hvordan du lager et Space Shooter-spill med alle de grunnleggende funksjonene, prøv å utvide det med det du allerede vet!
Jeg håper du likte denne opplæringen, takk for å lese!
