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 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 Opprett en ny (Cmd + N) Actionscript 3.0 Class og lagre den som Main.as Lag din grunnleggende klassestrukturen for å begynne å skrive koden din 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 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 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 Den første trekket av frisbee vil aktivere tidtakere som er ansvarlig for oppgraderinger og ringe oppdateringsfunksjonen som er hoved . funksjon av spillet Denne funksjonen tilbakestiller variablene som brukes til å gjøre frisbee farten og falle; det går hver gang frisbee klikkes 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 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. 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 En annen tidsbestemt funksjon Dette vil bli kalt når spilleren grabs <. br> oppgraderingen boble, å telle 3 sekunder avslutte oppgraderingen effekt 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 Legg til klassenavnet til Class 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 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 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 Den x bevegelse av frisbee beregnes avhengig av området spilleren klikk 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 La oss stoppe her for å gjøre en rask test og sørge for at koden vår fungerer: For å simulere frisbee bevegelsen vi roter en 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 Denne indikatoren følger x plasseringen av frisbee mens det ikke er i fase Den neste kode flytter opprinnelige bakgrunnen (hvis det ikke har blitt slettet .) og skyene som skal gjenbrukes i spillet Den første bakgrunnen vises bare i starten av spillet, så det vil bli slettet når spilleren ikke lenger ser det 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 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 ...): Doble poeng legges til stillingen når 2x Når spilleren griper store Den aktuelle oppgraderingen vil kun være aktiv i 3 sekunder, når som tiden går, blir dens krefter kansellert Spillet vanskelighetsgrad er alvoret, endrer denne koden alvoret basert på scoren. . Når stillingen blir 100 tyngdekraften øker med 0,5 Usynlige vegger brukes på sidene for å hindre at frisbee fra å gå av scenen Hvis frisbee faller hele veien til bunnen, spillet er over Den neste kode deaktiverer alle mus hendelser og stopper timeren, vil dette stoppe spillet fra å utføre uønsket aktivitet Denne funksjonen vil stoppe spillet og avsløre sluttresultatet, legger det også en mus lytteren til å tilbakestille spillet når . klikket Den neste funksjonen vil laste swf, starte på nytt eventuell variabel, metode og tilbake til det første skjermbildet Vi er. gjort! Prøv selv: 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!
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
fra sin offisielle hjemmeside. Lær hvordan du kan legge den til i prosjektet her
Trinn 6:. Opprett en ny Action Class
i klassen din mappe
Trinn 7:.. Class Struktur
pakke {import flash.display.Sprite; public class Hoved strekker Sprite {offentlig funksjon main (): void {//konstruktør kode}}}
Trinn 8: Må Classes
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
offentlig funksjon main (). Void {addGameListeners ();}
Trinn 11: Legg Lyttere
privat funksjons addGameListeners ():. Void {frisbee.addEventListener (MouseEvent.MOUSE_UP, launchFrisbee); frisbee.buttonMode = true; indicator.visible = false;}
Trinn 12: Launch Frisbee
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
privat funksjon throwFrisbee (e: MouseEvent):. void {xSpeed = 0; xMouse = frisbee.mouseX; throwSpeed = 0; top = false;}
Trinn 14: Visning Oppgrader Bubbles
privat funksjon showUpgrade. (E: Timerevent): void {/* Fjern forrige sprite * /if (oppgradering = null) { removeChild (oppgradering); oppgradere = null; }
Trinn 15: doble poeng Oppgrader
Var randomNumber: int = Math.floor (Math.random () * 2); if (randomNumber == 0) {oppgradere = new Double (); upgrade.name = 'd';}
Trinn 16: Big Frisbee Oppgrader
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
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
privat funksjon oppdateringen (e: Hendelses):. Void {}
Trinn 19: Dokument Klasse
feltet i Publiser
delen av Egenskaper
panel for å knytte FLA med hoveddokumentet klasse
Trinn 20:. Update Funksjon
privat endelige funksjon oppdateringen (e: Hendelses): void {}
Trinn 21: Flytt Frisbee
frisbee.y - = throwSpeed;
Trinn 22:. Gravity
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
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
if (xSpeed < topHeight * 0,01 & &! øverst). {xSpeed + = 1;} if (xSpeed < = 0) {xSpeed = 0;}
Trinn 25: Rotasjon
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
if (frisbee.y < 0). {Poengsum + = scoreVal; scoreTF.text = String (score);
Trinn 27: Posisjonsindikator
indicator.visible =. true; indicator.x = frisbee.x + (frisbee.width * 0,5);
Trinn 28: Flytt Bakgrunn
if (bg = null) {bg.y + = throwSpeed;}! clouds.y + = throwSpeed; clouds2.y + = throwSpeed;}
Trinn 29: Slett Initial Bakgrunn
if (bg = null &! & bg.y > stage.stageHeight). {removeChild (bg); bg = null;}
Trinn 30: Loop Clouds
if (clouds.y > stage.stageHeight) {clouds.y = -280;} if (clouds2.y > stage.stageHeight) {clouds2. y = -280;}
Trinn 31: Double Points
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
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
cancelBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start ();
Trinn 34: Vanskeligheter
if (poengsum > = 100 & & poengsum < 102) {gravitasjon + = 0,5;}
Trinn 35: Skjerm Borders
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
if (frisbee.y > stage.stageHeight) {Gameover ();}
Trinn 37:. Fjern Lyttere
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
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
privat endelige funksjon restart (e: MouseEvent): void {navigateToURL (ny URLRequest (stage.loaderInfo.url), '_level0');}
Konklusjon