Søknader om Tile Motorer i Flash Game Design

Applications for Tile Motorer i Flash Game Design
Del
Del
Del
Del

Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Hvordan flis motorer forenkle spilldesignprosessen og hvordan du bruker dem til forskjellige spilltyper.

Vi fant denne awesome forfatteren takket FlashGameLicense.com, stedet å kjøpe og selge Flash spill




Endelig resultat Forhåndsvisning

La oss ta en titt på det endelige resultatet vi skal jobbe mot:

flytte musen til å gjøre det lille torget gå mot den, og klikk for å gjøre det hoppe. Hit plass til å endre flis for tiden under markøren



Innledning:. Hva er Fliser

Den enkleste måten å beskrive fliser er å vise deg bilder fra spill som har brukt dem i? forbi. Dette er en del av et skjermbilde fra The Legend of Zelda:

Når du ser på eldre spill, du kan se at mye av kunsten i spillet er gjenbrukt. Det samme treet vises to ganger, de samme steinene vises to ganger, er det vill gress der tre ganger på skjermen, og gjerdet er sett fire ganger. Og alle kunst er perfekt justert til et rutenett. Hver og en av de små firkantene i rutenettet jeg trakk over denne skjermbilde er en brikke.

I stedet for å gjøre hvert nivå individuelt fra grunnen av, folk som utformet den Legend of Zelda besluttet å sette spillet på et rutenett. Deretter festet de forhåndslagde kunst til at rutenettet. Denne metoden har en rekke fordeler i spilldesign.



Trinn 1: Hvilke fordeler har fliser

De fleste nybegynnere som bruker Flash vet ikke mye om flis baserte metoder og hvilke fordeler de gir designere. Mange Flash spill ut i dag bruker en kunstbasert metode. De trekker hvert bakgrunn og objekt for hånd, noe som kan være tidkrevende. Da hitTest () funksjoner i Flash brukes for kollisjoner. Det er ikke noe iboende galt med å gjøre dette, men i mange situasjoner fliser trumf kunsten basert metode.

Som tidligere sagt, tegning ting om og om igjen kan være tidkrevende. Fliser tillate deg å raskt bygge nivåer, og de tar noe av belastningen av level design bort fra den som er å designe kunst for spillet. Fliser har også kapasitet til å øke spillets hastighet. Den hitTest () metoden ikke er særlig effektiv. Den sjekker for å sørge for at vektorer av to objekter er ikke rørende, og oppdager kollisjoner på denne måten tar lang tid. En eller to hitTests vil ikke forsinke spillet ned, men når du trenger til hundrevis av kollisjon påvisninger et sekund, er det flis metoden mye raskere. Med fliser trenger du bare å sjekke poeng mot et rutenett. Dette er mindre nøyaktig (er du ikke lenger kontrollere de individuelle piksler eller linjer av figurene mot hverandre), men i mange situasjoner sjekke kollisjoner mot et rutenett fungerer helt fint



Trinn 2:. Forstå 2D Arrays

Arrays er ganske enkle gjenstander i Actionscript. La oss begynne med å gjøre vår Document klasse, (som vil bli kalt Hoved
) og skape en 2D array.
pakke {import flash.display.Sprite; import flash.display.MovieClip; public class Hoved strekker MovieClip {public Var gameLay: Array = [[1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0, 0,0,1], [1,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,1,0,0,0,1] [1,1,1,1,1,1,1,1,1,1]] offentlig funksjon main (): void {if (scene) {init (); } Else {addEventListener (Event.ADDED_TO_STAGE, init); }} Privat funksjon init (e: Hendelses = null): void {}}}

(Hvis du er usikker på hvordan du skal bruke et dokument klasse, sjekk ut denne rask introduksjon til dem Du bør også ta en titt på. Dru Kepple er AS3 101: Arrays hvis du trenger en klarere idé om hva arrays er)

Vi bruker init () metoden for å sørge for at konstruktøren ikke kjører før dokumentet klassen er instansiert.. Jeg bare synes det å være god form når koding.

Mens en 1D matrise er bare en linje av data, er en 2D matrise en matrise som inneholder flere arrays. Dette gir oss muligheten til å gjøre gameLay
vår "kart". Når vi begynner å generere fliser på skjermen, vil de vises på den måten at gameLay
ser.



Trinn 3: Forstå Tile data

2D matrise kommer til å være vår "kart". Men akkurat nå, har bare kartet vårt to tallene i det: 1 og 0. Når vi begynne å generere visuelle, vil 1s blir fast grunn (svarte firkantene i demoen ovenfor), og 0-er vil være tom plass. For denne opplæringen, vi trenger bare å ha tre forskjellige tall for å snakke om bakken. (Solid, tom, og vi vil introdusere en tredje senere å lagre spillerens posisjon.) Hvis vi går tilbake og ser på Zelda skjermbilde, kan du se at det må være minst 10 + fliser i at en skjerm alene .

Nå den åpenbare løsningen ville være å legge til flere numre, men det er flere ting å tenke på. Sammenlagt i Zelda spillet, det må være minst 100 flere brikker så hva som vises på skjermen på det ene punktet i tid. Hva profesjonelle designere gjøre er å bestemme å endre måten data blir tolket, heller da har unike data for hver enkelt gjenstand. De endrer tilesets
heller da å endre hver flis - så en 7 kan bety gress i ett område av spillet, og vann i en annen. Vi vil ikke gå for i dybden med dette i øyeblikket, men det er noe å tenke på



Trinn 4:. Opprette Basic Tile

Åpne Flash og starte en ny AS3 dokument - sørg for at dokumentet klassen er satt til Hoved
. Pass også på at FLA og klasse er i samme mappe. Men det er noe du bør vite om før du starter denne opplæringen.

Ok, så dokumentet bør være 600x300. Når vi ser tilbake, gameLay
som opptrer som vår "kart" er 10x5. Hvis vi ønsker hver flis å være av samme størrelse, og flisene å fylle opp skjermen helt, må vi gjøre hver flis (600/10) Bredde og (300/5) Høyde. Så 60x60px er hvor stort vi trenger hver av våre fliser til å være.

La oss lage en stor svart firkant som er 60x60 og gi den en klasse navn Fliser
(med en kapital T
, i motsetning til skjermbilde). Det er viktig å orientere den til øverst til venstre på MovieClip (se den lille svarte firkanten i "Registrering"):

Når du gjør MovieClip, sørg for at det første bildet av Fliser Anmeldelser er blank, og at den andre rammen inneholder den svarte firkanten



Trinn 5:. Genererer Tile Graphics

OK, på dette punktet har vi flis kartdata vi gjorde i trinn 2 . Nå må vi gå gjennom og tolke disse dataene, og spytte ut noe som vi kan bruke til å sette brikkene på skjermen. For å gjøre det enklere vi kommer til å bygge en funksjon som vil legge fliser på skjermen basert på dataene i tabellen. Denne funksjonen hører hjemme i Hoved
, dokument klasse:
offentlig funksjon buildLevel (s: Array) {if (! GetChildByName ("tileHolder") = null) {removeChild (getChildByName ("tileHolder")); } Var fliser: MovieClip = new MovieClip (); tiles.name = "tileHolder"; for (var i = 0; i < s [0] .length; i ++) {for (var o = 0; o < s.length; o ++) {var currentTile: Fliser = nye fliser (); currentTile.x = i * 60; currentTile.y = o * 60; currentTile.name = i + "-" + o; tiles.addChild (currentTile); currentTile.gotoAndStop (int (s [o] [i]) + 1); }} AddChild (fliser);}

Vi brukte en nestet sløyfe for å gå gjennom hver matrise element. En tom filmklipp, kalt "fliser" i koden, men gitt navnet "tileHolder", brukes til å holde flisene slik at vi kan fjerne dem fra skjermen eller flytte dem lett. currentTile
tilføyes dette fliser
klipp. Vi forteller currentTile
å gå til rammen er spesifisert av array element. Fordi vi bruker 0,1 i våre fliser data, må vi legge en til nummeret i selve array å sørge for at steinene stopper på rammer 1 og 2. Nå selv om vi bygget denne funksjonen, trenger vi fremdeles å kalle det for at det skal fungere
privat funksjon init (e: Hendelses = null). void {buildLevel (gameLay);}

Og her er hvordan det skal se ut når vi eksporterer det. Eventuelle endringer du gjør i gameLay ()
rekke gjenspeiles i hva som skjer når du eksporterer. Hvis vi hadde flere elementer, kunne vi lett fortelle buildLevel funksjonen for å endre hva du skal gyte basert på hva dukket opp i tabellen.

Ha en gå på å endre oppsettet av nivået ved å endre gameLay array.



Trinn 6: Å ødelegge Tile Graphics

I punkter, må du fjerne alle brikkene på skjermen. Selv om du endrer ting på skjermen vil ikke endre flisen data selv, vi trenger fortsatt å fjerne grafikk. Fordi vi pakket våre grafikk i vår fliser
klipp, kan vi fjerne dem lett. Faktisk funksjonen ovenfor fjerner flisene selv
if (getChildByName ("tileHolder") = null) {removeChild (getChildByName ("tileHolder"));} Var fliser:. MovieClip = nye MovieClip (); fliser. name = "tileHolder";

Dette er et tekstutdrag fra buildLevel ()
funksjon, som du allerede har skrevet. Jeg ga fliser
navnet "tileHolder" fordi det er enklere måte å referere til den i visningslisten. Funksjonskontroller buildLevel
for å se om det allerede finnes en forekomst av "tileHolder" på skjermen, og hvis det er der, fjerner den det. Så det går på å lage en ny fliser
klipp for å holde den neste runden av grafikk. Vi kan dele dette inn i to ulike funksjoner, en for ødeleggelse og én for nivå skaperverket, men for nå er det best å holde ting kompakt



Trinn 7:. Lag og eksport Player Graphics

Ok, så vi har flis grafikk på plass og vi kan endre dataene og se den. Men hvordan får vi noe å samhandle med envirnoment? Først må vi lage en spiller
klipp. Vi kommer til å gjøre det 10x10, og eksportere den med en klasse navnet "player"

Ta gjerne tegne noe annet enn en boks



Trinn 7:.! Lage Spiller Class

Vi må gjøre en klasse for vår spiller
. Vi vil holde funksjonene tomme for nå og utvide dem senere. Hvis du ser vil du se at vi ikke har skapt en ENTER_FRAME hendelse. Jeg synes at det er best å gjøre bare én ENTER_FRAME, og kaller funksjoner på andre objekter for hva vi ønsker å være ENTER_FRAME
pakke {import flash.events.Event.; import flash.display.MovieClip; import flash.events.MouseEvent; public class player strekker MovieClip {public Var gameLay: Array = new Array (); offentlig Var ySpeed: Antall = 0; offentlig Var xSpeed: Number = 5; offentlig Var friksjon: Number = 0,7; offentlig Var grav: Number = 0,5; offentlig funksjon spiller (): void {if (scene) {init (); } Else {addEventListener (Event.ADDED_TO_STAGE, init); }} Offentlig funksjon getTile (xs, YS) {return gameLay [Math.floor (YS /60)] [Math.floor (XS /60)]} offentlig funksjon onFrameEnters (): void {} offentlig funksjon jump (e: MouseEvent ) {} privat funksjon init (e: Hendelses = null): void {stage.addEventListener (MouseEvent.CLICK, hopp); }}}

Vi vil bryte dette ned i de neste trinnene



Trinn 8:. Forstå plattformspill fysikk

Før vi gjør vår spiller
samhandler med miljøet, tror jeg vi bør gå over hvordan plattformspill fungerer først. I de fleste plattformspill, hopper en spiller opp, og kommer deretter ned. Når de treffer bakken de mister fart og blir skjøvet ut av bakken. For å illustrere dette med psuedocode:
stund (player.isCollidingWith (jord)) {player.y--; player.ySpeed ​​= 0; } YSpeed ​​+ = tyngdekraft; //akselerere nedover if (player.press (jumpButton)) {ySpeed ​​= -10; }

Det er en forenklet måte å se på plattformspill, men det får du det grunnleggende. Jeg har egentlig ikke dekket plattformspill i denne opplæringen slik at jeg ikke kommer noe dypere inn i emnet. Dette er alt logikken vi trenger for å gjøre vår spiller arbeid



Trinn 9:. Kontrollere Plassering av fliser

Fordi alle de visuelle elementene i spillet vårt er basert på arrays, kan vi bruke arrays for å sjekke kollisjoner heller da stole på Flash hitTest funksjoner. Vi kommer til å lage en funksjon av våre egne for å håndtere kollisjoner basert på vår flis data:
offentlig funksjon getTile (xs, ys) {return gameLay [Math.floor (YS /60)] [Math.floor (xs /60)]}

Det er vår funksjon, tatt fra spiller
klasse, og det er virkelig så enkelt. Funksjonen tar to parametre: xs
for x variabler og ys
for y-variabler. Fordi våre fliser er 60x60, hvis vi deler x- og y-variabler ved 60, og deretter rundt dem ned, får vi "posisjon" av x- og y-variabler i forhold til matrisen. Funksjonen returnerer deretter hva flisen verdien er i den posisjonen i matrisen. Vi kan bruke denne funksjonen som vi ville bruke hitTest nå, bortsett fra denne funksjonen er mye raskere og ikke er avhengig av det visuelle. La oss gå videre og integrere det inn i spillet



Trinn 10:. Integrering getTile Funksjon

Så nå har vi en funksjon, getTile
, som kan få flis verdier for oss. Og vi vet at hver gang en en dukker opp i matrisen at det kommer til å være fast grunn. La oss ta en titt på hvordan spilleren klassen ser ut når vi integrere getTile
funksjon og legge plattformspill fysikk
pakke {import flash.events.Event.; import flash.display.MovieClip; import flash.events.MouseEvent; public class player strekker MovieClip {public Var gameLay: Array = new Array (); offentlig Var ySpeed: Antall = 0; offentlig Var xSpeed: Number = 5; offentlig Var friksjon: Number = 0,7; offentlig Var grav: Number = 0,5; offentlig funksjon getTile (xs, YS) {return gameLay [Math.floor (YS /60)] [Math.floor (XS /60)]} offentlig funksjon onFrameEnters (): void {//Vi kaller dette i Main s ENTER_FRAME handler xSpeed ​​* = friksjon; //bremse spilleren ned på grunn av friksjon ySpeed ​​+ = grav; //akselerere nedover x + = xSpeed; y + = ySpeed; //her vi beveger spilleren til venstre eller høyre basert på museposisjonen if (stage.mouseX > x + 10) {xSpeed ​​= 6} if (stage.mouseX < x-10) {xSpeed ​​= -6} //neste gruppe, mens uttrykk er ekvivalente, sammen, for å vår pseudokode er //"while(player.isCollidingWith(ground)) »mens (getTile (x, y) == 1) {y - = 5.; ySpeed ​​= 0; } While (getTile (x, y-10) == 1) {+ y = 5.; ySpeed ​​= 0; } While (getTile (x + 5, y-5) == 1) {x - = 5;. } While (getTile (x-5, y-5) == 1) {x + = 5.; }} //Når spilleren klikk, hopper tegnet offentlig funksjon jump (e: MouseEvent) {if (getTile (x, y + 2) == 1) {ySpeed ​​= -10; }} Offentlig funksjon spiller (): void {if (scene) {init (); } Else {addEventListener (Event.ADDED_TO_STAGE, init); }} Privat funksjon init (e: Hendelses = null): void {stage.addEventListener (MouseEvent.CLICK, hopp); }}}

Vi bruker getTile
i områder der vi ville bruke hitTests. Vi har vegger integrert i platformer motoren også. Dette håndterer alle våre platformer fysikk, og vi trenger bare å ta på spiller
klasse en gang til. Vi kan passere gameLay matrisen til spiller
gjennom dokumentet klassen



Trinn 11:. Vokter mot feil Sjekker

Hva skjer hvis spilleren går ut av spilleområdet? Flisen data er bare 10x5, som kan oversettes til størrelsen på skjermen. Hvis vår getTile
funksjon blir noe over 600 eller under 0 for en x-verdi, det kommer til å kaste en feil fordi dette området ikke eksisterer i flisen data. (601/60) = 10.1111, runde det ned til 10. verdiene i matrisen er 0-9, fordi arrays begynne å telle fra 0.

Vi må sørge for at når noe er ute av spille grensene , vil det bli registrert som et fast grunn. vi kan gjøre dette enkelt ved å endre opp getTile
funksjon offentlig funksjon getTile (xs, ys) {if (ys >. 0 & & xs > 0 & & (gameLay [0 ] .length) * 60 > xs & & (gameLay.length) * 60 > ys) {return gameLay [Math.floor (YS /60)] [Math.floor (xs /60)];} else {return 1; //fliser som er utenfor banen behandles som fast grunn}

Dette gjør at alt som er utenfor grensene av array vil registrere seg som fast grunn. Nå kan du passere en rekke fullt av 0-er til spilleren, og motoren ville være i stand til å håndtere selv



Trinn 12:. Plassere Character på Screen

Så vi har vår karakter alt kodet, men når vi holder ham på skjermen han gjør ingenting. Dette er fordi vi ikke har faktisk kalt noen av funksjonene som er nødvendige for ham å flytte. Vi kan legge en ENTER_FRAME hendelseshåndterer til vårt dokument klasse skjønt, og bruke det:
privat funksjon init (e: Hendelses = null): void {buildLevel (gameLay); addEventListener (Event.ENTER_FRAME, onFrameEnter); Var p1: spiller = ny spiller (); p1.name = "p1" p1.x = 300 p1.y = 100 p1.gameLay = gameLay; addChild (p1);} offentlig funksjon onFrameEnter (e: Hendelses = null): void {for (var i: int = numChildren-1; i > = 0; i -) {if (getChildAt (i) er spiller) {MovieClip (getChildAt (i)) onFrameEnters (.); }}}

Dette kan være mye å ta i, så la oss se på init () -funksjonen først. I init () -funksjonen, legger vi en ENTER_FRAME hendelseshåndterer som kaller onFrameEnter ()
fungere hver ramme. På toppen av det, legger vi til spilleren til rammen ved hjelp av init ()
funksjon. Vi plasserer spilleren i midten av skjermen. I tillegg til at vi gjør spillerens gameLay (som er kartet) det samme som gameLay at dokumentet klassen bruker.

I onFrameEnter ()
funksjon, har vi en løkke. I loop, vi går gjennom hver eneste barnet i visningslisten. Hvert barn i fremvisningslisten for et bestemt objekt har et visst indeksnummer, basert på når det ble tilsatt til scenen og andre faktorer. Indeksnumrene for barn vil aldri overstige barn et objekt har. Siden indeksnumrene starter på 0, initial vi vår sløyfe på numChildren-en. Når så sørg for at jeg ikke går under 0 og gå videre med vår loop.

Fordi vi sløyfe gjennom hvert barn på scenen, kan vi sjekke og se om noen barn er av en viss klasse. Etter det kan vi kalle funksjoner på dem, som vi gjorde for spilleren. Denne metoden kan virke komplisert, men når du forstår den og sette den opp det sparer ganske mye systemressurser over å gjøre flere ENTER_FRAME funksjoner. Hvis vi hadde flere klasser, kan vi legge dem til hvis setningen for å sikre at hvert objekt vi ønsket å ble rørt



Trinn 13:. Plassering Bruke Tile data

Hva skjer hvis vi ønsker å ha spilleren satt på scenen basert på et nummer i gameLay
, heller deretter plassere den ved hjelp av rett x- og y-verdier? Vel, vi kan bare legge til en verdi i matrisen som håndterer hvor spilleren vil gyte, og deretter endre Hoved s buildLevel ()
funksjon for å håndtere dette:
offentlig funksjon buildLevel (s: Array) {if ( getChildByName ("tileHolder") = null) {removeChild (getChildByName ("tileHolder")!); } Var fliser: MovieClip = new MovieClip (); tiles.name = "tileHolder"; for (var i = 0; i < s [0] .length; i ++) {for (var o = 0; o < s.length; o ++) {if (int (s [o] [i]) == 2 ) {MovieClip (getChildByName ("p1")) x = 30 + (i * 60).; . MovieClip (getChildByName ("p1")) y = 30 + (o * 60); } else {var currentTile: Fliser = nye fliser (); currentTile.x = i * 60 currentTile.y = o * 60 currentTile.name = i + "-" + o tiles.addChild (currentTile); currentTile.gotoAndStop (int (s [o] [i]) + 1); }}} AddChild (fliser);}

Nå, hvis vi skulle sette en 2 i gameLay
array, ville det sette spilleren i den posisjonen i matrisen. Vi må huske på at det ikke vil sette spilleren midt i sentrum av flisen som vi ønsker, så vi trenger å legge noen modifiser tall å sette den i sentrum (derav legge 30 til x og y coords).



Trinn 14: Forstå 3D Arrays

Mange ganger når du lager et spill, vil du ha mer enn ett plan. Hva skjer hvis vi ønsker vår spiller for å kunne bytte mellom nivåene? Vi er nødt til å holde flere nivåer i data nå, og en av de enkleste måtene å gjøre det på er en 3D-matrise.

Hvis en 1D matrise er en linje, og en 2D matrise er en kvadratisk, deretter en 3D-matrisen vil være en kube. En 3D-matrisen kan holde flere 2D arrays, og fordi vårt nivå er en 2D array, kan vi bruke et 3D-matrise for å holde flere kart. Det er mange måter å holde flere nivåer fulle av flis data, en av mine favoritter er XML, men 3D-arrays er den enkleste. Vi må endre noen av våre funksjoner skjønt:
offentlig Var gameLay: Array = [[[1,1,1,1,1,1,1,1,1,1], [1,0 , 0,0,0,0,0,0,0,1], [1,0,0,0,2,0,0,0,0,1], [1,0,0,0,0 , 1,0,0,0,1], [1,1,1,1,1,1,1,1,1,1]], [[1,1,1,1,1,1,1 , 1,1,1], [1,0,1,1,1,0,0,0,0,1], [1,0,0,0,2,0,0,0,0,1 ], [1,0,0,0,0,1,0,0,0,1], [1,1,1,1,1,1,1,1,1,1]]]; privat funksjon init (e: Hendelses = null): void {buildLevel (gameLay [0]); //grip den første 2D matrise fra 3D-matrise addEventListener (Event.ENTER_FRAME, onFrameEnter); Var p1: spiller = ny spiller (); p1.name = "p1" p1.x = 300 p1.y = 100 p1.gameLay = gameLay [0]; //grip den første 2D matrise fra 3D-matrise addChild (p1);}

Nå har vi en 3-dimensjonal array som inneholder to forskjellige nivåer. Hvis vi ønsker å veksle mellom nivåene, er det en enkel prosess å gjøre det: vi bare bruke gameLay [1]
stedet for gameLay [0]


Trinn 15: Bytte Levels på fly

Måten vi har bygget vår flis systemet så langt, vil det ikke ta mye å slå nivåer på fly. Fordi vår buildLevel
funksjon håndterer alle backend arbeid, endre nivåene er så enkelt som dette:
buildLevel (gameLay [0]); buildLevel (gameLay [1]);

Hvordan du bruker denne metoden for å bytte nivåer er opp til deg. For øyeblikket er vi kommer til å gå tilbake til en enkelt 2D array for dette



Trinn 16:. Forstå mange bruksområder

For øyeblikket har vi denne brikken motoren satt opp til håndtere et plattformspill, men det er mange forskjellige bruksområder for motorer som disse.

Når du ser på noen profesjonelt utviklet spill, kan du se flis motorprogrammer. Som vi allerede demonstrert med Zelda, mange spill bruker flis motorer.

Fra venstre til høyre, spillene som vises er nok rørleggere, Bejeweled og Time Fukc. Hvert spill viser et rutenett, noe som betyr at fliser ble brukt til å lage spillene. Når du forstår hvordan du kan manipulere fliser data, kan du begynne å utføre komplekse kontroller for mønstre som de gjort i Bejeweled for puslespill, som er vårt neste tema



Trinn 17:. Enkelt puslespill

La oss dumpe ideen om et plattformspill for et øyeblikk, og tenk vi ønsker å gjøre et puslespill. Noe enkelt. La oss si at vi ønsker å gjøre det slik at hvis alle brikkene på skjermen er svart, vinner du. Du vil være i stand til å legge til eller fjerne en blokk basert på plasseringen av musen, og trykke på plass.

Det er to trinn til å gjøre dette. Vi trenger å gjøre den funksjonen som tillater oss å endre blokkene, da trenger vi å skrive en funksjon for å sjekke og se om alle blokkene på skjermen er der. Når vi sier hvis blokkene er "der", som betyr at flis er svart
pakke {import flash.display.Sprite.; import flash.events.Event; import flash.display.MovieClip; import flash.events.KeyboardEvent; import Fliser; import spiller; public class Hoved strekker MovieClip {public Var gameLay: Array = [[1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0, 0,0,1], [1,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,1,0,0,0,1] [1,1,1,1,1,1,1,1,1,1]] offentlig funksjon getTile (xs, YS) {return gameLay [Math.floor (YS /60)] [Math.floor (xs /60)]} offentlig funksjon onFrameEnter (e: Hendelses = null): void {for (var i: int = numChildren-1; i > = 0; i -) {if (getChildAt (i) er spiller) { MovieClip (getChildAt (i)) onFrameEnters (.); }}} Offentlig funksjon main (): void {if (scene) {init (); } Else {addEventListener (Event.ADDED_TO_STAGE, init); }} Privat funksjon init (e: Hendelses = null): void {buildLevel (gameLay); stage.addEventListener (KeyboardEvent.KEY_DOWN, klikk); addEventListener (Event.ENTER_FRAME, onFrameEnter); } Offentlig funksjon buildLevel (s: Array) {if (! GetChildByName ("tileHolder") = null) {removeChild (getChildByName ("tileHolder")); } Var fliser: MovieClip = new MovieClip (); tiles.name = "tileHolder"; for (var i = 0; i < s [0] .length; i ++) {for (var o = 0; o < s.length; o ++) {var currentTile: Fliser = nye fliser (); currentTile.x = i * 60 currentTile.y = o * 60 currentTile.name = i + "-" + o tiles.addChild (currentTile); currentTile.gotoAndStop (int (s [o] [i]) + 1); }} AddChild (fliser); } Private funksjons klikk (e: KeyboardEvent): void {if (e.keyCode == 32) {if (getTile (stage.mouseX, stage.mouseY) == 1) {gameLay [Math.floor (stage.mouseY /60 )] [Math.floor (stage.mouseX /60)] = 0; MovieClip(MovieClip(getChildByName("tileHolder")).getChildByName(Math.floor(stage.mouseX/60)+"-"+Math.floor(stage.mouseY/60))).gotoAndStop(1); } else {gameLay [Math.floor (stage.mouseY /60)] [Math.floor (stage.mouseX /60)] = 1; MovieClip(MovieClip(getChildByName("tileHolder")).getChildByName(Math.floor(stage.mouseX/60)+"-"+Math.floor(stage.mouseY/60))).gotoAndStop(2); }} Var foundZero: Boolean = false; for (var i = 0; i < gameLay [0] .length; i ++) {for (var o: int = 0; o < gameLay.length; o ++) {if (int (gameLay [o] [i]) == 0) {foundZero = true; }}} If (foundZero!) {Trace ("vunnet"); }}}}

For ordens skyld, dette er hele dokumentet klassen som trengs for å lage spill som vi diskuterte. Legg merke til hvordan lignende det er til vår platformer kode. I init () -funksjonen, har vi lagt til en hendelse lytteren for tastetrykk; det utløser klikk () -funksjonen, som håndterer skiftende flisene selv. La oss bryte denne nye funksjonen ned.

Vi først sjekke for å være sikker på at nøkkelen blir presset er plass, ved å kontrollere nøkkelkode. Fordi vi sjekker posisjonen flisene ved hjelp av musen og getTile funksjon, er alt vi trenger å gjøre sjekke og se om det flis er på det punktet i kartet er en én eller en null for å finne ut hva du skal endre det til.

Vi deretter endre dataene selv, og endre den visuelle markeringen av flisene til å reflektere dataene. Det tar mye å målrette fliser individuelt, men fordi vi kåret hver flis basert på deres beskrivelse, kan vi få tilgang til dem ved hjelp av getChildByName metoden.

Når vi er ferdig med å endre flisene, må vi sjekke og se om hver flis på skjermen er svart. Vi gjør det ved å kjøre gjennom dataene, og sjekke for å se om noen nuller dukker opp. Hvis ingen nuller vet dukker opp, vet vi at alt er en 1 (fordi våre data bare bruker 1s og 0s).

Så det vi har gjort det. En veldig enkel puslespill som bruker flis data. Hvis vi ville, kunne vi gjøre komplekse kontroller, mye som Bejeweled eller andre slike puslespill å finne ut visse kombinasjoner av fliser



Step. 18: kombinerer elementer fra begge spillene

Hva hvis vi ønsket et plattformspill hvor du kunne laget og ødelegge bakken enkelt ved hjelp av mellomromstasten? Vi kunne gjøre det enkelt ved bare å kombinere de to forskjellige spillene vi har gjort, på en enkel måte



Trinn 19:. Plattformspill

La oss lage et plattformspill som lar deg lage og ødelegge data. Her er koden:
pakke {import flash.display.Sprite; import flash.events.Event; import flash.display.MovieClip; import flash.events.KeyboardEvent; import Fliser; import spiller; public class Hoved strekker MovieClip {public Var gameLay: Array = [[1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0, 0,0,1], [1,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,1,0,0,0,1] [1,1,1,1,1,1,1,1,1,1]] offentlig funksjon getTile (xs, YS) {return gameLay [Math.floor (YS /60)] [Math.floor (xs /60)]} offentlig funksjon onFrameEnter (e: Hendelses = null): void {for (var i: int = numChildren-1; i > = 0; i -) {if (getChildAt (i) er spiller) { MovieClip (getChildAt (i)) onFrameEnters (.); }}} Offentlig funksjon main (): void {if (scene) {init (); } Else {addEventListener (Event.ADDED_TO_STAGE, init); }} Privat funksjon init (e: Hendelses = null): void {buildLevel (gameLay); stage.addEventListener (KeyboardEvent.KEY_DOWN, klikk); addEventListener (Event.ENTER_FRAME, onFrameEnter); Var p1: spiller = ny spiller (); p1.name = "p1" p1.x = 300 p1.y = 100 p1.gameLay = gameLay; addChild (p1); } Offentlig funksjon buildLevel (s: Array) {if (! GetChildByName ("tileHolder") = null) {removeChild (getChildByName ("tileHolder")); } Var fliser: MovieClip = new MovieClip (); tiles.name = "tileHolder"; for (var i = 0; i < s [0] .length; i ++) {for (var o = 0; o < s.length; o ++) {var currentTile: Fliser = nye fliser (); currentTile.x = i * 60 currentTile.y = o * 60 currentTile.name = i + "-" + o tiles.addChild (currentTile); currentTile.gotoAndStop (int (s [o] [i]) + 1); }} AddChild (fliser); } Private funksjons klikk (e: KeyboardEvent):! Void {if (e.keyCode == 32) {if ((Math.floor (stage.mouseX /60) == Math.floor (MovieClip (getChildByName ('p1') ) .x /60) & & Math.floor (stage.mouseY /60) == Math.floor ((MovieClip (getChildByName ('p1')) y-10) /60))) {if (getTile. (stage.mouseX, stage.mouseY) == 1) {gameLay [Math.floor (stage.mouseY /60)] [Math.floor (stage.mouseX /60)] = 0; MovieClip(MovieClip(getChildByName("tileHolder")).getChildByName(Math.floor(stage.mouseX/60)+"-"+Math.floor(stage.mouseY/60))).gotoAndStop(1); } else {gameLay [Math.floor (stage.mouseY /60)] [Math.floor (stage.mouseX /60)] = 1; MovieClip(MovieClip(getChildByName("tileHolder")).getChildByName(Math.floor(stage.mouseX/60)+"-"+Math.floor(stage.mouseY/60))).gotoAndStop(2); }}}}}}

Vi legger spilleren tilbake i spillet, og endre opp klikk ()
funksjon. Vi endre det å sørge for at fliser som inneholder spilleren ikke kan fylles ut ved å gjøre disse enkle endringer kan vi smelte sammen de to motorene sammen for å lage en motor som fungerer godt



Trinn 20:.. Endless Bruker

Som nevnt før, flis motorer har en mengde måter å bli brukt. Puslespill, plattformspill. Du kan opprette flere lag med fliser for å lage bakgrunner, og når du begynner å lage komplekse spill må du lage dine egne kart redaktører til å håndtere og skape flisen data for spillene dine. Den beste måten å lære på er å eksperimentere. Skriv din egen flis motorer, finne ut hva som fungerer best for dine spill og programmer og finne ut hva du må gjøre for å få det du ønsker å jobbe til arbeid.

Takk for lesing!