Create din egen Pseudo 3D pong spill
Del
Del
to
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
To ganger i måneden, vi besøker noen av våre lesere favoritt innlegg fra hele historien Activetuts +. Denne opplæringen ble først publisert for lenge siden i mai 2009.
I denne tut vil jeg beskrive hvordan du oppretter en grunnleggende 3D-scene med de innfødte 3D alternativene av Flash Player 10. Da skal jeg forklare hvordan å legge til interaktivitet til elementene og sette opp en grunnleggende pong spillet. La oss gå ..
Trinn 1: Stille Scene
La oss sette opp scenen og skape 3D-scenen. I en vanlig pong spill ballen spretter av toppen og bunnen av skjermen, men siden vi legger litt perspektiv til mix må vi gi disse grensene også. Det er fem movieclips trengs: gulvet og de fire vegger (hvorav to er faktisk padleårer). Registreringspunkter veggene bør alle være plassert mot gulvet. Du kan lage alle disse bare med rektangel verktøyet eller bruke et importert punktgrafikkbilde (Husk å skru på "Tillat utjevning" i egenskapene). Lag en MovieClip ut av hver av veggene og gi dem en forekomst navn (jeg kalte dem "wallTop", "wallBottom", "wallLeft" og "wallRight" og vil referere til dem senere). Navn bakgrunnen "gulvet".
Velg alle vegger og gulv, lage en stor MovieClip ut av dem og gi den navnet "bg".
For å vise resultatet senere vil vi trenger også to dynamiske tekstfelt. Hvis du plasserer disse innenfor "bg" MovieClip de vil også ha 3D-perspektiv. Navn disse "scoreLeft" og "scoreRight" deretter legge skriftene
Trinn 2:. Ball Creation
Opprett ballen med oval og gradient verktøyet på scenen. Ikke plasser ballen inne i "bg" MovieClip eller det vil bli forvrengt av perspektivet. Vi vil ikke gi kule selve 3D-egenskaper, men gjør det virke som om det var 3D. Plassere ballen i midten av skjermen og gi den en forekomst navn som "ball"
Trinn 3:. Dokument Class
Nå skal vi sette opp 3D-scenen etter bruke den nye rotationX, Y og Z eiendommer som ble lagt i Flash Player 10. Men før vi kan utføre noen Actionscript-kode vi trenger for å lage dokumentet klassen. Opprett en tom Main.as og fyll den med koden under
pakke {import flash.display.MovieClip.; public class Hoved strekker MovieClip {offentlig funksjon main (): void {//Erstatt denne kommentaren med koden senere}}}
Nå til å bruke dette som den viktigste klassen vi kan fylle i "Main" i "Klasse:" input . boks av dokumenter egenskaper
Trinn 4: Rotasjon
La oss prøve ut rotasjonen. Legg denne linjen til Main () -funksjonen til å gi alt litt perspektiv.
Bg.rotationX = -30;
Som du ser, alle movieclips nå roteres 30 ° rundt x-aksen
< p> Hver av veggene trenger en 90 ° rotasjon for å stå opp. Som du ser har jeg også endret overgangsmodusen av veggene til "screen" slik at gradienter se bedre. Følgende kode er kun for forhåndsvisning formål som vi vil erstatte den med tweens i neste trinn (så ta det ut etter testing)
bg.wallTop.rotationX = 90;. Bg.wallBottom.rotationX = -90; bg .wallRight.rotationY = 90; bg.wallLeft.rotationY = -90;
Trinn 5: Begynn Funksjon
Hvis du vil legge til en effekt på veggene vil vi først må opprette en startknapp . Lag en MovieClip med teksten "Klikk her for å starte". Igjen, kan du plassere denne inne "bg" hvis du vil at den skal ha perspektiv også. Gi den en forekomst navn som "startText". Vi kan nå referere til den i kode og legge til en eventlistener til det. Også satt buttonMode til sann som vil returnere en hånd markøren når musen svever over knappen. Når klikket, er start-funksjon kalt og knappen er skjult. Vi skjuler også muspekeren fordi brukeren vil kontrollere høyre vegg med musen
offentlig funksjon main (). Void {bg.rotationX = -30; startText.addEventListener (MouseEvent.MOUSE_UP, start); startText.buttonMode = true;} private funksjon start (_E: Hendelses): void {startText.buttonMode = false; startText.visible = false; Mouse.hide (); //Dette vil inneholde tweens}
Trinn 6: Tweening
Vi kan bruke TweenLite til tween veggene 0-90 ° rotasjon. Selvfølgelig noen tweening motoren vil gjøre, men jeg foretrekker dette. Følgende kode vil tween veggene i 2 sekunder og bruke "Bounce.easeOut" lettelser funksjon. Til tween alfa verdien av veggene samt vi må sette den til 0 først. Du kan gjøre dette i Flash ved å sette alfa til 0 i fargeinnstillingene. Etter disse tweens er fullført spillet skal starte, så legg en "onComplete" eiendom til en av de tweens og fest en funksjon navn til den (du kan la dette ut for testing siden funksjonen ikke finnes ennå). Anmeldelser privat funksjon start (_E: Hendelses): void {startText.buttonMode = false; startText.visible = false; Mouse.hide (); ny TweenLite (bg.wallRight, 2, {rotationY: 90, alpha: 1, letthet: Bounce.easeOut}); ny TweenLite (bg.wallLeft, 2, {rotationY: -90, alfa: 1, letthet: Bounce.easeOut}); ny TweenLite (bg.wallTop, 2, {rotationX: 90, alpha: 1, letthet: Bounce.easeOut}); ny TweenLite (bg.wallBottom, 2, {rotationX: -90, alfa: 1, letthet: Bounce.easeOut, onComplete: goBall}); }
Trinn 7: Låser
Før vi faktisk kan starte spillet vi må legge til interaktivitet til venstre og høyre vegger og ballen. La oss starte med spillerens padle. Opprett en ny klasse "Player.as" og legge til følgende kode
pakke {import flash.display.MovieClip.; import flash.events.MouseEvent; public class Player strekker MovieClip {offentlig funksjon Player (): void {stage.addEventListener (MouseEvent.MOUSE_MOVE, moveAlong); } Private funksjon moveAlong (_E: MouseEvent): void {var mousePos: Number = stage.mouseY - parent.y; if (mousePos < 0) y = 0; else if (mousePos > 340) y = 340; else y = mousePos; }}}
I konstruktør (spillerfunksjon) vi legge til en eventlistener til scenen for å sjekke når musen beveger seg og kaller den "moveAlong" -funksjonen når den gjør det. I moveAlong funksjonen beregner vi den lokale posisjonen til musen (bare y posisjon siden vi bare bevege seg vertikalt). Neste sjekker vi om musa går ut av banen og tilbakestille posisjonen hvis den gjør. Jeg fant 340 verdi ved prøving og feiling siden "parent.height - høyde" ikke returnerer den forventede verdien når vi bruker 3D-perspektiv
Neste endre egenskapene til wallRight MovieClip.; sjekk "Export for Action" og sett klasse til "Player". Forlate "Base Class" tom
Trinn 8:. Opponent (AI)
Opprette AI er svært lik skape spilleren. Bare denne gangen vil vi gjøre det gå mot y-verdien av ballen, men med en litt lavere hastighet enn ballen. Lag en annen klasse "AI.as":
pakke {import flash.display.MovieClip; import flash.events.Event; public class AI strekker MovieClip {offentlig funksjon AI (): void {addEventListener (Event.ENTER_FRAME, followBall); } Private funksjon followBall (_E: Hendelses): void {var ball: MovieClip = MovieClip (parent.parent) .ball; if (ball.xspeed || ball.yspeed) {var newy: Number = ball.y - høyde; if (newy > 345) newy = 345; if (y < = newy) y + = 9; annet y - = 9; }}}}
Først må vi være i stand til å referere til ballen. Siden wallLeft MovieClip er inne i "bg" MovieClip, kaller "foreldre" ville referere til "bg". Av denne grunn må vi bruke "parent.parent". De første "hvis" statement sjekker om ballen har en x eller yspeed. Dette er offentlige variabler av ballen vi skal fastsettes senere. Sjekken hindrer AI fra å bevege seg før spillet starter. Den "newy" value holder y verdien av ballen minus høyden wallLeft. Dette er verdien som bør det gå å treffe ballen. Som før, endre Class of wallLeft til "AI"
Trinn 9:. Ball Funksjonalitet
Ballen trenger mest funksjonalitet: det er behov for å bevege seg rundt, spretter av vegger, se etter en hit med padleårer og oppdatere sin egen dybde siden det ikke er et 3D-objekt
pakke {import flash.display.MovieClip.; import flash.events.Event; public class Ball strekker MovieClip {public Var xSpeed: Antall = 0; offentlig Var yspeed: Antall = 0; offentlig funksjon Ball (): void {} offentlig funksjon start (): void {xSpeed = -12; yspeed = 12; addEventListener (Event.ENTER_FRAME, moveBall); } Private funksjon moveBall (_E: Hendelses): void {dybde (); kollisjon(); x + = xSpeed; y + = yspeed; } Private funksjon dybde (): void {//Scale ballen basert på sin y posisjon} privat funksjon kollisjon (): void {//Gjør ballen sprette}}}
Først av vi gi ballen en x og yspeed . Disse er satt til offentligheten slik at vi kan sjekke fra andre gjenstander om ballen er i bevegelse. Neste legge en "onEnterFrame" eventlistener til start funksjon. Når start funksjonen kalles ballen vil begynne å bevege seg hver ramme. Jeg ga ballen en starthastighet på 12 piksler per ramme. Du kan endre dette for å få fart i spillet, men du kunne også opp framerate. Den moveBall funksjonen faktisk hightens x- og y-verdier av ballen basert på x og yspeed. Det kaller også dybden og kollisjon funksjoner på hver ramme
Trinn 10:. Ball Perspektiv
Fordi ballen er ikke et 3D-objekt og har ingen z verdi det vil ikke vises mindre når y verdiendringer. Jo høyere ballen fikk på skjermen (lav y-verdi), jo mindre det skulle dukke opp. Vi kan endre dette ved å skalere det basert på sin posisjon:
privat funksjon dybde (): void {var mindre: Number = ((y /stage.stageHeight) * 0,6) + 0,6; scaleX = Scaley = mindre;}
Trinn 11: Collision Course
"kollisjon" -funksjonen vil bestemme hvor og når ballen vil sprette av andre objekter. I den første "hvis" statement vi bare sjekke y-verdien for å finne ut om ballen treffer toppen eller bunnen. Igjen fant jeg disse verdiene ved å prøve og feile fordi ballen må sprette av i en plausibel måte. Hvis sjekken er sant det resulterer i å endre yspeed slik at ballen skifter vertikal retning
privat funksjon kollisjon (). Void {if (y > = 463 || y < = 105) {yspeed * = -1; }
Kontrollere x grensene er ikke så lett på grunn av perspektivet og årer som beveger seg rundt. Vi kan utføre en "hitTest" med veggene og sende ballen tilbake hvis sant. HitTests er litt cpu tung, så det er best å ikke overdrive dem. Men fordi vi har å gjøre med en enkel pong spill vil det ikke merkbart tregere spillet. Jeg gjorde legge til en ekstra sjekk skjønt; for å se om ballen er x-verdien er på venstre eller høyre side av scenen og sjekk veggen tilsvarende. Dette gjør at det er bare én hitTest nødvendig per ramme i stedet for to
if ((x >. Stage.stageWidth /2 & & hitTestObject (MovieClip (forelder) .bg.wallRight)) || (x < stage.stageWidth /2 & & hitTestObject (MovieClip (forelder) .bg.wallLeft))) {xSpeed * = 1; }
Til slutt må vi finne ut om ballen er fortsatt på plattformen. Vi kan finne ut ved å sjekke om et punkt på undersiden av kulen er fremdeles plassert på "gulvet". Det nøyaktige punktet har ballens x-verdi og y pluss radius verdi. Hvis dette er sant vi finner ut om ballen gikk utenfor på venstre eller høyre side (igjen ved å sammenligne den x-verdien til midten av skjermen) og oppdatere poengsum accoringly. På slutten, angi x- og y-verdiene ballen tilbake til midten slik at spillet kan fortsette.
If (! MovieClip (forelder) .bg.floor.hitTestPoint (x, y + (høyde /2 * Scaley ), true)) {if (x < stage.stageWidth /2) MovieClip (forelder) .bg.scoreRight.text = Number (MovieClip (forelder) .bg.scoreRight.text) + 1; annet MovieClip (forelder) .bg.scoreLeft.text = Number (MovieClip (forelder) .bg.scoreLeft.text) + 1; y = stage.stageHeight /2; x = stage.stageWidth /2; }}
Endre Class of ballen til "Ball"
Trinn 12:.! Handling
Nå som vi har laget både årer og erte alle som trengs er å sette spillet i aksjon. Legg denne funksjonen til hovedklassen og sørge for at onComplete vi brukte i trinn 6 referanser denne funksjonen
privat funksjon goBall (). Void {ball.start ();}
Trinn 13: Legge Bounce
Etter at resultatet har blitt oppdatert, ballen rett tilbake til sentrum og begynner å rulle igjen. Vi trenger å animere ballen litt når de kommer tilbake før spillet starter igjen
Sett denne koden i kollisjonen funksjon av ballen.
Y = stage.stageHeight /2; x = stage.stageWidth /2;
Av:
xSpeed = yspeed = 0; removeEventListener (Event.ENTER_FRAME, moveBall); y = -Høyde; x = stage.stageWidth /2; Var skala: Number = (0,5 * 0,6) + 0,6, nye TweenLite (dette, 1,5, {y: stage.stageHeight /2, scaleX: skala, Scaley: skala, lette: Bounce.easeOut, onComplete: start});
Dette vil stoppe ballen fra å flytte først. Neste det setter posisjonen til ballen like over skjermen, men horisontalt sentrert. Hvis vi da bruker Bounce lettelser funksjonen vil det se ut som om ballen faller ned fra oven like før du starter spillet.
Konklusjon
Jeg håper du var i stand til å følge med uten for mange problemer. Spillet som det er nå er helt grunnleggende, og kan bruke noen forbedringer. Ballen, for eksempel, spretter alltid 90 ° hjørner som gjør bevegelsen veldig forutsigbar.
Hvis du ønsker å ta det videre kan du prøve å variere x og yspeed basert på hvor ballen treffer racketen ( sammenligne y-verdiene). Den dueller med padleårer er ikke på langt nær perfekt, men gjør vise deg en enkel måte å sjekke for en hit. Til slutt, hvis du ikke bruker gradienter for veggene vil du merke ballen ser ut til å rulle over bunnen i stedet for dissapearing under den. For å fikse dette, kan du enkelt separate objekter som skal vises over ballen og plassere de i en ny MovieClip som du forvrenge så mye som "bg" MovieClip og ordne høyere enn ballen i Flash.