Bygg en enkel blitz Frisbee spillet med AS3

Build en enkel blitz Frisbee spillet med AS3
Del
Del
to
Del
Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen, vil vi bygge en veldig enkel "keepy-uppy" spill. Klikk på frisbee å sende den mot himmelen, så spinne det med musen for å stoppe det faller til bakken! Samle power-ups for å endre størrelsen på platen



Endelig resultat Forhåndsvisning

La oss ta en titt på det endelige resultatet vi skal jobbe mot.



Trinn 1:. Kort oversikt

Ved hjelp av pre-laget grafiske elementer vi vil skape god jakt grensesnitt som vil bli drevet av flere Actionscript 3 klasser

Brukeren vil være stand til å flytte en karakter over scenen, samle oppgraderings elementer og slå tyngdekraften, kan du endre verdiene i klassen til å tilpasse spillet



Trinn 2:. Flash Dokumentinnstillinger

Åpne Flash og lage en 320 piksler bred, 480 piksler høy dokument. Sett Frame rate til 24fps




Trinn 3:. Interface


En fargerik fint utseende grensesnitt vil bli vist, innebærer dette flere former, knapper og flere
fleste av grafikken vi brukte har blitt opprettet i tidligere tutorials så det vil ikke være nødvendig å inkludere deres skapelse



Trinn 4:.. forekomstnavn


Bildet over viser Forekomst Names
brukes i movieclips
. De som starter med en Capital letter blir Bibliotek klasse navn
og bør ikke være på scenen, er det også to skyer klipp ovenfor denne grafikken, de kalles skyer
og clouds2



Trinn 5:. Tween Nano


Vi vil bruke en annen tween-motoren fra standard inkludert i flash Dette vil øke Performace så vel som det er enklere å bruke.

Du kan laste ned TweenNano
fra sin offisielle hjemmeside. Lær hvordan du kan legge den til i prosjektet her



Trinn 6:. Opprett en ny Action Class


Opprett en ny (Cmd + N) Actionscript 3.0 Class og lagre den som Main.as
i klassen din mappe



Trinn 7:.. Class Struktur

Lag din grunnleggende klassestrukturen for å begynne å skrive koden din
pakke {import flash.display.Sprite; public class Hoved strekker Sprite {offentlig funksjon main (): void {//konstruktør kode}}}



Trinn 8: Må Classes

Dette er de klassene vi trenger å importere for vår klasse til å arbeide, import direktivet gjør eksternt definerte klasser og pakker tilgjengelig i koden
import flash.display.Sprite;. import flash.events.MouseEvent, import flash.events.Event, import flash.net.navigateToURL; import flash.net.URLRequest, import com.greensock.TweenNano, import com.greensock.easing.Elastic, import flash.utils.Timer, import flash.events.TimerEvent;



Trinn 9: Variabler
< p> Dette er de variablene vi vil bruke, lese kommentarene i koden for å vite mer om dem, noen av navnene deres er selvforklarende, så blir det ingen kommentar der
privat Var firsttime. Boolean = true; privat Var Vekt: int = 2; privat Var throwSpeed: int; private Var xMouse: int; private Var xSpeed: int; private Var topHeight: int = 40; privat Var top: Boolean, private Var poengsum: int = 0; private Var scoreVal : int = 1; privat Var timer: Timer = new Timer (10000); privat Var cancelBonus: Timer = new Timer (3000); privat Var oppgraderingen: Sprite;

Trinn 10: Constructor

Konstruktøren er en funksjon som kjøres når et objekt er opprettet fra en klasse, denne koden er den første til å kjøre når du gjør en forekomst av et objekt eller driver med dokument Class.

Det kaller nødvendige funksjoner for å starte spillet. Sjekk disse funksjonene i de neste trinnene
offentlig funksjon main (). Void {addGameListeners ();}



Trinn 11: Legg Lyttere

I denne funksjonen legger vi de innledende spillet lyttere som kreves for å starte spillet. Vi har også satt den buttonMode eiendommen av Frisbee til sann (dette vil vise håndpekeren når musen over) og skjule posisjonsindikator
privat funksjons addGameListeners ():. Void {frisbee.addEventListener (MouseEvent.MOUSE_UP, launchFrisbee); frisbee.buttonMode = true; indicator.visible = false;}



Trinn 12: Launch Frisbee

Den første trekket av frisbee vil aktivere tidtakere som er ansvarlig for oppgraderinger og ringe oppdateringsfunksjonen som er hoved . funksjon av 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: Kaste frisbee

Denne funksjonen tilbakestiller variablene som brukes til å gjøre frisbee farten og falle; det går hver gang frisbee klikkes
privat funksjon throwFrisbee (e: MouseEvent):. void {xSpeed ​​= 0; xMouse = frisbee.mouseX; throwSpeed ​​= 0; top = false;}



Trinn 14: Visning Oppgrader Bubbles

En tidsbestemt funksjon vil håndtere oppgraderings bobler. Timeren ble satt i variabler erklæringen å ha et intervall på 10 sekunder. Det første du må gjøre er å se etter en tidligere boble i skjermen, og fjern det hvis det er en
privat funksjon showUpgrade. (E: Timerevent): void {/* Fjern forrige sprite * /if (oppgradering = null) { removeChild (oppgradering); oppgradere = null; }



Trinn 15: doble poeng Oppgrader

De oppgraderinger er bobler som vises på skjermen som vil gi spilleren spesielle evner eller forbedringer.

Følgende kode beregner et tilfeldig tall (det kan være 0 eller 1) og instantiates de doble poeng oppgradere hvis tallet er 0.
Var randomNumber: int = Math.floor (Math.random () * 2); if (randomNumber == 0) {oppgradere = new Double (); upgrade.name = 'd';}



Trinn 16: Big Frisbee Oppgrader

Hvis det beregnede antall er 1, den store frisbee oppgraderingen er lagt til scenen. Et navn er gitt til oppgraderinger for å fastslå verdien er da truffet
else {oppgradere = new Big (.); upgrade.name = 'b';} upgrade.x = Math.floor (Math.random () * stage.stageWidth); //gi en tilfeldig x positionaddChild (oppgradering);



Trinn 17: Avbryt Oppgraderinger

En annen tidsbestemt funksjon

Dette vil bli kalt når spilleren grabs <. br> oppgraderingen boble, å telle 3 sekunder avslutte oppgraderingen effekt
privat funksjon cancelUpgrade (e: Timerevent):. void {cancelBonus.stop (); cancelBonus.removeEventListener (TimerEvent.TIMER, cancelUpgrade); scoreVal = 1; //avbryte doble poeng scoreTF.textColor = 0xFFFFFF; frisbee.scaleX = 1; //Return Scale til normal frisbee.scaleY = 1;}



Trinn 18: Update Funksjon

Den viktigste funksjonen i spillet, vil den håndtere kollisjoner med veggene, oppgraderinger og frisbee bevegelse hver ramme. Å være en så viktig og omfattende funksjon, vil vi ta en titt på det i neste del av dette spillet opplæringen
privat funksjon oppdateringen (e: Hendelses):. Void {}



Trinn 19: Dokument Klasse


Legg til klassenavnet til Class
feltet i Publiser
delen av Egenskaper
panel for å knytte FLA med hoveddokumentet klasse



Trinn 20:. Update Funksjon

Den viktigste funksjonen i spillet, vil den håndtere kollisjoner med veggene, oppgraderinger og frisbee bevegelse hver ramme, . lære hvordan det fungerer i de neste trinnene
privat endelige funksjon oppdateringen (e: Hendelses): void {}



Trinn 21: Flytt Frisbee

frisbee vil bli flyttet bruke throwSpeed verdi. Denne verdien vil endre seg senere i koden for å gjøre frisbee gå opp, når denne variabelen er 0, tyngdekraften vil bevege seg nedover frisbee
frisbee.y - = throwSpeed;



Trinn 22:. Gravity

Følgende kode sjekker om frisbee har nådd det høyeste punktet lov, hvis ikke, til de throwSpeed ​​øker variable gjør det gå opp. Samtidig tyngdekraften brukes på variabel forårsaker den til slutt mister sin positive verdi og gjøre frisbee fall
if (throwSpeed ​​> = topHeight). {Top = true;} if (throwSpeed ​​< topHeight & & !; top) {throwSpeed ​​+ = 5;} if (throwSpeed ​​< = 0) {throwSpeed ​​= 0;} throwSpeed ​​- = tyngdekraft; frisbee.y + = tyngdekraft * 3;



Steg 23: Klikk Posisjon

Den x bevegelse av frisbee beregnes avhengig av området spilleren klikk
om. (xMouse < frisbee.width * 0,5) {frisbee.x + = xSpeed; //klikk på venstre side, så flytt den til høyre} if (xMouse > frisbee.width * 0,5) {frisbee.x - = xSpeed; //klikk på høyre side, så flytte den venstre}



Trinn 24:. Reduser xSpeed ​​

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

Denne koden bremser denne bevegelsen ved å trekke sin verdi inntil maksimal høyde er nådd
if (xSpeed ​​< topHeight * 0,01 & &! øverst). {xSpeed ​​+ = 1;} if (xSpeed ​​< = 0) {xSpeed ​​= 0;}

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



Trinn 25: Rotasjon

For å simulere frisbee bevegelsen vi roter en
brev inni den. (Dette er et filmklipp inne i Frisbee filmklipp, som har en eksempel navn
av aLetter
.)
Frisbee.aLetter.rotationZ + = 50;



Trinn 26: Score

De poengsummen din øker når frisbee forlater scenen og etter den tid at det er usynlig for spilleren. Hvis du klikker på det nærmere toppen dundret fått vil være høyere
if (frisbee.y < 0). {Poengsum + = scoreVal; scoreTF.text = String (score);



Trinn 27: Posisjonsindikator

Denne indikatoren følger x plasseringen av frisbee mens det ikke er i fase
indicator.visible =. true; indicator.x = frisbee.x + (frisbee.width * 0,5);



Trinn 28: Flytt Bakgrunn

Den neste kode flytter opprinnelige bakgrunnen (hvis det ikke har blitt slettet .) og skyene som skal gjenbrukes i spillet
if (bg = null) {bg.y + = throwSpeed;}! clouds.y + = throwSpeed; clouds2.y + = throwSpeed;}



Trinn 29: Slett Initial Bakgrunn

Den første bakgrunnen vises bare i starten av spillet, så det vil bli slettet når spilleren ikke lenger ser det
if (bg = null &! & bg.y > stage.stageHeight). {removeChild (bg); bg = null;}



Trinn 30: Loop Clouds

Skyene bakgrunn skal vises hele tiden i løpet av spillet varighet. . Når en bakgrunn i ikke lenger er synlig, er nullstilt sin posisjon
if (clouds.y > stage.stageHeight) {clouds.y = -280;} if (clouds2.y > stage.stageHeight) {clouds2. y = -280;}

La oss stoppe igjen for å foreta en rask test og sørge for at vi har ballen, indikator, rotasjon, looping skyer og oppgraderinger (selv om de ikke gjør noe enda ...):




Trinn 31: Double Points

Doble poeng legges til stillingen når 2x
oppgradere er aktive, vi også endre poengsum tekstfeltet farge for å gjøre endringen mer synlig
if (oppgradere = null &! & frisbee.hitTestObject (oppgradering) & & upgrade.name == 'd'). {removeChild (oppgradering); oppgradere = null; scoreVal = 2; scoreTF.textColor = 0xf3ba35; cancelBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start ();}



Trinn 32: Big Frisbee

Når spilleren griper store
boble, de frisbee skala øker med 1, noe som gjør det enklere å klikke .
if (oppgradere = null &! & frisbee.hitTestObject (oppgradering) & & upgrade.name == 'b') {removeChild (oppgradering); oppgradere = null; frisbee.scaleX = 2; frisbee.scaleY = 2;



Trinn 33:. Avbryt Oppgraderinger

Den aktuelle oppgraderingen vil kun være aktiv i 3 sekunder, når som tiden går, blir dens krefter kansellert
cancelBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start ();



Trinn 34: Vanskeligheter

Spillet vanskelighetsgrad er alvoret, endrer denne koden alvoret basert på scoren. . Når stillingen blir 100 tyngdekraften øker med 0,5
if (poengsum > = 100 & & poengsum < 102) {gravitasjon + = 0,5;}



Trinn 35: Skjerm Borders

Usynlige vegger brukes på sidene for å hindre at frisbee fra å gå av scenen
if (frisbee.x < = 0). //Venstre {frisbee.x = 0;} else if (frisbee.x > = (stage.stageWidth - frisbee.width)) //Høyre {frisbee.x = (stage.stageWidth - frisbee.width);}



Trinn 36: Game Over

Hvis frisbee faller hele veien til bunnen, spillet er over
if (frisbee.y > stage.stageHeight) {Gameover ();}



Trinn 37:. Fjern Lyttere

Den neste kode deaktiverer alle mus hendelser og stopper timeren, vil dette stoppe spillet fra å utføre uønsket aktivitet
privat endelige 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 vil stoppe spillet og avsløre sluttresultatet, legger det også en mus lytteren til å tilbakestille spillet når . klikket
Var alert: AlertView = new AlertView (); alert.buttonMode = true; alert.x = stage.stageWidth * 0,5; alert.y = stage.stageHeight * 0,5; alert.scoreTF.text = scoreTF.text + '!'; alert.addEventListener (MouseEvent.MOUSE_UP, restart); addChild (alert); TweenNano.from (våken, 0,7, {y: -alert.height, letthet: Elastic.easeOut});}



Trinn 39: Start

Den neste funksjonen vil laste swf, starte på nytt eventuell variabel, metode og tilbake til det første skjermbildet
privat endelige funksjon restart (e: MouseEvent): void {navigateToURL (ny URLRequest (stage.loaderInfo.url), '_level0');}

Vi er. gjort! Prøv selv:



Konklusjon

Du har opprettet en meget underholdende kamp, ​​prøv å legge til dine egne funksjoner og grafikk

Jeg håper du likte denne opplæringen. , takk for lesing!