Share
To ganger i måneden besøker vi noen av våre leseres favorittinnlegg fra hele historien til Activetuts +. Denne opplæringen ble først publisert for lenge siden i mai 2009.
I denne tutten beskriver jeg hvordan du lager en grunnleggende 3D-scene ved hjelp av de innebygde 3D-alternativene til Flash Player 10. Deretter skal jeg forklare hvordan du legger til interaktivitet for elementene og sett opp et grunnleggende pong spill. La oss gå?
La oss sette opp scenen og lage 3D-scenen. I et vanlig pong spill støter ballen av på toppen og bunnen av skjermen, men siden vi legger til litt perspektiv på blandingen, må vi også gi disse grensene. Det er fem filmklipp som trengs: gulvet og de fire veggene (to er faktisk padler). Registreringspoengene til veggene skal alle plasseres mot gulvet. Du kan lage alle disse enkeltene med rektangelverktøyet eller bruke et importert bitmapbilde (husk å slå på "Tillat utjevning" i egenskapene). Lag en filmklipp ut av hver av veggene og gi dem et forekomstnavn (jeg kalt dem "wallTop", "wallBottom", "wallLeft" og "wallRight" og vil referere til dem senere). Navn bakgrunnen "gulv".
Velg alle veggene og gulvet, lag en stor filmklipp ut av dem og nevn den "bg".
For å vise poenget senere, trenger vi også to dynamiske tekstfelter. Hvis du plasserer disse innenfor "bg" movieclip, vil de også ha 3D-perspektivet. Navngi disse "scoreLeft" og "scoreRight" og deretter legge inn skrifttyper.
Lag ballen ved hjelp av det ovale og gradientverktøyet på scenen. Ikke plasser ballen inne i "bg" movieclip eller det vil bli forvrengt av perspektivet. Vi vil ikke gi ballen faktiske 3D-egenskaper, men gjør det til å fungere som om det var 3D. Legg ballen i midten av skjermen og gi den et eksempelnavn som "ball".
Nå skal vi sette opp 3D-scenen ved å bruke de nye egenskapene for rotationX, Y og Z som ble lagt til i Flash Player 10. Men før vi kan utføre noen ActionScript-koden, må vi opprette dokumentklassen. Opprett en tom Main.as og fyll den med koden nedenfor.
pakke import flash.display.MovieClip; offentlig klasse Main utvider MovieClip offentlig funksjon Main (): void // Erstatt denne kommentaren med kode senere
Nå for å bruke dette som hovedklassen kan vi fylle ut "Main" i "Class:" -inputs boksen av dokumentegenskapene.
La oss prøve rotasjonen. Legg denne linjen til Main () -funksjonen for å gi alt litt perspektiv:
bg.rotationX = -30;
Som du kan se, blir alle filmklipp nå rotert 30 cm rundt x-aksen.
Hver av veggene trenger en 90ш rotasjon for å stå opp. Som du kan se har jeg også endret blandingsmodus av veggene til å "skjerm" slik at gradienter ser bedre ut. Følgende kode er kun for forhåndsvisning, da vi erstatter det 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;
For å legge til en effekt på veggene må vi først opprette en startknapp. Lag en filmklipp med teksten "Klikk her for å starte". Igjen kan du plassere dette inne i "bg" hvis du vil at det også skal ha perspektiv. Gi det et eksempelnavn som "startText". Vi kan nå referere det i koden og legge til en eventlister til den. Sett også knappenMode til ekte som vil returnere en håndpeker når musen svinger over knappen. Når du klikker, kalles startfunksjonen og knappen er skjult. Vi skjuler også musepekeren fordi brukeren vil styre høyre vegg med musen.
offentlig funksjon Main (): void bg.rotationX = -30; startText.addEventListener (MouseEvent.MOUSE_UP, start); startText.buttonMode = true; privat funksjonstart (_e: hendelse): void startText.buttonMode = false; startText.visible = false; Mouse.hide (); // Dette vil inneholde tweens
Vi kan bruke TweenLite til å tween veggene fra 0 til 90ш rotasjon. Selvfølgelig vil enhver tweening-motor gjøre, men jeg foretrekker denne. Følgende kode kommer mellom veggene om 2 sekunder og bruk funksjonen "Bounce.easeOut". For å tween alfaverdien av veggene i tillegg må vi sette den til 0 først. Du kan gjøre dette i Flash ved å sette alfa til 0 i fargeinnstillingene. Etter at disse tweens er ferdig, bør spillet begynne, så legg til en "onComplete" -egenskap til en av tweens og legg til et funksjonsnavn til det (du kan la dette ut for testing siden funksjonen ikke eksisterer ennå).
privat funksjonstart (_e: hendelse): 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, alpha: 1, letthet: Bounce.easeOut); ny TweenLite (bg.wallTop, 2, rotationX: 90, alpha: 1, letthet: Bounce.easeOut); ny TweenLite (bg.wallBottom, 2, rotationX: -90, alpha: 1, letthet: Bounce.easeOut, onComplete: goBall);
Før vi faktisk kan starte spillet må vi legge til interaktivitet til venstre og høyre vegger og ballen. La oss starte med spillerens padle. Opprett en ny klasse "Player.as" og legg til følgende kode.
pakke import flash.display.MovieClip; importer flash.events.MouseEvent; Public Class Player strekker MovieClip Public Function Player (): void stage.addEventListener (MouseEvent.MOUSE_MOVE, moveAlong); privat funksjon moveAlong (_e: MouseEvent): void var mousePos: Number = stage.mouseY - parent.y; hvis (mousePos < 0 ) y = 0; else if ( mousePos > 340) y = 340; ellers y = mousePos;
I konstruktøren (spillerfunksjonen) legger vi til en arrangementsliste på scenen for å sjekke når musen beveger seg og kaller funksjonen "moveAlong" når det gjøres. I funksjonen moveAlong beregner vi musens lokale posisjon (bare y-posisjonen siden vi bare beveger seg vertikalt). Deretter kontrollerer vi om musen går ut av grensen og nullstill posisjonen hvis den gjør det. Jeg fant 340 verdien ved prøve og feil siden "parent.height-height" returnerer ikke forventet verdi når vi bruker 3D-perspektiv.
Neste endre egenskapene til wallRight movieclip; sjekk "Export for ActionScript" og sett klassen til "Player". La "Base Class" være tom.
Å lage AI ligner veldig på å skape spilleren. Bare denne gangen vil vi få det til å bevege seg mot yverdien av ballen, men med litt lavere fart enn ballen. Opprett en annen klasse "AI.as":
pakke import flash.display.MovieClip; importere flash.events.Event; offentlig klasse AI utvider MovieClip offentlig funksjon AI (): void addEventListener (Event.ENTER_FRAME, followBall); privat funksjon followBall (_e: Event): void var ball: MovieClip = MovieClip (parent.parent) .ball; hvis (ball.xspeed || ball.yspeed) var newy: Nummer = ball.y - høyde; hvis (newy> 345) newy = 345; hvis (y <= newy ) y += 9; else y -= 9;
Først må vi kunne referere til ballen. Siden wallLeft-filmklippet er inne i "bg" movieclip, vil "foreldre" referere til "bg". Av denne grunn må vi bruke "parent.parent". Den første "if" -oppgaven sjekker om ballen har en x eller en yspeed. Dette er offentlige variabler av ballen vi skal sette senere. Tjekken forhindrer at AI flyttes før spillet starter. "Newy" -verdien holder yverdien av ballen minus høyden til wallLeft. Dette er verdien som den skal flytte for å slå ballen. Som før, endre klassen av wallLeft til "AI".
Kulen trenger mest funksjonalitet: den må bevege seg rundt, hoppe av vegger, se etter en hit med padlene og oppdatere sin egen dybde siden det ikke er et 3D-objekt.
pakke import flash.display.MovieClip; importere flash.events.Event; offentlig klasse Ball utvider MovieClip public var xspeed: Number = 0; offentlig var yspeed: tall = 0; offentlig funksjon Ball (): void offentlig funksjonstart (): void xspeed = -12; yspeed = 12; addEventListener (Event.ENTER_FRAME, moveBall); privat funksjon moveBall (_e: Event): void deep (); kollisjon(); x + = xspeed; y + = yspeed; privat funksjonsdybde (): void // Skal ballen basert på sin y-posisjon privat funksjonskollisjon (): void // Gjør ballen studs
Først gir vi ballen en x og yspeed. Disse er satt til offentlige, slik at vi kan sjekke fra andre gjenstander om ballen beveger seg. Deretter legger du til en "onenterframe" eventlistener til startfunksjonen. Når startfunksjonen kalles, vil ballen begynne å bevege hver ramme. Jeg ga ballen en starthastighet på 12 piksler per ramme. Du kan endre dette for å øke hastigheten på spillet, men du kan også opp framerate. MoveBall-funksjonen forhøyer faktisk x- og y-verdiene til ballen basert på x og yspeed. Det kaller også dybde- og kollisionsfunksjonene på hver ramme.
Fordi ballen ikke er et 3D-objekt og har ingen z-verdi, blir det ikke mindre når y-verdien endres. Jo høyere ballen kommer på skjermen (lav y-verdi), desto mindre skal den vises. Vi kan endre dette ved å bare skalere det basert på sin posisjon:
privat funksjonsdybde (): void var mindre: Number = ((y / stadium.stageHeight) * 0,6) + 0,6; skalaX = skalaY = mindre;
Kollisjonen-funksjonen bestemmer hvordan og når ballen vil sprette av andre objekter. I den første "if" -oppstillingen kontrollerer vi bare y-verdien for å finne ut om ballen treffer topp- eller bunnveggen. Igjen fant jeg disse verdiene etter prøve og feil, fordi ballen måtte hoppe ut på en troverdig måte. Hvis sjekken er sant, resulterer det i å endre yspeed slik at ballen endrer vertikal retning.
privat funksjonskollisjon (): void if (y> = 463 || y <= 105 ) yspeed *= -1;
Å sjekke x-grensene er ikke så lett på grunn av perspektivet og padlene som beveger seg rundt. Vi kan utføre en "hitTest" med veggene og sende ballen tilbake hvis det er sant. HitTests er litt cpu tunge, så det er best å ikke overuse dem. Men fordi vi har å gjøre med et enkelt pong spill, vil det ikke merkbart bremse spillet. Jeg har lagt til en ekstra sjekk skjønt; for å se om ballen er x-verdien på venstre eller høyre side av scenen og kontroller veggen tilsvarende. Dette sørger for at det bare er én hitTest som trengs per ramme i stedet for to.
hvis ((>> stage.stageWidth / 2 && hitTestObject (MovieClip (foreldre) .bg.wallRight)) || (x < stage.stageWidth / 2 && hitTestObject( MovieClip(parent).bg.wallLeft)) ) xspeed *= -1;
Til slutt må vi finne ut om ballen fortsatt er på plattformen. Vi kan finne ut ved å sjekke om et punkt på bunnen av ballen fortsatt er plassert på "gulvet". Det eksakte punktet har ballens x-verdi og y-pluss-radiusverdien. Hvis dette er sant, finner vi ut om ballen gikk av på venstre eller høyre side (igjen ved å sammenligne x-verdien til midten av skjermen) og oppdatere poengsummen. På slutten stiller du x- og y-verdiene av ballen tilbake til midten slik at spillet kan fortsette.
hvis (! MovieClip (foreldre) .bg.floor.hitTestPoint (x, y + (høyde / 2 * skalaY), sant)) hvis (x < stage.stageWidth / 2 ) MovieClip(parent).bg.scoreRight.text = Number(MovieClip(parent).bg.scoreRight.text) + 1; else MovieClip(parent).bg.scoreLeft.text = Number(MovieClip(parent).bg.scoreLeft.text) + 1; y = stage.stageHeight / 2; x = stage.stageWidth / 2;
Endre klassen av ballen til "ball".
Nå som vi har skapt både padler og ball, er alt som trengs for å sette spillet i aktion. Legg denne funksjonen til hovedklassen og kontroller at onComplete vi brukte i trinn 6, refererer til denne funksjonen.
privat funksjon goBall (): void ball.start ();
Etter at poenget er oppdatert, kommer ballen tilbake til midten og begynner å rulle igjen. Vi må animere ballen litt når vi kommer tilbake før spillet starter igjen.
Erstatt denne koden i kollisjonen til ballen:
y = scene.stageHeight / 2; x = stage.stageWidth / 2;
Av:
xspeed = yspeed = 0; removeEventListener (Event.ENTER_FRAME, moveBall); y = -høyde; x = stage.stageWidth / 2; var skala: Nummer = (0,5 * 0,6) + 0,6; ny TweenLite (denne, 1.5, y: scene.stageHeight / 2, scaleX: skala, skalaY: skala, letthet: Bounce.easeOut, onComplete: start);
Dette vil stoppe ballen fra å bevege seg først. Deretter setter den posisjonen til ballen rett over skjermen, men horisontalt sentrert. Hvis vi bruker funksjonen Bounce easing, vil det se ut som om ballen faller ned fra oven like før du starter spillet på nytt.
Jeg håper du kunne følge med uten for mange problemer. Spillet som det er nå er veldig grunnleggende og kan bruke noen forbedringer. Bollen, for eksempel, spretter alltid 90ш hjørner som gjør bevegelsen svært forutsigbar.
Hvis du vil ta det videre, kan du prøve å variere x og yspeed basert på hvor ballen treffer padleen (sammenlign y-verdiene). Kollisjonsdeteksjonen med padlene er ikke nær perfekt, men viser deg en grunnleggende måte å sjekke etter et treff. Til slutt, hvis du ikke brukte gradienter for veggene, vil du legge merke til at ballen ser ut til å rulle over bunnveggen i stedet for å forsvinne under den. For å fikse dette, kan du enkelt skille objekter som skal vises over ballen og plassere dem i en ny filmklipp som du forvrenger så mye som "bg" movieclip og ordne høyere enn ballen i Flash.
Accentsconagua