Share
Ta en titt på denne Premium Tutorial for å lage et underholdende puslespill, inspirert av Frenzic, ved hjelp av Flash og ActionScript 3.
I demoen ovenfor fyller du de ytre boksene med fargede firkanter. Du får flere poeng for å fylle en boks med firkanter som har samme farge.
Ved hjelp av Flash-tegneverktøyene oppretter vi et flott grafisk grensesnitt som vil bli drevet av flere ActionScript 3-klasser.
Spilleren vil kunne klikke på fire forskjellige steder for å sortere fargeblokkene på rutene, flere poeng blir opptjent hvis du fyller et firkant med en enkelt blokkfarge.
Å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, lyder og mer.
Fortsett til de neste trinnene for å lære hvordan du oppretter denne GUI.
Velg Rectangle Tool (R) for å lage et 320x480px # 0D6191, # 001217 rektangel og senter det i scenen. Bruk det samme verktøyet til å kasse en 2x480px svart linje med 20% alfa, trykk CMD + D for å duplisere det flere ganger, og spre linjene ut for å få effekten i bildet over.
Velg tekstverktøyet (T), velg en skikkelig skrifttype og skriv spilltittelen din. Jeg brukte dette formatet: Orbitron Bold, 60pt, # A3FF24. Du kan legge til et enkelt lysfilter for å få det til å se bedre ut.
Bruk samme teknikk for å lage to knapper, justere dem til midten og nevne dem startB og creditsB. Konverter alt til en Filmklipp og satt navn til TitleView; merk av Eksporter for ActionScript boksen og slett klippet fra scenen.
Dette vil være GameView. Legg til bakgrunnen MC til scenen og skape to Dynamiske tekstfelt og legg dem som vist på bildet. Navn tekstfeltene livesTF og scoreTF.
Bruke Rektangelverktøy (R) for å lage en 70x70px-firkant og fyll den med bakgrunnsgraden, konverter den til MC og trykk CMD + D for å kopiere den slik at du har fem totalt. Bruk justeringspanelet til å plassere dem som vist på bildet.
Eksempelnavnene skal samsvare med sine stillinger - det vil si: opp ned venstre høyre og senteret vil være mainHolder.
Bruk samme teknikk som ble brukt i det siste trinnet for å opprette tre 30x30px blokker, konverter dem til MC og navngi dem i henhold til fargen sin: OrangeBlock, PurpleBlock og GreenBlock. Ikke glem å merke Eksporter for ActionScript eske.
Et varsel vil bli vist når du mister alle dine liv, og det vil vise sluttresultatet du nådde. Bruke Rektangulært primitive verktøy å lage den og fylle den med denne lineære gradienten: # 000000 til # 333333. Angi navnet på forekomsten til AlertView og merk av Eksporter for ActionScript eske.
Denne skjermen blir enkel å lage som vi allerede har all grafikk. Angi navnet på forekomsten til CreditsView og merk av Eksporter for ActionScript eske.
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 Tween Nano fra sitt offisielle nettsted.
Vi bruker lydeffekter for å forbedre følelsen av spillet, du kan finne lydene som brukes i dette eksemplet i Soungle.com ved hjelp av søkeordene klokke og buzz. Legg dem til biblioteket ditt, med klassenavn på Klokke, Bell4, og Buzz, henholdsvis.
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; importer com.greensock.TweenNano; importer com.greensock.easing.Bounce; importere flash.utils.Timer; importer flash.events.TimerEvent; importer flash.net.navigateToURL; importere flash.net.URLRequest;
Dette er variablene vi skal bruke, les kommentarene i koden for å få vite mer om dem, noen av navnene deres er selvforklarende, så det blir ingen kommentarer der.
private var titleView: TitleView = new TitleView (); private varemerker: CreditsView; private var blockColor: Vector.= Ny Vector. (); // Lagrer de tilgjengelige fargene, som brukes til å opprette nye blokker med private var blokker: Vector. = Ny Vector. (); // Vil lagre alle blokkene på skjermen for å få tilgang til dem når som helst private varposisjoner: Vector. = Ny Vector. (); // Holder de mulige blokkene stillinger private var currentXPosition: int; privat var currentYPstilling: int; private var eventTarget: Object; // Brukt for å få tilgang til arrangementet mål for stedet funksjonen privat var timer: Timer = ny Timer (3000); // Du har 3 sekunder å plassere blokken i sentrum private var liv: int = 5; privat var score: int = 0; privat var klokke: Bell = ny Bell (); privat var bell4: Bell4 = ny Bell4 (); privat var buzz: Buzz = ny Buzz ();
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 (når i dokumentklassen) den første til å løpe når prosjektet laster.
Det kaller de nødvendige funksjonene for å starte spillet. Kontroller disse funksjonene i de neste trinnene.
Offentlig sluttfunksjon Main (): void // code?
Vi starter med å legge til TitleView til scenen; hvis vi ikke gjør dette, vil det første skjermbildet bli det GameView.
addChild (titleView);
De blockColor vektor brukes til å lage en ny forekomst av den valgte blokken; Parametrene er blokkene som vi opprettet i de foregående trinnene.
De stillinger vektor lagrer mulig x og y stillinger som en blokk kan ha; blanding dette vil gi oss den endelige posisjonen i forhold til mainHolder MC.
Accentsconagua
blockColor.push ('orange', 'green', 'purple'); positions.push (5, 35); startButtonListeners (); I denne funksjonen legger vi muselytterne til knappene i tittelvisningen. Disse vil ta oss til spill skjermbildet eller kreditter skjermen.
privat endelig funksjon startButtonListeners (action = 'add'): void if (action == 'add') titleView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startB.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.creditsB.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startB.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
Kredittskjermbildet vises når brukeren klikker på knappen Kreditt, en muselytter er lagt til hele MC for å fjerne den.
privat siste funksjonsprogram Kreditter (e: MouseEvent): void credits = new CreditsView (); addChild (sp); TweenNano.from (credits, 0.3, x: stage.stageWidth, onComplete: funksjon (): void titleView.visible = false; credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits););
Når kreditten skjermbildet klikkes, blir det tweened ut av scenen og fjernet.
privat endelig funksjon hideCredits (e: MouseEvent): void titleView.visible = true; TweenNano.to (credits, 0.3, x: stage.stageWidth, onComplete: funksjon (): void credits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (credits); credits = null;);
Når Start knappen er trykket, tittelvisningen er tweened og fjernet avslørende spillvisningen.
Private Endelig Funksjon ShowGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: funksjon (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = null; ); counter.gotoAndStop (1); addListeners (); La oss stoppe her for å gjøre en rask test og sørg for at vår skjermbryter koden virker (test kreditt først slik at du kan gå tilbake). Sett dokumentklassen til FLA til Hoved.
Husk at milepæler er inkludert i kildefilene, så hvis filmen din av en eller annen grunn ikke etterligner denne, ta en titt på kilden for å se hva som kan forårsake det.
Gå tilbake til koden og legg til følgende funksjon. Det vil legge til en muslytter til rutene, slik at du kan klikke på dem for å plassere gjeldende blokk.
privat endelig funksjon addListeners (): void up.addEventListener (MouseEvent.MOUSE_UP, placeBlock); right.addEventListener (MouseEvent.MOUSE_UP, placeBlock); down.addEventListener (MouseEvent.MOUSE_UP, placeBlock); left.addEventListener (MouseEvent.MOUSE_UP, placeBlock);
Disse arrays er opprettet inne i kvadratfilmen, de er vant til å registrere blokkene, fargene og posisjonene i hver firkant.
Bokstavene representerer følgende stillinger:
Fortsett addListeners () funksjon:
/ * Lag en matrise for hver beholder for å bestemme når full og blokkene farge * / up.blocks = []; right.blocks = []; down.blocks = []; left.blocks = []; / * Opprett en boolsk for hver beholder for å unngå å plassere blokker i samme posisjon * / up.a = false; right.a = false; down.a = false; left.a = false; up.b = false; right.b = false; down.b = false; left.b = false; up.c = false; right.c = false; down.c = false; left.c = false; up.d = false; right.d = false; down.d = false; left.d = false; newBlock (true);
Denne koden plukker en tilfeldig blokkfarge fra Vector, dette vil bli brukt til å instantiere selve blokken. En parameter brukes til å bestemme om timeren for å starte tellingen vil bli aktivert.
privat sluttfunksjon newBlock (firstTime: Boolean = false): void / * Ny blokk * / var randomBlock: int = Math.floor (Math.random () * 3); var blokk: Sprite; bytte (blockColor [randomBlock]) case 'orange': block = ny OrangeBlock (); gå i stykker; sak 'grønn': blokk = ny GreenBlock (); gå i stykker; saken 'lilla': blokk = ny PurpleBlock (); gå i stykker; standard: spor ('BlockColor Error'); gå i stykker; Etter å ha valgt blokkfargen, beregnes posisjonen der den skal plasseres ved hjelp av stillinger Vector og deretter lagt til blokkene vektoren og scenen. Fortsett newBlock () funksjon:
currentXPosition = stillinger [Math.floor (Math.random () * 2)]; currentYPosition = stillinger [Math.floor (Math.random () * 2)]; block.x = mainHolder.x + currentXPosition; block.y = mainHolder.y + currentYPosition; blocks.push (blokk); addChild (blokk);
Før vi fortsetter med spillet, må vi kontrollere at den nyopprettede blokken faktisk kan plasseres i en firkantet beholder. Følgende kode kontrollerer hver beholdergruppe for å sikre at det er en tom posisjon tilgjengelig i en av boksene der blokken kan plasseres; Hvis det ikke er det, blir blokken ødelagt, og funksjonen kalles igjen for å generere en annen.
/ * Sjekk etter ledig plass til å flytte blokken * / var posisjon: Array = [currentXPosition, currentYPosition]; hvis (String (posisjon) == '5,5' && up.a && right.a && down.a && left.a) removeChild (blokk); blokk = null; newBlock (); annet hvis (String (posisjon) == '35, 5 '&& up.b && right.b && down.b && left.b) removeChild (blokk); blokk = null; newBlock (); annet hvis (String (posisjon) == '5,35' && up.c && right.c && down.c && left.c) removeChild (blokk); blokk = null; newBlock (); annet hvis (String (posisjon) == '35, 35 '&& up.d && right.d && down.d && left.d) removeChild (blokk); blokk = null; newBlock ();
Hvis du brukte et annet layout for spillet ditt, må du passe på at du endrer verdien du sjekker (dvs. ikke '35, 35', da spillets blokker ikke nødvendigvis kommer til å vises på det tidspunktet).
Timeren begynner å telle når funksjonen kalles for første gang.
hvis (første gang) / * Start timer * / timer.addEventListener (TimerEvent.TIMER, timesUp); timer.start (); counter.play (); // avslutte funksjonen newBlock ()
Tre sekunder er gitt for å plassere en blokk i en firkantet beholder, hvis den tiden går og blokken er fortsatt i midtfeltet, vil et liv bli fjernet.
private endelige funksjonstiderUp (e: TimerEvent): void / * Fjern Live * / lives--; livesTF.text = String (liv); buzz.play ();
Etter å ha fjernet livet, vil blokken i midtfeltet bli ødelagt, og en ny blokk vil bli generert. Denne koden kontrollerer også om spilleren er ute av liv og kaller en funksjon som vi skal skrive senere.
/ * Fjern ubrukt blokk * / var i: int = blocks.length - 1; removeChild (blokkene [i]); blokkerer [i] = null; blocks.splice (jeg, 1); / * Sjekk om ut av liv * / hvis (lever < 1) alert(); else /* Next Block */ newBlock();
La oss ta en ny pause for å se hvordan koden fungerer på dette tidspunktet:
Denne funksjonen kjører når spilleren klikker på en av containerkvadratene. Det kontrollerer i utgangspunktet om riktig posisjon er tilgjengelig for å plassere torget og plassere det hvis det er sant. Funksjonen i neste trinn kalles når blokken er plassert.
privat endelig funksjonsstedBlock (e: MouseEvent): tomrom var i: int = blocks.length - 1; eventTarget = e.target; / * Sjekk om stillingen er tilgjengelig * / var posisjon: Array = [currentXPosition, currentYPosition]; hvis (String (posisjon) == '5,5' &&! e.target.a) blokker [i] .x = e.target.x + posisjon [0]; blokkerer [i] .y = e.target.y + posisjon [1]; e.target.a = true; blockPlaced (); annet hvis (String (posisjon) == '35, 5 '&&! e.target.b) blokkerer [i] .x = e.target.x + posisjon [0]; blokkerer [i] .y = e.target.y + posisjon [1]; e.target.b = true; blockPlaced (); annet hvis (String (posisjon) == '5,35' &&! e.target.c) blokkerer [i] .x = e.target.x + posisjon [0]; blokkerer [i] .y = e.target.y + posisjon [1]; e.target.c = true; blockPlaced (); annet hvis (String (posisjon) == '35, 35 '&&! e.target.d) blokkerer [i] .x = e.target.x + posisjon [0]; blokkerer [i] .y = e.target.y + posisjon [1]; e.target.d = true; blockPlaced ();
Igjen må du kanskje endre verdiene som er merket her, for å matche posisjonen til blokkene dine.
Når blokken er plassert i beholderen, legger vi blokken til matrisen som holder oversikt over de lagrede blokkene i den beholderen. Dette vil hjelpe oss med å bestemme når beholderen er full.
privat endelige funksjonsblokkPlaced (): void var i: int = blocks.length - 1; / * Push blokk til containerens blokker array * / eventTarget.blocks.push (blokker [i]);
Hver blokk plasserer øker poengsummen for en. Når boksen er full vil poengsummen øke med 50, og hvis boksen er fullstendig fylt av en enkelt farge, øker totalpoengene med 200.
scorer ++;
En kort lyd vil indikere at blokken ble plassert.
bell.play ();
Den neste koden kontrollerer om beholderen ble fylt av en enkelt fargeblokk ved hjelp av beholderarrayen. Det øker poengsummen med 200, spiller den tilsvarende lyden og spretter beholderen som et visuelt tegn. Det fjerner også variablene i beholderen.
/ * Hvis beholderen er full og hver blokk er samme farge * / hvis (eventTarget.blocks.length == 4 && String (eventTarget.blocks [0]) == String (eventTarget.blocks [1]) && String (eventTarget. blokker [1]) == String (eventTarget.blocks [2]) && String (eventTarget.blocks [2]) == String (eventTarget.blocks [3])) score + = 200; bell4.play (); TweenNano.from (eventTarget, 0.4, x: eventTarget.x - 5, ease: Bounce.easeOut, onComplete: funksjon (): void for (var j: int = 0; j < 4; j++) removeChild(eventTarget.blocks[j]); eventTarget.blocks = []; ); eventTarget.a = false; eventTarget.b = false; eventTarget.c = false; eventTarget.d = false;
Denne koden kjører når beholderen er full, men blokkene i innsiden er ikke av samme farge.
/ * Hvis beholderen er full, men blokkene er forskjellige farger * / annet hvis (eventTarget.blocks.length == 4) bell4.play (500, 2); score + = 50; TweenNano.from (eventTarget, 0.4, x: eventTarget.x - 5, ease: Bounce.easeOut, onComplete: funksjon (): void for (var j: int = 0; j < 4; j++) removeChild(eventTarget.blocks[j]); eventTarget.blocks = []; ); eventTarget.a = false; eventTarget.b = false; eventTarget.c = false; eventTarget.d = false;
Når du har fjernet de fulle beholderne, er poenget satt til tekstfeltet på scenen, timeren er tilbakestilt, og en annen blokk blir kalt.
scoreTF.text = String (score); timer.stop (); timer.start (); counter.gotoAndPlay (1); newBlock ();
Varslingsfunksjonen går når spilleren er ute av liv; det viser sluttresultatet som er nådd og legger til en lytter for å gå tilbake til tittelbildet.
privat endelig funksjonalarm (): void timer.stop (); counter.gotoAndStop (1); var varsel: AlertView = ny AlertView (); alert.messageBox.msgTF.text = 'Score:' + String (score); alert.addEventListener (MouseEvent.MOUSE_UP, start på nytt); addChild (varsling); TweenNano.from (alert.messageBox, 0.7, y: -alert.messageBox.height, ease: Bounce.easeOut);
Den neste funksjonen vil laste inn swf, starte en hvilken som helst variabel, metode og returnere til Tittelskjerm.
privat endelig funksjonstart (e: MouseEvent): void navigateToURL (ny URLRequest (stage.loaderInfo.url), '_level0');
Du har crated et veldig underholdende spill, prøv å legge til dine egne funksjoner og grafikk.
Jeg håper du likte denne opplæringen, takk for å lese!
