Create et bilspill Uten 3D Engine
11
Del
8
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Denne opplæringen vil gi deg et alternativ til 3D for racing spill i Actionscript 3. Ingen ytre rammene er nødvendig for denne old-school stil eksempel.
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Sett opp FLA Document
< p> Opprett en ny Flash-dokument sett for Actionscript 3.0. Jeg skal bruke dimensjonene i 480x320px, en bildefrekvens på 30 FPS, og en lyseblå bakgrunn. Lagre filen med et navn du velger
Trinn 2:. Opprett et dokument Class
I tillegg til FLA, trenger vi også å opprette et dokument klasse. Opprett en ny Actionscript-fil, og legg denne koden:
pakke {import flash.display.MovieClip; public class Hoved strekker MovieClip {offentlig funksjon main () {}}}
Lagre denne filen i samme katalog som vår FLA. Name it Main.as For å kompilere koden fra Hovedanmeldelser klasse, trenger vi å koble den med FLA. På Egenskaper Deretter lagrer du endringene på FLA Vi må begynne med en linje for å representere ett segment av veien. Trykk R Når du har trukket alle rektangler, velg dem alle ( Ctrl + En Du vil ende opp med en Road MovieClip i Bibliotek. Det er opp til deg om du vil tegne hvert rektangel på forskjellige lag. Jeg kommer bare til å sette grå en på et annet lag. Hvis du har noen Road eksempel på scenen, må du slette den. Vi skal legge til Road MovieClip av koden senere La oss komme tilbake til Hovedanmeldelser klasse. Vi kommer til å bruke det Road Vi kommer til å bestemme dybden av det synlige veien, samt dimensjoner av stykket område. Også i vår klasse, all den Vei- I dette eksempelet, jeg skal sette en dybde på 150 veien linjer i et 480x320 lekeområde (det er ikke nødvendig å være den samme størrelsen på scenen, men siden det er alt som kommer til å bli vist, vil jeg bruke disse tallene) Vi skal bruke alle de tidligere variabler og konstanter inne i Hovedanmeldelser funksjon. Vi kommer til å skalere hver linje i henhold til deres tilsvarende dybde Hvis du Publiser plakater (Ctrl + Enter) dokumentet på dette punktet får du en visning av en rett vei. Du kan spille rundt med skalerings beregninger til får forskjellige resultater. Du ønsker kanskje en bredere vei eller et lengre syn avstand Akkurat nå veien ser så flat at du ikke ville være i stand til å fortelle hvis vi går fremover. Vi trenger minst to forskjellige stiler av segment å skille hvor fort eller hvor sakte vi flytter. Gå til Bibliotek Vi kommer til å definere en ny variabel i Hovedanmeldelser klasse å opprettholde konsistens på spillerens linje (forutsatt at det vil være en bil i spillet, vi kommer til å holde skalering til 1 på denne linjen) Deretter vil vi endre Hoved Denne variabelen vil bli brukt i Hovedanmeldelser funksjon. Nå Vei- Det er kanskje ikke nødvendig å multiplisere med 100 for å få segmentene riktig, men disse er de tallene jeg skal bruke i dette eksemplet, er du fritt til å endre tallene til din smak (og hvis du skru noe opp, har du dette som en referanse) La oss begynne å gjøre ting flytte. Vi kommer til å sette en variabel for fart. Dette vil indikere dybden vi vil gå videre med ramme. Jeg kommer til å starte med en hastighet på 20, du kan bruke så mange du vil. Vi trenger også en indikator for veisegmentene, som vil endres i henhold til hastigheten. Før vi kan gjøre noe med disse variablene, må vi importere en ny hendelse i denne klassen . Vi kunne enten bruke en tidtaker eller en enterframe. I dette eksempelet vil jeg skal bruke enterframe Hendelses Deretter kommer vi til å kutte den siste betinget i Main () -funksjonen og flytte den til en ny funksjon vi ? re skape. Denne nye funksjonen vil bli utløst av enterframe Event, så vi får kontinuerlig bevegelse på veien. . La oss kalle det rase () Nå la oss få tilbake den betingede som ble kuttet til den nye funksjonen, slik at vi får bevegelse. texOffset Hvis du Publiser stadig rette veier er kjedelig og det er tusenvis av måter å gjøre et perspektiv går bare fremover. Nå la oss legge til noen nye variabler å ta vare på kurvene mens i bevegelse. I dette eksempelet jeg skal alternerende kurvene til høyre med rette deler. Veien videre vil bli lagret i nextStretch rx Denne gangen vil vi ikke berøre Hovedanmeldelser funksjon. Hvis du Publiser Du vil kanskje endre Curve verdi for Venstre og Høyre, og endre styre verdier. På dette punktet bør du allerede være i stand til å legge en bil til åstedet og kontrollere hastigheten manuelt Husk rektanglene for veien er mer enn en pixel høy? Som kan hjelpe oss strekke veien visningen i tilfelle vi ønsker åser i spillet vårt. Det er en metode for å lage åser som er svært lik lage kurver. Det kan være mange forskjellige metoder, men dette er den jeg skal bruke her. For enkelhets skyld, vil jeg være å resirkulere så mye av koden vi allerede har, og bare legge til noen linjer for denne nye effekt. Som vanlig, hvis du ikke liker de resultatene du kan endre verdiene på vilje. Vi gjorde bare variabler for x For enkelhets skyld, i dette eksempelet jeg kommer til å bruke de samme rette segmenter for både en rett en oppoverbakke effekt, og kurvene for både en kurve og en nedoverbakke effekt I spillet du bør skille kurvene fra åsene og lage to forskjellige algoritmer, men dette eksempelet viser hvor like de kan være Old-school spill kunne ikke dra nytte av Flash, men vi kan. Noe så enkelt som å legge en gradient i veien linjer vil gjøre en fin forskjell. Hvis du vil, kan du bruke noen filtre og teksturer du liker, men i dette eksempelet jeg bare legge noen enkle stigninger, så la oss komme tilbake til Road På ramme 1, velger grått rektangel, deretter gå til fargepanelet og velger Lineær Gradient Nå gå til ramme 2 og få nye graderinger med forskjellige farger. For den grå rektangel, jeg holdt lysere farge og bare endret mørkere farge til # 777777. På den grønne delen, jeg endret størrelsen på gradienten å prøve å unngå et rute utseende, og endringen av farger var veldig subtil (# 007700 og # 008800). Kanskje nå vil du ønsker å legge til en fin bakgrunn på horisonten, eller noen grafisk for himmelen. Enten du er lite ressurser for 3D-rammeverk, eller du bare ønsker å gå gamle skolen, nå har du et enkelt eksempel på hvordan å lage en illusjon av dybde for et racingspill. Nå er det opp til deg om det vil være en motorsykkel Grand Prix, eller et gateløp på en motorvei full av trafikk, eller kanskje noe ikke er relatert til racing. Jeg håper du har funnet denne opplæringen nyttig. Takk for lesing!
Trinn 3:. Link Hovedanmeldelser Class med FLA
panelet til FLA, ved siden av Class
, skriv inn navnet på dokumentet klassen, i dette tilfellet, Hoved
.
Trinn 4:. Tegn en veglinjen
å velge rektangelverktøyet
. I dette eksempelet jeg kommer til å gjøre en grå firkant for veien selv, to små røde rektangler på hver kant av grå og grønne rektangler å fylle resten av linjen. De grønne må være enda større enn den scenen, jeg gjør dem 1500 piksler bred. Bredden på veien kan variere dine behov, jeg skal bruke en av 245px bred. Det er ikke nødvendig for dem å være svært høy, siden vi skal bruke flere tilfeller å trekke hele veien på skjermen. Jeg skal gjøre dem 10px høy
Trinn 5:. Lag en MovieClip for veien Lines
), og trykk på F8
å skape et filmklipp av disse rektangler du nettopp laget. Name it "Road", sørg for at den Registrering Point
er i sentrum, og velg "Export for Action" boksen.
Trinn 6:. Sett opp lekeområdet
MovieClip å generere en illusjon av en bilbane.
tilfeller at vi legger til scenen vil nås fra en Array. Vi vil bruke en annen Array ( zMap
) å bestemme hver linje dybde.
//Dybde av de synlige roadprivate const roadLines. int = 150; //Dimensjoner på spille area.private konst resX: int = 480; privat konst Resy: int = 320; //Line of spillerens car.private konst noScaleLine: int = 8; //Alle trafikanter linjene vil nås fra en Array.private Div zMap: Array = []; private Var linjer: Array = []; privat Var halfWidth: nummer, private Var lineDepth: int; privat konst widthStep: Number = 1;
Trinn 7: Vise veien ved Kode
offentlig funksjon main () {//Fylle zMap med dybden av veien linjer for. (Var i: int = 0; i < roadLines; i ++) {zMap.push (1 /(i - Resy /2)); } //Vi vil at linjen nederst for å være foran resten, //så vil vi legge til hver linje i samme posisjon, bunnen først. lineDepth = numChildren; for (i = 0; i < roadLines; i ++) {var linje = new Road (); lines.push (linje); addChildAt (linje, lineDepth); line.x = resX /2; line.y = Resy - i; } //Skalering veien linjer i henhold til deres posisjon halfWidth = resX /2; for (i = 0; i < roadLines; i ++) {linjer [i] .scaleX = halfWidth /60 - 1,2; halfWidth - = widthStep; }}
Trinn 8:. Lag en Second Road Grafisk
panel og dobbeltklikk på Road Anmeldelser MovieClip å komme tilbake til rektanglene du tegnet. Nå trykker F6
å sette inn en ny Keyframe (hvis du har mer enn ett lag kan det være lurt å sette inn en ny Keyframe på hvert lag). Nå, basert på det første bildet, kan du endre fargene på rektangler eller endre sine design på noen måte. Jeg skal endre deres farger og legge noen kjørefelt linjer til den andre rammen
Trinn 9:. Hold Player linje fra Skalering
privat Var playerZ: Antall .;
funksjon
Trinn 10: Legg Alternerende Lines til veien
linjer vil bli segmentert, noen vil være å vise den andre rammen, og resten vil være viser den første rammen, styrke illusjonen av en bilbane.
Offentlig funksjon main () {for ( Var i: int = 0; i < roadLines; i ++) {zMap.push (1 /(i - Resy /2)); } PlayerZ = 100 /zMap [noScaleLine]; for (i = 0; i < roadLines; i ++) {zMap [i] * = playerZ; } LineDepth = numChildren; for (i = 0; i < roadLines; i ++) {var linje = new Road (); lines.push (linje); addChildAt (linje, lineDepth); line.x = resX /2; line.y = Resy - i; } HalfWidth = resX /2; for (i = 0; i < roadLines; i ++) {if (zMap [i]% 100 > 50) linjer [i] .gotoAndStop (1); annet linjer [i] .gotoAndStop (2); linjer [i] .scaleX = halfWidth /60 - 1,2; halfWidth - = widthStep; }}
Trinn 11:. Sett opp en hastighet og en offset
Private Var fart : int = 20; privat Var texOffset: int = 100;
Trinn 12: Begynn Moving Forward
import flash.events.Event;.
offentlig funksjon main () {for (var i: int = 0; i < roadLines; i ++) {zMap.push (1 /(i - Resy /2)); } PlayerZ = 100 /zMap [noScaleLine]; for (i = 0; i < roadLines; i ++) {zMap [i] * = playerZ; } LineDepth = numChildren; for (i = 0; i < roadLines; i ++) {var linje = new Road (); lines.push (linje); addChildAt (linje, lineDepth); line.x = resX /2; line.y = Resy - i; } HalfWidth = resX /2; for (i = 0; i < roadLines; i ++) {linjer [i] .scaleX = halfWidth /60 - 1,2; halfWidth - = widthStep; } AddEventListener (Event.ENTER_FRAME, rase);}
Trinn 13: Definer en Race Funksjon
vil peke posisjonen av veien for å holde en nøyaktig illusjon av bevegelse
privat funksjon rase (hendelse: Hendelse): void {for (var i:. Int = 0, jeg < roadLines; i ++) {if ((zMap [i] + texOffset)% 100 > 50) linjer [i] .gotoAndStop (1); annet linjer [i] .gotoAndStop (2); } TexOffset = texOffset + hastighet; while (texOffset > = 100) {texOffset - = 100; }}
dette nå, du bør få en animert veien
Trinn 14:. Steering
variabel. Dessuten vil vi flytte linjene ' x
stilling ved kurvene
private Var rx. Antall; //Hver linje er x positionprivate Var dx: Number; //Curve beløp per segmentprivate Var DDX: Number = 0.02; //Curve beløp per lineprivate Var segmentY: int = roadLines; private Var nextStretch = "Straight";
Trinn 15: legge kurver til veien
variabel lagrer x
plasseringen av hver linje, så vi vil den skal starte i sentrum og ta svingene derfra. Dessuten styrer DDX skarpheten av kurvene. I dette eksempelet vil jeg ha den på 0,02; kan det være lurt å variere sin verdi mellom kurvene. Dette er hvordan den nye race () -funksjonen vil se:
privat funksjon rase (hendelse: Hendelse): void {rx = resX /2; dx = 0; for (var i: int = 0; i < roadLines; i ++) {if ((zMap [i] + texOffset)% 100 > 50) linjer [i] .gotoAndStop (1); annet linjer [i] .gotoAndStop (2); linjer [i] .x = rx; if (nextStretch == "Straight") {if (i > = segmentY) dx + = DDX; annet dx - = DDX /64; //Går tilbake jevnt fra en kurve til en rett del. } Else if (nextStretch == "Curved") {if (i < = segmentY) dx + = DDX; annet dx - = DDX /64; } Rx + = dx; } TexOffset = texOffset + hastighet; while (texOffset > = 100) {texOffset - = 100; } SegmentY - = 1; while (segmentY < 0) {segmentY + = roadLines; if (nextStretch == "Curved") nextStretch = "Straight"; annet nextStretch = "Curved"; }}
det nå du bør få noe sånt som dette:
Trinn 16:. Hills, Slopes
posisjoner av veien linjer, nå la oss gjøre de for y
stillinger samt
private Var ry: Number; private Var dy. nummer, private Var ddy: Number = 0,01; //Litt mindre bratt enn kurvene
Trinn 17:. Downhill, Uphill
privat funksjon rase (hendelse: Hendelse):. void {rx = resX /2; ry = Resy; dx = 0; dy = 0; for (var i: int = 0; i < roadLines; i ++) {if ((zMap [i] + texOffset)% 100 > 50) linjer [i] .gotoAndStop (1); annet linjer [i] .gotoAndStop (2); linjer [i] .x = rx; linjer [i] .Y = ry; if (nextStretch == "Straight") {if (i > = segmentY) {dx + = DDX; dy - = ddy; } Else {dx - = DDX /64; dy + = ddy; }} Else if (nextStretch == "Curved") {if (i < = segmentY) {dx + = DDX; dy - = ddy; } Else {dx - = DDX /64; dy + = ddy; }} Rx + = dx; ry + = dy - 1; } TexOffset = texOffset + hastighet; while (texOffset > = 100) {texOffset - = 100; } SegmentY - = 1; while (segmentY < 0) {segmentY + = roadLines; if (nextStretch == "Curved") nextStretch = "Straight"; annet nextStretch = "Curved"; }}
Trinn 18:. Forbedre Aesthetics of the Road
MovieClip.
fra rullegardinmenyen, og velg deretter Nødvendigvis farge
som Flow, så gradienten vil fortsette tilbake frem og tilbake fra den første til den siste fargen. Jeg er ikke fortelle deg å velge de samme fargene som jeg gjør, men jeg skal bruke # 666666 og # 999999 her. Hvis du trenger å rotere gradient, trykker du F
bytte til Gradient Transform Tool, som lar deg flytte, rotere og endre størrelsen på gradient. I dette tilfellet er jeg bevege gradienten til en fjerdedel av rektangelet, og skalere den til halvparten av størrelsen av rektangelet, slik at senter vil være lettere og kantene vil bli mørkere. Jeg bruker en lignende størrelse for den grønne delen, så det kommer til å endre fra mørk grønn (# 006600) til lys grønn (# 009900) kontinuerlig.
Konklusjon