Build en isometrisk Map Editor Med As3isolib
en
Del
16
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen, vil jeg introdusere deg til begrepet isometrisk skapelsen innhold og grunnleggende om å designe med det, ved hjelp av åpen kildekode bibliotek As3isolib. Vi vil bruke disse ferdighetene til å lage en enkel level editor, egnet for en isometrisk spillet
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot.:
SWF har blitt klemt litt for å passe på siden; Klikk her for å se det i full størrelse Først er det viktig å vite hva vi mener med isometrisk Tenk deg at du er i en isometrisk visning.; vil du ha en 3D-visning (for eksempel når et kamera tar et bilde av deg) der uansett du er, vil du bli vist på samme skala i henhold til det kameraet. Dette er i motsetning til en sann perspektiv, hvor du vil bli redusert i størrelse når du er langt unna kameraet. As3isolib håndterer all den underliggende matematikk involvert i å lage dine scener og visninger, så ikke bekymre deg om matematikk Tile basert på, er et begrep som brukes for noe grafisk innhold som bruker fliser som en fundmental element. Konseptet i seg selv er litt gammel - den ble brukt i eldre spill for tekniske årsaker - men dette betyr ikke at flis basert spill er nå død; disse dager 3D-rendering er, men disse 3D-spill kan være flis basert (og mange er). Det er der isometriske spill kommer i Fliser er vanligvis rektangulære, men det er også kvadratiske fliser, trekantede fliser og selv sekskantede fliser (som i noen Civilization titler) Rektangulære fliser er den enkleste av alle til å jobbe med, selv om mesteparten av tiden, når du arbeider i rektangel land, bruker du kvadratiske fliser. Du kan bruke andre størrelser, selvfølgelig, men plassen synes å være en favoritt. Synspunkt for spill med kvadratiske fliser er vanligvis toppen ned eller overhead. Dette betyr bare at alle dine grafikk må trekkes som om du ser ned på objektet. Noen ganger kan du gi spillet en litt vinklet visning slik at du ser det meste ned, men du kan se noen av de foran eller bak. En annen synsvinkel for kvadratiske fliser er "side-scroller" view , hvor du ser på verden fra sin side. Dette var veldig populært blant eldre action spill som Super Mario Bros, og den opprinnelige 2D Duke Nukem. I en rektangulær kart, som beveger seg langs X-aksen betyr bevegelige øst, og som beveger seg langs Y-aksen betyr bevegelige syd. I en isometrisk tilemap, avhengig av type, beveger seg langs X-aksen kan bety flytting sørøst, og beveger seg langs Y-aksen kan bety flytting sørvest. I isometriske fliser vi fortsatt bruke rektangulære områder å inneholde flisene; Dette er ikke til å endre seg. Hva vil endre seg er hvordan du vil gjengi dem . (Red.anm:. En stor guide til forskjellige typer perspektiv finner du her) Det er tre typer av isometriske tilemaps: lysbilde, forskjøvet, og diamant. Hver har sitt eget sett med quirks, sine egne metoder for gjengivelse, sin egen måte å representere en tilemap, og sin egen metode for å navigere dem. Jeg vil presentere dem kort i dette trinnet Skyv Maps. Raset tilemap er trolig den enkleste å gjengi, navigere og samhandle med. Dessverre har det begrensede bruksområder. Det er hovedsakelig brukt til å rulle actionspill. Vanligvis har et lysbilde over en horisontal X-akse og en diagonal Y-akse, selv om det er mulig å ha en vertikal Y-akse og en diagonal X-aksen. Flisene er blitted i horisontale rader topp til bunn Forskjøvet Maps:. Forskjøvet Kartene fungerer perfekt i turbaserte strategispill. Det er også svært nyttig i å simulere en runde verden; det er best egnet for kart som brytes rundt (flytte fra én kant til den andre). Hver ny rad av kartet som vekselvis skiftet halvparten av en flis til venstre eller høyre, noe som resulterer i et sikksakk mønster av fliser. X-aksen er vanligvis horisontalt (stigende mot øst), og Y-aksen er sørøst og sørvest. Forskjøvet kartene er den mest uregelmessig av de tre. Flisene er blitted i horisontale rader, topp til bunn Diamond Maps. Denne type kart er veldig populært i sanntidsstrategispill. Disse kartene er den minst offensive; lysbilde kartene har "fillete" topper og bunner, og forskjøvet kartene har "fillete" kanter, så diamant kartene er den jevneste. I diamant kart, er det eneste kravet at både X- og Y-aksen er diagonal, slik at du kan øke X-aksen eller Y-aksen som passer deg, som X-aksen økende til sørvest og Y-aksen til sørøst . Det er nok sammenheng - på tide å begynne å utvikle Første skritt er å laste ned As3isolib (Actionscript 3 Isometrisk Library) som er en åpen kildekode bibliotek for å lage isometrisk anslått innhold. Et eksempel på et spill laget bruker det er Empires og allierte fra Zynga. Biblioteket inneholder noen eiendeler som primitive former (rektangler, kuber, og så videre) og noen verktøy til rette for etablering av isometrisk innhold. Det er også gratis og kan brukes i alle kommersielle arbeid (selv om du kan donere til det hvis du vil). La oss nå laste det ned her. Etter nedlasting det pakke ut zip-filen til en ny mappe og gi den navnet Level Editor Når som helst mens du bruker As3isolib du kan se i dens dokumentasjon via denne linken Fyr opp Flash og opprette en ny Actionscript 3.0 FLA. Nå må vi importere PSD-filen for Level Editor grensesnitt som jeg har laget (det er i opplæringen kildefilene), eller du kan redesigne grensesnittet til hva du føler ser bra ut. Så klikk på Fil > Import >. Import til scenen, velg PSD-filen, og merk den "satt scenen størrelse til samme størrelse som Photoshop lerret" alternativet Nå har vi de rå bildene for vår Level Editor. Vi må skape vår Document klasse der vi vil implementere vår Nivå Redaktør: i Properties panelet i Publish seksjonen vil du finne en klasse felt; skrive CDOC og klikk på blyant-knappen. Nå lagre Actionscript-fil som vises, og gi den navnet CDOC Gir gjøre våre tre knapper i bunnen panel; høyre klikk på knappen bakgrunnsbilde og velg Convert to Symbol som det du ser i bildet, og deretter endre navn på knappen for å btnClear Så gjentar du dette trinnet for å gjøre de resterende to knapper Nå vil vi lage de tre kategoriene. en av dem vil være for soild farger, en annen for Murstein, og den siste for Grass Tegn en svart gradient rektangel, høyreklikker du på den, og velg Konverter til Symbol, deretter navnet til Tab og velge sin type for å være et filmklipp. Nå markere Export for Action alternativet, deretter i klasse feltet skrive CTAB Dobbeltklikk på Tab Movie Clip og sette inn tekst i det; inne i dette, skrive NAME Nå vi har et filmklipp for fanen vår, må vi på å bruke tre eksemplarer av det og navngi dem, så la oss gjøre det i vår dokument Class Nå la oss lære om en av de viktigste tingene i As3isolib: isometrisk visning som fungerer som et kamera som viser isometrisk objekter. Den har en masse nyttige funksjoner, som panorering og zooming og fokusering på et punkt eller en annen gjenstand. Det gir også muligheten til å skjule /klippet gjenstander utenfor sine grenser, og også lar oss endre sin bakgrunn og forgrunn innhold. Vi vil skape to visninger i våre Levels Editor, er den første for vår view som vil ha et rutenett i det og også gjenstander av vårt nivå, er den andre visningen for Objects Browser som vil ha mye objekttyper som kan brukes i utformingen nivået. Nå vil vi legge til følgende kode i vår CDOC klasse - sørg for å sjekke linjenummerering, eller bare ta en titt på kildefilene for opplæringen I den første linjen vi laget vår IsoView og kalte det view Nå må vi vise vår view så vi lagt det til skjermen listen over dokumentet som et barn, og å gjøre det i bunnen av vår grensesnitt for å sørge for at det ikke vil overlappe med andre element vi lagt det på indeksen 0. Da vi lagt til to hendelsen lyttere på vår synsfeltet, en for panorering og den andre for zooming (som igjen vil jeg forklare senere) koordinatsystem som brukes i Flash kalles kartesisk koordinatsystem system. isometrisk plass er litt annerledes; hver av de tre akser vises like i størrelse og vinklene mellom hvilke som helst to av dem er 120 grader. As3isolib gir en måte å konvertere et punkt fra kartesiske til isometrisk koordinater (og vice versa) ved å ringe IsoMath.screenToIso (Point: Pt) for å konvertere en måte, og IsoMath.isoToScreen (Point: Pt). Konvertere den andre Det er veldig enkelt å lage isometrisk scene som vil holde våre stedene. (Disse objektene vil alle bli arvet fra IsoDisplayObject (ex. IsoBox, IsoRectangle, IsoSprite, etc) som er basen klassen at alle primitive og komplekse isometriske visningsobjekter utvider.) Vi vil bruke et nytt IsoScene og deretter legge vår scene til view å bli vist For å legge til et rutenett i synsfeltet vi må rett og slett bruke et nytt IsoGrid så kan vi sette bredden og lengden til 10 for å gi oss en 10x10 rutenett. Dessuten kan vi sette sin celle størrelse til hva vi ønsker (jeg plukket 30). Den siste og svært viktig skritt er å legge rutenettet til åstedet Vi må legge til en hendelse lytteren å gjengi scenen, og det er veldig enkelt, bare legge lytteren og i kroppen sin ringe render () -funksjonen på scenen I dette trinnet vil vi legge til lytterne for klikk arrangementer på våre bunnpanelknapper, men først trenger tilgang til dem, som vi kan gjøre med funksjonen getChildByName (). På det første arrangementet behandleren for Slett Da vi laget vår view vi lagt til en hendelse lytteren for MOUSE_DOWN hendelsen. I dette tilfelle lytteren vil vi håndtere starten av panorering: vil vi først opprette et punkt og gi den navnet panPt Deretter fjerner vi musen ned arrangementet lytteren og legge til to nye hendelsen lyttere. Én for selve håndteringen av panorering og den andre når vi stopper vår panorering Denne hendelsen lytteren kalles når musen beveger seg og hva den gjør er meget enkel: det pans visningsfeltet i henhold til X- og Y-posisjonene til mus opprinnelige stilling panning minus Når vi stoppe panoreringen vi må fjerne både onPan Hotell og onStopPan Vi la til onZoom Det er veldig enkelt. vite om musen beveger seg opp eller ned må vi sjekke eiendommen av musen hendelsen ( e Husk at vi ikke satt noen grense sjekker inn zoom-verdier eller panorering, noe som betyr at du kan zoome eller panorere visningen utenfor kanten av scenen. Det er veldig enkelt å legge dem, men jeg vil la det til deg Etter å ha fullført vår view og legge sin funksjonalitet, må vi opprette formåls panel der vi kan se våre objekter og legge dem til i synsfeltet. Vi starter med å lage en ny isometrisk scene, heter objectScene Nå må vi lage noen ensfargede objekter for den solide kategorien, så vi vil legge et museklikk hendelse lytteren Først fjerner vi alle barna fra objectScene Nå må vi endre våre punktverdier til å være i isometrisk koordinater, så vi bruker den nevnte screenToIso () -funksjonen, så flytte vår objekt til den nye posisjonen og tilbakestille vårt poeng å være i skjermen koordinater - Dette gjør det enkelt for oss å justere våre objekter i et rutenett med våre kjente skjerm (kartesisk) koordinerer, mens vi flytte våre objekter med hva som passer dem best (isometriske koordinater). Så vi bare øke X-verdien med 80 og legge til tre hendelsen lyttere: de to første vil håndtere ROLL_OVER hendelser, for å fremheve objektet når rullet over, og den tredje vil håndtere KLIKK hendelser. Til slutt legger vi objektet til scenen og gjort alt Dette trinnet er svært lik den forrige, bortsett fra at vi endrer tabellinnholdet . til våre Bricks, som vi vil skape og importe i våre neste trinnene Den andre forskjellen fra forrige trinn er at vi opprettet en isometrisk sprite objekt med et blikk som vi kan helt endre å være hva vi vil; vi lagt våre klosser til det ved å sende en henvisning til sprite.sprites som er en rekke sprites. Nå kan du lage gras objektene akkurat som vi gjorde med klossene, må du bare endre klosser matrise . til gresset rekke Vi kommer til å gjøre våre tekstur eiendeler, så starter en ny Flash-dokument og importere våre eiendeler fra et bilde eller fra en PSD-fil. Fra fil klikk Import > Import til Stage Nå må vi nå legge om every bitmap til et filmklipp ved å høyreklikke på den og velge Convert to Symbol Merk Eksporter for runtime dele Det er veldig enkelt å importere vår SWC-fil. Fra Fil-menyen, klikk Action Innstillinger Det er det ! Nå kan våre eiendeler er lastet Vi må håndtere mus hendelser for våre objekter - husker i trinn 18 og 19 vi lagt tre- hendelsen lyttere for hvert objekt. Vi vil gjennomføre de ROLL_OVER hendelsen lyttere i denne enkle steg. Jeg vil gjerne våre objekter for å ha en glød effekt når vi ruller over det, så vi trenger å få tilgang til de objektene selv. For dette har As3isolib en innebygd hendelsestype som heter ProxyEvent Den første parameteren i GlowFilter I utrullingen behandleren får vi bare null filtrene Den tredje hendelsen lytteren for våre gjenstander er CLICK hendelsen. Hva vil skje når vi klikker på et objekt? Vel, må vi lage en kopi av det i synsfeltet og legge en dra-og-slipp-anlegget til det, for å gjøre det enkelt for oss å flytte til et sted i scenen. Det er veldig enkelt å gjøre dette. Vi vil først opprette et objekt av typen IsoDisplayObject og gi det vår hensikt at vi klikket, akkurat som vi gjorde før Nå må vi klone klikket objekt.; dette er enkelt, så As3isolib har en innebygd metode som kalles klone (), som hører til IsoDisplayObject Da vil vi flytte våre gjenstander oppover (langs Z-aksen) med 50 for å unngå overlapping med rutenettet. Til slutt vil vi legge til tre hendelsen lyttere for vår opprettet objekt: to av dem for rulle over /ut og den siste til å håndtere dra og slipp (som vi vil dekke i neste trinn), og deretter legge vår objekt til vår scene og gjengi det . Det er en gjenstående hendelse lytteren kalles onPickup I pickup behandleren vil vi tildele dratt objekt til vår dragObject Til slutt vil vi fjerne denne hendelsen lytteren, som når objektet vår er plukket opp vi ønsker ikke å plukke den opp igjen! I stedet vil vi legge til to hendelsen lyttere for dropping: det ene til det dratt objekt og en annen til visningsfeltet. Til slutt kan du spørre hvor den faktiske farten skjer; Svaret er at det skjer i onMoveObject De to siste hendelsen lyttere for våre Levels Editor er onDrop For å tillate den faktiske bevegelse av et objekt, tar vi et punkt som tilsvarer musen posisjon i isometrisk plass og flytte våre objekt i henhold til forskyvningen mellom musens . opprinnelige posisjon og sin nåværende posisjon I denne opplæringen dekket vi grunnleggende åpen kildekode bibliotek As3isolib og skape isometriske innholdet med det som isometriske rektangler og sprites. Vi har også dekket hvordan å lage scener, kameraer og nett, og mange nyttige emner som panorering, zooming, dra og slippe. Nå kan du begynne å lage din isometrisk Flash prosjekt med As3isolib. Se opp for min neste tutorial, om å lage et spill med As3isolib. Håper du har det gøy! Anmeldelser
Trinn 1:. Hva menes med "isometrisk"
. Isometrisk er et gresk begrep som betyr å ha lik måling: alle målinger er å skalere, uansett hvor langt nær eller hvor langt i det fjerne de er fra utsiktspunktet. Så i matematikk, er isometrisk projeksjon en type projeksjon som bevarer avstand langs gjenstander
Trinn 2:? Hva gjør filbasert Mean
Trinn 3:.. Rektangulære Maps vs. isometriske Maps
Trinn 4: Isometrisk Kart Typer
Tid til kode
Trinn 5: Nedlasting As3isolib
.
Trinn 6: Sette opp Scene
Trinn 7:. Making knappene
, sette inn tekst i Up, Over, Down og Hit rammer, og skriv inn det CLEAR ALL
. I løpet og Hit stater setter Hover bilde akkurat som i skjermbildet
Trinn 8:.. Opprette Tabs
som vil klassenavnet for Tab filmklipp.
. Denne teksten vil bli endret med navnet på kategorien; å tillate dette, konvertere denne teksten å Dynamic Tekst med navnet txt
, akkurat som på bildet under
Trinn 9:. Implementering Våre Tabs
pakke {import flash.events.MouseEvent.; import flash.text.TextField; import flash.display.MovieClip; public class CTAB strekker MovieClip {public Var txt: Textfield; offentlig funksjon CTAB (Navn: String) {txt = this.txt som Textfield; txt.text = Navn; addEventListener (MouseEvent.ROLL_OVER, onRollOver, falsk, 0, true); addEventListener (MouseEvent.ROLL_OUT, onRollOut, falsk, 0, true); } Beskyttet funksjon onRollOver (e: MouseEvent): void {this.alpha = 0,9; } Beskyttet funksjon onRollOut (e: MouseEvent): void {this.alpha = 1; }}} Pakke {import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class CDOC strekker MovieClip {//forekomster av Tabs privat Var Solid: CTAB; private Var Bricks: CTAB; private Var Grass: CTAB; offentlig funksjon CDOC () {addEventListener (Event.ADDED_TO_STAGE, onAddedToStage, falsk, 0, true); } Beskyttet funksjon onAddedToStage (e: Hendelses): void {//Opprette fanene Solid = new CTAB ("SOLID"); Solid.y = 469; Solid.addEventListener (MouseEvent.CLICK, onSolidClick, falsk, 0, true); addChild (Solid); Murstein = new CTAB ("murstein"); Bricks.y = 494; Bricks.addEventListener (MouseEvent.CLICK, onBricksClick, falsk, 0, true); addChild (Bricks); Gress = new CTAB ("gress"); Grass.y = 521; Grass.addEventListener (MouseEvent.CLICK, onGrassClick, falsk, 0, true); addChild (Grass); } Beskyttet funksjon onSolidClick (e: MouseEvent): void {//vil bli gjennomført senere} beskyttet funksjon onBricksClick (e: MouseEvent): void {//vil bli gjennomført senere} beskyttet funksjon onGrassClick (e: MouseEvent): void {//vil bli gjennomført senere}}}
Trinn 10: Opprette Isometrisk Vis
//Legg denne linjen før constructorprivate Var view: IsoView; view = new IsoView ();. viewPort.setSize (800, 600); viewPort.centerOnPt (ny Pt (-100, 100, 0), false); addChildAt (synsfeltet, 0); viewPort.addEventListener (MouseEvent.MOUSE_DOWN, onStartPan, falsk, 0, true); viewPort.addEventListener (MouseEvent.MOUSE_WHEEL, onZoom, falsk, 0, true);
deretter i den andre linjen vi setter sin størrelse til 800x600px . Vi trenger å sentrere det på et punkt eller på et objekt, så vi opprettet et nytt punkt fra den innebygde as3isolib.geom pakken og ga det noen x og y-verdier i 3D isometrisk plass (som vi vil diskutere i neste trinn).
Trinn 11:. kartesiske vs. Isometrisk Space
kartesisk koordinatsystem er grid-baserte (består av mange like store imaginære firkanter), med en horisontal akse kalt x-aksen Hotell og en vertikal akse kalt . y
som i øvre venstre hjørne av bildet nedenfor
Trinn 12: Opprette Scene
//Legg denne linjen før constructorprivate Var scene. IsoScene; scene = new IsoScene (); viewPort.addScene (scene);
Trinn 13: Opprette Grid
//Legg denne linjen før constructorprivate Var rutenett. IsoGrid; grid = new IsoGrid (); grid.setGridSize (10, 10, 1); grid .cellSize = 30; scene.addChild (grid);
Trinn 14: Rendering Scene
//Legg denne koden i onAddedToStage listeneraddEventListener (Event.ENTER_FRAME, onRender, falsk, 0, true); privat funksjon onRender (e: Hendelses).: void {scene.render ();}
Trinn 15: Implementering av bunnpanelet Knapper
knappen vil vi fjerne alle barn av scenen, og da vi trenger å re-legge rutenettet. I Tilpass til skjerm
knappen vil vi sette gjeldende zoom av synsfeltet til en, som tilbakestiller den til standard, så vil vi panorere det til standardposisjon med Panto () -funksjonen. Den siste knappen er der vi vil vise /skjule opprinnelsen til nettet, så vi vil snu skjermen sin tilstand; dersom det påvises vi vil skjule det, og vice versa
this.getChildByName ("btnClear") addEventListener (MouseEvent.CLICK, onbtnClearClick, falsk, 0, true);... this.getChildByName ("btnFit") addEventListener ( MouseEvent.CLICK, onbtnFitClick, falsk, 0, true); this.getChildByName ("btnShow") addEventListener (MouseEvent.CLICK, onbtnShowClick, falsk, 0, true); beskyttet funksjon onbtnClearClick (e. MouseEvent): void {scene. removeAllChildren (); scene.addChild (grid);} beskyttet funksjon onbtnFitClick (e: MouseEvent): void {viewPort.currentZoom = 1; viewPort.panTo (-100, 100);} beskyttet funksjon onbtnShowClick (e: MouseEvent): void {if (grid.showOrigin) grid.showOrigin = false; annet grid.showOrigin = true;}
Trinn 16: View panorering en
som en global poeng å bruke det på forskjellige steder som det vil håndtere plasseringen av mus i hver ramme . Vi skal gi det til X og Y-posisjonene musa (jeg vil forklare hvorfor i neste trinn)
private Var panPt: Pt; privat funksjon onStartPan (e: MouseEvent):. void {panPt = new Pt (stage.mouseX, stage.mouseY); viewPort.removeEventListener (MouseEvent.MOUSE_DOWN, onStartPan); viewPort.addEventListener (MouseEvent.MOUSE_MOVE, onPan, falsk, 0, true); viewPort.addEventListener (MouseEvent.MOUSE_UP, onStopPan, falsk, 0, true);}
Trinn 17: View panorering to
nåværende posisjoner, for å beregne forskjellen i stedet fra den siste rammen. Så vi setter X og Y til gjeldende muse stillinger
privat funksjon onPan (e: MouseEvent):. Void {viewPort.panBy (panPt.x - stage.mouseX, panPt.y - stage.mouseY); panPt.x = stage.mouseX; panPt.y = stage.mouseY;}
Trinn 18: View panorering 3
hendelsen lyttere som vi ikke trenger dem lenger, deretter legger du onStartPan
hendelse lytteren til å la brukeren panorere synsfeltet igjen
privat funksjon onStopPan (e: MouseEvent):. void {viewPort.removeEventListener (MouseEvent.MOUSE_MOVE, onPan); viewPort.removeEventListener (MouseEvent.MOUSE_UP, onStopPan); viewPort.addEventListener (MouseEvent.MOUSE_DOWN, onStartPan, falsk, 0, true);}
Trinn 19: View Zooming
MOUSE_WHEEL hendelse lytteren tidligere, så nå vil vi gjennomføre det
) som kalles 'deltaet '; hvis dette er større enn 0, så vi bør zoome inn, ellers bør vi zoome ut. For å gjøre dette må vi øke eller redusere zoomverdien. Det siste trinnet er å sette view s currentZoom
eiendom til vår zoomverdien
privat Var zoomValue. Number = 1; privat funksjon onZoom (e: MouseEvent): void {if (e.delta > 0) zoomValue + = 0,10; if (e.delta < 0) zoomValue - = 0,10; viewPort.currentZoom = zoomValue;}
Trinn 20:. Opprette objekter Panel
, å holde våre stedene. Deretter oppretter vi en ny isometrisk sikte på å gjengi objekter i scenen og sette sin størrelse til 215x468px, som passer gjenstander panel. Nå må vi justere det slik at vi sentrere det på et punkt i 40x80px. Til slutt legger vi objectScene
til objectview
bruker addScene () -funksjonen, og tilsett objectView til skjerm liste over våre dokumentet.
//Legg denne koden onAddedToStage listenerobjectScene = new IsoScene (); objectView = new IsoView (); objectView.setSize (215, 468); objectView.centerOnPt (ny Pt (40, 80, 0), false); objectView.addScene (objectScene); addChild (objectView);
Trinn 21: Opprette Solid-fargede gjenstander
. beskyttet funksjon onSolidClick (e: MouseEvent): void {objectScene.removeAllChildren (); Var p: Pt = new Pt (0, 0); Var solidColors: Array = [0xD15415, 0xFF6600, 0xFFCC00, 0x66FF00, 0xFF6699, 0x6699FF, 0x99FF00, 0xFF0066]; for (var i: int = 0; i < 8; i ++) {if (i% 2 == 0) {px = 0; p.y + = 50; } Var obj: IsoRectangle = new IsoRectangle (); obj.setSize (30, 30, 0); obj.fill = nye SolidColorFill (solidColors [i], 1); IsoMath.screenToIso (p); obj.moveTo (p.x, p.y, 0); IsoMath.isoToScreen (p); p.x + = 80; obj.addEventListener (MouseEvent.ROLL_OVER, onRollOverHandler, falsk, 0, true); obj.addEventListener (MouseEvent.ROLL_OUT, onRollOutHandler, falsk, 0, true); obj.addEventListener (MouseEvent.CLICK, onObjClick, falsk, 0, true); objectScene.addChild (obj); objectScene.render (); }}
å fjerne alle objekter hvis vi faktisk trykket på en annen fane. Andre må vi gjøre et poeng å lagre X og Y-posisjoner av objektene, så gjør vi en rekke solide farger og plassere noen farge hex verdier i det. Etter det vil vi gjøre en løkke der vil vi lage våre åtte gjenstander og vise dem i et rutenett. Så vi faktisk lage hver isometrisk rektangel, ved hjelp av en innebygd As3isolib isometrisk primitive form, og sette sin størrelse til 30x30px og fylle sin farge med en farge (også bygget i As3isolib) med en verdi fra vår rekke, med en alpha av 1 .
Trinn 22:. Opprette Brick Objekter
beskyttet funksjon onBricksClick (e: MouseEvent): void {objectScene.removeAllChildren (); Var p: Pt = new Pt (-20, -10); Var murstein: Array = [murstein1, Bricks2, Bricks3, Bricks4, Bricks5, Bricks6, Bricks7, Bricks8]; for (var i: int = 0; i < 7; i ++) {if (i% 2 == 0) {px = -30; p.y + = 50; } Var sprite: IsoSprite = new IsoSprite (); IsoMath.screenToIso (p); sprite.moveTo (p.x, p.y, 0); IsoMath.isoToScreen (p); p.x + = 80; sprite.sprites = [murstein [i]]; sprite.addEventListener (MouseEvent.ROLL_OVER, onRollOverHandler, falsk, 0, true); sprite.addEventListener (MouseEvent.ROLL_OUT, onRollOutHandler, falsk, 0, true); sprite.addEventListener (MouseEvent.CLICK, onObjClick, falsk, 0, true); objectScene.addChild (sprite); objectScene.render (); }}
Trinn 23: Lage Texture Eiendeler
, deretter velge å importere lag som Bitmap bilde med editable lagstiler
.
, og deretter skrive navnet sitt som i murstein og gress arrays ( murstein1
, brick2
, etc).
alternativet og skriv textures.swf
i URL-feltet. Til slutt går du til Fil > Publish Settings Hotell og markere SWC alternativet i Publiser
klikker deretter publisere. Nå har vi en SWC som inneholder alle våre eiendeler, som vi kan importere inn i vår LevelEditor skal brukes
Trinn 24:. Importere Texture Eiendeler
, og fra Bibliotek banen
fanen klikker du på blitsknappen som vises på bildet nedenfor og bla deg frem til vår SWC.
Trinn 25:. Objektene 'Mouse Roll funksjoner
som vi kan bruke for å få tilgang til arrangementet objektet med via e.target. Vi bør kaste det som IsoDisplayObject
(som er base klassen for noen isometrisk visning objekt) bare for å gjøre dette arrangementet lytteren som generisk som mulig, og deretter legge til en glød filter ved hjelp av Flash innebygde filtre.
konstruktør er dens farge; den andre er dens alfa, som vi bare satt til 1; vi vil forlate blurX og Blury verdier på deres standard, 6, som vi ikke trenger noen uskarphet; og til slutt vil vi sette kvaliteten til 64.
privat funksjon onRollOverHandler (e: ProxyEvent):. void {var gløden: GlowFilter = new GlowFilter (0xC24704, 1, 6, 6, 64); (e.target som IsoDisplayObject) .container.filters = [glow];} private funksjon onRollOutHandler (e: ProxyEvent): void {(e.target som IsoDisplayObject) .container.filters = [];}
Trinn 26: Håndtak Klikk på Objekter
klassen, som returnerer en kopi av det klonede objektet beholde sine dimensjonale og stilegenskaper. Dette vil fungere perfekt for isometriske rektangel objekter (som vi opprettet i ensfarget kategorien), men i de sprites 'tilfelle (murstein og gress) vi må også kopiere sprites array for hvert objekt, så vi vil gjøre en enkel kontroll for å se om objektet er av typen IsoSprite
, og hvis sprites eiendommen ikke er null, så vi vil sette objektets sprites
eiendom for å matche objektets klikket s sprites
.
beskyttet funksjon onObjClick (e: ProxyEvent): void {var obj: IsoDisplayObject = e.target som IsoDisplayObject; obj = obj.clone (); if (obj er IsoSprite & &! (obj som IsoSprite) .sprites = null) {(obj som IsoSprite) .sprites = (e.target som IsoSprite) .sprites; } Obj.moveTo (0, 0, 50); obj.addEventListener (MouseEvent.ROLL_OVER, onRollOverHandler, falsk, 0, true); obj.addEventListener (MouseEvent.ROLL_OUT, onRollOutHandler, falsk, 0, true); obj.addEventListener (MouseEvent.MOUSE_DOWN, onPickup, falsk, 0, true); scene.addChild (obj); scene.render ();}
Trinn 27: Dra og slipp en
som er en MOUSE_DOWN begivenhet å håndtere starten av dra. Vi vil begynne med å lage en privat variabel kalt dragObject
, som vil være av typen IsoDisplayObject
, for å bruke i referanse til vår dratt objekt som det fremgår av navnet. Også vi vil skape et poeng å håndtere posisjonen til dratt objekt.
variabel, deretter å oppnå dagens isometrisk synspunkt musen bruker vi viewPort.localToIso () -metoden. Dette punktet vil være nyttig i å beregne avstanden mellom dratt objekt og den nåværende mus posisjon, også vil det stoppe dratt objekt fra knipser til museposisjonen.
handler som vi vil dekke i neste og siste trinnet
privat Var dragObject: IsoDisplayObject; private Var dragPt. Pt; privat funksjon onPickup (e: ProxyEvent) : void {dragObject = e.target som IsoDisplayObject; dragPt = viewPort.localToIso (ny Pt (stage.mouseX, stage.mouseY)); dragPt.x - = dragObject.x; dragPt.y - = dragObject.y; dragObject.removeEventListener (MouseEvent.MOUSE_DOWN, onPickup); dragObject.addEventListener (MouseEvent.MOUSE_UP, onDrop, falsk, 0, true); viewPort.addEventListener (MouseEvent.MOUSE_UP, onDrop, falsk, 0, true); viewPort.addEventListener (MouseEvent.MOUSE_MOVE, onMoveObject, falsk, 0, true);}
Trinn 28: Dra og slipp 2
- som bare fjerner alle lyttere for dratt objektet og synsfeltet, fordi når et objekt er droppet disse lytterne vil være ubrukelig - slik at vi re-legge til onPickup
lytteren for den dratt objekt for å gjøre å dra og slippe tilgjengelig igjen.
privat funksjon onDrop (e: Hendelses): void {dragObject.removeEventListener (MouseEvent.MOUSE_UP, onDrop); viewPort.removeEventListener (MouseEvent.MOUSE_UP, onDrop); viewPort.removeEventListener (MouseEvent.MOUSE_MOVE, onMoveObject); dragObject.addEventListener (MouseEvent.MOUSE_DOWN, onPickup, falsk, 0, true);} private funksjon onMoveObject (e: MouseEvent): void {var pt: Pt = viewPort.localToIso (ny Pt (stage.mouseX, stage.mouseY)); dragObject.moveTo (pt.x - dragPt.x, pt.y - dragPt.y, dragObject.z);}
Konklusjon