Bygg en enkel Flash Frisbee Game med AS3

I denne opplæringen bygger vi et veldig enkelt "keepy-uppy" -spill. Klikk på frisbeen for å sende den himmelen, og spinn den med musen for å stoppe den til å falle til bakken! Samle power-ups for å endre diskens størrelse.

Endelig resultatforhåndsvisning

La oss se på det endelige resultatet vi vil jobbe for:


Trinn 1: Kort oversikt

Ved å bruke forhåndsdefinerte grafiske elementer vil vi skape et flott grensesnitt som vil bli drevet av flere ActionScript 3-klasser.

Brukeren vil kunne flytte et tegn over scenen, samle oppgraderingsartikler og slå tyngdekraften, du kan endre verdiene i klassen for å tilpasse spillet.


Trinn 2: Flash-dokumentinnstillinger

Åpne Flash og opprett et 320 piksler bredt 480 piksler høyt dokument. Still inn rammefrekvensen til 24fps.


Trinn 3: Grensesnitt

Et fargerikt fint utseende grensesnitt vil bli vist, dette innebærer flere former, knapper og mer.
Mesteparten av grafikken vi brukte er opprettet i tidligere opplæringsprogrammer, slik at det ikke vil være nødvendig å inkludere skapelsen.


Trinn 4: Instansnavn

Bildet over viser Instansnavn brukt i movieclips. De som starter med a Stor bokstav er Biblioteksklassenavn og skal ikke være på scenen, er det også to skysklipp over denne grafikken, de kalles skyer og clouds2.


Trinn 5: Tween Nano

Vi bruker en annen tween motor fra standard inkludert i flash, dette vil øke ytelsen, så vel som det er enklere å bruke.

Du kan laste ned TweenNano fra sitt offisielle nettsted. Lær hvordan du legger til prosjektet her.


Trinn 6: Opprett en ny ActionScript-klasse

Opprett en ny (Cmd + N) ActionScript 3.0-klasse og lagre den som Main.as i klassemappen din.


Trinn 7: Klassestruktur

Lag din grunnklassestruktur for å begynne å skrive koden din.

 pakke import flash.display.Sprite; offentlig klasse Hoved utvider Sprite offentlig funksjon Main (): void // constructor code

Trinn 8: Nødvendige klasser

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; importer flash.events.MouseEvent; importere flash.events.Event; importer flash.net.navigateToURL; importere flash.net.URLRequest; importer com.greensock.TweenNano; importere com.greensock.easing.Elastic; importere flash.utils.Timer; importer flash.events.TimerEvent;

Trinn 9: Variabler

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.

 privat var første gang: boolsk = sant; privat var tyngdekraften: int = 2; privat var throwSpeed: int; privat var xMouse: int; privat var xSpeed: int; private var topHeight: int = 40; privat var topp: boolsk; privat var score: int = 0; privat var scoreVal: int = 1; privat var timer: Timer = ny Timer (10000); privat var avbrytBonus: Timer = ny Timer (3000); privat var oppgradering: Sprite;

Trinn 10: Konstruktør

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 theяDocument Class.

Det kaller de nødvendige funksjonene for å starte spillet. Kontroller disse funksjonene i de neste trinnene.

 offentlig funksjon Main (): void addGameListeners (); 

Trinn 11: Legg til lyttere

I denne funksjonen legger vi til de første spilllytterne som kreves for å starte spillet. Vi satte også buttonMode Frisbees eiendom til sann (dette viser håndpekeren når musen er over) og skjul posisjonsindikatoren.

 privat funksjon addGameListeners (): void frisbee.addEventListener (MouseEvent.MOUSE_UP, launchFrisbee); frisbee.buttonMode = true; indicator.visible = false; 

Trinn 12: Start Frisbee

Den første bevegelsen til frisbeen vil aktivere timere som er ansvarlige for oppgraderingene og ringe til Oppdater funksjon som er hovedfunksjonen til spillet.

 privat funksjon launchFrisbee (e: MouseEvent): void frisbee.removeEventListener (MouseEvent.MOUSE_UP, launchFrisbee); frisbee.addEventListener (MouseEvent.MOUSE_UP, throwFrisbee); stage.addEventListener (Event.ENTER_FRAME, oppdatering); timer.addEventListener (TimerEvent.TIMER, showUpgrade); timer.start (); xSpeed ​​= 0; xMouse = frisbee.mouseX; throwSpeed ​​= 0; 

Trinn 13: Kast Frisbee

Denne funksjonen nullstiller variablene som brukes til å gjøre frisbeen flytte og falle; den går hver gang frisbeen klikkes.

 privatfunksjonskasterFrisbee (e: MouseEvent): void xSpeed ​​= 0; xMouse = frisbee.mouseX; throwSpeed ​​= 0; topp = false; 

Trinn 14: Vis oppgraderingsbobler

En tidsbestemt funksjon vil håndtere oppgraderingsboblene. Timeren ble satt i variabelenes deklarasjon for å ha et intervall på 10 sekunder. Den første tingen å gjøre er å se etter en tidligere boble i skjermen, og fjern den hvis det er en.

 privat funksjon showUpgrade (e: TimerEvent): void / * Fjern tidligere sprite * / if (upgrade! = null) removeChild (upgrade); oppgradere = null; 

Trinn 15: Double Points Upgrade

Oppgraderingene er bobler som vises på skjermen, som gir spilleren spesielle evner eller forbedringer.

Følgende kode beregner et tilfeldig tall (det kan være 0 eller 1) og instanserer doble poengoppgradering hvis tallet er 0.

 var randomNumber: int = Math.floor (Math.random () * 2); hvis (randomNumber == 0) upgrade = new Double (); upgrade.name = 'd'; 

Trinn 16: Stor Frisbee Oppgradering

Hvis det beregnede tallet er 1, blir den store frisbeeoppgraderingen lagt til scenen. Et navn er gitt til oppgraderingene for å bestemme er verdi når det treffes.

 ellers upgrade = new Big (); upgrade.name = 'b';  upgrade.x = Math.floor (Math.random () * scene.stageWidth); // gi en tilfeldig x-posisjon addChild (oppgradering);

Trinn 17: Avbryt oppgraderinger

En annen tidsbestemt funksjon.

Dette vil bli kalt når spilleren grabs oppgraderingsboblen, teller 3 sekunder for å avslutte oppgraderingseffekten.

 privat funksjon cancelUpgrade (e: TimerEvent): void cancelBonus.stop (); avbrytBonus.removeEventListener (TimerEvent.TIMER, cancelUpgrade); scoreVal = 1; // avbryte dobbeltpoeng scoreTF.textColor = 0xffffff; frisbee.scaleX = 1; // Return Skala til normal frisbee.scaleY = 1; 

Trinn 18: Oppdateringsfunksjon

Hovedfunksjonen til spillet, den håndterer kollisjoner med veggene, oppgraderingene og frisbeebevegelsen hver ramme. Å være en så viktig og omfattende funksjon, vi tar en titt på den i neste del av denne spillveiledningen.

 privat funksjon oppdatering (e: Event): void 

Trinn 19: Dokumentklasse

Legg klassenavnet til Klasse felt i publisere delen av Eiendommer panel for å knytte FLA til hoveddokumentklassen.


Trinn 20: Oppdateringsfunksjon

Hovedfunksjonen til spillet, den håndterer kollisjoner med vegger, oppgraderinger og frisbeebevegelsen hver ramme, lær hvordan den fungerer i de neste trinnene.

 privat endelig funksjon oppdatering (e: Event): void 

Trinn 21: Flytt Frisbee

Frisbeen vil bli flyttet ved å bruke throwSpeed-verdien. Denne verdien vil endres senere i koden for å gjøre frisbeen gå opp, når denne variabelen er 0, vil tyngdekraften bevege seg nedover frisbeen.

 frisbee.y - = throwSpeed;

Trinn 22: Gravity

Følgende kode kontrollerer om frisbeen har nådd det høyeste punktet, hvis ikke, øker throwSpeed-variabelen for å få det til å gå opp. Samtidig brukes tyngdekraften på variabelen, noe som fører til at den til slutt mister sin positive verdi og gjør frisbeefallet.

 hvis (throwSpeed> = topHeight) top = true;  hvis (throwSpeed < topHeight && !top)  throwSpeed += 5;  if(throwSpeed <= 0)  throwSpeed = 0;  throwSpeed -= gravity; frisbee.y += gravity * 3;

Trinn 23: Klikk på Posisjon

Den frie bevegelsen til frisbeen beregnes avhengig av hvilket område spilleren klikker på.

 if (xMouse < frisbee.width * 0.5)  frisbee.x += xSpeed; //click the left side, so move it right  if(xMouse > frisbee.width * 0.5) frisbee.x - = xSpeed; // klikk på høyre side, så flytt den til venstre

Trinn 24: Reduser xSpeed

xSpeed ​​er verdien som gjør frisbeen flytte til venstre eller høyre.

Denne koden reduserer denne bevegelsen ved å trekke sin verdi inntil maksimal høyde er nådd.

 if (xSpeed < topHeight * 0.01 && !top)  xSpeed += 1;  if(xSpeed <= 0)  xSpeed = 0; 

La oss stoppe her for å gjøre en rask test og sørg for at koden vår virker:


Trinn 25: Rotasjon

For å simulere frisbeebevegelsen roterer vi en brev inne i det. (Dette er et filmklipp i Frisbee-filmklippet, som har en forekomstnavn av ett brev.)

 frisbee.aLetter.rotationZ + = 50;

Trinn 26: Score

Poenget øker når frisbeen forlater scenen og til den tiden det er usynlig for spilleren. Hvis du klikker den nærmere toppen, blir resultatet høyere.

 if (frisbee.y < 0)  score += scoreVal; scoreTF.text = String(score);

Trinn 27: Posisjonsindikator

Denne indikatoren følger x-posisjonen til frisbeen mens den ikke er i fase.

 indicator.visible = true; indicator.x = frisbee.x + (frisbee.width * 0,5);

Trinn 28: Flytt bakgrunn

Den neste koden beveger den opprinnelige bakgrunnen (hvis den ikke er slettet) og skyene som blir gjenbrukt i spillet.

 hvis (bg! = null) bg.y + = throwSpeed; clouds.y + = throwSpeed; clouds2.y + = throwSpeed; 

Trinn 29: Slett den første bakgrunnen

Den første bakgrunnen vises bare ved starten av spillet, slik at den blir slettet når spilleren ikke lenger kan se den.

 hvis (bg! = null && bg.y> scene.stageHeight) removeChild (bg); bg = null; 

Trinn 30: Loop Clouds

Bakgrunnene til skyene vil vises hele tiden i spilletid. Når en bakgrunn ikke lenger er synlig, tilbakestilles posisjonen.

 hvis (clouds.y> scene.stageHeight) clouds.y = -280;  hvis (clouds2.y> scene.stageHeight) clouds2.y = -280; 

La oss stoppe igjen for å gjøre en rask test og sørge for at vi har poengsum, indikator, rotasjon, loopingskyger og oppgraderinger (selv om de ikke gjør noe ennå?):

я


Trinn 31: Dobbelpunkter

Dobbelpunkter blir lagt til poengsummen når 2x oppgraderingen er aktiv, vi endrer også tekstfeltens score for å gjøre endringen mer synlig.

 hvis (oppgradere! = null && frisbee.hitTestObject (oppgradering) && upgrade.name == 'd') removeChild (oppgradering); oppgradere = null; scoreVal = 2; scoreTF.textColor = 0xf3ba35; avbrytBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start (); 

Trinn 32: Stor Frisbee

Når spilleren tar tak i stor boblen, øker frisbeeskalaen med 1, noe som gjør det enklere å klikke.

 hvis (oppgradere! = null && frisbee.hitTestObject (oppgradering) && upgrade.name == 'b') removeChild (oppgradering); oppgradere = null; frisbee.scaleX = 2; frisbee.scaleY = 2;

Trinn 33: Avbryt oppgraderinger

Den nåværende oppgraderingen vil bare være aktiv i 3 sekunder, når den tiden går, blir dens krefter avbrutt.

 avbrytBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start ();

Trinn 34: Vanskelighetsgrad

Spillproblemet er tyngdekraften, denne koden endrer tyngdekraften basert på poengsummen. Når poengsummen når 100 øker tyngdekraften med 0,5.

 hvis (score> = 100 && score < 102)  gravity += 0.5; 

Trinn 35: Skjermgrenser

Usynlige vegger blir brukt på sidene for å hindre frisbeen fra å gå offstage.

 if (frisbee.x <= 0)//Left  frisbee.x = 0;  else if(frisbee.x >= (scene.stageWidth - frisbee.width)) / Høyre frisbee.x = (stage.stageWidth - frisbee.width); 

Trinn 36: Spill over

Hvis frisbeen faller helt til bunnen, er spillet over.

 hvis (frisbee.y> scene.stageHeight) gameOver (); 

Trinn 37: Fjern lyttere

Den neste koden deaktiverer alle musen hendelser og stopper timeren, dette vil stoppe spillet fra å utføre uønsket aktivitet.

 privat endelig funksjon gameOver (): void frisbee.removeEventListener (MouseEvent.MOUSE_UP, throwFrisbee); stage.removeEventListener (Event.ENTER_FRAME, oppdatering); timer.stop (); timer.removeEventListener (TimerEvent.TIMER, showUpgrade);

Trinn 38: Alert

Denne funksjonen stopper spillet og avslører sluttresultatet, det legger også til en muselytter for å tilbakestille spillet når det klikkes.

 var varsel: AlertView = ny AlertView (); alert.buttonMode = true; alert.x = scene.stageWidth * 0,5; alert.y = scene.stageHeight * 0,5; alert.scoreTF.text = scoreTF.text + '!'; alert.addEventListener (MouseEvent.MOUSE_UP, start på nytt); addChild (varsling); TweenNano.from (varsel, 0,7, y: -alert.height, ease: Elastic.easeOut); 

Trinn 39: Start på nytt

Den neste funksjonen vil laste inn swf, starte en hvilken som helst variabel, metode og returnere til det første skjermbildet.

 privat endelig funksjonstart (e: MouseEvent): void navigateToURL (ny URLRequest (stage.loaderInfo.url), '_level0'); 

Vi er ferdige! Prøv det:


Konklusjon

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!