Ant kan virke skremmende i starten, men jeg har tatt alle gjette arbeid ut for deg. Dette prosjektet er en modifisert versjon av min ANTPile mal som du kan få på GitHub her. Den er designet for å hjelpe deg med å komme i gang i løpet av noen minutter i en hvilken som helst editor som støtter ANT.

Det første vi må gjøre er å kopiere build.template.properties filen og endre navnet til build.properties . Dette er den viktigste filen som inneholder all konfigurasjonen for deg å bygge. La oss åpne den opp og se hva vi trenger å sette opp.

For å gi deg et referansepunkt jeg har igjen innstillingene mine konfigurasjons her. Det første du bør se på er FLEX_HOME. Sørg for at det er pekt på Flex SDK på datamaskinen. Jeg har en kopi av FlashBuilder på maskinen min så jeg peke på det. Hvis du ikke har FlashBuilder du kan laste ned SDK herfra og sette den hvor som helst på datamaskinen du vil da peke på den veien. Hvis du er på vinduer bør du gjøre alle banene fremovervendt.

Det neste vi ønsker å kontrollere den riktige nettleser, se etter "browser" variabel. Som du kan se på Mac jeg har det satt opp for Safari
browser = Safari

​​Hvis du er på windows må du peke det til en nettleser kjørbar. Her er et eksempel på hvordan du setter den opp for FireFox
browser = C:. /Program Files /Mozilla Firefox /firefox.exe

Den siste tingen du kanskje ønsker å gjøre er å sette opp en bane for Android SDK . Du kan laste det ned her, som du kan se jeg beholde min kopi i /Brukere /jfreeman /Dokumenter /AndroidDev /. Jeg også kalt meg basert på den versjonen av Android jeg bygger på. I dette tilfellet bruker jeg 2.2. Du kan hoppe over dette trinnet for akkurat nå siden jeg vil gå mer i detalj i del 2 om hvordan å bygge AIR for Android bruker ANT.

Så nå har du alle banene er satt opp, la oss se på hvordan du kjører dette. Sette opp en maur bygge er veldig lett i FDT. Bare høyreklikk på build.xml. Velg "Kjør som Ant Build ... og du vil se følgende vindu

Som du ser FDT har automatisk sette alt opp for deg Alt du trenger å gjøre er å velge løp,.. Du vil se Ant begynne bygge og nettleseren skal dukke opp med følgende swf:

Dette er standardskjermen av Ant Pile Gratulerer, dette var trolig den vanskeligste delen av hele opplæringen Hvis du hadde noen problemer bygning, sørg for at du.. angi riktig bane til FLEX_HOME og nettleseren. Hvis du er ny på Myren du kan tenke at dette er mye arbeid, og for noen ting du er riktige. Denne typen oppsett brukes på svært store prosjekter, men å vite hvordan du bruke ANT kan gjøre livet ditt enklere. Betyr dette bygge en masse ting IDE normalt ikke ville gjøre for deg. Det kan settes opp til å automatisk generere ASDocs, flytte filer rundt, og som du vil se senere vil bygge en swf og apk (Android app) med ett klikk.

Vi må bare gjøre en ting før vi kan gjøre våre første spillet, må vi fortelle FDT hvor Flixel SWC er. For å gjøre ting enkelt, har jeg tatt en opphopning av Flixel i bygge /libs mappe som er der du bør sette alle dine SWC biblioteker for prosjektet. ANT Bygg ser automatisk i denne mappen for disse libs men FDT har ingen anelse. Høyreklikk på prosjektet og velg Egenskaper fra hurtigmenyen. Neste velger FDT Bygg Path og klikk på fanen Bibliotek. Herfra kan du velge Legg SWCs ... fra høyre og finne flixel.swc i vår libs mappe.

Nå kan vi referere Flixel klasser og FDT vil vite hvor du finner dem. Også dette vil hjelpe med vår kodefullføring

Før vi kan gjøre noe med Flixel vi trenger for å skape en stat. En stat ligner på en skjerm eller scene i spillet. Du kan ha en start, slutt, og kreditt stat og du kan også gjøre statene for hvert nivå av spillet. Lar gjøre en starttilstand slik at vi kan sette opp Flixel. Høyreklikk på src mappen og velg New AS Class. Du vil ønske å fylle ut alt som dette:

Nå kan vi fylle på det grunnleggende for vår Start-skjermen. La oss kopiere og forbi følgende kode i:
pakke com.flashartofwar.frogger.states {import flash.events.MouseEvent; import org.flixel.FlxG; import org.flixel.FlxSprite; import org.flixel.FlxState; import org.flixel.FlxText; public class StartState strekker FlxState {/** * Dette er det første spillet staten spilleren ser. Bare lar dem klikk hvor som helst for å starte. * /Public funksjon StartState () {super (); } /** * Går gjennom og skaper grafikken for å vise start meldingen * /overstyre offentlig funksjon lage (): void {var sprite: FlxSprite = new FlxSprite (); sprite.createGraphic (FlxG.width, FlxG.height /2, 0xff000047); legge (sprite); stage.addEventListener (MouseEvent.CLICK, onClick); legge (ny FlxText (0, 200, FlxG.width, "PUSH") setFormat (null, 18, 0xffffffff, "center").); legge (ny FlxText (0, 300, FlxG.width, "hvor som helst for å starte") setFormat (null, 18, 0xd33bd1, "center").); } /** * Håndterer når brukeren klikker og endringer i PlayState. *param Event MouseEvent * /private funksjon onClick (event: MouseEvent): void {} /** * Denne fjernet klikk lytteren. * /Overstyre offentlig funksjon ødelegge (): void {stage.removeEventListener (MouseEvent.CLICK, onClick); super.destroy (); }}}

Akkurat nå er dette ikke kommer til å gjøre mye fornuftig hvis du ikke har brukt Flixel før. Jeg vil snakke litt mer om hvordan dette fungerer når vi begynner å bygge ut Play staten noen skritt for nå. Jeg har kommentert hva som skjer slik at du kan få den generelle ideen

Når vi har vår første staten, la oss gå inn i våre største klassen FlxFrogger og erstatte alt med dette.
Pakke {import com.flashartofwar .frogger.states.StartState; import org.flixel.FlxGame; [SWF (width = "480", height = "800", bakgrunnsfarge = "# 000000")] [Frame (factoryClass = "Preloader")] public class FlxFrogger strekker FlxGame {/** * Dette er hovedspillet konstruktør. * /Public funksjon FlxFrogger () {//Lag Flixel Game. super (480, 800, StartState, 1); }}}

Dette er all koden vi må begynne å Flixel og begynne spillet vårt. Som du kan se vi bare forlenge FlxGame og bestå dimensjoner og vår StartState opp til super. Den siste verdi, 1, representerer skalaen modus. Flixel kan "finere" spillet ditt for å bidra til å oppnå en kul retro pixelated utseende. Vi kommer ikke til å bruke det i dette spillet siden kildebildene er pixelated nok.

Du må også lage en standard Preloader klasse. Opprett en ny klasse kalt Preloader og konfigurere det slik:

Så kopiere denne koden inn i den.
Pakke {import org.flixel *; public class Preloader strekker FlxPreloader {offentlig funksjon Preloader () {classname = "FlxFrogger"; super(); }}}

Dette forteller bare Flixel og kompilatoren hvilken klasse er den viktigste klassen til å lage en gang forspenning er fullført.

Nå la oss kjøre ANT Bygg for å se vår startskjermen. Du gjør stor hvis du ser dette:

Hvis du klikker, vil ingenting skje. Vi må gjøre vårt Play State. Før vi gjør det, la oss sette opp alle våre spillgrafikk og lyd

I det siste man kanskje har lagt alle dine eiendeler i en FLA og brukes tidslinjen. I dette prosjektet skal vi gjøre alt gjennom koden. Siden Flixel håndterer animasjoner gjennom Sprite ark vi ikke trenger en tidslinje eller en MovieClip. La oss lage en ny klasse kalt GameAssets og sette det opp slik:.

Hvis du ser i vår oppbygging /eiendeler mappen du vil se alle våre bilder er klar for oss å importere

Merk : Original Frogger grafikk og bilder av Konami

Siden vi ikke har et bibliotek ved bruk av Flex SDK vil vi trenger å bruke Embed Tag. Her er et eksempel på hva en av våre eiendeler vil se ut når vi legger det inn. Legg dette til GameAssets klassen
[Bygg (kilde = "../../../../../bygge /eiendeler /frogger_title.gif")] public static Var TitleSprite. Klasse;

Som du kan se vi trenger for å gi en bane til grafikken og gi den et variabelnavn. Dette ligner på å legge en kobling ID i biblioteket i en SWF. Banen er alltid i forhold til plasseringen av din klasse i prosjektet. Siden denne klassen er i flere pakker vil du legge merke til ../betegner at kompilatoren skal se et nivå høyere fra nåværende posisjon. La oss legge denne til vår GameAssets klasse. En siste ting å legge merke til er at variabelen er statisk. Vi skal bruke denne klassen over hele vårt program for å få tilgang til aktivaklassen referanse. Når du har denne eiendelen lagt og lagret, kan åpne vår StartState og legge til en tittel

Etter linje med stage.addEventListener i lag () -metoden, legge til følgende linjer med kode.
Var tittelen : FlxSprite = new FlxSprite (0, 100, GameAssets.TitleSprite); title.x = (FlxG.width * 0,5) - (title.width * 0,5), legge til (tittel);

Som du ser vi oppretter en ny FlxSprte som er basen bildetype i Flixel og bestått i en referanse til TitleSprite fra vår GameAssets klasse. Du trenger også å importere GameAssets på toppen:
import com.flashartofwar.frogger.sprites.GameAssets;

FDT kan hjelpe deg med å håndtere import og burde ha bedt om å legge det for deg. Du kan trykke Command 1 på en Mac for å få rask dialog fix boksen til popup. Nå la oss kjøre ANT Bygg og se vår spilltittel:

Great, du nettopp har lært hvordan du importerer en Bitmap i din app og hvordan du kan vise det i Flixel. La oss gå tilbake til vår GameAssets klasse og fylle ut resten av grafikken vi trenger: product: [Embed (kilde = "../../../../../bygge /eiendeler /background.png ")] public static Var LevelSprite: Klasse [Bygg (kilde =" ../../../../../bygge /eiendeler /lives.png ")] public static Var LivesSprite: Klasse [Embed (kilde = "../../../../../bygge /eiendeler /alligator_sprites.png")] public static Var AlligatorSprite: Klasse [Bygg (kilde = "../../.. /../../build/assets/car_sprites.png")]public Static Var CarSpriteImage: Klasse [Bygg (kilde = "../../../../../bygge /eiendeler /frog_sprites .png ")] public static Var FrogSpriteImage: Klasse [Bygg (kilde =" ../../../../../bygge /eiendeler /bonus_sprites.png ")] public static Var HomeSpriteImage: Klasse; [Bygg (kilde = "../../../../../bygge /eiendeler /tree_1.png")] public static Var LogSpriteImage1: Klasse [Bygg (kilde = "../../../../../build/assets/tree_2.png")]public Static Var LogSpriteImage2: Klasse [Bygg (kilde = "../../../../../bygge /eiendeler /tree_3.png")]public Static Var LogSpriteImage3: Klasse [Bygg (kilde = "../../../../../bygge /eiendeler /truck.png")] public static Var TruckSpriteImage: klasse; [Bygg (kilde = "../../../../../bygge /eiendeler /turtle_2_sprites.png")] public static Var TurtlesSpriteImage: Klasse [Bygg (kilde = "../. ./../../../build/assets/turtle_3_sprites.png")]public Static Var TurtlesBSpriteImage: Klasse;

Nå som vi har alle våre spill grafisk satt opp vi kan sette opp noen lyder.

Inkludering lyd direkte inn i en klasse er en ingen vinn-situasjon. Dette er en av de gangene jeg faktisk bruker Flash IDE å gjøre livet enklere. Den andre gangen jeg bruker det er for innebygging fonter men heldigvis Flixel har alle skriftene vi trenger allerede en del av rammeverket. Å bygge inn en lydfil vil vi trenger å legge den til i biblioteket med en FLA og legge til en kobling ID. Jeg har allerede opprettet en swf for oss i eiendeler mappen kalt frogger_sounds. Hvis du ønsker å se hvordan jeg gjorde dette, inkludert jeg en FLA i nybygg /flas mappe. La oss legge til noen lyder i vår GameAssets klasse.
[Bygg (kilde = "../../../../../bygge /eiendeler /frogger_sounds.swf", symbol = "FroggerExtraSound")] offentlig Static Var FroggerExtraSound: Klasse [Bygg (kilde = "../../../../../bygge /eiendeler /frogger_sounds.swf", symbol = "FroggerPlunkSound")] public static Var FroggerPlunkSound: Klasse; [Bygg (kilde = "../../../../../bygge /eiendeler /frogger_sounds.swf", symbol = "FroggerSquashSound")] public static Var FroggerSquashSound: Klasse [Bygg (kilde = " ../../../../../build/assets/frogger_sounds.swf ", symbol =" FroggerTimeSound ")] public static Var FroggerTimeSound: Klasse [Bygg (kilde =" ../../../../../build/assets/frogger_sounds.swf ", symbol =" FroggerHopSound ")] public static Var FroggerHopSound: Klasse [Bygg (kilde =" ../../../../../build/assets/frogger_sounds.swf ", symbol =" FroggerThemeSound ")] public static Var FroggerThemeSound: Klasse;

Så dette fungerer ligner på hvordan vi bygge inn et bilde, men som du kan se alle våre lydene kommer fra vår swf. Også vi referere sammenhengen ID som er symbolverdien. Nå som du har disse på plass, la oss gi det en test. Åpne opp vår StartState klasse og se etter onClick () -metoden. Legg til følgende linje med kode:
//Sound spilles etter at staten bryter for å holde den fra å være destroyedFlxG.play (GameAssets.FroggerThemeSound);

Flixel gjør spille lyden utrolig enkelt. Du bare spør FlxG, som er en Singleton i rammen, for å spille og gi det en referanse til lyden Class. Vi kan teste dette ved å kjøre ANT bygge og klikke hvor som helst på skjermen.

Nå er vi klare til å legge vår PlayState slik at vi faktisk kan gjøre noe når brukeren prøver å starte spillet.

Tidligere når vi laget vår StartState Jeg slags glattet over hva som skjer under panseret. La oss ta det litt saktere denne gangen, slik at du kan få et bedre inntrykk av hvordan stater arbeid i Flixel. Opprett en ny klasse kalt PlayState og konfigurere det slik:

Neste legge litt stump kode:
pakke com.flashartofwar.frogger.states {import com.flashartofwar.frogger.sprites.GameAssets; import org.flixel.FlxSprite; import org.flixel.FlxState; public class PlayState strekker FlxState {/** * Dette er den viktigste nivået av Frogger. * /Public funksjon PlayState () {super (); } /** * Dette er den viktigste metoden ansvarlig for å lage alle de spillebrikker og layout ut nivået. * /Overstyre offentlig funksjon lage (): void {//Opprett BG sprite Var bg: FlxSprite = new FlxSprite (0, 0, GameAssets.LevelSprite); legge (bg); }}}

Så her har vi to metoder, vår konstruktør som ikke gjør noe og en styres skape () -metoden. I Flixel den FlxState klassen, som vi bygger ut, har dette som standard metode kalt "skape". Det er der alle våre initialisering logikken går. Tenk på det som init. Som du kan se vi skaper bakgrunnsbilde for spillet vårt nivå. En annen ting du bør ta hensyn til, er tillegget () samtalen når vi ønsker å knytte sprites til renderer. Dette ligner på hvordan addChild () fungerer, men i Flixel siden alle våre visningselementene er trukket til skjermen under hver "gjengi syklus" vi har ingenting å virkelig legge til Vis liste.

Før vi kan se dette, skal vi trenger en måte å bytte til denne tilstanden. La oss gå int vår StartState klasse og legge til følgende i onClick behandleren:
FlxG.state = new PlayState ();

Dette er hvordan vi bytte mellom stater i Flixel. Det er veldig lett å flytte fra stat til stat. Når du forteller FlxG sin nye toppklasse displayet gjør det automatisk. Det finnes måter å animere mellom stater, men som er ute av omfanget av denne opplæringen. La oss kjøre demoen, og når du klikker for å starte, bør du se følgende tom nivå

Det ser virkelig tomt i det, la oss legge til noen tegn

I Frogger er det 3 grunnleggende "skuespillere":

The Player: Dette er frosken, kan han flytte opp, ned, venstre og høyre. På land han ikke kan gå forbi bunnen, venstre og høyre grenser. I vannet hvis han går av skjermen han dør

Innpakning Objects. Dette er biler, lastebiler, logger, og skilpadder. Alle bevegelige objekter i spillet kan "pakke". Dette betyr at når de går utenfor skjermen de vises på motsatt side og bevege seg i samme retning. Bevegelige objekter kan gå til venstre eller høyre

Timer objekter. Dette er objekter som beveger seg, eller i tilfelle av hjemmebasene ikke flytte, og er på et tidsur. Når timeren er opp de endrer tilstand. Turtles gå under vann og hjem viser en bonus eller en alligator.

For nå la oss fokusere på innpakning stedene. Opprett en ny klasse kalt WrappingSprite og konfigurere det slik:

Og her er koden for denne klassen:
pakke com.flashartofwar.frogger.sprites.core {import com.flashartofwar.frogger.enum. GameStates; import com.flashartofwar.frogger.states.PlayState; import org.flixel.FlxG; import org.flixel.FlxSprite; public class WrappingSprite strekker FlxSprite {beskyttet Var leftBounds: int; beskyttede Var rightBounds: int; beskyttet Var tilstand: PlayState; Var hastighet offentlige: int; /** * Dette er en base klasse for noen sprite som må brytes rundt skjermen når den går ut av * grensene. Denne typen sprite klokker for når den er slått av screene de nullstilles det er X stilling til * motsatt området basert på den retning. * *param X start X *param Y start Y *param SimpleGraphic Bruk for sprites uten animasjoner *param dir Direction, støtter Høyre (1) og Venstre (0) *param hastighet hvor mange pixel sprite vil flytte hver oppdatere. * /Public funksjon WrappingSprite (X: Antall = 0, Y: Antall = 0, SimpleGraphic: Class = null, dir: uint = HØYRE, hurtighet: int = 1) {super (X, Y, SimpleGraphic); this.leftBounds = 0; this.rightBounds = FlxG.width; this.speed = hastighet; vendt = dir; state = FlxG.state som PlayState; } /* ** Denne oppdateringen metoder analyserer retning og x stilling av forekomsten for å se om det skulle * flyttes til den motsatte side av skjermen. Hvis tilfellet er vendt rett, vil den starte * på venstre side av skjermen. Det motsatte vil skje for noe mot venstre. * /Overstyre offentlig funksjon oppdateringen (): void {//Sørg spillet staten er å spille. Hvis ikke gå ut av oppdatering siden vi skulle bli stanset. if (state.gameState = GameStates.PLAYING!) {return; } Else {//Legg hastighet til eksempel er x basert på retningen x + = (vendt == venstre)? speed: hastighet; //Sjekk om forekomsten er utenfor banen. Hvis ja, legg den på motsatt side av skjermen if (x > (rightBounds)) {if (vendt == HØYRE) {x = leftBounds - frameWidth; }} Else if (x < (leftBounds - frameWidth)) {{x = rightBounds + frameWidth; }}} //Call oppdatering super.update (); }}}

Jeg har ikke tenkt til å gå over alle logikken her, men jeg vil fremheve oppdateringen () -metoden. Alle FlxSprites ha en oppdatering () -metoden. Flixel bruker noe som kalles et spill Loop. Hva dette betyr er at alt i rammen er synkronisert opp til samme sløyfe til å utføre alle sine kommandoer. Dette kan være rende instruksjoner, pre-gjengir beregninger eller rett og slett spillet logikk. I denne oppdateringen metoden sjekker vi tilstanden i spillet, mer om dette i et sekund, hvis vi spiller det er trygt å flytte objektet.

Våre flytte logiske kontroller for å se vår retning og beveger seg langs sin X akser. Hvis vi nå våre grenser, beveger forekomsten til motsatt side av skjermen. Det kan se ut som mye, men logikken er veldig enkel. Det vil være mer fornuftig når vi skaper vår første WrappingSprite. . La oss sette opp våre spill statlige konstanter første

Opprett en ny klasse kalt GameStates og konfigurere det slik:

Her er våre tilstander:
public static konst SPILLE: uint = 0; //Spillet er å spille så animasjonen er allowedpublic statisk konst KOLLISJON: uint = 1; //En kollisjon har oppstått, stoppe all animationpublic statisk konst RESTART: uint = 2; //Start spillet animationspublic statisk konst GAME_OVER: uint = 3; //Game er overpublic statisk konst DEATH_OVER: uint = 4; //En død animasjon er overpublic statisk konst LEVEL_OVER: uint = 5; //Et nivå er over

Vi må også legge til et sted å lagre spillet staten i vår PlayState. Legg til følgende eiendom og import uttalelse:
offentlig Var gameState: uint;

Nå er vår PlayState kan holde oversikt over den globale tilstanden i hele spillet. Vi vil bruke dette til å tillate /deaktivere animasjoner skjer når store hendelser skjer i spillet. Til slutt la oss legge riktig staten til vårt lager () metode:
//Aktiver spillet ved å sette inn riktig stategameState = GameStates.PLAYING;

Så dette vil sette spillet vårt i bevegelse når alt har blitt opprettet. La oss se på hvordan du legger biler til spillet vårt

Vi er endelig klar til å gjøre noe trekk. Det var mye å bygge opp for å få til dette punktet, men nå har vi alle de sentrale klasser i stedet for et solid fundament å bygge videre på. Lag en bil klasse og konfigurere det slik:

Og her er vår kode:
pakke com.flashartofwar.frogger.sprites {import com.flashartofwar.frogger.sprites.core.WrappingSprite; public class Bil strekker WrappingSprite {public static konst SPRITE_WIDTH: int = 40; public static konst SPRITE_HEIGHT: int = 40; public static konst TYPE_A: int = 0; public static konst TYPE_B: int = 1; public static konst TYPE_C: int = 2; public static konst TYPE_D: int = 3; /** * Enkel sprite å representere en bil. Det er 4 typer biler, representert ved TYPE_A, _B, * _C, og linjen d konstant. * *param X start X *param y starte Y *param typen type bil å bruke. Type_A, _B, _C, og linjen d blir nevnt som konstanter på klasse *param retning retning sprite vil bevege seg i *param hastighet hastigheten i piksler der sprite vil flytte på oppdatering * /public funksjon Car (x: Antall, y: antall, type: int, retning: int, hastighet: int) {super (x, y, null, retning, hastighet); loadGraphic (GameAssets.CarSpriteImage, falsk, falsk, SPRITE_WIDTH, SPRITE_HEIGHT); ramme = type; }}}

Som du ser, er vi rett og slett utvide WrappingSprite her og utenfor lagre noen verdier, vi bare definere grafikken som skal brukes for bilens sprite. Som du ser er det 3 typer biler. Vi har også en konstant for bilens bredde og høyde som du vil bruke til å legge den ut når du setter opp nivået. Før vi går videre la oss snakke om hvordan loadGraphic () fungerer.

Som jeg har nevnt et par ganger før, bruker Flixel sin egen tilpassede klasse for å representere visuelle elementer av spillet ditt. Du må laste inn en grafisk for at FlxSprite å vite hvordan å gjengi selv. Når det gjelder enkle Sprites som denne bilen som ikke har noen animasjon det er relativt enkelt å sette opp. Vi passerer i en referanse til den grafiske sin klasse, satt animasjon til false, satt reversere til falske og levere sin bredde og høyde. På neste linje setter vi rammen til biltype. Dette er et lite triks du kan gjøre med Sprites for å kutte ned på å ha flere ressurser til innspill. Ta en titt på bilen sprite:

Jeg har lagt til alle de forskjellige typer biler til Sprite bildet og slett fortelle Bil eksempel hva ramme å bruke basert på konstantene på toppen av klassen. Dette vil være mer fornuftig når du ser det i aksjon

La oss gå over til vår PlayState og legge følgende metoder:
/** * Helper funksjon for å finne X posisjonen til en kolonne på spillets grid *param verdi kolonnenummer *return returnerer tall basert på verdien * TILE_SIZE * /public funksjon calculateColumn (verdi: int): int {return verdi * TILE_SIZE;} /** * Helper funksjon for å finne den Y posisjon av en rad på spillets grid *param verdi radnummer *return returnerer tall basert på verdien * TILE_SIZE * /public funksjon calculateRow (verdi: int): int {return calculateColumn (verdi);}

Disse to hjelpemetoder vil gi oss mulighet til raskt og konsekvent plassere spillet vårt Sprite i spillverdenen. Ved første øyekast kan det ikke være opplagt, men Frogger er faktisk basert på et rutenett.

Hver flis er 40 x 40 og det er 12 kolonner med 16 rader. Bare 15 rader er i vår bakgrunn fordi den siste raden hvor frosken starter er svart, og det er ingen vits i å legge en ekstra rad til png å øke filstørrelsen.

Du ønsker også å beholde sprites som liten som mulig siden Flixel vil male hele denne bitmap til skjermen før den gjør noe annet. Jo større din bakgrunn, jo lenger tid det tar å gjøre det, og alle de andre FlxSprites. Vi kunne bryte dette bildet ned enda mer, men å holde denne opplæringen lett å følge, jeg holdt bakgrunnen som ett stort bilde.

Siden vi vet fliser dimensjoner, la oss legge en konstant til vår PlayState klassen.
privat konst TILE_SIZE: int = 40;

Nå er vi klare til å begynne å legge Biler til vårt nivå. Gå til lage () -metoden og legge til følgende linjer ovenfor der vi setter tilstandsvariabel
//Opprett CarscarGroup = legge (ny FlxGroup ()) som FlxGroup;. CarGroup.add (ny Car (0, calculateRow (10 ), Car.TYPE_C, FlxSprite.RIGHT, 1)); carGroup.add (ny bil (270, calculateRow (10), Car.TYPE_C, FlxSprite.RIGHT, 1)); carGroup.add (ny Car (0, calculateRow (11), Car.TYPE_D, FlxSprite.LEFT, 1)); carGroup.add (ny bil (270, calculateRow (11), Car.TYPE_D, FlxSprite.LEFT, 1)); carGroup.add (ny Car (0 , calculateRow (12), Car.TYPE_B, FlxSprite.RIGHT, 1)); carGroup.add (ny Car ((Car.SPRITE_WIDTH + 138) * 1, calculateRow (12), Car.TYPE_B, FlxSprite.RIGHT, 1) ); carGroup.add (ny Car ((Car.SPRITE_WIDTH + 138) * 2, calculateRow (12), Car.TYPE_B, FlxSprite.RIGHT, 1)); carGroup.add (ny Car (0, calculateRow (13), Car.TYPE_A, FlxSprite.LEFT, 1)); carGroup.add (ny Car ((Car.SPRITE_WIDTH + 138) * 1, calculateRow (13), Car.TYPE_A, FlxSprite.LEFT, 1)); carGroup.add ( Ny bil ((Car.SPRITE_WIDTH + 138) * 2, calculateRow (13), Car.TYPE_A, FlxSprite.LEFT, 1));

Vi har nå lagt alle våre biler. Det er mye kode, men det bør være lett å følge. Vi skaper det som kalles en FlxGroup. Dette er en fin måte å gruppere lignende sprites sammen og kommer godt med når vi begynner å gjøre vår dueller i del 2 av denne opplæringen. Hver bil er lagt til vår carGroup og det blir en start X, Y, type, retning og hastighet. Siden vi ønsker alle våre biler til å alltid være riktig stilt opp på radene, bruker vi calculatRow metode for å bidra til å sette det på rett sted.

Du må importere FlxGroup og Bilklasser deretter legge til følgende eiendom:
private Var carGroup: FlxGroup;

Du må også importere bilen og FlxGroup klasser
import com.flashartofwar.frogger.sprites.Car, import org.flixel.FlxGroup; Nå hvis vi kjører ANT build du vil se alle våre biler i riktig sted og som hver og en går av skjermen, vil det dukke opp igjen på motsatt side.

La oss legge i noen lastebiler. Anmeldelser

Opprette en lastebil er lettere enn bilen siden det er bare én type truck. La oss lage en ny lastebil klasse og konfigurere det slik:

Og her er koden for klassen:
pakke com.flashartofwar.frogger.sprites {import com.flashartofwar.frogger.sprites.core. WrappingSprite; public class Truck strekker WrappingSprite {/** * Dette er en enkel sprite som representerer Truck. * *param X start X *param Y starte Y *param dir retning sprite vil bevege seg i *param fart fart i piksler sprite vil gå videre oppdatering * /public funksjon Truck (x: Antall, y: Antall, retning: uint, hastighet: int) {super (x, y, GameAssets.TruckSpriteImage, retning, hastighet); }}}

Se hvor enkelt dette var? Siden vi ikke har noen animasjon og det er bare én type lastebil vi kan gjøre dette til en enkel sprite og bestå en referanse til Truck eiendelen til konstruktøren.

Vi kan legge til noen lastebiler ved å gå inn i vår PlayState klasse og legge til følgende kode i over der vi skaper vår første bil, noe som gjør at det er under der vi skaper vår carGroup.
carGroup.add (ny lastebil (0, calculateRow (9), FlxSprite.LEFT, 1) gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker;