Share
Denne opplæringen vil gi deg et alternativ til 3D for racing-spill i ActionScript 3. Det er ikke nødvendig med eksternt rammeverk for dette gamle skolestileksemplet.
La oss se på det endelige resultatet vi vil jobbe for:
Opprett et nytt Flash-dokumentsett for ActionScript 3.0. Jeg bruker dimensjoner på 480x320px, en bildefrekvens på 30 FPS, og en lyseblå bakgrunn. Lagre filen med et valgfritt navn.
Foruten FLA, må vi også lage en dokumentklasse. Opprett en ny Actionscript-fil, og legg til denne koden:
pakke import flash.display.MovieClip; offentlig klasse Main utvider MovieClip offentlig funksjon Main ()
Lagre denne filen i samme katalog som vår FLA. Navn itjaMain.as.
For å kompilere koden fra Hoved klasse, må vi koble den med FLA. På thejaEiendommer panel av FLA, next toяKlasse, skriv inn navnet på dokumentklassen, i dette tilfellet, Hoved.
Deretter lagrer du endringene på FLA.
Vi må starte med en linje for å representere ett segment av veien. trykk R for å velge Rektangelverktøy. I dette eksemplet skal jeg lage et grått rektangel for selve veien, to små røde rektangler på hver kant av den grå, og grønne rektangler for å fylle resten av linjen. De grønne må være enda bredere enn scenen, jeg lager dem 1500 piksler bredt. Bredden på veien kan variere etter dine behov, jeg skal bruke en av 245px bred. Det er ikke nødvendig for dem å være veldig høye, siden vi bruker flere forekomster for å tegne hele veien på skjermen. Jeg skal gjøre dem 10px høye.
Når du har trukket alle rektanglene, velg dem alle (Ctrl + A) og trykk F8 å lage en filmklipp ut av de rektanglene du nettopp har laget. Gi den navnet "Road", kontroller at Registreringspunkt er i midten, og velg "Eksporter for ActionScript" -kryssruten.
Du vil ende opp med en Road MovieClip i biblioteket.
Det er opp til deg hvis du vil tegne hvert rektangel på forskjellige lag. Jeg skal bare sette den grå på et andre lag. Hvis du har noen Road-forekomst på scenen, må du slette den. Vi legger til Road MovieClip etter kode senere.
La oss komme tilbake til Hoved klasse. Vi skal bruke det Vei MovieClip å generere illusjonen av et racing spor.
Vi skal bestemme dybden på den synlige veien, samt dimensjoner av lekeområdet. Også i vår klasse, alle Vei forekomster som vi legger til scenen vil bli åpnet fra et Array. Vi bruker en annen Array (zMap) for å bestemme dybden for hver linje.
I dette eksemplet skal jeg sette inn en dybde på 150 vei 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, bruker jeg disse tallene).
// Dybde av synlig vei privat const roadLines: int = 150; // Dimensjoner av lekeområdet. privat const resX: int = 480; privat const resY: int = 320; // Linje av spillerens bil. privat const noScaleLine: int = 8; // Alle vei linjene vil bli åpnet fra et Array. privat var zMap: Array = []; private var linjer: Array = []; privat var halv bredde: tall; private var lineDepth: int; privat const widthStep: Number = 1;
Vi bruker alle tidligere variabler og konstanter inne i Hoved funksjon. Vi skaler hver linje i henhold til deres tilsvarende dybde.
offentlig funksjon Main () // Populere zMap med dybden på vei linjene for (var i: int = 0; i < roadLines; i++) zMap.push(1 / (i - resY / 2)); //We want the line at the bottom to be in front of the rest, //so we'll add every line at the same position, bottom first. lineDepth = numChildren; for (i = 0; i < roadLines; i++) var line = new Road(); lines.push(line); addChildAt(line, lineDepth); line.x = resX / 2; line.y = resY - i; //Scaling the road lines according to their position halfWidth = resX / 2; for (i = 0; i < roadLines; i++) lines[i].scaleX = halfWidth / 60 - 1.2; halfWidth -= widthStep;
Hvis du publisere (Ctrl + Enter) dokumentet på dette punktet får du en oversikt over en rett vei.
Du kan spille rundt med skaleringsberegningene for å få forskjellige resultater. Du vil kanskje ha en bredere vei eller en lengre visning avstand.
Akkurat nå ser veien ut så flatt at du ikke vil kunne fortelle om vi går videre. Vi trenger minst to forskjellige stilarter for å skille mellom hvor fort eller hvor langsom vi beveger oss.
Gå til Bibliotek panelet og dobbeltklikk på Vei MovieClip for å komme tilbake til rektanglene du trakk. Trykk nå 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å den første rammen, kan du endre fargene på rektanglene eller endre designen på en eller annen måte. Jeg endrer fargen sin og legger til noen lane linjer til den andre rammen.
Vi skal definere en ny variabel i Hoved klassen for å opprettholde konsistens på spillerens linje (forutsatt at det kommer en bil i spillet, skal vi holde skaleringen til 1 på den linjen)
privat var spillerZ: nummer;
Deretter vil vi modifisere Hoved funksjon.
Denne variabelen vil bli brukt i Hoved funksjon. Nå Vei linjer vil bli segmentert, noen vil vise den andre rammen og resten vil vise den første rammen, forbedre illusjonen av et racerbane.
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 line = new Road(); lines.push(line); addChildAt(line, 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); ellers linjer [i] .gotoAndStop (2); linjer [i] .scaleX = halfWidth / 60 - 1.2; halfWidth - = widthStep;
Det kan ikke være nødvendig å multiplisere med 100 for å få segmentene riktig, men disse er tallene jeg skal bruke i dette eksempelet, du er ledig til å endre tallene til din smak (og hvis du skruer noe opp, har du dette som referanse).
La oss begynne å gjøre ting flytte. Vi skal sette en variabel for fart. Dette vil indikere dybden vi vil gå etter ramme. Jeg skal begynne med en hastighet på 20, du kan bruke hvilket som helst nummer du vil ha.
Vi trenger også en indikator for veisegmentene, som vil endre seg etter hastigheten.
privat varhastighet: int = 20; privat var texOffset: int = 100;
Før vi kan gjøre noe med disse variablene, må vi importere en ny hendelse til denne klassen. Vi kunne bruke enten en Timer eller en EnterFrame. I dette eksemplet bruker jeg EnterFrame Event.
importere flash.events.Event;
Deretter skal vi kutte den siste betingelsen i Hoved() fungere og flytte den til en ny funksjon vi lager. Denne nye funksjonen blir utløst av EnterFrame Event, slik at vi får kontinuerlig bevegelse på veien. La oss kalle det løp().
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 line = new Road(); lines.push(line); addChildAt(line, lineDepth); line.x = resX / 2; line.y = resY - i; halfWidth = resX / 2; for (i = 0; i < roadLines; i++) lines[i].scaleX = halfWidth / 60 - 1.2; halfWidth -= widthStep; addEventListener(Event.ENTER_FRAME, race);
La oss nå bringe tilbake betingelsene som ble avskåret til den nye funksjonen, slik at vi får bevegelse. De texOffset vil peke posisjonen til veien for å holde en nøyaktig illusjon av bevegelse.
privat funksjonsløp (hendelse: hendelse): void for (var i: int = 0; i < roadLines; i++) if ((zMap[i] + texOffset) % 100 > 50) linjer [i] .gotoAndStop (1); ellers linjer [i] .gotoAndStop (2); texOffset = texOffset + hastighet; mens (texOffset> = 100) texOffset - = 100;
Hvis du publisere Dette nå, bør du få en animert vei.
Gjerningsmessige rette veier er kjedelige, og det er tusenvis av måter å lage et perspektiv som bare går framover. La oss nå legge til nye variabler for å ta vare på kurvene mens de er i bevegelse.
I dette eksemplet vil jeg være alternerende kurver til høyre med rette seksjoner. Veien fremover vil bli lagret i nextStretch variabel. Også, vi vil flytte linjene ' x posisjon på kurvene.
privat var rx: nummer; // Hver linje er x posisjon privat var dx: Nummer; // Kurvebeløp per segment privat var ddx: Antall = 0,02; // Kurvebeløp per linje privat var segmentY: int = roadLines; private var nextStretch = "Straight";
De rx variabel vil lagre x posisjonen til hver linje, så vi vil at den skal starte i midten og ta kurvene derfra. Også, DDX styrer kurvens skarphet. I dette eksemplet har jeg det på 0,02; du vil kanskje variere verdien mellom kurver. Slik er det nye løp() funksjonen vil se ut:
privat funksjon løp (hendelse: hendelse): void rx = resX / 2; dx = 0; for (var jeg: int = 0; i < roadLines; i++) if ((zMap[i] + texOffset) % 100 > 50) linjer [i] .gotoAndStop (1); ellers linjer [i] .gotoAndStop (2); linjer [i] .x = rx; hvis (nextStretch == "Straight") hvis (i> = segmentY) dx + = ddx; ellers dx - = ddx / 64; // Reverts jevnt fra en kurve til en rett del. annet hvis (nextStretch == "Curved") hvis (i <= segmentY) dx += ddx; else dx -= ddx / 64; rx += dx; texOffset = texOffset + speed; while (texOffset >= 100) texOffset - = 100; segmentY - = 1; mens (segmentY < 0) segmentY += roadLines; if (nextStretch == "Curved") nextStretch = "Straight"; else nextStretch = "Curved";
Denne gangen vil vi ikke røre ved Hoved funksjon. Hvis du publisere Nå skal du få noe slikt:
Du vil kanskje endre kurveverdien for venstre og høyre og endre styringsverdiene. På dette tidspunktet bør du allerede kunne legge til en bil på scenen og kontrollere hastigheten manuelt.
Husk rektanglene for veien er mer enn 1 pixel høy? Det kan hjelpe oss med å strekke veibeskrivelsen dersom vi vil ha åser i spillet vårt.
Det er en metode for å lage åser som ligner på å lage kurver. Det kan være mange forskjellige metoder, men dette er det jeg skal bruke her. For enkelhet, vil jeg resirkulere så mye av koden vi allerede har og bare legge til noen linjer for denne nye effekten. Som vanlig, hvis du ikke liker resultatene, kan du endre verdiene etter vilje.
Vi har nettopp laget variabler for x posisjoner av vei linjene, la oss nå gjøre det for y stillinger også.
privat var ry: nummer; privat var dy: nummer; privat var ddy: tall = 0,01; // Litt mindre bratt enn kurvene.
For enkelhet, i dette eksempelet skal jeg bruke de samme rette segmentene for både en rett oppoverbakkeffekt og kurver for både en kurve og en nedoverbakkeffekt.
privat funksjon løp (hendelse: hendelse): void rx = resX / 2; ry = resY; dx = 0; dy = 0; for (var jeg: int = 0; i < roadLines; i++) if ((zMap[i] + texOffset) % 100 > 50) linjer [i] .gotoAndStop (1); ellers linjer [i] .gotoAndStop (2); linjer [i] .x = rx; linjer [i] .y = ry; hvis (nextStretch == "Straight") hvis (i> = segmentY) dx + = ddx; dy - = ddy; ellers dx - = ddx / 64; dy + = ddy; annet hvis (nextStretch == "Curved") hvis (i <= segmentY) dx += ddx; dy -= ddy; else dx -= ddx / 64; dy += ddy; rx += dx; ry += dy - 1; texOffset = texOffset + speed; while (texOffset >= 100) texOffset - = 100; segmentY - = 1; mens (segmentY < 0) segmentY += roadLines; if (nextStretch == "Curved") nextStretch = "Straight"; else nextStretch = "Curved";
I spillet ditt bør du skille kurver fra åsene og lage to forskjellige algoritmer, men dette eksempelet viser hvordan de kan være like.
Gamle skolen spill kunne ikke dra nytte av Flash, men vi kan. Noe så enkelt som å legge en gradient til vei linjene vil gjøre en fin forskjell. Hvis du vil, kan du bruke noen filtre og teksturer du liker, men i dette eksemplet legger jeg bare noen enkle gradienter, så la oss komme tilbake til Vei Filmklipp.
På rammen 1 velger du det grå rektangelet, deretter går du til fargepanelet og velger Lineær gradient fra rullegardinmenyen, og velg deretter Reflektere farge som Flow, så gradienten vil fortsette frem og tilbake fra første til siste farge. Jeg forteller deg ikke å velge de samme fargene som jeg gjør, men jeg bruker # 666666 og # 999999 her. Hvis du trenger å rotere graden, trykker du på F å bytte til Gradient Transform Tool, som lar deg flytte, rotere og endre størrelsen på gradienten. I dette tilfellet beveger jeg gradienten til en fjerdedel av rektangelet, og resizing den til halvparten av rektanglet, slik at senteret blir lettere og kantene blir mørkere. Jeg bruker en tilsvarende størrelse for den grønne delen, så den endres fra mørkegrønn (# 006600) til lysegrønn (# 009900) kontinuerlig.
Nå går du til ramme 2 og lager nye gradienter med forskjellige farger. For det grå rektangelet holdt jeg lysere farge og endret bare den mørkere fargen til # 777777. På den grønne delen endret jeg størrelsen på gradienten for å prøve å unngå et sjakkbrettutseende, og endringen av farger var veldig subtil (# 007700 og # 008800).
Kanskje nå vil du legge til en fin bakgrunn i horisonten, eller noe grafikk for himmelen.
Enten du har kort ressurs for 3D-rammer eller du bare vil gå på grunnskolen, har du nå et enkelt eksempel på hvordan du får en illusjon av dybde for et racing spill. Nå er det opp til deg om det skal være en motorsykkel Grand Prix, eller et gateløp på en motorvei full av trafikk, eller kanskje noe som ikke er relatert til racing.
Jeg håper du har funnet denne opplæringen nyttig. Takk for at du leste!
Accentsconagua