Share
I denne Premium-opplæringen lærer vi hvordan du kombinerer flere ActionScript 3-klasser og ferdigheter for å skape et fantastisk skyting gallerispill.
Ved hjelp av Flash Tools vil vi lage flotte grafikk som vil bli drevet av flere ActionScript 3-klasser som MouseCursor, Tween Nano, Sprite, Timers og andre arrangementer.
Brukeren vil kunne legge inn en spillers navn og ødelegge et forhåndsdefinert antall dartbord før kampen avsluttes.
Åpne Flash og opprett et 720 piksler bredt, 480 piksler høyt dokument. Still inn rammefrekvensen til 24fps.
Et fargerikt, snyggt grensesnitt vil gi strøm til vår kode, dette innebærer flere former, knapper, egendefinerte markører og mer.
Fortsett til de neste trinnene for å lære hvordan du oppretter denne GUI.
En blå radiell gradient vil være himmelen.
Velg Rektangelverktøyet (R) og opprett et rektangel på 720x335 px. Bruk fargepanelet til å bruke en #EFFDFE, # 7FD7FF radial bakgrunn.
Tre hovedformer vil bli brukt til skyene, resten vil bli duplisert MovieClips.
Bruk Oval Tool (O) til å lage sirkler og ovaler av forskjellige størrelser, etter at du fikk skyformen du liker, farger dem med denne gradientfyllingen # F1FBFF, # C3ECFF. Bruk Gradient Transform Tool (F) for å rotere graden.
La oss legge til noen fjell til scenen.
Bruk rektangulærverktøyet til å lage to rektangler over hele scenen, bruk denne gradienten på dem # 8DB400, # CFF500.
Med markeringsverktøyet (V), ta tak i rektangelens hjørner og gi dem en mindre kvadratisk form.
Bruk kun samme teknikk denne gangen å dra fra sidene av rektanglene, (du ser en kurve i musemarkøren), bruk Gradient Transform-verktøyet for å rotere gradienten.
Dette er gres grafikken vi skal skape. Den er laget av tre eller fire forskjellige former i forskjellige farger.
Bruk rektangulærverktøyet til å lage et rektangel, og bruk fjellteknikken til å begynne å modifisere formen. Du kan se hvordan gresset ble opprettet, og se på neste bilde:
Når du først har den første gressformen, må du justere fargene og størrelsene, så legg dem sammen og du er ferdig.
Bakken grafikk er ganske enkel, en # 5F4123 farget bakgrunn, med noen # 3A2814 bergarter.
Din bakgrunn bør se slik ut nå:
Informasjonspanelet vil vise spillerens navn, samt nåværende poeng. La oss begynne med å lage bakgrunnen.
Bruk Rectangle Primitive verktøyet til å lage en 230x40 px, #CCCCCC, alfa 60% rektangel og sett den som vist på bildet.
Dupliser formen og bytt den til 225x30px, # 000000, alfa 70%. Senter den nye formen på den grå bakgrunnen.
Konverter den nye formen til MovieClip og gi den navnet infoBg.
Bruk tekstverktøyet (T) til å lage to dynamiske tekstfelt og plassere dem i bakgrunnen.
Dette er formatet som brukes til spillerenavnet: Walway Rounded, 28pt, # 6CA8E6, forekomstnavn: spillernavn.
Tekstfeltet på siden er: Walkway rundet, 32pt, #FFFFFF, forekomstnavn: poengsum.
Den egendefinerte markøren består av en rekke avrundede rektangler og en sirkel.
En titt på neste bilde vil gi deg en bedre forståelse av hvordan den ble laget.
Dartbordet er et av hovedelementene i spillet, det er målet å ødelegge.
Bruk det ovale verktøyet til å lage en 80x80 px sirkel med denne lineære gradienten # 697368, # 060604.
Dupliser formen, endre størrelsen på den til 64x64 px, og endre gradienten til # F6F6F6, #DDDDDD.
Bruk det ovale primitive verktøyet til å lage en 46x46 px sirkel og endre den indre radiusen til 75,00. Bruk igjen den svarte gradienten.
Dupliser den hvite sirkelen, resize den til 18x18 px, og fyll den med # AF4F50.
Konverter formene til MovieClip og gi den navnet Dartbrett, sørg for å sjekke Eksporter for ActionScript eske.
En treffteller kommer til å stå øverst til venstre på scenen.
Bruk samme format på playerName Textfield, bare endre fargen til # FEE75C. Den dynamiske tekstfeltet kalles treff.
Dette er navnet panelet, ingenting vanskelig om det.
Dette blir første som vises til spilleren. Den inneholder en Input TextField navngitt navnefelt og dartbord brukt som en knapp som heter beginButton.
Vi spiller en lyd når et dartbord er truffet. Det er mange nettsteder der du kan laste ned lydeffekter og musikk på nettet, du kan få effekten som brukes i opplæringen her.
For å bruke lyden må vi først importere den til biblioteket. Trykk Cmd + R, bla til lyden du lastet ned og klikk Åpne.
Åpne biblioteket og høyreklikk lydikonet, velg Eiendommer og merk av Eksporter for ActionScript eske.
Dette slutter grafisk fase, la ActionScripting begynne!
Opprett en ny (Cmd + N) ActionScript 3.0-klasse og lagre den som Main.as i klassemappen din.
Vi bruker en annen tween-motor fra standard inkludert i flash, dette vil øke ytelsen (det er også enklere å bruke). Du kan laste ned Tween Nano fra sitt offisielle nettsted.
Pakkeordet lar deg organisere koden din i grupper som kan importeres av andre skript. Det anbefales å nevne dem ved å starte med et lite bokstav og bruke mellomlag for etterfølgende ord, for eksempel: timene mine. Det er også vanlig å navngi dem ved å bruke bedriftens nettsted: com.mycompany.classesType.myClass.
I dette eksemplet bruker vi en enkelt klasse, så det er egentlig ikke et behov for å lage en klassemappe.
pakke
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.ui.Mouse; importer com.greensock.TweenNano; importer flash.events.MouseEvent; importere flash.events.Event; importere flash.utils.Timer; importer flash.events.TimerEvent;
Her erklærer vi klassen ved hjelp av klasse definisjon søkeord etterfulgt av navnet vi ønsker for klassen, husk at du må lagre filen ved hjelp av dette navnet.
De strekker Søkeord definerer en klasse som er en underklasse av en annen klasse. Underklassen arver alle metodene, egenskapene og funksjonene, slik at vi kan bruke dem i vår klasse.
offentlig klasse Main utvider Sprite
Dette er variablene vi skal bruke, les kommentarene i koden for å finne ut mer om hver enkelt.
private var gridY: Array = new Array (); // Lagre y-koordinaten der et dartbord kan plasseres privat var gridX: Array = new Array (); // Lagrer x-koordinatet der et dartbord kan plasseres privat var xPos: int = 0; // Den siste x-posisjonen som brukes av et dartbord privat var yPos: int = 0; // Den siste y-posisjonen som brukes av et dartbord, private var dartboards: Array = new Array (); // Lagrer dartbordene sprites private var smack: SmackSound = new SmackSound (); // Lyden som skal spilles når et dartbord er ødelagt, var privat timer: Timer = Ny Timer (3000); // Mengden tid å vente før endrer dartbordene i skjermen privat var currentDartboards: int = 0; // Dartbrettene som allerede er vist i scenen, sjekker for nivågjennomføring, privat varnivå, Komplett: int = 30; // Dartboards å vise for å fullføre nivået privat var scorePanel: ScorePanel = ny ScorePanel (); // En score panel instans
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 dokumentklassen.
Det kaller de nødvendige funksjonene for å starte spillet. Kontroller disse funksjonene i de neste trinnene.
offentlig funksjon Main (): void startCustomCursor (); namePanelHandler (); updateScore (); bg.addEventListener (MouseEvent.MOUSE_DOWN, addHits);
Denne funksjonen animerer navnet panelet for å skape og legger til en lytter til knappen for å angi navnet i tekstfeltet når det er aktivert.
privat funksjon navnPanelHandler (): void namePanel.beginButton.stop (); namePanel.beginButton.addEventListener (MouseEvent.MOUSE_UP, setPlayerName); TweenNano.from (namePanel, 0.5, y: -namePanel.height / 2);
Angir navnet som er skrevet i tekstfeltens navnfelt til feltet PlayerName i Info-panelet.
privat funksjon settPlayerName (e: MouseEvent): void smack.play (); namePanel.beginButton.gotoAndPlay (3); playerName.text = namePanel.nameField.text; TweenNano.to (namePanel, 0.5, y: stadium.stageHeight + namePanel.height / 2, onComplete: startGame);
Følgende funksjon gjør den egendefinerte markøren draggbar, den skjuler også standard musemarkøren.
privat funksjon startCustomCursor (): void Mouse.hide (); cursor.startDrag (true);
Dette er en viktig funksjon, den beregner scenen og lager et rutenett basert på Dartbordets størrelse (80px).
Vi bruker de resulterende arrays senere for å forhindre at dartbordene vises foran hverandre.
private funksjon calculateGrid (): void gridX = []; gridY = []; for (var h: int = 1; h <= (stage.stageHeight - 160) / 80; h++) //The - reduces invisible/used area gridY.push(80 * h); for (var v:int = 1; v <= (stage.stageWidth - 160) / 80; v++) gridX.push(80 * v);
Den neste funksjonen vil opprette og legge til dartbordene etablert av beløp parameter.
Det følger denne logikken:
privat funksjon addRandomDartboards (mengde: int): void calculateGrid (); for (var jeg: int = 0; i < amount; i++) var dartboard:Dartboard = new Dartboard(); dartboard.stop(); xPos = gridX[Math.floor(Math.random() * gridX.length)]; yPos = gridY[Math.floor(Math.random() * gridY.length)]; dartboard.x = xPos + 40; dartboard.y = yPos + 40; gridX.splice(gridX.indexOf(xPos), 1); gridY.splice(gridY.indexOf(yPos), 1); dartboard.addEventListener(MouseEvent.MOUSE_DOWN, destroyDartboard); addChild(dartboard); TweenNano.from(dartboard, 0.6, rotationY: 180); TweenNano.from(dartboard, 0.6, scaleX: 0.4); TweenNano.from(dartboard, 0.6, scaleY: 0.4); dartboards.push(dartboard); setChildIndex(cursor, (numChildren - 1)); currentDartboards++;
Denne funksjonen håndterer animasjonen til et darboard som har blitt rammet, det fjerner også dartbordet fra dartbordet array og legger til nye hvis det ikke er flere klip i scenen.
Scores og score animasjoner håndteres her også.
privat funksjon destroyDartboard (e: MouseEvent): void smack.play (); // Hit lyden e.target.removeEventListener (MouseEvent.MOUSE_DOWN, destroyDartboard); e.target.gotoAndPlay (3); e.target.addEventListener (Event.ENTER_FRAME, removeDartboard); dartboards.splice (dartboards.indexOf (e.target), 1); // Fjern fra array hvis (dartboards.length == 0) // Legg til nye darboards hvis alle har blitt ødelagt timer.stop (); addRandomDartboards (5); timer.start (); / * Oppdater score, treff og spill hit animasjon * / updateScore (1); updateHits (1); var plusOne: ScorePlus = ny ScorePlus (); plusOne.x = e.target.x; plusOne.y = e.target.y + plussOne.height; addChild (pluss-én); TweenNano.from (plussOne, 0,5, skalaX: 0,5); TweenNano.from (plusOne, 0.5, scaleY: 0.5, onComplete: removeScoreGFX, onCompleteParams: [plusOne]);
Fjerner poengsummen "+1" filmklipp.
privat funksjon removeScoreGFX (mål: Sprite): void removeChild (target);
Kontrollerer om darboard-animasjonen er avsluttet og fjerner den hvis den er sant.
privat funksjon removeDartboard (e: Event): void if (e.target.currentFrame == 8) e.target.removeEventListener (Event.ENTER_FRAME, removeDartboard); removeChild (e.target as Sprite);
Legger til den angitte poengsummen til poengsummen TextField.
privat funksjon updateScore (addToScore: int = 0): void score.text = String (int (score.text) + addToScore);
Legger til 1 til treffresultatet, dette kalles når et dartbord ødelegges.
privat funksjon updateHits (addToHits: int = 0): void hits.text = String (int (hits.text) + addToHits); TweenNano.from (hits, 0.3, y: -5);
Legger til den totale hitpoengsummen til poengsummen TextField.
privat funksjon addHits (e: MouseEvent): void score.text = String (int (score.text) + int (hits.text)); hits.text = "0";
Starter spillet.
Oppretter dartbordene, fjerner spillernes navnpanel og starter timeren.
privat funksjon startGame (omstart: Boolean = false): void if (! reboot) removeChild (namePanel); addRandomDartboards (5); timer.addEventListener (TimerEvent.TIMER, removeRemainingListeners); timer.start ();
Fjerner dartbordene som ikke ble rammet og legger til nye hvis nivået ikke er fullført.
privat funksjon removeRemaining (): void for (var jeg: int = dartboards.length-1; i> = 0; i--) removeChild (dartboards [i]); dartboards.length = i; hvis (dartboards.length == 0 && currentDartboards < levelComplete) addRandomDartboards(5); timer.start(); else if (dartboards.length == 0 && currentDartboards >= levelComplete) // Hvis nivå er fullført levelCompleted ();
Hvis alle tillatte dartbordene har blitt vist i scenen, vil denne funksjonen utføres.
Den beregner sluttresultatet, skjuler informasjonspanelet, og viser ScorePanel.
privatfunksjonsnivåFullført (): void score.text = String (int (score.text) + int (hits.text)); hits.text = "0"; score.visible = false; playerName.visible = false; TweenNano.to (infoBg, 0.5, x: -infoBg.width / 2); scorePanel.x = scene.stageWidth + scorePanel.width / 2; scorePanel.y = scene.stageHeight / 2; scorePanel.myScore.text = score.text; scorePanel.playAgain.addEventListener (MouseEvent.MOUSE_UP, start på nytt); addChild (scorePanel); setChildIndex (markør, (numChildren - 1)); TweenNano.to (scorePanel, 0,5, x: scene.stageWidth / 2);
De neste linjene gjør omstart mulig. Du finner alt som er forklart i kommentarene.
privat funksjonstart (e: MouseEvent): void score.visible = true; // gjemmer poengsummen score.text = "0"; // Setter poengsummen til 0 playerName.visible = true; // Viser igjen spillerenavnet scorePanel.playAgain.removeEventListener (MouseEvent.MOUSE_UP, restart); // Fjerner lytteren fra knappen i poengsumpanelet TweenNano.to (infoBg, 0.5, x: infoBg.width / 2); // Animerer informasjonspanelet og poengpanelet TweenNano.to (scorePanel, 0.5, x: stage.stageWidth + scorePanel.width / 2, onComplete: removeScorePanel); currentDartboards = 0; // Tilbakestiller gjeldende dartbordsliste startGame (true); // starter spillet
Fjerner poengsumpanelet fra scenen når animasjonen er fullført.
privat funksjon removeScorePanel (): void removeChild (scorePanel);
Vi bruker dokumentklassen i denne opplæringen, hvis du ikke vet hvordan du bruker den eller er litt forvirret, vennligst les denne QuickTip.
Du er nå klar til å teste spillet ditt !, gå til Flash og trykk Cmd + Return, kontroller at alt fungerer som forventet og ha det gøy!
Det endelige resultatet er et fargerikt og underholdende spill, prøv å tilpasse det, hva med en port til Android?
Jeg håper du likte denne opplæringen, takk for å lese!
Accentsconagua