Share
I denne Premium Tutorialen skal vi bygge et Breakout-spill; "Brick Breaker" fra bunnen av med Flash og AS3.
Ved hjelp av Flash-tegneverktøyene oppretter vi et flott grafisk grensesnitt som vil bli drevet av flere ActionScript 3-klasser.
Brukeren vil kunne spille gjennom en rekke nivåer, du kan enkelt legge til så mange nivåer som du vil!
Åpne Flash og opprett et 320 piksler bredt 480 piksler høyt dokument. Still inn rammefrekvensen til 24fps.
Et fargerikt, fin utseende grensesnitt vil bli vist. Den vil inneholde flere former, knapper, bitmaps og mer.
La oss hoppe rett inn i å lage denne GUI.
Dette er hovedskjermen eller visningen, det vil være den første grafikken som skal vises i vårt spill.
Opprett et 320x480 rektangel og fyll det med denne radiale gradienten: # 3A9826, # 102A07.
Vi skal gi det litt mer detaljert ved å legge til et Photoshop-filter. Hvis du ikke har Photoshop, kan du prøve å legge til en fin effekt ved hjelp av Flash-verktøyet.
Åpne bildet i Photoshop og gå til Filtre> Tekstur> Patchwork, bruk følgende innstillinger:
Du vil ende opp med noe slikt:
Denne bakgrunnen kommer på scenen, samt padle-, ball- og tekstindikatorene. Konverter bakgrunnen til en Filmklipp og nev det bg.
Velg tekstverktøyet (T), velg en passende skrift og skriv spilltittelen din. Jeg brukte dette formatet: Akashi, 55pt, # FFCC33.
Velg TextField og bruk panelet Filtre for å legge til en Drop Shadow:
Dupliser teksten (Cmd + D) og flytt den 3px opp for å gi den litt preg.
Konverter grafikken til en Filmklipp og nev det MenuScreen, husk å markere Eksporter for ActionScript eske. Du kan slette dette fra scenen når du er ferdig, da den blir kalt ved hjelp av AS3.
Bruk Rectangle Primitive Tool (R) til å opprette et rundt rektangel på 57x11.5px, endre hjørneradius til 10 og bruk denne gradienten: # 4E4E4E, #BABABA, # B0B3BA.
Legg til noen detaljlinjer med rektangulærverktøyet, bruk din egen stil!
Du kan også legge til litt farge på din padle, her er det endelige resultatet av meg, fargen som brukes er: # CC0000.
Konverter grafikken til en Filmklipp og nev det padle.
For å lage ballen, velg Oval Tool (O) og bruk den til å lage en 12x12px, #CCCCCC sirkel.
Dupliserer sirkelen (Cmd + D) endre størrelsen til 10x10px og fyll den med denne radiale gradienten: # 95D4FF, # 0099FF.
Til slutt, kutt den andre sirkelen i halv og bruk markeringsverktøyet (V) for å lage en kurve i bunnen. Bytt fargen til en hvit lineær gradient med alfa 60, 10.
Konverter grafikken til en Filmklipp og nev det ball.
Vår murstein vil være veldig enkel.
Bruk rektangulært verktøy for å lage et 38x18px rektangel og bruk neste gradient: # CC0000, # 8E0000, # FF5656.
Konverter rektangelet til en MovieClip og bruk skyggefilteret som brukes i tittelteksten, for å gi det et bedre utseende.
Konverter grafen til a Filmklipp og nev det Murstein, husk å markere Eksporter for ActionScript eske.
Om skjermen vil vise kreditter, år og opphavsrett til spillet.
Det vil være ganske enkelt å lage som vi allerede har alle elementene som brukes i den.
Konverter grafikken til en Filmklipp og nev det AboutScreen, husk å markere Eksporter for ActionScript eske.
Dette er spillskjermbildet, det vil være på scenen fra begynnelsen, og det vil inneholde padle-, ball-, bakgrunns- og tekstindikatorer. (Vi legger til teglene ved hjelp av kode.)
Instansnavnene er ganske enkle og selvforklarende: padle, ball, bg, scoreTF, livesTF og levelTF.
For å kunne bruke den tilpassede fonten dynamisk, må vi legge den inn i applikasjonen.
Velg en dynamisk tekstfelt og klikk på embed? knappen i Egenskaper Panel.
Velg / legg til alle nødvendige tegn og klikk OK.
Denne skjermen vil vises når spillet er avgjort; enten du vinner, taper eller du når spillet over (vinner alle nivåer eller mister alle liv).
To dynamiske tekstfiler brukes i denne visningen, de vil vise gjeldende spilltilstand pluss en kort melding. TextFields er oppkalt titleTF og msgTF.
Konverter grafikken til en Filmklipp og merk av Eksporter for ActionScript boks, sett klassenavnet til AlertScreen.
Dette slutter grafikkdelen, la ActionScript begynne!
Vi bruker en annen tween-motor fra standard inkludert i flash, dette vil øke ytelsen og være enklere å bruke.
Du kan laste ned Tween Nano fra sitt offisielle nettsted.
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; importere flash.ui.Mouse; importer flash.events.MouseEvent; importer flash.events.KeyboardEvent; importere flash.events.Event; importer com.greensock.TweenNano; importere com.greensock.easing.Circ;
Dette er variablene og konstantene vi skal bruke, les kommentarene i koden for å finne ut mer om dem.
privat const BRICK_W: int = 39; // mursteinens bredde private const BRICK_H: int = 19; // mursteinens høyde private const OFFSET: int = 6; // En offset brukes til å sentrere mursteinene private const W_LEN: int = 8; // lengden på nivåene, kun 8 horisontale murstein skal opprettes på scenen privat const SCORE_CONST: int = 100; // beløpet som skal legges til poengsummen når en murstein er rammet. Private var murstein: Vector.= Ny Vector. (); // lagrer alle mursteinene private var xSpeed: int = 5; privat var ySpeed: int = -5; privat var xDir: int = 1; // x retning privat var yDir: int = 1; private var gameEvent: String = "; // lagrer hendelser som å vinne, miste, gameover private var currentLevel: int = 0; private var menyScreen: MenuScreen; // en forekomst av menyskjermen private var omScreen: OmScreen; privat var alertScreen: AlertScreen; private var liv: int = 3; private var nivåer: Array = []; // lagrer nivåene
Alle våre nivåer vil bli lagret i flerdimensjonal array.
Dette er arrays som inneholder arrays; du kan skrive dem i en enkelt linje, men hvis du justerer dem, kan du faktisk se skjemaet som nivået vil ta.
privat const LEVEL_1: Array = [[0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0], [0,0,0, 1,1,0,0,0], [0,0,0,1,1,0,0,0], [0,1,1,1,1,1,1,0], [0, 1,1,1,1,1,1,0], [0,0,0,1,1,0,0,0], [0,0,0,1,1,0,0,0] , [0,0,0,0,0,0,0,0],]; // dette danner et + tegn! privat const LEVEL_2: Array = [[0,0,0,0,0,0,0,0], [0,0,0,1,1,0,0,0], [0,0,1, 0,0,1,0,0], [0,0,0,0,0,1,0,0], [0,0,0,0,1,0,0,0], [0, 0,0,1,0,0,0,0], [0,0,1,0,0,0,0,0], [0,0,1,1,1,1,0,0] ,]; // dette danner et nummer 2!
På disse nivåene 1s representerer plassen i scenen der en murstein skal plasseres, og 0s er bare tom plass. Disse nivåene leses senere av en funksjon som vil sette mursteinene på scenen. Du kan legge til så mange nivåer som du vil bruke denne klassen!
Konstruktøren er en funksjon som kjører når et objekt opprettes 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 når spillet laster, i tilfelle en dokumentklasse).
Det kaller de nødvendige funksjonene for å starte spillet. Sjekk ut disse funksjonene i de følgende trinnene.
offentlig sluttfunksjon Main (): void / * Legg til nivåer * / levels.push (LEVEL_1, LEVEL_2); // Vi legger til nivåene i arrayet for å vite hvor mange de er / * Menyskjerm, Knapper Lyttere * / menyScreen = Ny menyskjerm (); addChild (menuScreen); menyScreen.startB.addEventListener (MouseEvent.MOUSE_UP, tweenMS); menyScreen.aboutB.addEventListener (MouseEvent.MOUSE_UP, tweenMS);
De neste linjene håndterer knappene på menyskjermbildet og mellom menyen eller Omvisning, avhengig av knapptrykket.
privat sluttfunksjon tweenMS (e: MouseEvent): void if (e.target.name == 'startB') // hvis startknappen klikkes TweenNano.to (menyScreen, 0.3, y: -menuScreen.height, ease : Circ, onComplete: init); // mellom menyskjermbildet annet // hvis om knappen er klikket aboutScreen = ny OmScreen (); // legg til om skjermbildet addChild (omtrentScreen); TweenNano.from (omScreen, 0.3, x: stage.stageWidth, ease: Circ); // tween om skjermen aboutScreen.addEventListener (MouseEvent.MOUSE_UP, hideAbout); // legge til en muselytter for å fjerne den / * Fjerner om visning * / privat endelig funksjon hideAbout (e: MouseEvent): void TweenNano.to (omScreen, 0.3, x: stage.stageWidth, ease: Circ, onComplete : funksjon rmv (): void aboutScreen.removeEventListener (MouseEvent.MOUSE_UP, hideAbout); removeChild (ca.Screen););
Denne funksjonen utfører de nødvendige operasjonene for å starte spillet, lese kommentarene i koden for å vite mer om det.
privat endelig funksjon init (): void / * Destroy Menu Screen * / menuScreen.startB.removeEventListener (MouseEvent.MOUSE_UP, tweenMS); menuScreen.aboutB.removeEventListener (MouseEvent.MOUSE_UP, tweenMS); removeChild (menuScreen); menyScreen = null; / * Skjul markør * / Mouse.hide (); / * Bygg nivå teglstein * / buildLevel (LEVEL_1); / * Start Listener * / bg.addEventListener (MouseEvent.MOUSE_UP, startGame);
Padlen vil være Mus kontrollert, den vil følge musen x posisjon .
privat endelig funksjon movePaddle (e: MouseEvent): void / * Følg Mouse * / paddle.x = mouseX;
For å stoppe padlen fra å forlate scenen, skaper vi usynlige grenser på sidene av skjermen.
/ * Følg Mus * / paddle.x = mouseX; / * Borders * / if ((paddle.x - paddle.width / 2) < 0) paddle.x = paddle.width / 2; else if((paddle.x + paddle.width / 2) > stage.stageWidth) paddle.x = stage.stageWidth - paddle.width / 2;
Nivåene vil bli bygget av denne funksjonen.
Den bruker en parameter for å oppnå nivået som skal bygges, beregner størrelsen og kjører en nestet forløp, med en løkke for høyden og en for bredden. Deretter oppretter det en ny Brick-forekomst som er plassert i henhold til bredde, høyde og nummer som tilsvarer Jeg og j.
Til slutt blir mursten lagt til murstein vektor for å få tilgang til den utenfor denne funksjonen.
privat endelig funksjon buildLevel (nivå: Array): void / * Nivålengde, høyde * / var len: int = level.length; for (var jeg: int = 0; i < len; i++) for(var j:int = 0; j < W_LEN; j++) if(level[i][j] == 1) var brick:Brick = new Brick(); brick.x = OFFSET + (BRICK_W * j); brick.y = BRICK_H * i; addChild(brick); bricks.push(brick);
Denne funksjonen legger til eller fjerner musen og legger inn rammelykkere. Den bruker en parameter for å avgjøre om lytterne skal legges til eller fjernes: standard er Legg til.
private endelige funksjon spilllistere (handling: String = 'add'): void if (action == 'add') stage.addEventListener (MouseEvent.MOUSE_MOVE, movePaddle); stage.addEventListener (Event.ENTER_FRAME, oppdatering); else stage.removeEventListener (MouseEvent.MOUSE_MOVE, movePaddle); stage.removeEventListener (Event.ENTER_FRAME, oppdatering);
Den neste koden kaller gameListeners () funksjon for å starte spillet.
privat endelig funksjon startGame (e: KeyboardEvent): void bg.removeEventListener (MouseEvent.MOUSE_UP, startGame); gameListeners ();
Ballhastigheten bestemmes av xSpeed og ySpeed variabler, når Oppdater Funksjonen utføres, ballen begynner å bevege seg ved hjelp av disse verdiene hver ramme.
privat endelig funksjon oppdatering (e: Event): void / * Ball Bevegelse * / ball.x + = xSpeed; ball.y + = ySpeed;
Denne koden kontrollerer kollisjoner mellom ballen og veggene.
/ * Veggkollisjon * / hvis (ball.x < 0)ball.x = ball.x + 3;xSpeed = -xSpeed;;//Left if((ball.x + ball.width) > stage.stageWidth) ball.x = ball.x - 3; xSpeed = -xSpeed;; // Høyre hvis (ball.y < 0)ySpeed = -ySpeed;;//Up
En if-statement brukes til å sjekke når padlen savner ballen. I så fall mister spilleren et liv.
Accentsconagua
hvis (ball.y + ball.height> paddle.y + paddle.height) alert ('You Lose', 'Play Again?'); gameEvent = 'lose'; lives -; livesTF.text = String (liv );; // ned / tape Når ballen treffer padlen, er ySpeed satt til negativ for å få ballen til å gå opp. Vi sjekker også inn hvilken side av padlen ballen har slått for å velge siden der den vil bevege seg neste.
/ * Paddle Collision, kontroller hvilken side av padle ballen slår * / hvis (paddle.hitTestObject (ball) && (ball.x + ball.width / 2) < paddle.x) ySpeed = -5; xSpeed = -5; //left else if(paddle.hitTestObject(ball) && (ball.x + ball.width / 2) >= paddle.x) ySpeed = -5; xSpeed = 5; //Ikke sant
Vi bruker en til og hitTest for å sjekke om mursteinskollisjoner, når ballen rammer en murstein, brukes samme teknikk som brukes i padle til å bestemme siden ballen skal følge.
/ * Murstein Kollisjon * / for (var jeg: int = 0; i < bricks.length; i++) if(ball.hitTestObject(bricks[i])) /* Check the which side of the brick the ball hits, left, right */ if((ball.x + ball.width / 2) < (bricks[i].x + bricks[i].width / 2)) xSpeed = -5; else if((ball.x + ball.width / 2) >= (murstein [i] .x + murstein [i] .bredde / 2)) xSpeed = 5;
Følgende kode endrer ballen til Y-retningen og fjerner murstein fra scenen og vektoren.
/ * Endre ballen y retning * / ySpeed = -ySpeed; removeChild (murstein [i]); bricks.splice (jeg, 1);
Hvis du vil, kan du endre denne logikken slik at ballens y-hastighet bare reverseres hvis den treffer toppen eller bunnen av en murstein, og ikke når den treffer sidene. Prøv det og se hva du synes.
Hver mursteinslag vil legge til 100 til poengsummen, poengsummen blir tatt fra poengsummen konstant og lagt til nåværende poeng ved hjelp av int og string funksjoner. Denne koden kontrollerer også om det ikke er flere teglstein i Vector og viser et varsel hvis det er tilfelle.
/ * Score ++ * / scoreTF.text = String (int (scoreTF.text) + SCORE_CONST); / * Sjekk om alle mursteinene er ødelagt * / hvis (bricks.length < 1) alert('You Win!', 'Next Level ?'); gameEvent = 'win'; Varslingsskjermbildet viser spillerens informasjon om statusen til spillet, det vises når en spillhendelse er nådd, for eksempel å miste et liv eller fullføre et nivå.
To parametere brukes i denne funksjonen:
privat sluttfunksjonsvarsel (t: String, m: String): void gameListeners ('remove'); Mouse.show (); alertScreen = ny AlertScreen (); addChild (alertScreen); TweenNano.from (alertScreen.box, 0.3, scaleX: 0.5, scaleY: 0.5, ease: Circ); alertScreen.box.titleTF.text = t; alertScreen.box.msgTF.text = m; alertScreen.box.boxB.addEventListener (MouseEvent.MOUSE_UP, start på nytt); Den neste funksjonen kontrollerer spillstatusen (seier, tap, ferdig) og utfører en handling i henhold til den.
privat endelig gjenopprettelse (e: MouseEvent): void if (gameEvent == 'win' && levels.length> currentLevel + 1) // hvis nivået er klart, men flere nivåer er igjen currentLevel ++; changeLevel (nivåer [currentLevel]); // neste nivå levelTF.text = 'Level' + String (currentLevel + 1); annet hvis (gameEvent == 'win' && levels.length <= currentLevel+1) //if level is clear and no more levels are available alertScreen.box.boxB.removeEventListener(MouseEvent.MOUSE_UP, restart); removeChild(alertScreen); alertScreen = null; alert('Game Over', 'Congratulations!'); gameEvent = 'finished'; else if(gameEvent == 'lose' && lives > 0) // hvis nivået feilet, men lever> 0 changeLevel (levels [currentLevel]); // samme nivå annet hvis (gameEvent == 'lose' && lives <= 0) //if level failed and no more lives left alertScreen.box.boxB.removeEventListener(MouseEvent.MOUSE_UP, restart); removeChild(alertScreen); alertScreen = null; alert('Game Over', 'Try Again!'); gameEvent = 'finished'; else if(gameEvent == 'finished') //reached when no more lives or levels are available /* Add menu screen */ menuScreen = new MenuScreen(); addChild(menuScreen); menuScreen.startB.addEventListener(MouseEvent.MOUSE_UP, tweenMS); menuScreen.aboutB.addEventListener(MouseEvent.MOUSE_UP, tweenMS); TweenNano.from(menuScreen, 0.3, y: -menuScreen.height, ease: Circ); /* Reset vars */ currentLevel = 0; lives = 3; livesTF.text = String(lives); scoreTF.text = '0'; levelTF.text = 'Level ' + String(currentLevel + 1); xSpeed = 5; ySpeed = -5; clearLevel(); Denne funksjonen endres til nivået som er skrevet i parameteren.
privat endelig funksjon endringLevel (nivå: Array): void / * Clear * / clearLevel (); / * Redraw Bricks * / buildLevel (nivå); / * Start * / Mouse.hide (); bg.addEventListener (MouseEvent.MOUSE_UP, startGame);
En funksjon for å fjerne de resterende mursteinene og varslene fra scenen. Det vil også tilbakestille stillingen til padle og ball.
privat endelig funksjon clearLevel (): void / * Fjern Alert Screen * / alertScreen.box.boxB.removeEventListener (MouseEvent.MOUSE_UP, restart); removeChild (alertScreen); alertScreen = null; / * Clear Level Bricks * / var bricksLen: int = bricks.length; for (var jeg: int = 0; i < bricksLen; i++) removeChild(bricks[i]); bricks.length = 0; /* Reset Ball and Paddle position */ ball.x = (stage.stageWidth / 2) - (ball.width / 2); ball.y = (paddle.y - paddle.height) - (ball.height / 2) -2; paddle.x = stage.stageWidth / 2;
Vi bruker dokumentklassen i denne opplæringen, hvis du ikke vet hvordan du bruker den eller er litt forvirret, vennligst les denne QuickTip.
Det endelige resultatet er et tilpassbart og underholdende spill, prøv å legge til din egendefinerte grafikk og nivåer!
Jeg håper du likte denne Active Premium-opplæringen, takk for å lese!
