Share
Ta en titt gjennom denne Premium Tutorial og lage et underholdende fallende plattformspill med Flash og ActionScript 3.0. Ikke slå de lilla plattformene eller flytte utenfor skjermen, eller du vil miste livet!
Ved hjelp av Flash-tegneverktøyene oppretter vi et flott grafisk grensesnitt som vil bli drevet av flere ActionScript 3-klasser.
Brukeren vil kunne flytte et tegn over scenen og plattformene, du kan endre parametrene i klassen for å tilpasse spillet.
Åpne Flash og opprett et 320 piksler bredt 480 piksler høyt dokument. Still inn rammefrekvensen til 24fps.
Et fargerikt fint utseende grensesnitt vil bli vist, dette innebærer flere former, knapper, lyder og mer.
Fortsett til de neste trinnene for å lære hvordan du oppretter denne GUI.
Velg Rectangle Tool (R) for å lage et 320x480px # DEBDA0 rektangel og senter det i scenen. Dupliser forrige form og endre bredden til 2px og fargen sin til # C3A287, dupliser formen (Cmd + D) flere ganger og flytt hver 2px til høyre for å få resultatet vist ovenfor.
Velg tekstverktøyet (T), velg en skikkelig skrifttype, og skriv spilltittelen din. Jeg brukte dette formatet: Candara Bold, 80pt, # 746253. Du kan også legge til spilleren og plattformgrafikkene som vi skal skape i de neste trinnene.
Bruk samme teknikk for å lage to knapper, justere dem til midten og nevne dem startB og creditsB. Konverter alt til en Filmklipp og angi navnet på forekomsten til menuView.
Dette vil være GameView. Legg til bakgrunnen MC til scenen og skape to Dynamic TextFields og legg dem som vist på bildet. Du kan også legge til noen enkle former bak Tekstfelt for å gjøre teksten klarere.
Bruke Rektangulært primitive verktøy (R) for å lage en 30x30px firkant og fyll den med # CC6600. Dupliser formen, endre størrelsen til 28x28px og bruk denne gradientfyllingen: # F9D03 til # EA7736. Du kan legge til et ikon eller et brev for å identifisere karakteren din, jeg har brukt en fra ActiveTuts + -logoen.
Til slutt velger du den nederste delen av formen (som vist på bildet) konvertere den til Filmklipp og nev det hArea, Dette vil være veldig nyttig for å unngå uønskede kollisjoner med blokkene. Velg alle figurene og konverter dem til en enkelt MC; navngi det Spiller og merk av Eksporter for ActionScript eske.
Bruk samme teknikk som ble brukt i det siste trinnet for å lage to 60x14px blokker, konverter dem til MC, navnet på den grå Blokkere og den lilla en BadBlock. Ikke glem å merke Eksporter for ActionScript eske.
Et varsel vil bli vist når du mister alle dine liv, det vil vise sluttresultatet du nådde. Bruke Rektangulært primitive verktøy å lage den og legge til filteret som vises i bildet for et bedre utseende. Angi navnet på forekomsten til AlertView og merk av Eksporter for ActionScript eske.
Denne skjermen blir enkel å lage som vi allerede har all grafikk. Angi navnet på forekomsten til CreditsView og merk av Eksporter for ActionScript eske.
Vi bruker en annen tween-motor fra standard som er inkludert i Flash, dette vil øke ytelsen, så vel som å være enklere å bruke.
Du kan laste ned Tween Nano fra sitt offisielle nettsted. For informasjon om hvordan du installerer den, les denne opplæringen.
Vi bruker lydeffekter for å forbedre følelsen av spillet (i dette tilfellet for å la spilleren vite når de har mistet livet), kan du finne lyden som brukes i dette eksemplet på Soungle.com ved hjelp av søkeordet blip. Lagre lyden i biblioteket ditt med et klassenavn på blip.
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, importere Direktivet gir eksternt definerte klasser og pakker tilgjengelig for koden din.
importer flash.display.Sprite; importere flash.events.Event; importer flash.events.KeyboardEvent; importer flash.events.TimerEvent; importere flash.utils.Timer; importer flash.events.MouseEvent; importer flash.net.navigateToURL; importere flash.net.URLRequest; importer com.greensock.TweenNano; importere com.greensock.easing.Elastic;
Dette er variablene vi skal bruke, les kommentarene i koden for å få vite mer om dem, noen av navnene deres er selvklart, så det blir ingen kommentar der.
private var blokker: Vector.= Ny Vector. (); // En vektor for å lagre de bevegelige blokkene privat var spiller: Spiller = Ny spiller (); privat var tyngdekraften: int = 3; // Tyngdekraften var brukt til å flytte spilleren og blokkerer private var moveLeft: Boolean = false; // lagre spillerens retning privat var moveRight: Boolean = false; privat var blockTimer: Timer = ny Timer (800); // tid til å vente før en ny blokk blir generert privat var liv: Liv; private var liv: int = 3; privat var lifeTimer: Timer = ny Timer (8000); // tid til å vente før et nytt liv blir vist privat var blip: Blip = new Blip (); // En lyd forekomst
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 den første som kjører når prosjektet har lastet inn hvis det er i dokumentklassen.
Det kaller de nødvendige funksjonene for å starte spillet. Kontroller disse funksjonene i de neste trinnene.
Accentsconagua
offentlig sluttfunksjon Main (): void initialListeners ('add'); Vi starter med å legge til muselyttene til knappene i menyvisningen, og disse tar oss til spillskjermbildet eller kredittkortet.
private endelig funksjon initialListeners (handling: String = 'add'): void if (action == 'add') menuView.startB.addEventListener (MouseEvent.MOUSE_UP, gameView); menuView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCreditsView);
Når Start knappen er trykket, fokuset er satt til scenen for å motta tastaturhandlingene for å flytte spilleren, så blir menyvisningen tweened og fjernet.
privat endelige funksjonsspillView (e: MouseEvent): void / * Focus Stage * / stage.focus = scene; / * Fjern MenuView, Start Game * / TweenNano.to (menyView, 0.5, y: -menuView.height, onComplete: funksjon (): void removeChild (menyView); menuView = null; addInitialBlocks (););
Kredittskjermbildet vises når brukeren klikker på knappen Kreditt, en muselytter er lagt til hele MC for å fjerne den.
privat siste funksjonshowCreditsView (e: MouseEvent): void var credits: CreditsView = new CreditsView (); addChild (sp); TweenNano.from (credits, 0.4, x: stage.stageWidth); credits.addEventListener (MouseEvent.MOUSE_UP, funksjon (): void TweenNano.to (credits, 0.4, x: stage.stageWidth, onComplete: funksjon (): void removeChild (credits); credits = null;); );
Følgende kode legger blokkene angitt i parameteren i tilfeldig posisjon, det vil også ringe til funksjonen for å legge spilleren til scenen.
privat endelig funksjon 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();
Spilleren vil bli lagt til når de første blokkene er på scenen. Det vil dukke opp i midten av scenen.
privat endelig funksjon addPlayer (): void player.x = (stage.stageWidth * 0.5) - (player.width * 0.5); player.y = player.height; addChild (spiller); gameListeners ();
Følgende kode vil sette den riktige bevegelsesvariabelen til sann eller falsk avhengig av hvilken tast som ble trykket, så vil variabelen bli sjekket hver ramme (i en annen funksjon). Dette gjør at spilleren beveger seg i henhold til den variabelen.
privat endelig funksjon movePlayer (e: KeyboardEvent): void if (e.keyCode == 37) moveRight = false; moveLeft = true; annet hvis (e.keyCode == 39) moveLeft = false; moveRight = true;
Når piltastene slippes, er den riktige variabelen satt til falsk å stoppe bevegelsen.
privat endelige funksjonstopperen (e: KeyboardEvent): void if (e.keyCode == 37) moveLeft = false; annet hvis (e.keyCode == 39) moveRight = false;
Denne funksjonen kalles av en Timer; det vil beregne et tilfeldig heltall fra 0 til 3, når resultatet er 0, vil en dårlig blokk bli lagt til, hvis resultatet er forskjellig fra 0, vil en normal blokk bli lagt til. Blokkene legges til en Vector-egenskap som kalles blokker, På den måten kan vi få tilgang til dem utenfor denne funksjonen.
privat endelig funksjon addBlock (e: TimerEvent): void var r: int = Math.floor (Math.random () * 4); hvis (r! = 0) var blokk: Blokk = ny blokk (); block.x = Math.random () * (scene.stageWidth - block.width); block.y = stage.stageHeight + block.height; addChild (blokk); blocks.push (blokk); annet var dårligBlock: BadBlock = ny BadBlock (); badBlock.name = 'dårlig'; badBlock.x = Math.random () * (stage.stageWidth - badBlock.width); badBlock.y = stage.stageHeight + badBlock.height; addChild (badBlock); blocks.push (badBlock);
En annen tidsbestemt funksjon, et liv grafikk vil bli lagt til når timeren er fullført. Livsposisjonen vil være den siste blokken i vektoren - 1.
privat endelig funksjon addLife (e: TimerEvent): void life = new Life (); life.x = blokker [blocks.length - 1] .x; life.y = blokkerer [blocks.length - 1] .y - life.height; addChild (liv);
Denne funksjonen legger til og fjerner de nødvendige lytterne for å starte spillet.
private endelige funksjon spilllistere (handling: String = 'add'): void if (action == 'add') stage.addEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.addEventListener (KeyboardEvent.KEY_UP, stopPlayer); stage.addEventListener (Event.ENTER_FRAME, oppdatering); 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, oppdatering); blockTimer.removeEventListener (TimerEvent.TIMER, addBlock); blockTimer.stop (); lifeTimer.removeEventListener (TimerEvent.TIMER, addLife); lifeTimer.stop ();
Når spilleren taper et liv, vil en liten animasjon bli vist i livs tekstfeltet, og en lyd vil bli spilt for å advare brukeren.
privat endelig funksjon animateLives (): void TweenNano.from (livesTF, 0.8, x: livesTF.x - 3, ease: Elastic.easeOut); blip.play ();
I denne delen starter vi hovedfunksjonen til spillet, denne funksjonen blir utført hver ramme.
De neste kodelinjene kontrollerer bevegelsesvariablene, hvis det er sant, vil spilleren bli flyttet.
privat endelig funksjon oppdatering (e: Event): void / * Kontroller * / hvis (moveLeft) player.x - = 4; annet hvis (moveRight) player.x + = 4;
Denne koden skaper usynlige vegger på scenens sider for å forhindre at spilleren går ut av det.
/ * Skjermgrenser * / hvis (player.x <= 0) //Left player.x = 0; else if(player.x >= (scene.stageWidth - player.width)) / Høyre player.x = (stage.stageWidth - player.width);
Spilleren skyves ned av gravitasjonsvariabelen.
/ * Spiller Gravity * / player.y + = tyngdekraften;
De neste linjene kontrollerer for kollisjoner mellom spilleren og blokkene. Når spilleren kolliderer med en normal blokk, forblir den på toppen av den. Når en dårlig blokk blir truffet, går et liv tapt og spilleren flyttes.
for (var jeg: 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);
Gravity påvirker blokkene også, men i motsatt retning.
blokkerer [i] .y - = tyngdekraften;
Blokkene blir ødelagt når de ikke lenger er synlige på scenen.
if (blokkene [i] .Y < -blocks[i].height) removeChild(blocks[i]); blocks[i] = null; blocks.splice(i, 1);
Spillresultatet øker hver ramme, denne koden endrer tekstfeltet for å gjenspeile det.
scoreTF.text = String (int (scoreTF.text) + 1);
Følgende linjer håndterer livsgrafikk og variabler.
Hvis et liv (en 1-opp) er på scenen, vil det bli flyttet oppover og fjernet hvis det blir truffet av spilleren eller ikke lenger synlig på scenen.
hvis (liv! = null) life.y - = gravity; / * Fjern + Liv * / hvis (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);
Når spilleren er ute av livet, vil den showAlert () funksjon kalles. Denne funksjonen stopper spillet og avslører sluttresultatet.
if (liv < 0) showAlert();
Du kan legge til så mange nivåer som du vil, dette er et eksempel på hvordan du kan legge til et nivå.
Når poengsummen nådde 500, øker tyngdekraften med 1, dette vil gjøre spillet bevege seg raskere og vanskeligere å lande på plattformene, det reduserer også tiden livet blir lagt til.
hvis (int (scoreTF.text)> 500 && int (scoreTF.text) < 502) gravity = 4; lifeTimer = new Timer(12000);
Prøv å øke hastigheten etter hvert 500 poeng.
Denne funksjonen stopper spillet og avslører sluttresultatet, det legger også til en muselytter for å tilbakestille spillet når det klikkes.
privat siste funksjonshowAlert (): void gameListeners ('rmv'); var varsel: AlertView = ny AlertView (); alert.x = scene.stageWidth * 0,5; alert.y = scene.stageHeight * 0,5; alert.scoreTF.text = scoreTF.text + '!'; livesTF.text = "; alert.addEventListener (MouseEvent.MOUSE_UP, start på nytt); addChild (alert); TweenNano.from (varsel, 0,7, y: -alert.height, ease: Elastic.easeOut); Den neste funksjonen vil laste SWF, tilbakestille alle variabler og metoder og returnere til Menyskjerm.
privat endelig funksjonstart (e: MouseEvent): void navigateToURL (ny URLRequest (stage.loaderInfo.url), '_level0');
Legg klassenavnet til Klasse felt i publisere delen av Eiendommer panel for å knytte FLA til hoveddokumentklassen.
Du har laget et veldig underholdende spill, prøv å legge til dine egne funksjoner og grafikk.
Jeg håper du likte denne opplæringen, takk for å lese!
