Create en ovenfra og ned RPG i Flixel: Din First Room
Del
Del
7
Del
Dette Cyber Mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil vi gå fra å spørre "Hva er Flixel?" å ha et innendørs rom og et tastatur styrt karakter i top-down rollespill stil (tror Zelda).
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Forstå prosjektstrukturen
For de visuelle mennesker blant oss, la oss se hvordan alt vil bli organisert slik resten vil være fornuftig.
I utgangspunktet har vi all vår kunstverk lagret i eiendeler mappe og alle våre Actionscript-filer som er lagret i src mappen. Hvis du vil bruke denne opplæringen som grunnlag for din egen spillmotor, inneholder topdown mappen generiske ting (aka motoren) og opplæringen mappen viser hvordan du bruker den.
Du vil sannsynligvis merke heller raskt at kunst filene har virkelig lange navn. Snarere enn å vise deg en tutorial fylt med overbevisende røde bokser (toppen av min kunstneriske evne), vil vi bruke noen open source kunstverk fra OpenGameArt. Hver fil er oppkalt vise kilden, kunstneren, og lisensen. Så, for eksempel, rustning betyr (opengameart - ccby30 - Redshrike) .png det er et bilde av rustning, ned fra OpenGameArt, skapt av kunstneren kjent som Redshrike, og den bruker CC-BY-30 lisens (Creative Commons Attribution).
Lang historie kort -. disse kunst-filer kan brukes til noe formål så lenge vi lenke tilbake til området og gi kreditt til kunstneren
Her er en beskrivelse av hver kildefilen i prosjekt:
TopDown /TopDownEntity.as - base klassen for noen bevegelige sprites i vår top-down rpg
TopDown /TopDownLevel.as - base klasse for en top-down rpg nivå
tutorial /Assets.as - importerer alle bilder som vi trenger å bruke i denne opplæringen
tutorial /IndoorHouseLevel.as - definerer en innendørs rom med noen objekter som ligger rundt
tutorial /Player.as - et tastatur-kontrollert, animerte Ranger
tutorial /PlayState.as - Flixel staten som styrer spillet vårt
Default.css - en tom fil som er nødvendig for å hindre at Flex kompilatoren fra å gi oss en advarsel
Main.as - inngangspunkt for programmet
Preloader.as - Flixel preloader
Nå la oss komme til saken
Trinn 2: Firing Up Flixel
Flixel er en 2D spillmotor for Actionscript 3. For å sitere hjemmesiden:
Flixel er en åpen kildekode spill-making bibliotek som er helt gratis for personlig eller kommersiell bruk.
Det viktigste å vite om Flixel er at det er laget for å bruke punktgrafikkbilder (raster grafikk) i stedet for Flash-stil vektorgrafikk. Du kan bruke Flash filmklipp, men det tar litt masserer. Siden jeg ikke lyst til å gi en massasje i dag, vil vi være å bruke bilder for all vår art.
Flixel kommer med et verktøy som skaper en dummy prosjekt for deg. Dette verktøyet lager de tre filene som er i roten av vårt prosjekt: Default.css, Main.as, og Preloader.as. Disse tre filene danner grunnlaget for nesten alle prosjekt i Flixel. Siden Default.css er bare der for å unngå en kompilator advarsel, la oss ta en titt på Main.as.
pakke {import org.flixel. *; import tutorial. *; [SWF (width = "480", height = "480", bakgrunnsfarge = "# ffffff")] [Frame (factoryClass = "Preloader")] public class Hoved strekker FlxGame {/** * Konstruktør * /public funksjon Hoved ( ) {super (240, 240, PlayState, 2); }}}
Det er bare tre linjer av betydning her. First off, vi forteller Flash for å bruke et 480x480 vindu med en hvit bakgrunn. Så forteller vi Flash for å bruke vår Preloader klasse mens lasting. Til slutt, forteller vi Flixel å bruke et 240x240 vindu (zoome inn med en faktor på 2 for å gjøre ting ser større) og å bruke PlayState når alt er klart til bruk.
La meg dele en rask kommentar om Flixel s < em> statene
. I Flixel, stater er typen som et vindu, men du kan bare ha en om gangen. Så, for eksempel, kan du ha en stat for spillet hovedmeny (Hovedmeny), og når en bruker klikker på Start Game knappen du bytter til PlayState. Siden vi ønsker at våre spill å bare komme i gang umiddelbart, trenger vi bare én stat (PlayState)
Neste er Preloader.as
pakke {import org.flixel.system.FlxPreloader..; public class Preloader strekker FlxPreloader {/** * Konstruktør * /public funksjon Preloader (): void {classname = "Main"; super(); }}}
Ikke mye å se her. Siden vi utvider fra FlxPreloader, tar Flixel egentlig bare vare på den. Det eneste å merke seg er at hvis du endret Main til noen andre navn, ville du må endre classname her på den markerte linjen.
Vi er nesten opp til å se noe på skjermen nå. Alt vi trenger er en Flixel staten for å få ballen til å rulle, så her er PlayState.as
pakke tutorial {import org.flixel *..; /** * State for faktisk å spille spillet *author Cody Sandahl * /public class PlayState strekker FlxState {/** * Lag tilstand * /overstyre offentlig funksjon lage (): void {FlxG.mouse.show (); }}}
Hvis du kompilert denne koden, vil du få en fantastisk svart skjerm med en musepekeren. Fortvil ikke, det blir bedre herfra
Trinn 3:. Opprette et grunnleggende nivå
Nå som vi har Flixel oppe og går, er det på tide å lage en top-down rpg nivå . Jeg liker å gi deg gjenbrukbare klasser, slik at du kan lage dine egne brett, så vi vil faktisk lage en generell nivåklasse som vi kan bruke til å gjøre noe mer interessant senere. Dette er topdown /TopDownLevel.as
pakke topdown {import org.flixel *..; /** * Base klasse for alle nivåer *author Cody Sandahl * /public class TopDownLevel strekker FlxGroup {/** * Kart * /public Var stats: FlxState; //Tilstand viser nivået offentlig Var levelSize: FlxPoint; //Bredde og høyde på nivå (i piksler) offentlig Var tileSize: FlxPoint; //Standard bredde og høyde på hver flis (i piksler) offentlige Var numTiles: FlxPoint; //Hvor mange fliser er på dette nivået (bredde og høyde) offentlig Var floorGroup: FlxGroup; //Etasje (gjengitt nedenfor murene - ingen kollisjoner) offentlig Var wallGroup: FlxGroup; //Alle kart blokker (med kollisjoner) offentlig Var guiGroup: FlxGroup; //Gui elementer /** * spiller * /public Var spiller: TopDownEntity; offentlig Var playerStart: FlxPoint = new FlxPoint (120, 120); /** * Konstruktør *param tilstand State viser nivået *param levelSize bredde og høyde nivå (i piksler) *param BLOCK Standard bredde og høyde på hver flis (i piksler) * /public funksjon TopDownLevel (state: FlxState , levelSize: FlxPoint, tileSize: FlxPoint): void {super (); this.state = tilstand; this.levelSize = levelSize; this.tileSize = tileSize; if (levelSize & & tileSize) this.numTiles = new FlxPoint (Math.floor (levelSize.x /tileSize.x), Math.floor (levelSize.y /tileSize.y)); //Setup grupper this.floorGroup = new FlxGroup (); this.wallGroup = new FlxGroup (); this.guiGroup = new FlxGroup (); //Oppretter nivået this.create (); } /** * Lag hele nivået, inkludert alle sprites, kart, blokker, etc * /public funksjon lage (): void {createMap (); createPlayer (); createGUI (); addGroups (); createCamera (); } /** * Lag kartet (vegger, dekaler, etc) * /funksjon som er beskyttet createMap (): void {} /** * Lag spilleren, kuler, etc * /funksjon som er beskyttet createPlayer (): void {spiller = new TopDownEntity (playerStart.x, playerStart.y); } /** * Lag tekst, knapper, indikatorer, etc * /funksjon som er beskyttet createGUI (): void {} /** * Bestem rekkefølgen av gruppene. De er gjengitt i den rekkefølgen de er lagt, så siste lagt er alltid på topp. * /Vernefunksjons addGroups (): void {legge til (floorGroup); legge (wallGroup); legge (spiller); legge (guiGroup); } /** * Lag standard kamera for dette nivået * /funksjon som er beskyttet createCamera (): void {FlxG.worldBounds = new FlxRect (0, 0, levelSize.x, levelSize.y); FlxG.camera.setBounds (0, 0, levelSize.x, levelSize.y, true); FlxG.camera.follow (spiller, FlxCamera.STYLE_TOPDOWN); } /** * Oppdater hvert timestep * /overstyre offentlig funksjon oppdateringen (): void {super.update (); FlxG.collide (wallGroup, spiller); }}}
Alle variablene har sine egne beskrivelser i kildekoden, så jeg vil ikke kjede deg med for mye repetisjon. Jeg bør imidlertid forklare grupper i Flixel
Vi har tre grupper som er definert her:. FloorGroup, wallGroup, og guiGroup. Flixel bruker grupper for å avgjøre i hvilken rekkefølge å gjengi sprites (for å bestemme hva som er på topp når de overlapper), og for å håndtere kollisjoner. Vi vil at spilleren skal være i stand til å gå rundt på et gulv (ingen kollisjoner nødvendig), men vi ønsker også vegger og gjenstander (kollisjoner absolutt nødvendig), så vi trenger to grupper. Vi trenger også en egen gruppe for vår brukergrensesnitt (guiGroup) slik at vi kan sørge for at det blir gjengitt på toppen av alt annet.
Grupper er gjengitt i den rekkefølgen de er lagt, som bestemmes i våre addGroups ( ) funksjon. Siden vi ønsker guiGroup å alltid være på topp, kaller vi legge til (guiGroup) etter at alle de andre gruppene. Hvis du gjør dine egne grupper og glemmer å ringe til (), vil de ikke dukke opp på skjermen.
I vår konstruktør, vi lagrer noen nyttige verdier (som antall fliser på nivå) og kalle lage (). Den skaper () -funksjonen viser deg hva som går inn i en Flixel nivå - et kart, en spiller, et grensesnitt, grupper (for å kontrollere rende orden og kollisjoner), og en kameravisning. Hver av disse får sin egen funksjon for å holde ting mer lesbar og slik at vi kan gjenbruke felles funksjonalitet. For eksempel ta en titt på createCamera () Twitter /** * Lag standard kamera for dette nivået * /funksjon som er beskyttet createCamera (). Void {FlxG.worldBounds = ny FlxRect (0, 0, levelSize.x, levelSize.y); FlxG.camera.setBounds (0, 0, levelSize.x, levelSize.y, true); FlxG.camera.follow (spiller, FlxCamera.STYLE_TOPDOWN);}
Vi trenger ikke å endre denne funksjonen til å lage vår egen innendørs nivå. Flixel har en innebygd kamera for topp-ned spill (FlxCamera.STYLE_TOPDOWN). Alt vi egentlig gjør her er å fortelle kameraet ikke å forlate nivået (ved å ringe setBounds ()) og fortelle kameraet å følge spilleren (ved å ringe oppfølging ()) hvis nivået er større enn skjermen og krever å rulle. Dette vil fungere for nesten alle slags nivå, slik at vi kan holde det her i stedet for re-koding dette for hver av våre nivåer.
Det eneste andre å legge merke til er i oppdateringen (). Twitter /** * Oppdater hvert timestep * /overstyre offentlig funksjon oppdateringen (): void {super.update (); FlxG.collide (wallGroup, spiller);}
FlxG.collide (wallGroup, spiller) fører til at spilleren støter på vegger i stedet for å gå gjennom dem. Siden vi ikke Til slutt må vi gjøre PlayState bruke vår fancy nivå Husk å ringe this.add (LEVEL) med mindre du ønsker å stirre på en svart skjerm for alltid. Som kommentar statene, jeg brukte public static Var LEVEL som en bekvemmelighet for fremtiden. Anta at du legger litt kunstig intelligens til spillet ditt og din AI må vite hvor spilleren befinner seg; på denne måten, kan du ringe PlayState.LEVEL.player og holde ting fin og enkel. Det er ikke nødvendigvis den peneste måten å gjøre ting, men det vil få jobben gjort hvis det brukes med måte Et foretak er noe som må som skal vises og kan bevege seg rundt. Dette kan være den spilleren, en datastyrt karakter, eller kanskje til og med noe som en pil. Siden det kan være mange enheter på et nivå, ønsker vi en generisk klasse som vi kan bruke til å redde oss selv litt tid. Ta en titt på topdown /TopDownEntity.as Legg merke til at vi utvider fra FlxSprite. Dette gir oss tilgang til mye av kraften bak Flixel. makeGraphic () oppretter en rektangulær bitmap av gitt størrelse (16x18 i dette tilfellet), bruker den fargen du passere i. Denne fargen er i 0xAARRGGBB format, så 0xFFFF0000 betyr at vi skaper en solid rød boks (jeg advarte deg om min kunstneriske ferdigheter). Du kan rote rundt med denne verdien for å se hvordan fargeendringer. Faktisk har vi nå noe annet enn en tom skjerm Fortsatt ikke altfor spennende, men minst kan vi se noe, ikke sant Jeg vet ikke om deg, men jeg er lei av å se på at svart bakgrunn. La oss gjøre det ser ut som et rom. Her er tutorial /IndoorHouseLevel.as Det første du legger merke til er de to gigantiske matriser av tall, gulv og vegger. Disse arrays definerer våre kartlag. Tallene er fliser indekser basert på skisser vi bruker. Jeg har zoomet inn på bildet vi bruker for våre vegger for å vise deg hva jeg snakker om. Legg merke til at null er blank (uavgjort ingenting). Gulvet bilde, på den annen side er bare en flis, gjentatt, i øyeblikket. Det betyr at vi ønsker å tegne hver flis (inkludert null). Så hvis du ser på createMap () -funksjonen, til vår kode legger i gulvet er lengre enn vår kode for å laste i veggene. Vi starter med FlxTilemap.arrayToCSV (GULV, 15), som konverterer vår stort utvalg til et format Flixel liker (CSV). Tallet på slutten forteller Flixel hvor mange verdier er i hver rad. Neste vi fortelle Flixel hvilket bilde som skal brukes (Assets.FLOORS_TILE - Jeg skal forklare hva det handler om i neste trinn). Etter å definere størrelsen på hver blokk i bildet, har vi fire flere verdier for våre gulvet enn for våre vegger. Siden vi vil at alle flisene (inkludert null) trukket for vår etasje, må vi passere i disse ekstra verdier Det eneste som er litt rart er det siste. Uint.MAX_VALUE. Hver flis tall (null gjennom antall fliser i vårt bilde) som er over antallet gått på denne parameteren vil være merket for kollisjoner. Alt under dette tallet vil ignorere kollisjoner som standard. Så, hvis du hadde en vegg som spilleren kunne gå gjennom, kan du sette den på slutten av bildet (en høy indeks) og bruke denne verdien til å ha Flixel ignorere kollisjoner. Siden vi aldri vil eventuelle kollisjoner til å skje med gulvet, bruker vi uint.MAX_VALUE fordi hver flis indeksen vil være under denne verdien, og vil derfor ikke ha kollisjoner. Til slutt må vi huske å legge våre tilemaps til en gruppe eller de vil ikke dukke opp på skjermen. Før vi kan kjøre prosjektet, men vi trenger å laste i vår kunstverk Siden vi bruker bilder, må vi la Flash vite om de. En av de mer enkle måter å gjøre dette på er ved å bygge dem i SWF. Her er hvordan vi gjør det i dette prosjektet (finnes i tutorial /Assets.as) Jeg gir deg all grafikk på en gang, fordi det er ikke alle som komplisert når du først får taket på det. La oss ta en titt på de markerte linjene. Her er vi lasting i to bilder: én for våre vegger og én for vår etasje. Hvis du husker i det siste trinnet, fortalte vi Flixel å bruke Assets.WALLS_TILE og Assets.FLOORS_TILE ved lasting i kartlag. Det er der vi definerer disse variablene. Legg merke til at vi bruker en bane i forhold til Assets.as filen. Du kan også legge inn ting som XML-filer, SWF-filer, og massevis av andre eiendeler. Alt vi trenger, er imidlertid bilder. For mer informasjon om embedding eiendeler i Flash, sjekk ut denne artikkelen fra Nightspade blogg. Nå som vi har våre bilder innebygd og tilgjengelig, kan vi fortelle PlayState.as å bruke vår nymotens nivå. Twitter /** * Lag tilstand * /overstyre offentlig funksjon lage (): void {FlxG.mouse.show (); //Belastningsnivå LEVEL = new IndoorHouseLevel (dette, LEVEL_SIZE, BLOCK_SIZE); this.add (LEVEL);} Vi endret den markerte linjen fra å bruke TopDownLevel til å bruke vår nye IndoorHouseLevel. Nå hvis du kjører prosjektet skal du se noe som ser litt mer ut som et rom Det kan være et rom, er men det et kjedelig rom. La oss Gran det opp litt med noen møbler. Først må vi noen flere grupper og noen variabler inne IndoorHouseLevel Twitter /** * Egendefinerte grupper * /beskyttet Var decalGroup: FlxGroup;. //Ekstra dekorative elementer (ingen kollisjoner) beskyttet Var objectGroup: FlxGroup; //Objekter og hindringer (med kollisjoner) /** * Spill gjenstander * /beskyttet Var bokhylle: FlxSprite; beskyttet Var rustning: FlxSprite; beskyttet Var bord: FlxSprite; beskyttet Var Bed: FlxSprite; decalGroup vil tillate oss å legge til noen tepper (rent visuelle eye candy), mens objectGroup vil tillate oss å legge til noen møbler som vil komme i spillerens vei. De andre variablene er de møblene vi kommer til å legge på et øyeblikk. Deretter må vi legge disse objektene til nivået. Vi legger den markerte linjen og alt under den Twitter /** * Lag kartet (vegger, dekaler, etc) * /overstyring beskyttet funksjon createMap (): void {var fliser: FlxTilemap;. //Gulv fliser = new FlxTilemap (); tiles.loadMap (FlxTilemap.arrayToCSV (GULV, 15), //konvertere vårt utvalg av fliser indeksene til et format Flixel forstår Assets.FLOORS_TILE, //bilde å bruke tileSize.x, //bredde på hver flis (i piksler) tileSize .Y, trenger //høyden på hver flis (i piksler) 0, //ikke bruke auto flislegging (nødvendig slik at vi kan forandre resten av disse verdiene) 0, //starter indeks for våre brikker (0 = inkluderer alt i bildet) 0, //starter indeks for tegning våre brikker (0 = hver flis er trukket) uint.MAX_VALUE //som fliser tillate kollisjoner som standard (uint.MAX_VALUE = ingen kollisjoner)); floorGroup.add (fliser); //Vegger //FFV: gjøre venstre /høyre vegger bruk custom kollisjon Sender fliser = new FlxTilemap (); tiles.loadMap (FlxTilemap.arrayToCSV (vegger, 15), //konvertere vårt utvalg av fliser indeksene til et format Flixel forstår Assets.WALLS_TILE, //bilde å bruke tileSize.x, //bredde på hver flis (i piksler) tileSize .Y //høyden på hver flis (i piksler)); wallGroup.add (fliser); //Objekter createObjects ();} /** * Legg alle objekter, hindringer, etc til nivå * /vernefunksjons createObjects (): void {var sprite: FlxSprite; //Opprette egendefinerte grupper decalGroup = new FlxGroup (); objectGroup = new FlxGroup (); //Dekaler (dekorative elementer som ikke har noen funksjon) sprite = new FlxSprite (16, //x steds 16 //y plassering Assets.RUG1_SPRITE //bilde å bruke); decalGroup.add (sprite); sprite = new FlxSprite (11 * tileSize.x, //x plassering (ved hjelp tileSize å justere det med en flis) 1,5 * tileSize.y, //y plassering (som viser at du ikke trenger å stille opp med en brikke) Assets.RUG2_SPRITE //bilde som skal brukes); decalGroup.add (sprite); //Objekter og hindringer //NB: denne gruppen blir testet for kollisjoner bokhylle = new FlxSprite (32, //x plassering 0, //y plassering (som viser at du kan overlappe med veggene hvis du vil) Assets.BOOKCASE_SPRITE //bilde som skal brukes); bookcase.immovable = true; //Ikke tillater spilleren å flytte dette objektet objectGroup.add (bokhylle); tabell = new FlxSprite (192, 192, Assets.TABLEROUND_SPRITE); table.immovable = true; objectGroup.add (tabell); sprite = new FlxSprite (176, 192, Assets.CHAIRRIGHT_SPRITE); sprite.immovable = true; objectGroup.add (sprite); sprite = new FlxSprite (216, 192, Assets.CHAIRLEFT_SPRITE); sprite.immovable = true; objectGroup.add (sprite); rustning = new FlxSprite (192, 0, Assets.ARMOR_SPRITE); armor.immovable = true; objectGroup.add (rustning); seng = new FlxSprite (16, 192, Assets.BED_SPRITE); bed.immovable = true; objectGroup.add (seng);} Jeg bruker en ekstra funksjon, createObjects (), bare for å holde ting lettere å lese. Kommentarene forklare hver enkelt objekt, men la meg gi noen generelle observasjoner. Først må vi alltid må huske å ringe til () for hvert objekt, eller det vil ikke bli vist. I tillegg må vi bruke den rette gruppen (mapGroup, floorGroup, decalGroup, objectGroup, etc.) når du ringer til () eller det vil rote opp vår gjengi orden og vår dueller. Også ta notis av alle de ulike måtene vi kan bestemme hvor du vil plassere våre objekter og dekaler. Vi kan vanskelig kode verdiene (som vi gjør med det første teppet), kan vi bruke tileSize å justere det med gulv- og veggfliser (som vi gjør med andre rug), og vi kan mikse og matche til vårt hjerte innhold. Bare vet at Flixel ikke vil oppdage det hvis vi legger noe av nivået eller overlapp annet objekt -. Det forutsetter at vi vet hva vi gjør Nå må vi vise våre nye grupper i riktig rekkefølge og håndtere kollisjoner. Legg disse funksjonene til bunnen av IndoorHouseLevel. Twitter /** * Bestem rekkefølgen av gruppene. De er gjengitt i den rekkefølgen de er lagt, så siste lagt er alltid på topp. * /overstyrer beskyttet funksjons addGroups (): void {legge (floorGroup); legge (wallGroup); legge (decalGroup); legge (objectGroup); legge (spiller); legge (guiGroup);} /** * Oppdater hvert timestep * /overstyre offentlig funksjon oppdateringen (): void {super.update (); //MERK: kart - > spiller kollisjon skjer i super.update () FlxG.collide (objectGroup, spiller);} Siden vi ønsker at våre nye grupper til å gjengi på toppen av gulv og vegger, må vi helt re-gjøre addGroups () -funksjonen som vi hadde i TopDownLevel. Vi må også legge til dueller for våre møbler i objectGroup. Nok en gang, siden vi ikke Jeg fortsetter å snakke om kollisjoner, men det er vanskelig å kollidere med en immobile rød boks. I løpet av de neste tre trinnene vil vi legge til tastaturkontrollene til vår røde boksen før endelig gjør det til en skikkelig animert sprite. La oss lage tutorial /Player.as Dette er skjelettet vi skal bruke til kjøttet ut en mer interessant spiller. Nå som vi har vår custom-spiller, må vi bruke den i IndoorHouseLevel. Legg denne funksjonen på slutten av klassen Twitter /** * Lag spiller * /overstyring beskyttet funksjon createPlayer (). Void {spiller = ny spiller (playerStart.x, playerStart.y);} Dette endret fra å bruke TopDownEntity til hjelp Player. Nå la oss gjøre dette røde boksen flytte rundt Siden vi kanskje ønsker enheter annet enn Vi har lagt til en ny konstant, RUNSPEED, som avgjør hvor raskt våre enheter flytte. Så vi satt maxVelocity og dra (retardasjon) i vår konstruktør. Etter det vi kaller updateControls () hver ramme slik at vi kan sjekke for tastatur, mus eller AI (avhengig av våre behov).
ringe FlxG.collide (floorGroup, spiller), kan spilleren gå over gulvene med nære en kollisjon i sikte (samme for guiGroup, også).
pakke tutorial {import org.flixel *..; importere topdown. *; /** * State for faktisk å spille spillet *author Cody Sandahl * /public class PlayState strekker FlxState {/** * konstanter * /public static Var LEVEL_SIZE: FlxPoint = new FlxPoint (240, 240); //Nivå størrelse (i piksler) public static Var BLOCK_SIZE: FlxPoint = new FlxPoint (16, 16); //Blokkstørrelse (i piksler) /** * Nåværende nivå * NB: "public static" tillater oss å få info om nivået fra andre klasser * /public static Var NIVÅ: TopDownLevel = null; /** * Lag tilstand * /overstyre offentlig funksjon lage (): void {FlxG.mouse.show (); //Belastningsnivå LEVEL = new TopDownLevel (dette, LEVEL_SIZE, BLOCK_SIZE); this.add (LEVEL); }}}
Trinn 4:. Å lage Entity
pakke topdown {import org.flixel *..; /** * En bevegelig objekt i spillet (spiller, fiende, NPC, etc) *author Cody Sandahl * /public class TopDownEntity strekker FlxSprite {/** * konstanter * /public static konst STØRRELSE: FlxPoint = new FlxPoint (16 , 18); //Størrelse i piksler /** * Konstruktør *param X X plasseringen av foretakets *param Y Y plassering av foretaket * /public funksjon TopDownEntity (X: Antall = 100, Y: Nummer = 100): void {super (X, Y); makeGraphic (SIZE.x, SIZE.y, 0xFFFF0000); //Bruker dette hvis du vil ha en generisk boks grafisk som standard}}}
Trinn 5:!? Opprette en innendørs rom
pakke tutorial {import org.flixel *..; importere topdown. *; /** * En grunnleggende innendørs scene *author Cody Sandahl * /public class IndoorHouseLevel strekker TopDownLevel {/** * Gulv lag * /verne Static Var GULV: Array = new Array (0, 0, 0, 0, 0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); /** * Veggsjikt * /beskyttede Static Var VEGGER: Array = new Array (1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2); /** * Konstruktør *param tilstand State viser nivået *param levelSize bredde og høyde nivå (i piksler) *param BLOCK Standard bredde og høyde på hver flis (i piksler) * /public funksjon IndoorHouseLevel (state: FlxState , levelSize: FlxPoint, Block: FlxPoint): void {super (stat, levelSize, Block); } /** * Lag kartet (vegger, dekaler, etc) * /overstyre beskyttet funksjon createMap (): void {var fliser: FlxTilemap; //Gulv fliser = new FlxTilemap (); tiles.loadMap (FlxTilemap.arrayToCSV (GULV, 15), //konvertere vårt utvalg av fliser indeksene til et format Flixel forstår Assets.FLOORS_TILE, //bilde å bruke tileSize.x, //bredde på hver flis (i piksler) tileSize .Y, trenger //høyden på hver flis (i piksler) 0, //ikke bruke auto flislegging (nødvendig slik at vi kan forandre resten av disse verdiene) 0, //starter indeks for våre brikker (0 = inkluderer alt i bildet) 0, //starter indeks for tegning våre brikker (0 = hver flis er trukket) uint.MAX_VALUE //som fliser tillate kollisjoner som standard (uint.MAX_VALUE = ingen kollisjoner)); floorGroup.add (fliser); //Vegger //FFV: gjøre venstre /høyre vegger bruk custom kollisjon Sender fliser = new FlxTilemap (); tiles.loadMap (FlxTilemap.arrayToCSV (vegger, 15), //konvertere vårt utvalg av fliser indeksene til et format Flixel forstår Assets.WALLS_TILE, //bilde å bruke tileSize.x, //bredde på hver flis (i piksler) tileSize .Y //høyden på hver flis (i piksler)); wallGroup.add (fliser); }}}
Trinn 6:. Legge Eiendeler
pakke tutorial {import flash.utils.ByteArray.; /** * Bygger og importerer alle eiendeler for spillet *author Cody Sandahl * /public class Eiendeler {//sprites [Bygg (kilde = "../../assets/sprites/ranger (opengameart - Antifarea - ccby30) .png ")] public static Var RANGER_SPRITE: Klasse; [Bygg (kilde = "../../assets/sprites/rug1 (opengameart - Redshrike - ccby30) .png")] public static Var RUG1_SPRITE: Klasse; [Bygg (kilde = "../../assets/sprites/rug2 (opengameart - Redshrike - ccby30) .png")] public static Var RUG2_SPRITE: Klasse; [Bygg (kilde = "../../assets/sprites/bookcase (opengameart - Redshrike - ccby30) .png")] public static Var BOOKCASE_SPRITE: Klasse; [Bygg (kilde = "../../assets/sprites/chair_down (opengameart - Redshrike - ccby30) .png")] public static Var CHAIRDOWN_SPRITE: Klasse; [Bygg (kilde = "../../assets/sprites/chair_left (opengameart - Redshrike - ccby30) .png")] public static Var CHAIRLEFT_SPRITE: Klasse; [Bygg (kilde = "../../assets/sprites/chair_right (opengameart - Redshrike - ccby30) .png")] public static Var CHAIRRIGHT_SPRITE: Klasse; [Bygg (kilde = "../../assets/sprites/chair_up (opengameart - Redshrike - ccby30) .png")] public static Var CHAIRUP_SPRITE: Klasse; [Bygg (kilde = "../../assets/sprites/table_round (opengameart - Redshrike - ccby30) .png")] public static Var TABLEROUND_SPRITE: Klasse; [Bygg (kilde = "../../assets/sprites/armor (opengameart - Redshrike - ccby30) .png")] public static Var ARMOR_SPRITE: Klasse; [Bygg (kilde = "../../assets/sprites/bed (opengameart - Redshrike - ccby30) .png")] public static Var BED_SPRITE: Klasse; //Fliser [Legge (kilde = "../../assets/tiles/walls (opengameart - daniel Siegmund - ccby30) .png")] public static Var WALLS_TILE: Klasse; [Bygg (kilde = "../../assets/tiles/floor_wood (opengameart - Redshrike - ccby30) .png")] public static Var FLOORS_TILE: Klasse; }}
Trinn 7:. Legge Objekter og Eye Candy
ringe FlxG.collide () for decalGroup, vil spilleren ikke bli hindret av våre imponerende tepper. Nå rommet vårt ser litt mindre ledig
Trinn 8:. Opprette Vår Player
pakke tutorial {import org.flixel *..; importere topdown. *; /** * Spiller styrt enhet *author Cody Sandahl * /public class Player strekker TopDownEntity {/** * Konstruktør *param X X plasseringen av foretakets *param Y Y plassering av foretaket * /public funksjon Player ( X: Nummer = 100, Y: Nummer = 100): void {super (X, Y); }}}
Trinn 9:. Legge Tastaturkontroller
Player for å kunne bevege seg, vi kommer til å legge noe av funksjonaliteten til TopDownEntity. Her er den nye versjonen
pakke topdown {import org.flixel *..; /** * En bevegelig objekt i spillet (spiller, fiende, NPC, etc) *author Cody Sandahl * /public class TopDownEntity strekker FlxSprite {/** * konstanter * /public static konst STØRRELSE: FlxPoint = new FlxPoint (16 , 18); //Størrelse i piksler public static konst RUNSPEED: int = 80; /** * Konstruktør *param X X plasseringen av foretakets *param Y Y plassering av foretaket * /public funksjon TopDownEntity (X: Antall = 100, Y: Nummer = 100): void {super (X, Y); makeGraphic (SIZE.x, SIZE.y, 0xFFFF0000); //Bruker dette hvis du vil ha en generisk boks grafisk som standard //bevegelse maxVelocity = new FlxPoint (RUNSPEED, RUNSPEED); drag = new FlxPoint (RUNSPEED * 4, RUNSPEED * 4); //Bremse til en stopp i 1/4 av et sekund} /** * Oppdater hvert timestep * /public styringsfunksjon oppdateringen (): void {updateControls (); super.update (); } /** * Sjekk tastatur /mus kontroller * /vernefunksjons updateControls (): void {acceleration.x = acceleration.y = 0; //Ingen tyngdekraft eller drag som standard} /** * Flytt enhet venstre * /public funksjon moveLeft (): void {vendt = VENSTRE; acceleration.x = -RUNSPEED * 4; //Akselerere til toppfart i 1/4 av et sekund} /** * Flytt enhet høyre * /public funksjon moveRight (): void {vendt = HØYRE; acceleration.x = RUNSPEED * 4; //Akselerere til toppfart i 1/4 av et sekund} /** * Flytt enhet opp * /public funksjon moveUp (): void {vendt = UP; acceleration.y = -RUNSPEED * 4; //Akselerere til toppfart i 1/4 av et sekund} /** * Flytt playe rdown * /public funksjon moveDown (): void {vendt = NED; acceleration.y = RUNSPEED * 4; //Akselerere til toppfart i 1/4 av et sekund}}}