Share
I denne opplæringen vil jeg introdusere konceptet med isometrisk innholdsopprettelse og grunnleggende om å designe med det, ved hjelp av åpen kildebibliotek As3isolib. Vi vil bruke disse ferdighetene til å lage en enkel nivå editor, egnet for et isometrisk spill.
La oss se på det endelige resultatet vi vil jobbe for:
SWF har blitt squashed litt for å passe på siden; klikk her for å se det i full størrelse.
For det første er det viktig å vite hva vi mener med isometrisk. Isometrisk er aяGreekяterm som betyr at man har samme mål: alle målinger skal skaleres, uansett hvor langt i nærheten eller hvor langt i avstand de er fra utsiktspunktet. Dermed er isometrisk projeksjon en type projeksjon, som representerer langs objekter.
Anta at du er i en isometricview; du vil ha en 3D-visning (for eksempel når et kamera tar et bilde av deg) hvor uansett du er, vil du bli vist i samme skala i henhold til kameraet. Dette er i kontrast til et sant perspektiv, hvor du vil bli redusert i størrelse når du er langt borte fra kameraet.
As3isolib håndterer all underliggende matematikk involvert i å lage scener og visninger, så vær ikke bekymret for matematikken!
Tilebasert er et begrep som brukes til grafisk innhold som bruker fliser som et fondelement. Konseptet i seg selv er litt gammelt - det ble brukt i eldre spill av tekniske årsaker - men dette betyr ikke at fliser basert spill nå er døde; I disse dager er 3D-rendering, men disse 3D-spillene kan være fliser basert (og mange er). Dette er hvor isometriske spill kommer inn. Fliser er vanligvis rektangulære, men det er også firkantede fliser, trekantede fliser og til og med sekskantede fliser (som i noen sivilisasjonstitler).
Rektangulære fliser er det enkleste av alt å jobbe med, men mesteparten av tiden, når du arbeider i rektangulært land, bruker du firkantede fliser. Du kan selvfølgelig bruke andre størrelser, men torget synes å være en favoritt. Synspunktet for spill med firkantede fliser er vanligvis topp ned eller overhead. Dette betyr bare at all grafikk må tegnes som om du ser ned på objektet. Noen ganger kan du gi spillet et litt vinklet visning, slik at du ser det meste ned, men du kan se noen foran eller bak.
Et annet synspunkt for firkantede fliser er "side-scroller" -visningen, hvor du ser på verden fra siden. Dette var veldig populært blant eldre actionspill som Super Mario Bros og den opprinnelige 2D Duke Nukem. I et rektangulært kart betyr flytting langs X-aksen beveger seg østover, og beveger seg langs Y-aksen betyr at den beveger seg sør. I en isometrisk tilkart, avhengig av sin type, kan det bevege seg langs X-aksen bety at du beveger deg sørøst, og å flytte langs Y-aksen kan bety at du beveger southwest.яI isometriske fliser bruker vi fortsatt rektangulære områder for å inneholde flisene; Dette kommer ikke til å endres. Det som vil forandre er hvordan du vil gjøre dem.
(Redaktørens notat: en flott guide til ulike typer perspektiv finnes her.)
Det er tre typer isometriske fliser: lysbilde, forskjøvet og diamant. Hver har sitt eget sett av quirks, sine egne metoder for gjengivelse, sin egen måte å representere en tilkart på, og sin egen metode for å navigere dem. Jeg vil presentere dem i dette trinnet.
Skyv kart:яFlashtilkartet er trolig det enkleste å gjengi, navigere og samhandle med. Dessverre har den begrensede ganger. Det er hovedsakelig brukt til å rulle action spill. En vanlig lysbilde har en horisontal X-akse og en diagonal Y-akse, selv om det er mulig å ha en vertikal Yяaxis og en diagonal X-akse. Flisene er blitted i horisontale rader topp til bunn.
Forskjellige kart:яStaggered kart fungerer perfekt i turbaserte strategispill. Det er også veldig nyttig i å simulere en rund verden; Den passer best til kart som vikler rundt (flytt fra kant til kant). Hver ny rad på kartet skiftes vekselvis halvparten av en flis venstre eller høyre, noe som resulterer i et sikksag mønster av fliser. X-aksen er vanligvis horisontal (øker mot øst), og Y-aksen er sørøst og sørvest. Forskjellige kart er de mest uregelmessige av de tre. Flisene er blitted i horisontale rader, topp til bunn.
Diamantkort: Denne typen kart er veldig populær i sanntids strategispill. Disse kartene er minst støtende; glidekart har "tattered" topper og bunner, og forskjellige kart har "tattered" kanter, så diamantkart er theяsmoothest.яI diamantkart er det eneste kravet at både X-and og Y-aksen er diagonale, slik at du kan øke X -aks eller Y-akse som passer deg, som X-aksen øker mot sørvest og Y-aksen mot sørøst.
Det er nok kontekst - tid til å begynne å utvikle seg!
Det første trinnet er å laste ned As3isolib (ActionScript 3 Isometric Library) som er et åpen kildebibliotek for å lage isometrisk projisert innhold. Et eksempel på et spill som er opprettet ved hjelp av det, er elever og allierte fromяZynga.
Biblioteket inneholder noen eiendeler likeяprimitiveяshapes (rektangler, kuber, og så videre) og noen verktøy for å lette opprettelsen av ditt isometriske innhold. Det er også gratis og kan brukes i ethvert kommersielt arbeid (selv om du kan donere til det hvis du vil).
La oss nå laste den ned fra Etter at du har lastet ned den, komprimerer du zip-filen til en ny mappe og heter itjaNivåredigerer.
Når som helst mens du bruker As3isolib, kan du se dokumentasjonen sin gjennom denne lenken
Brann opp Flash og opprett en ny ActionScript 3.0 FLA. Nå må vi importere PSD-filen til nivåredigeringsgrensesnittet som jeg har opprettet (det er i opplærings-kildefilene), eller du kan omorganisere grensesnittet til det du ser bra ut. Så klikk på File> Import> Import to Stage, velg PSD-filen, og merk "Set stage size to same size asяPhotoshopkancanvas" alternativet.
Nå har vi de røde bildene til vår Level Editor. Vi må opprette vår dokumentklasse der vi skal implementere vår nivåredigerer: i thePropertiespanel i Publiseringsdelen finner du et Klassefelt; skriv CDoc og klikk på blyantknappen. Lagre nå ActionScript-filen som vises og navnet den på CDoc.
La oss lage våre tre knapper i bunnpanelet; høyreklikk på knappens bakgrunnsbilde og velg Konverter til symbol som det du ser på bildet, og gi nytt navn til knappen til btnClear, sett inn tekstene i opp, over, ned og treff rammer, og skriv inn det SLETT ALT. I Over og Hit-tilstandene legger du inn Hover-bildet akkurat som i skjermbildet.
Gjenta deretter dette trinnet for å lage de resterende to knappene.
Nå skal vi lage de tre kategoriene: en av dem vil være for Soild Colors, en annen for BritainBricks, og den siste for Grass.
Tegn et svart gradientrektangel, høyreklikk på det, og velg Konverter til symbol, så navngi det til Tab og velg dets type for å være en filmklipp. Merk nå alternativet Eksporter for ActionScript, og skriv deretter i feltet Klassefelt CTAB som vil klassenavnet for denne kategorien Filmklipp.
Dobbeltklikk på kategorien Filmklipp og sett inn tekst i den; i dette, skriv NAVN. Denne teksten blir endret med navnet på fanen; For å tillate dette, konvertere denne teksten til dynamisk tekst med navnet tekst, akkurat som i bildet nedenfor.
Nå har vi en filmklipp for vår flipp, vi må instille tre eksemplarer av den og nevne dem, så la oss gjøre det i vår Dokumentklasse.
pakke import flash.events.MouseEvent; importer flash.text.TextField; importer flash.display.MovieClip; offentlig klasse CTab strekker seg MovieClip public var txt: TextField; offentlig funksjon CTab (Navn: String) txt = this.txt som TextField; txt.text = Navn; addEventListener (MouseEvent.ROLL_OVER, onRollOver, false, 0, true); addEventListener (MouseEvent.ROLL_OUT, onRollOut, false, 0, true); beskyttet funksjon onRollOver (e: MouseEvent): void this.alpha = 0.9; beskyttet funksjon onRollOut (e: MouseEvent): void this.alpha = 1;
Accentsconagua
pakke import flash.display.MovieClip; importere flash.events.Event; importer flash.events.MouseEvent; offentlig klasse CDoc utvider MovieClip // Instantiating The Tabs private var Solid: CTab; private var Bricks: CTab; privat var Grass: CTab; offentlig funksjon CDoc () addEventListener (Event.ADDED_TO_STAGE, onAddedToStage, false, 0, true); beskyttet funksjon onAddedToStage (e: Event): void // Opprette fanene Solid = new CTab ("SOLID"); Solid.y = 469; Solid.addEventListener (MouseEvent.CLICK, onSolidClick, false, 0, true); addChild (fast); Murstein = ny CTab ("BRICKS"); Bricks.y = 494; Bricks.addEventListener (MouseEvent.CLICK, onBricksClick, false, 0, true); addChild (klosser); Gress = ny CTab ("GRASS"); Grass.y = 521; Grass.addEventListener (MouseEvent.CLICK, onGrassClick, false, 0, true); addChild (Grass); beskyttet funksjon onSolidClick (e: MouseEvent): void // vil bli implementert senere beskyttet funksjon onBricksClick (e: MouseEvent): void // vil bli implementert senere beskyttet funksjon onGrassClick (e: MouseEvent): void // vil bli implementert senere La oss nå lære om en av de viktigste tingene i As3isolib: den isometriske visningen som fungerer som et kamera som viser isometriske gjenstander. Den har mange nyttige funksjoner, for eksempel panorering og zooming og fokusering på et punkt eller et objekt. Den gir også muligheten til å skjule / klippe objekter utenfor sine grenser, og lar oss også endre bakgrunns- og forgrunnsinnhold.
Vi vil opprette to visninger i våre nivåer editor, den første er for våre visninger som vil ha et rutenett i det og også objektene til ourlanet, den andre visningen er for objektbrowseren som vil ha mange objekttyper som kan brukes i utforme nivået.
Nå vil vi legge til følgende kode i vår CDoc-klasse - pass på å sjekke linjenummeringen, eller bare ta en titt på kildefilene i opplæringen.
// Legg til denne linjen før konstruktørens private varvisningPort: IsoView;
viewPort = ny IsoView (); viewPort.setSize (800, 600); viewPort.centerOnPt (ny Pt (-100, 100, 0), false); addChildAt (viewPort, 0); viewPort.addEventListener (MouseEvent.MOUSE_DOWN, onStartPan, false, 0, true); viewPort.addEventListener (MouseEvent.MOUSE_WHEEL, onZoom, false, 0, true);
I første linjen opprettet vi vår IsoView og kalt den view så i den andre linjen setter vi størrelsen til 800x600px. Vi må sentrere det på et punkt eller på et objekt, så vi opprettet et nytt punkt fra det innebygde as3isolib.geom pakke og ga det noen x og y verdier i 3D isometrisk plass (som vi vil diskutere i neste trinn).
Nå må vi vise visningen vår, så vi la den til oversikten over dokumentet som barn, og å gjøre det i bunnen av grensesnittet vårt for å sikre at det ikke overlapper med noe annet element vi la til det ved indeks 0. Deretter la vi til to hendelsehørere på vår visningPort, en for panorering og den andre for zooming (som igjen vil jeg forklare senere).
Koordinatsystemet som brukes i Flash kalles theяCartesian coordinateяsystem.яDet kartesiske koordinatsystemet er nettbasert (består av mange like store imaginære firkanter), med en horisontal akse kalt theяx-axisяog en vertikal akse kalt theяy som i øverste venstre hjørne av bildet nedenfor.
Det isometriske rommet er litt annerledes; hver av sine tre akser ser like ut i størrelse og vinklene mellom noen av dem er 120 grader. As3isolib gir en måte å konvertere et punkt fra kartesisk til isometriske koordinater (og omvendt) ved callingяIsoMath.screenToIso (Punkt: Pt) å konvertere en vei, andяIsoMath.isoToScreen (Punkt: Pt) å konvertere den andre.
Det er veldig enkelt å lage isometrisk scene som vil holde våre objekter. (Disse objektene vil alle bli arvet fra IsoDisplayObject я (for eksempel IsoBox, IsoRectangle, IsoSprite, etc) som er den grunnleggende klassen at alle primitive og komplekse isometriske skjermobjekter strekker seg.)
Vi willяinstantiateяa ny IsoScene og deretter legge til vår scene til visningsporten som skal vises.
// Legg til denne linjen før konstruktørens private var scene: IsoScene;
scene = ny IsoScene (); viewPort.addScene (scene);
For å legge til et rutenett i visningsporten må vi bare ordne en ny IsoGrid da vi kan sette bredden og lengden til 10 for å gi oss et 10x10-grid. Også, vi kan sette sin celle størrelse til hva vi vil (jeg plukket 30). Det siste og svært viktige trinnet er å legge til rutenettet på scenen.
// Legg til denne linjen før konstruktørens private varnettet: IsoGrid;
rutenett = ny IsoGrid (); grid.setGridSize (10, 10, 1); grid.cellSize = 30; scene.addChild (grid);
Vi må legge til en hendelselytter for å gjengi scenen, og det er veldig enkelt, bare legg til lytteren og i kroppsroppen render () fungere på scenen.
// Legg til denne koden i onAddedToStage listener addEventListener (Event.ENTER_FRAME, onRender, false, 0, true);
privat funksjon onRender (e: Event): void scene.render ();
I dette trinnet vil vi legge til lytterne for klikkhendelsene på knappene på bunnpanelet, men først må vi få tilgang til dem, som vi kan gjøre med funksjonen getChildByName ().
På den første hendelseshandleren for Klar knappen vil vi fjerne alle barnets barn, og da må vi legge til nettverket. I Pass på skjermen knappen vil vi sette den nåværende zoomen på visningsporten til 1, som tilbakestiller den til standard, så vil vi panorere den til standardinnstillingen med panto () funksjon. Den endelige knappen er hvor vi vil vise / gjemme grunns opprinnelse, så vi vil vende om skjermstatusen; hvis det blir vist vil vi gjemme det og omvendt.
this.getChildByName ("btnClear"). addEventListener (MouseEvent.CLICK, onbtnClearClick, false, 0, true); this.getChildByName ("btnFit"). addEventListener (MouseEvent.CLICK, onbtnFitClick, false, 0, true); this.getChildByName ("btnShow"). addEventListener (MouseEvent.CLICK, onbtnShowClick, false, 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; ellers grid.showOrigin = true;
Da vi opprettet visningsporten, la vi til en hendelselytter for MOUSE_DOWN-hendelsen. I denne hendelsen vil vi håndtere starten av panorering: vi vil først opprette et punkt og nevne det panPt som et globalt punkt å bruke det på forskjellige steder, da det vil håndtere plasseringen av musen i hver ramme. Vi gir den X og Y posisjonene til musen (jeg vil forklare hvorfor i neste trinn).
Da fjerner vi musen ned hendelseslytteren og legger til to nye hendelseslyttere: en for den faktiske håndtering av panorering og den andre når vi stopper vår panorering.
privat vareport: 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, false, 0, true); viewPort.addEventListener (MouseEvent.MOUSE_UP, onStopPan, false, 0, true);
Denne hendelseslytteren kalles når musen beveger seg, og hva den gjør er veldig enkel: den panner visningsporten i henhold til X- og Y-posisjonene til musens første posisjonspanning minus dens nåværende stillinger, for å beregne forskjellen på plassering fra den siste rammen. Deretter setter vi X og Y til de nåværende museposisjonene.
privat funksjon onPan (e: MouseEvent): void viewPort.panBy (panPt.x - stage.mouseX, panPt.y - stage.mouseY); panPt.x = stage.mouseX; panPt.y = stage.mouseY;
Når vi slutter å panorere, må vi fjerne begge onPan og onStopPan hendelseslyttere som vi ikke trenger dem mer, så legg til igjen onStartPan hendelseslytter å la brukeren panorere visningsporten 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, false, 0, true);
Vi la til onZoom MOUSE_WHEEL hendelseslytteren tidligere, så nå skal vi implementere det.
Det er veldig enkelt: å vite om musen beveger seg opp eller ned, må vi sjekke om det er noe som skjer med musen (e) som kalles delta hvis dette er større enn 0 da skal vi zoome inn, ellers bør vi zoome ut. For å gjøre dette, økes eller reduseres zoomverdien. Det siste trinnet er å sette visningsporten currentZoom eiendom til vår zoom verdi.
privat var zoomValue: tall = 1; privat funksjon onZoom (e: MouseEvent): void if (e.delta> 0) zoomValue + = 0.10; if (e.delta < 0) zoomValue -= 0.10; viewPort.currentZoom = zoomValue;
Husk at vi ikke satte noen grenser i zoomverdiene eller panorering, noe som betyr at du kan zoome eller panorere visningen utenfor kanten av scenen. Det er veldig enkelt å legge til dem, men jeg vil forlate det til deg.
Etter at vi har fullført visningsporten vår og legger til funksjonene sine, må vi opprette objektpanelet der vi kan se objekter og legge dem til visningsporten.
Vi starter med å skape en ny isometrisk scene, navngitt objectScene, å holde våre objekter. Deretter lager vi en ny isometrisk visning for å gjengi objekter i scenen og sette størrelsen til 215x468px, som passer til objektpanelet. Nå må vi justere det slik at vi senterer det på et punkt på 40x80px. Til slutt legger vi til objectScene til objectview bruker addScene () funksjon, og legg til objektvisningen i visningslisten til dokumentet vårt.
// Legg til denne koden i onAddedToStage listener objectScene = new IsoScene (); objectView = ny IsoView (); objectView.setSize (215, 468); objectView.centerOnPt (nytt Pt (40, 80, 0), false); objectView.addScene (objectScene); addChild (objectView);
Nå må vi lage noen solidfargede objekter for den faste kategorien, så vi vil legge til en museklikkhendelselytter.
beskyttet funksjon onSolidClick (e: MouseEvent): void objectScene.removeAllChildren (); var p: Pt = ny Pt (0, 0); var solidColors: Array = [0xD15415, 0xFF6600, 0xFFCC00, 0x66FF00, 0xFF6699, 0x6699FF, 0x99FF00, 0xFF0066]; for (var jeg: int = 0; i < 8; i++) if (i % 2 == 0) p.x = 0; p.y += 50; var obj:IsoRectangle = new IsoRectangle(); obj.setSize(30, 30, 0); obj.fill = new 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, false, 0, true); obj.addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler, false, 0, true); obj.addEventListener(MouseEvent.CLICK, onObjClick, false, 0, true); objectScene.addChild(obj); objectScene.render();
Først fjerner vi alle barna fra objectScene for å fjerne alle objekter hvis vi faktisk trykker på en annen tab.Jeg må også lage et punkt for å markere X og Y-posisjonene til objektene, så lager vi en rekke faste farger og legger noen farge hex-verdier i den. Deretter skal vi lage en løkke der vi skal lage våre åtte objekter og vise dem i et rutenett. Da lager vi faktisk hvert isometrisk rektangel, ved hjelp av en innebygd As3isolibяisometrisk primitiv form, og setter størrelsen til 30x30px og fyller fargen med en solid farge (også innebygd As3isolib) ved hjelp av en verdi fra vårt utvalg, med en alfa på 1.
Nå må vi endre våre poengverdier for å være i isometriske koordinater, så vi bruker det ovenfor nevnte screenToIso () funksjonen, flytt deretter objektet til den nye stillingen og tilbakestill punktet vårt for å være i skjermkoordinater. Dette gjør det enkelt for oss å lagre objekter i et rutenett med ourяfamiliarяscreen (kartesiske) koordinater, mens vi beveger våre objekter med det som passer dem best ( isometriske koordinater).
Da vil vi bare øke X-verdien med 80 og legge til tre hendelseslyttere: De to første vil håndtere ROLL_OVER-hendelsene, for å markere objektet når de rulles over, og den tredje vil håndtere CLICK-hendelsene. Til slutt legger vi objektet til scenen og gjengis alt.
Dette trinnet ligner veldig på den første, med unntak av at vi endrer matteinnholdet til våre murstein, som vi vil opprette og importere i våre neste trinn.
beskyttet funksjon onBricksClick (e: MouseEvent): void objectScene.removeAllChildren (); var p: Pt = ny Pt (-20, -10); var murstein: Array = [Bricks1, Bricks2, Bricks3, Bricks4, Bricks5, Bricks6, Bricks7, Bricks8]; for (var jeg: int = 0; i < 7; i++) if (i % 2 == 0) p.x = -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 = [bricks[i]]; sprite.addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler, false, 0, true); sprite.addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler, false, 0, true); sprite.addEventListener(MouseEvent.CLICK, onObjClick, false, 0, true); objectScene.addChild(sprite); objectScene.render();
Den andre forskjellen fra det forrige trinnet er at vi opprettet en isometrisk spriteobjekt hvis utseende vi kan komme til å være hva vi vil; Vi la våre murstein til det ved å sende en referanse til sprite.sprites som er en rekke sprites.
Nå kan du lage gressobjekter som vi gjorde med mursteinene, du må bare endre murstein array til gress matrise.
Vi skal lage våre teksturverdier, så start et nytt Flash-dokument og importer våre eiendeler fra et bilde eller fra en PSD-fil. Fra Fil-klikk Import> Import til Stage, velg deretter å importere lagene som Bitmap-bilde med redigerbare lagstiler.
Nå må vi konvertere hver bitmappe til et filmklipp ved å høyreklikke på det og velge Konverter til symbol, deretter skriver navnet sitt som i murstein og gresskarrayser (murstein1, brick2, etc).
Merk av Eksporter for kjøretid deling alternativ og type textures.swf i URL-feltet. Endelig gå til Fil> Publiser innstillinger og merk SWC-alternativet i PUBLISERE delen, og klikk deretter Publiser. Nå har vi en SWC som inneholder alle våre eiendeler, som vi kan importere til vår LevelEditor som skal brukes.
Det er veldig enkelt å importere vår SWC-fil. Fra Fil-menyen, klikk ActionScript-innstillinger, og fra Bibliotekspass fanen klikker du på Flash-knappen som vises i bildet under og blar til SWC.
Det er det! Nå er våre eiendeler lastet.
Vi må håndtere mushendelser for våre objekter - rememberяin Steps 18 og 19 har vi lagt til tre eventjeslisteners for hver gjenstand. Vi vil implementere ROLL_OVER hendelseslytterne i dette enkle trinnet.
Jeg vil at våre objekter skal ha en glødseffekt når vi ruller over det, så vi trenger tilgang til objektene selv. For dette har As3isolib en innebygd hendelsestype kalt ProxyEvent som vi kan bruke til å få tilgang til hendelsesobjektet via e.target. Vi burde kaste det som IsoDisplayObject (som er grunnklassen for et isometrisk skjermobjekt) bare for å gjøre denne hendelseslytteren så generell som mulig, og deretter legge til et glødfilter ved hjelp av Flashs innebygde filtre.
Den første parameteren til GlowFilter konstruktør er fargen; den andre er sin alfa, som vi bare skal sette til 1; Vi vil forlate blurX- og uskarphetsverdiene ved standard, 6, da vi ikke trenger noen uskarphet; og til slutt vil vi sette kvaliteten til 64.
I rullegardinhandleren vil vi bare tilbakestille filtre.
privat funksjon onRollOverHandler (e: ProxyEvent): void var glow: GlowFilter = ny GlowFilter (0xC24704, 1, 6, 6, 64); (e.target som IsoDisplayObject) .container.filters = [glow]; privat funksjon onRollOutHandler (e: ProxyEvent): void (e.target som IsoDisplayObject) .container.filters = [];
Den tredje hendelseslytteren til våre objekter er CLICK-hendelsen. Hva skjer når vi klikker på et objekt? Vel, vi må lage en kopi av det i visningsporten og legge til en drag-og-slipp-funksjon til det, for å gjøre det enkelt for oss å flytte til et hvilket som helst sted i scenen.
Det er veldig enkelt å gjøre dette. Vi vil først opprette et objekt av typen IsoDisplayObject og send det til vårt objekt som vi klikket, akkurat som vi gjorde før.
Nå må vi klone det klikkte objektet; Dette er enkelt, ettersom As3isolib har en innebygd metode som kalles klone (), som tilhører IsoDisplayObject klassen, som returnerer en kopi av det klonte objektet, som beholder sine dimensjonale og stilegenskaper. Dette vil fungere perfekt for isometriske rektangelobjekter (som vi opprettet i fargefliken), men i sprites-saken (murstein og gress) må vi også kopiere sprites-arrayet for hvert objekt, så vi gjør en enkel sjekk for å se om objektet er av typen IsoSprite, og hvis spritesяpropertyяis ikke null, så vil vi sette objektet fantomerяpropertyяto matche det klikkte objektets fantomer.
Da beveger vi våre objekter oppover (langs Z-aksen) med 50 for å unngå å overlappe med rutenettet. Til slutt vil vi legge til tre hendelseslyttere for vårt opprettede objekt: to av dem for å rulle over / ut og den siste som skal håndtere dra og slipp (som vi vil dekke i neste trinn), legg deretter til objektet vårt og gjør det.
beskyttet funksjon onObjClick (e: ProxyEvent): void var obj: IsoDisplayObject = e.target som IsoDisplayObject; obj = obj.clone (); hvis (obj er IsoSprite && (obj som IsoSprite) .sprites! = null) (obj as IsoSprite) .sprites = (e.target as IsoSprite) .sprites; obj.moveTo (0, 0, 50); obj.addEventListener (MouseEvent.ROLL_OVER, onRollOverHandler, false, 0, true); obj.addEventListener (MouseEvent.ROLL_OUT, onRollOutHandler, false, 0, true); obj.addEventListener (MouseEvent.MOUSE_DOWN, onPickup, false, 0, true); scene.addChild (obj); scene.render ();
Det er en gjenværende hendelseslytter kalt onPickup som er en MOUSE_DOWN-hendelse for å håndtere starten av å dra. Vi starter med å opprette en privat variabel som heter dragObject, som vil være av typen IsoDisplayObject, å bruke inяreference til vårt slepede objekt som det fremgår av navnet sitt. Også vi vil skape et poeng for å håndtere posisjonen til det slepede objektet.
I oppsamlingsbehandleren vil vi tildele det slepede objektet til vår dragObject variabel, deretter for å få det nåværende isometriske punktet til musen vi bruker viewPort.localToIso () metode. Dette punktet vil være nyttig når du beregner avstanden mellom det slepede objektet og den nåværende museposisjonen, og det vil også stoppe det slepede objektet fra å snappe til museposisjonen.
Til slutt fjerner vi denne hendelseslytteren, som når vi henter vårt objekt, vil vi ikke plukke det opp igjen! I stedet legger vi til to hendelseslyttere for å slippe: en til det slepte objektet og et annet til visningen Port. Til slutt kan du spørre hvor selve flyttingen skjer; svaret er at det skjer i onMoveObject handler som vi vil dekke i neste og siste trinn.
private var draObject: IsoDisplayObject; privat var drapt: 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, false, 0, true); viewPort.addEventListener (MouseEvent.MOUSE_UP, onDrop, false, 0, true); viewPort.addEventListener (MouseEvent.MOUSE_MOVE, onMoveObject, false, 0, true);
De to siste hendelsen lyttere for våre nivåer Editor er onDrop -- som bare hører til lytterne for det slepede objektet og visningsporten, da et objekt blir tapt, vil disse lytterne være ubrukelige - på hvilket tidspunkt legger vi igjen onPickup lytter for det slepede objektet, slik at du kan dra og slippe tilgjengelig igjen.
For å tillate den faktiske virkningen av et objekt, tar vi et punkt som tilsvarer musens posisjon inяisometricяspace og beveger vårt objekt i henhold til forskyvningen mellom musens opprinnelige posisjon og dens nåværende posisjon.
privat funksjon onDrop (e: Event): 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, false, 0, true); privat 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);
I denne opplæringen avslører vi grunnleggende om åpen kildebibliotek As3isolib og skaper isometrisk innhold med det som isometriske rektangler og sprites. Vi kan også lage scener, kameraer og nett, og mange nyttige temaer som panorering, zooming, dra og slippe.
Nå kan du begynne å lage ditt isometriske Flash-prosjekt med As3isolib. Se opp for min neste opplæring, om å lage et spill med As3isolib. Håper du har det gøy!
