Share
I denne Premium Tutorial lærer du å lage et underholdende retrospill med Flash og ActionScript 3.0. Sjekk ut demoen - resultatet er basert på den klassiske Boksing for Atari.
Ved hjelp av Flash-tegneverktøyene lager vi det grafiske grensesnittet som vil bli drevet av flere ActionScript 3-klasser.
Spilleren vil kunne flytte og kjempe mot motstanderen innen en gitt tid.
Å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, MovieClips og mer.
Fortsett til de neste trinnene for å lære hvordan du oppretter denne GUI.
Et enkelt grønt rektangel fyller scenen.
Velg Rectangle Tool (R) for å lage et 320x480px # 649428 rektangel og senter det i scenen.
'
Bruk samme verktøy ved å lage en serie # FF9A2E rektangler for å bygge en 290x213px ring.
For å få den pixelerte effekten på tegnene, bruk rektangelverktøyet til å lage små rektangler og firkanter for å matche bildet ovenfor. Du vil kanskje laste ned dette bildet og sette det på et lavere lag på tidslinjen, og plasser rektangler over det.
Tre Dynamic TextFields er plassert i scenen, de vil bli brukt som hit tellere og en timer. Sjekk bildet over og plasser dem tilsvarende.
For å kunne bruke en egendefinert skrift i et dynamisk tekstfelt må vi først legge det inn i det.
Med tekstfeltet valgt, gå til Egenskaper panelet og klikk på embed knappen, vil en dialog bli presentert der du kan velge de nødvendige tegnene som brukes i spillet ditt. Alternativt kan du bare sjekke "store bokstaver", "små bokstaver", "tall" og "tegnsetting".
Konverter scenen til MovieClip og gi dem forekomstnavnene som vises i bildet.
Vi bruker en annen tween-motor fra standarden som følger med i Flash, dette vil øke ytelsen, så vel som å 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, importere Direktivet gir eksternt definerte klasser og pakker tilgjengelig for koden din.
importer flash.display.Sprite; importere flash.utils.Timer; importer flash.events.TimerEvent; importer flash.events.KeyboardEvent; importere flash.events.Event; importer com.greensock.TweenNano; importer flash.events.MouseEvent; importer flash.net.navigateToURL; importere flash.net.URLRequest;
Dette er variablene vi skal bruke, les kommentarene i koden for å få vite mer om dem; Noen av navnene deres er selvforklarende, så det blir ingen kommentar der.
privat varetimer: Timer = ny Timer (1000); // brukes til å redusere tiden privat var min: int = 2; // totalt minutter av kampen private var seks: int = 0; // start sekunder private var moveLeft: Boolean = false; // neste vars er brukt til å flytte spilleren fluidly privat var moveRight: Boolean = false; privat var moveUp: Boolsk = false; privat var moveDown: Boolean = false; privat var eTimer: Timer = ny Timer (50); // fiendens bevegelseslag
Konstruktøren er en funksjon som kjører når et objekt opprettes 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 når SWF lastes hvis en del av theяDocument Class.
Det kaller de nødvendige funksjonene for å starte spillet. Kontroller disse funksjonene i de neste trinnene.
Offentlig sluttfunksjon Main (): void // code?
Vi starter med å ringe til addListeners-funksjonen og stoppe tegnets animasjoner.
addListeners (); / * Stopp MovieClips * / player.stop (); enemy.stop ();
Deretter legger vi til de nødvendige nøkkel- og enterframe-lytterne.
privat endelig funksjon 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, oppdatering);
? Etterfulgt av de nødvendige timere:
/ * Timere * / timer.addEventListener (TimerEvent.TIMER, updateCounter); timer.start (); eTimer.addEventListener (TimerEvent.TIMER, enemyUpdate); eTimer.start ();
Denne funksjonen går hvert sekund, den håndterer timeren i scenen.
privat endelig funksjon updateCounter (e: TimerEvent): void / * Reduser Tid * / secs--; if (sekunder < 0) secs = 59; min--; if(min == 0 && secs == 0) //remove listeners if out of time removeListeners();
Vi legger til 0 til venstre for sekunder hvis tallet er under 10 (slik at timeren alltid har to siffer).
/ * To sifferklokke * / var s: String = "; hvis (String (secs) .length == 1) s = '0'; else s ="; time.text = String (min) + ':' + s + String (secs);
Her oppdager vi nøkkeltrykket og endrer variabelen tilsvarende. Vi kunne flytte spilleren ved hjelp av denne samme funksjonen, men bevegelsen vil ikke være jevn som om vi brukte en enterframe-hendelse.
privat endelig funksjon movePlayer (e: KeyboardEvent): void / * Bevegelse * / hvis (e.keyCode == 37) moveRight = false; moveLeft = true; annet hvis (e.keyCode == 39) moveLeft = false; moveRight = true; hvis (e.keyCode == 38) moveDown = false; moveUp = true; annet hvis (e.keyCode == 40) moveUp = false; moveDown = true;
Denne funksjonen registrerer den frigjorte nøkkelen for å stoppe spillerens bevegelse.
privat endelige funksjonstopperen (e: KeyboardEvent): void if (e.keyCode == 37) moveLeft = false; annet hvis (e.keyCode == 39) moveRight = false; hvis (e.keyCode == 38) moveUp = false; annet hvis (e.keyCode == 40) moveDown = false; hvis (e.keyCode == 90 || e.keyCode == 88) player.gotoAndStop (1);
La oss stoppe her for å ta en rask test og sørge for at vår spillkode fungerer.
Legg klassenavnet til Klasse felt i publisere delen av Eiendommer panel for å knytte FLA til hoveddokumentklassen.
Prøv det nå. Timeren skal telle ned og bildene skal vises, men bevegelsen virker ikke ennå:
Husk at noen linjer har blitt kommentert, ettersom noen funksjoner ikke er opprettet ennå.
Husk at milepæler er inkludert i kildefilene, så hvis filmen din ikke av en eller annen grunn etterligner denne, ta en titt på kilden for å se hva som kan forårsake at.
Denne funksjonen endrer rammen i spillerens MovieClip til angrepsrammen.
privat endelig funksjon treff (e: KeyboardEvent): void if (e.keyCode == 90) // Z key stage.removeEventListener (KeyboardEvent.KEY_DOWN, hit); player.scaleY = 1; player.gotoAndPlay (2); annet hvis (e.keyCode == 88) // X-nøkkel stage.removeEventListener (KeyboardEvent.KEY_DOWN, hit); player.scaleY = -1; // endre skala for å bruke annen arm player.gotoAndPlay (2);
Stopper spilleren angrep.
privat endelig funksjon resetHit (e: KeyboardEvent): void if (e.keyCode == 90 || e.keyCode == 88) stage.addEventListener (KeyboardEvent.KEY_DOWN, hit);
En av hovedfunksjonene i klassen inneholder logikkoden som skal utføres på enterframe. Jeg har brutt opp forklaringen i de neste trinnene.
privat endelig funksjon oppdatering (e: Event): void
Se etter bevegelsesvariablene for å flytte spilleren.
/ * Kontroller * / hvis (moveLeft) player.x - = 4; annet hvis (moveRight) player.x + = 4; hvis (moveUp) player.y - = 4; annet hvis (moveDown) player.y + = 4;
Forhindre at spilleren forlater ringen.
/ * Spiller grenser * / if (player.hitTestObject (topWall)) player.y = topWall.y + topWall.height + player.height * 0.5; annet hvis (player.hitTestObject (bottomWall)) player.y = bottomWall.y - player.height * 0.5 - bottomWall.height; hvis (player.hitTestObject (leftWall)) player.x = leftWall.x + leftWall.width + player.width * 0,5; annet hvis (player.hitTestObject (rightWall)) player.x = rightWall.x - player.width * 0.5;
Forhindre fienden fra å forlate ringen.
/ * Enemy Borders * / if (enemy.hitTestObject (topWall)) enemy.y = topWall.y + topWall.height + enemy.height * 0.5; annet hvis (enemy.hitTestObject (bottomWall)) enemy.y = bottomWall.y - enemy.height * 0.5 - bottomWall.height; hvis (enemy.hitTestObject (leftWall)) enemy.x = leftWall.x + leftWall.width + enemy.width * 0.5; annet hvis (enemy.hitTestObject (rightWall)) enemy.x = rightWall.x - enemy.width * 0.5;
Tegnene er avstøt hvis det oppstår en kollisjon (ikke angripende).
/ * Hit * / if (player.hitTestObject (fiende)) player.x = player.x - 5; fiende.x = fiende.x + 5;
La oss lage en ny pause for å se hvordan koden fungerer på dette punktet. Bruk piltastene til å flytte, og Z / X for å slå:
Et treff vil bli lagt til disken når spilleren / fiendens knyttneve treffer fienden / spilleren.
/ * 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;
Den andre hovedfunksjonen, denne gangen håndterer fienden AI.
private endelige funksjonen enemyUpdate (e: TimerEvent): void
Disse linjene styrer fiendens bevegelse.
/ * Enemy Movement * / if (enemy.x> player.x + 40) enemy.x - = 4; hvis (fiende.x < player.x) enemy.x += 4; if(enemy.y > player.y) enemy.y - = 4; hvis (fiende < player.y) enemy.y += 4;
Denne koden håndterer fiendens angrep. Det kontrollerer i utgangspunktet sin posisjon og slag når neven kan slå spillerens hode.
/ * Enemy attack * / if (enemy.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); annet hvis (player.x - enemy.x> = -40 && player.x - enemy.x <= -30) enemy.gotoAndPlay(2); else enemy.gotoAndStop(1);
Lytterne vil bli fjernet når tiden er over.
privat endelig funksjon 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, oppdatering);
? Som vil timere.
/ * Stopp Timer * / timer.stop (); timer.removeEventListener (TimerEvent.TIMER, updateCounter); eTimer.stop (); eTimer.removeEventListener (TimerEvent.TIMER, enemyUpdate); enemy.gotoAndStop (1); showAlert ();
En advarsel vil bli vist etter det, denne koden aktiverer varselet.
privat siste funksjonshowAlert (): void var alert: AlertView = new AlertView (); alert.x = scene.stageWidth * 0,5; alert.y = scene.stageHeight * 0,5;
For å vise riktig tekst i varselet, kontrollerer vi trefftellerne for å bestemme resultatet.
/ * Sjekk for å vinne eller tape basert på treff * / hvis (int (playerHits.text)> int (enemyHits.text)) alert.msg.text = 'du vinner!'; annet hvis (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);
Den neste funksjonen laster om SWF, tilbakestiller alle variabler og vender tilbake til det første skjermbildet.
privat endelig funksjonstart (e: MouseEvent): void navigateToURL (ny URLRequest (stage.loaderInfo.url), '_level0');
Vi er nå klar til å teste vårt spill og sjekke at alt fungerer som forventet.
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!
Accentsconagua