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.
La oss se på det endelige resultatet vi vil jobbe for:
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.
Å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 og mer.
Mesteparten av grafikken vi brukte er opprettet i tidligere opplæringsprogrammer, slik at det ikke vil være nødvendig å inkludere skapelsen.
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.
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.
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; 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;
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;
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 ();
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;
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;
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;
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;
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';
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);
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;
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
Legg klassenavnet til Klasse felt i publisere delen av Eiendommer panel for å knytte FLA til hoveddokumentklassen.
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
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;
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;
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
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:
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;
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);
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);
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;
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;
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å?):
я
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 ();
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;
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 ();
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;
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);
Hvis frisbeen faller helt til bunnen, er spillet over.
hvis (frisbee.y> scene.stageHeight) gameOver ();
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);
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);
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:
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!