Share
In questo tutorial, sto introducendo il concetto di creazione di contenuti isometrici e le basi della progettazione con esso, utilizzando la libreria open source As3isolib. Useremo queste abilità per creare un semplice editor di livelli, adatto per un gioco isometrico.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Il file SWF è stato schiacciato leggermente per adattarsi alla pagina; clicca qui per vederlo a grandezza naturale.
Innanzitutto, è importante sapere cosa intendiamo con isometrico. Isometric is aяGreekяterm che significa avere una misura uguale: tutte le misure devono essere scalate, indipendentemente dalla distanza o dalla distanza in cui si trovano dal punto di vista. Quindi, inamatematica, la proiezione isometrica è un tipo di proiezione che rappresenta una distanza lungo gli oggetti.
Supponiamo di essere in una visuale isometrica; si avrà una vista 3D (ad esempio quando una fotocamera scatta una foto) in cui, indipendentemente dalla propria posizione, verrà visualizzata la stessa scala in base a quella telecamera. Ciò è in contrasto con una prospettiva reale, in cui sarete ridotti di dimensioni quando sarete lontani dalla fotocamera.
As3isolib gestisce tutta la matematica sottostante alla creazione delle tue scene e visualizzazioni, quindi non preoccuparti della matematica!
Tile based è un termine usato per qualsiasi contenuto grafico che utilizza le tessere come elemento fondamentale. Il concetto stesso è un po 'vecchio - è stato usato nei vecchi giochi per motivi tecnici - ma questo non significa che i giochi basati su tessere siano ormai morti; al giorno d'oggi il rendering 3D è, ma questi giochi 3D possono essere basati su piastrelle (e molti lo sono). È qui che arrivano i giochi isometrici. Le piastrelle sono generalmente rettangolari, ma ci sono anche tessere quadrate, tessere triangolari e persino tessere esagonali (come in alcuni titoli di Civiltà).
Le tessere rettangolari sono le più semplici con cui lavorare, sebbene la maggior parte delle volte, quando si lavora in un rettangolo, si usano tessere quadrate. Puoi usare altri formati, ovviamente, ma il quadrato sembra essere il preferito. Il punto di vista per i giochi con tessere quadrate è solitamente dall'alto verso il basso o dall'alto. Questo significa solo che tutti i tuoi grafici devono essere disegnati come se stessimo guardando l'oggetto. A volte puoi dare al tuo gioco una visuale leggermente angolata, in modo tale da guardare principalmente verso il basso, ma puoi vedere un po 'di fronte o di dietro.
Un altro punto di vista per le tessere quadrate è la vista "a scorrimento laterale", in cui si guarda il mondo da un lato. Questo è stato molto popolare tra i vecchi giochi d'azione come Super Mario Bros e l'originale 2D Duke Nukem. In una mappa rettangolare, spostarsi lungo l'asse X significa spostarsi verso est e spostarsi lungo l'asse Y significa spostarsi verso sud. In una mappa tonomica isometrica, a seconda del tipo, spostarsi lungo l'asse X potrebbe significare spostarsi verso sud-est, e spostarsi lungo l'asse Y potrebbe significare spostarsi verso sud-ovest. Nelle tessere isometriche usiamo ancora le aree rettangolari per contenere le tessere; questo non cambierà. Ciò che cambierà sarà il modo in cui li renderete.
(Nota del redattore: qui puoi trovare un'ottima guida per diversi tipi di prospettiva).
Esistono tre tipi di tilemaps isometriche: diapositiva, sfalsata e diamante. Ognuno ha il proprio set di stranezze, i propri metodi di rendering, il proprio modo di rappresentare una tilemap e il proprio metodo di navigazione. Li presenterò brevemente in questo passaggio.
Mappe diapositive:La diapositiva tilemap è probabilmente la più semplice da mostrare, navigare e interagire con. Sfortunatamente, ha una durata limitata. Viene principalmente utilizzato per scorrere i giochi di azione. In pratica, una mappa di diapositive ha un asse X orizzontale e un asse Y diagonale, sebbene sia possibile avere un asse verticale Y e un asse X diagonale. Le tessere vengono inserite in file orizzontali dall'alto verso il basso.
Mappe sfalsate:Le mappe stagliate funzionano perfettamente nei giochi di strategia a turni. È anche molto utile per simulare un mondo circolare; è più adatto per le mappe che si avvolgono (si spostano da un bordo all'altro). Ogni nuova riga della mappa viene spostata alternativamente a metà della tessera a sinistra oa destra, il che si traduce in un motivo a zigzag di tessere. L'asse X è generalmente orizzontale (crescente verso est) e l'asse Y è sud-est e sud-ovest. Le mappe sfalsate sono le più irregolari delle tre. Le tessere vengono inserite in file orizzontali, dall'alto verso il basso.
Mappe di diamanti: Questo tipo di mappa è molto popolare nei giochi di strategia in tempo reale. Queste mappe sono meno offensive; le mappe delle diapositive hanno top e bottom "stracciati" e le mappe sfalsate hanno bordi "stracciati", quindi le mappe dei diamanti sono theяsmoothest.я Nelle mappe dei diamanti, l'unico requisito è che sia l'asse X-ia sia l'asse Y siano diagonali, quindi puoi aumentare X asse o asse Y come te, come l'asse X crescente a sud-ovest e l'asse Y a sud-est.
Questo è abbastanza contesto: è il momento di iniziare a svilupparsi!
Il primo passo è scaricare As3isolib (ActionScript 3 Isometric Library) che è una libreria open source per la creazione di contenuti proiettati isometrici. Un esempio di un gioco creato usando Isaia e Alleati da Ajynga.
La libreria contiene alcune risorse come formeprimitive (rettangoli, cubi e così via) e alcune utilità per facilitare la creazione del contenuto isometrico. È anche gratuito e può essere utilizzato in qualsiasi lavoro commerciale (anche se puoi permettertelo, se lo desideri).
Scaricalo ora da lì. Dopo averlo scaricato, decomprimi il file zip in una nuova cartella e digita itяEditor di livelli.
In qualsiasi momento durante l'utilizzo di As3isolib è possibile fare riferimento alla sua documentazione tramite questo link
Avvia Flash e crea un nuovo FLA ActionScript 3.0. Ora dobbiamo importare il file PSD per l'interfaccia dell'Editor di livelli che ho creato (è nei file sorgente del tutorial), oppure puoi ridisegnare l'interfaccia con quello che ti sembra bello. Quindi fai clic su File> Importa> Importa nello stage, seleziona il file PSD e contrassegna l'opzione "imposta dimensioni dello stage alle stesse dimensioni di asPhotoshopcancan".
Ora abbiamo le immagini raw per il nostro Level Editor. Abbiamo bisogno di creare la nostra Document Class nella quale implementeremo il nostro Level Editor: nel pannello thePropertiesя nella sezione Publish troverete un campo Class; scrivi CDoc e clicca sul pulsante matita. Ora salva il file ActionScript che appare e chiamalo CDoc.
Facciamo i nostri tre pulsanti nel pannello inferiore; tasto destro del mouse sull'immagine di sfondo del pulsante e selezionare Converti in simbolo come quello che vedi nell'immagine, quindi rinominare il pulsante in btnClear, inserisci il testo sui riquadri Su, Sopra, Giù e Hit e digita in esso CANCELLA TUTTO. Negli stati Over e Hit inserire l'immagine Hover proprio come nell'immagine.
Quindi ripetere questo passaggio per rendere i due pulsanti rimanenti.
Ora creeremo le tre schede: una di queste sarà per Soild Colors, iaanother forяBricks e l'ultima per Grass.
Disegna un rettangolo sfumato nero, fai clic con il pulsante destro del mouse su di esso e scegli Converti in simbolo, quindi assegna un nome a Tab e scegli il suo tipo come clip filmato. Ora contrassegna l'opzione Esporta per ActionScript, quindi nel campo Classe scrivi CTAB quale sarà il nome della classe per questo clip filmato.
Fare doppio clic sul clip filmato della scheda e inserire il testo al suo interno; all'interno di questo, scrivi NOME. Questo testo verrà modificato con il nome della scheda; per consentire questo, convertire questo testo in testo dinamico con il nome testo, proprio come nell'immagine qui sotto.
Ora abbiamo un filmato per la nostra scheda, abbiamo bisogno di istanziare tre copie di esso e nominarle, quindi facciamolo nella nostra Document Class.
package import flash.events.MouseEvent; import flash.text.TextField; import flash.display.MovieClip; la classe pubblica CTab estende MovieClip public var txt: TextField; funzione pubblica CTab (Name: String) txt = this.txt as TextField; txt.text = Nome; addEventListener (MouseEvent.ROLL_OVER, onRollOver, false, 0, true); addEventListener (MouseEvent.ROLL_OUT, onRollOut, false, 0, true); funzione protetta onRollOver (e: MouseEvent): void this.alpha = 0.9; funzione protetta onRollOut (e: MouseEvent): void this.alpha = 1;
Accentsconagua
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; CDC di classe pubblica estende MovieClip // Instantiating The Tabs private var Solid: CTab; private var Mattoni: CTab; private var Erba: CTab; public function CDoc () addEventListener (Event.ADDED_TO_STAGE, onAddedToStage, false, 0, true); funzione protetta su AddedToStage (e: Event): void // Creazione delle schede Solid = new CTab ("SOLID"); Solid.y = 469; Solid.addEventListener (MouseEvent.CLICK, onSolidClick, false, 0, true); addChild (solido); Bricks = new CTab ("BRICKS"); Bricks.y = 494; Bricks.addEventListener (MouseEvent.CLICK, onBricksClick, false, 0, true); addChild (mattoni); Grass = new CTab ("GRASS"); Grass.y = 521; Grass.addEventListener (MouseEvent.CLICK, onGrassClick, false, 0, true); addChild (Erba); funzione protetta onSolidClick (e: MouseEvent): void // verrà implementato successivamente funzione protetta onBricksClick (e: MouseEvent): void // verrà implementato successivamente funzione protetta suGrassClick (e: MouseEvent): void // sarà implementato più tardi Ora impariamo una delle cose più importanti in As3isolib: la vista isometrica che serve come una macchina fotografica che mostra gli oggetti isometrici. Ha un sacco di funzioni utili, come panning e zoom e messa a fuoco su un punto o qualsiasi oggetto. Fornisce inoltre la possibilità di nascondere / ritagliare oggetti al di fuori dei suoi confini e ci permette anche di cambiare il suo contenuto di sfondo e di primo piano.
Creeremo due viste nel nostro editor di livelli, la prima è per ourhowview, che avrà una griglia in essa e anche gli oggetti del nostro livello, l'altra vista è per il browser degli oggetti che avrà molti tipi di oggetti che possono essere utilizzati in progettare il livello.
Ora aggiungeremo il seguente codice nella nostra classe CDoc: assicuratevi di controllare la numerazione delle righe, o semplicemente dare un'occhiata ai file sorgente del tutorial.
// Aggiungi questa riga prima del var costruttore privato viewPort: IsoView;
viewPort = new IsoView (); viewPort.setSize (800, 600); viewPort.centerOnPt (new 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);
Nella prima riga abbiamo creato il nostro IsoView e lo abbiamo chiamato viewPort poi nella seconda riga impostiamo la sua dimensione a 800x600px. Abbiamo bisogno di centrarlo su un punto o su un oggetto, quindi abbiamo creato un nuovo punto dal built-in as3isolib.geom pacchetto e gli ha dato alcuni valori xey nello spazio isometrico 3D (di cui parleremo nel passaggio successivo).
Ora abbiamo bisogno di mostrare il nostro viewPort così l'abbiamo aggiunto alla lista di visualizzazione del documento come un bambino, e per farlo in fondo alla nostra interfaccia per assicurarci che non si sovrapponga a nessun altro elemento l'abbiamo aggiunto all'indice 0. Poi abbiamo aggiunto due listener di eventi sul nostro viewPort, uno per il panning e l'altro per lo zoom (che spiegherò di nuovo in seguito).
Il sistema di coordinate utilizzato in Flash è chiamato theCoordinata cartesianasystem.яIl sistema di coordinate cartesiane è basato sulla griglia (costituito da molti quadrati immaginari di uguale dimensione), con un asse orizzontale chiamato thex-axisяe un asse verticale chiamato theяy come nell'angolo in alto a sinistra dell'immagine qui sotto.
Lo spazio isometrico è un po 'diverso; ognuno dei suoi tre assi appare di dimensioni uguali e gli angoli tra loro due sono di 120 gradi. As3isolib fornisce un modo per convertire un punto da coordinate cartesiane a coordinate isometriche (e viceversa) chiamandoIsoMath.screenToIso (Point: Pt) per convertire in un modo, andanyIsoMath.isoToScreen (Point: Pt) per convertire l'altro.
È molto semplice creare la scena isometrica che manterrà i nostri oggetti. (Questi oggetti saranno tutti ereditati da IsoDisplayObject я (ad esempio IsoBox, IsoRectangle, IsoSprite, ecc.) Che è la classe base che tutti gli oggetti di visualizzazione isometrica primitiva e complessa stanno estendendo).
Daremo un'instantiate a un nuovo IsoScene e quindi aggiungeremo la scena al viewport da mostrare.
// Aggiungi questa linea prima della scena var privata del costruttore: IsoScene;
scene = new IsoScene (); viewPort.addScene (scena);
Per aggiungere una griglia nel viewport, dobbiamo semplicemente creare un'istanza di un nuovo IsoGrid, quindi possiamo impostarne la larghezza e la lunghezza a 10 per darci una griglia 10x10. Inoltre, possiamo impostare la sua dimensione della cella a qualsiasi cosa vogliamo (ho scelto 30). L'ultimo e molto importante passo è aggiungere la griglia alla scena.
// Aggiungi questa riga prima della griglia var privata del costruttore: IsoGrid;
grid = new IsoGrid (); grid.setGridSize (10, 10, 1); grid.cellSize = 30; scene.addChild (griglia);
Abbiamo bisogno di aggiungere un listener di eventi per rendere la scena, ed è molto semplice, basta aggiungere l'ascoltatore e nel suo corpo chiama render () funzione sulla scena.
// Aggiungi questo codice in onAddedToStage listener addEventListener (Event.ENTER_FRAME, onRender, false, 0, true);
funzione privata onRender (e: Event): void scene.render ();
In questo passaggio aggiungeremo gli ascoltatori per gli eventi click sui pulsanti del pannello inferiore, ma prima dobbiamo accedere a questi, cosa che possiamo fare con la funzione getChildByName ().
Sul primo gestore di eventi per il Chiaro pulsante rimuoviamo tutti i bambini dalla scena, e quindi dobbiamo aggiungere nuovamente la griglia. Nel Adatta allo schermo pulsante imposteremo lo zoom corrente del viewport su 1, che lo reimposta al suo valore predefinito, quindi lo faremo scorrere sulla sua posizione predefinita default con il Panto () funzione. Il pulsante finale è dove mostreremo / nasconderemo le origini della griglia, quindi invertiremo il suo stato di visualizzazione; se viene mostrato lo nascondiamo e viceversa.
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); funzione protetta onbtnClearClick (e: MouseEvent): void scene.removeAllChildren (); scene.addChild (griglia); funzione protetta onbtnFitClick (e: MouseEvent): void viewPort.currentZoom = 1; viewPort.panTo (-100, 100); funzione protetta onbtnShowClick (e: MouseEvent): void if (grid.showOrigin) grid.showOrigin = false; else grid.showOrigin = true;
Quando abbiamo creato la nostra vista abbiamo aggiunto un listener di eventi per l'evento MOUSE_DOWN. In questo evento listener gestiremo l'avvio di panning: prima creeremo un punto e lo nomineremo panPt come punto globale per usarlo in luoghi diversi in quanto gestirà la posizione del mouse in ogni fotogramma. Daremo le posizioni X e Y del mouse (spiegherò perché nel prossimo passaggio).
Quindi rimuoviamo il listener di eventi mouse down e aggiungiamo due nuovi listener di eventi: uno per la gestione effettiva del panning e l'altro quando interrompiamo il panning.
private var panPt: Pt; funzione privata 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);
Questo listener di eventi viene chiamato quando il mouse si muove e ciò che fa è molto semplice: esegue il panning del viewport in base alle posizioni X e Y della posizione iniziale del mouse panoramica meno le sue posizioni attuali, per calcolare la differenza di posizione dall'ultimo fotogramma. Quindi impostiamo X e Y sulle posizioni correnti del mouse.
funzione privata onPan (e: MouseEvent): void viewPort.panBy (panPt.x - stage.mouseX, panPt.y - stage.mouseY); panPt.x = stage.mouseX; panPt.y = stage.mouseY;
Quando smettiamo di panning, dobbiamo rimuovere entrambi onPan e onStopPan ascoltatori di eventi poiché non ne abbiamo più bisogno, quindi aggiungiamo nuovamente onStartPan ascoltatore di eventi per consentire all'utente di eseguire nuovamente la panoramica della vista.
funzione privata 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);
Abbiamo aggiunto il onZoom L'elenco di eventi MOUSE_WHEEL è precedente, quindi ora lo implementeremo.
È davvero semplice: per sapere se il mouse si muove in alto o in basso, è necessario controllare l'effetto del mouse sull'evento del mouse (e) che è chiamato "delta"; se questo è maggiore di 0, dovremmo ingrandire, altrimenti dovremmo ridurre lo zoom. Per fare ciò, incrementiamo o decrementiamo il valore dello zoom. Il passo finale è quello di impostare il viewport currentZoom proprietà al nostro valore di zoom.
private var zoomValue: Number = 1; funzione privata onZoom (e: MouseEvent): void if (e.delta> 0) zoomValue + = 0.10; if (e.delta < 0) zoomValue -= 0.10; viewPort.currentZoom = zoomValue;
Tieni presente che non abbiamo impostato alcun parametro di controllo verticale nei valori di zoom o panoramica, il che significa che puoi ingrandire o spostare la vista dal bordo dello stage. È molto semplice aggiungerli ma lo lascerò a voi.
Dopo aver completato la nostra finestra e aggiunto le sue funzionalità, dobbiamo creare il pannello degli oggetti in cui possiamo visualizzare i nostri oggetti e aggiungerli al viewport.
Iniziamo con la creazione di una nuova scena isometrica, denominata objectScene, tenere i nostri oggetti. Quindi creiamo una nuova vista isometrica per rendere gli oggetti nella scena e impostarne le dimensioni a 215x468px, che si adatta al pannello degli oggetti. Ora dobbiamo allinearlo in modo da centrarlo su un punto di 40x80px. Alla fine aggiungiamo il objectScene al ObjectView usando il addScene () funzione e aggiungi objectView all'elenco di visualizzazione del nostro documento.
// Aggiungi questo codice in onAddedToStage listener objectScene = new IsoScene (); objectView = new IsoView (); objectView.setSize (215, 468); objectView.centerOnPt (new Pt (40, 80, 0), false); objectView.addScene (objectScene); addChild (ObjectView);
Ora abbiamo bisogno di creare degli oggetti a tinta unita per la scheda solida, quindi aggiungeremo un listener di eventi per il clic del mouse.
funzione protetta onSolidClick (e: MouseEvent): void objectScene.removeAllChildren (); var p: Pt = new Pt (0, 0); var solidColors: Array = [0xD15415, 0xFF6600, 0xFFCC00, 0x66FF00, 0xFF6699, 0x6699FF, 0x99FF00, 0xFF0066]; per (var i: 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();
Per prima cosa rimuoviamo tutti i bambini dal objectScene per rimuovere tutti gli oggetti se in realtà abbiamo premuto su un'altra scheda.яSecondo dovremo creare un punto per mantenere le posizioni X e Y degli oggetti, quindi creeremo una matrice di colori a tinta unita e inseriremo alcuni valori esadecimali di colore. Dopodiché creeremo un ciclo in cui creeremo i nostri otto oggetti e li mostreremo in una griglia. Quindi creiamo ogni rettangolo isometrico, utilizzando una forma primitiva As3isolibioisometric, e impostiamo le sue dimensioni a 30x30px e riempiamo il suo colore con un colore solido (anch'esso costruito in As3isolib) usando un valore dal nostro array, con un alfa di 1.
Ora abbiamo bisogno di cambiare i nostri valori in punti per essere in coordinate isometriche, quindi usiamo il suddetto screenToIso () funzione, quindi sposta il nostro oggetto nella nuova posizione e reimposta il nostro punto in coordinate dello schermo: ciò semplifica il nostro modo di allineare gli oggetti in una griglia con le nostre fantastiche schermate (cartesiane), mentre spostiamo i nostri oggetti con quello che gli conviene ( coordinate isometriche).
Quindi aggiungiamo semplicemente il valore X per 80 e aggiungiamo tre listener di eventi: i primi due gestiranno gli eventi ROLL_OVER, per evidenziare l'oggetto al momento del rollover e il terzo gestirà gli eventi CLICK. Alla fine aggiungiamo l'oggetto alla scena e rendiamo tutto.
Questo passaggio è molto simile a quello precedente, eccetto che cambiamo il contenuto dell'array nei nostri mattoni, che creeremo e importe nei prossimi passi.
funzione protetta onBricksClick (e: MouseEvent): void objectScene.removeAllChildren (); var p: Pt = new Pt (-20, -10); Var: Array = [Mattoni1, Mattoni2, Mattoni3, Mattoni4, Mattoni5, Mattoni6, Mattoni7, Mattoni8]; per (var i: 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();
L'altra differenza rispetto al passaggio precedente è che abbiamo creato un oggetto sprite isometrico il cui aspetto può essere solo quello che vogliamo; abbiamo aggiunto i nostri mattoncini passando un riferimento a sprite.sprites che è una matrice di sprite.
Ora puoi creare gli oggetti di erba proprio come abbiamo fatto con i mattoni, devi solo cambiare il mattoni matrice al erba schieramento.
Stiamo per creare le nostre risorse di texture, quindi avvia un nuovo documento Flash e importa le nostre risorse da un'immagine o da un file PSD. Da File clic Importa> Importa in scena, quindi scegliere di importare i livelli come Immagine bitmap con stili di livello modificabili.
Ora abbiamo bisogno di convertire ogni bitmap in un clip filmato facendo clic destro su di esso e scegliendo Converti in simbolo, quindi scrivendo il suo nome come negli array Bricks and Grass (Brick1, Brick2, eccetera).
Segna il Esporta per la condivisione runtime opzione e tipo textures.swf nel campo URL. Finalmente vai File> Impostazioni pubblicazione e segnare l'opzione SWC in PUBBLICARE sezione, quindi fare clic su Pubblica. Ora abbiamo un SWC che contiene tutte le nostre risorse, che possiamo importare nel nostro LevelEditor per essere utilizzato.
È molto semplice importare il nostro file SWC. Dal menu File fai clic Impostazioni ActionScript, e dal Percorso della biblioteca scheda clicca il pulsante Flash che appare nell'immagine qui sotto e vai al nostro SWC.
Questo è tutto! Ora i nostri beni sono caricati.
Dobbiamo gestire gli eventi del mouse per i nostri oggetti: ricordiamo che nei passaggi 18 e 19 abbiamo aggiunto tre eventяlistenersяper ogni oggetto. Implementeremo i listener di eventi ROLL_OVER in questo semplice passaggio.
Mi piacerebbe che i nostri oggetti avessero un effetto bagliore quando li sorvoliamo, quindi dobbiamo accedere agli oggetti stessi. Per questo, As3isolib ha un tipo di evento integrato chiamato ProxyEvent che possiamo usare per accedere all'oggetto evento usando via e.target. Dovremmo lanciarlo come IsoDisplayObject (che è la classe base per qualsiasi oggetto di visualizzazione isometrico) solo per rendere questo listener di eventi il più generico possibile, e quindi aggiungere un filtro glow usando i filtri incorporati di Flash.
Il primo parametro del GlowFilter il costruttore è il suo colore; il secondo è il suo alfa, che verrà impostato su 1; lasceremo i valori blurX e blurY al loro valore predefinito, 6, in quanto non abbiamo bisogno di alcuna sfocatura; e infine imposteremo la qualità su 64.
Nel roll out handler, ripristineremo i filtri.
funzione privata onRollOverHandler (e: ProxyEvent): void var glow: GlowFilter = new GlowFilter (0xC24704, 1, 6, 6, 64); (e.target as IsoDisplayObject) .container.filters = [glow]; funzione privata onRollOutHandler (e: ProxyEvent): void (e.target as IsoDisplayObject) .container.filters = [];
Il terzo listener di eventi per i nostri oggetti è l'evento CLICK. Cosa succederà quando clicchiamo su qualsiasi oggetto? Bene, abbiamo bisogno di farne una copia nel viewport e aggiungere una drag-and-dropяfacility ad esso, per facilitare il passaggio a qualsiasi luogo della scena.
È molto semplice farlo. Per prima cosa creeremo un oggetto di tipo IsoDisplayObject e passare il nostro oggetto che abbiamo cliccato, proprio come facevamo prima.
Ora abbiamo bisogno di clonare l'oggetto cliccato; questo è facile, dato che As3isolib ha un metodo integrato chiamato clone(), che appartiene al IsoDisplayObject class, che restituisce una copia dell'oggetto clonato che conserva le proprietà itsanydimensional e style. Ciò funzionerà perfettamente per gli oggetti rettangolari isometrici (che abbiamo creato nella scheda dei colori solidi), ma nel caso degli sprites (mattoni ed erba) dobbiamo anche copiare l'array sprite per ogni oggetto, quindi faremo un semplice controllo per vedere se l'oggetto è di tipo IsoSprite, e se il suo spritesяpropertyя non è nullo, allora imposteremo l'oggetto spriteяpropertyя per abbinare l'oggetto cliccato sprite.
Quindi sposteremo i nostri oggetti verso l'alto (lungo l'asse Z) di 50 per evitare di sovrapporsi alla griglia. Infine aggiungeremo tre listener di eventi per il nostro oggetto creato: due di essi per il rollover / out e l'ultimo per gestire il drag and drop (che tratteremo nel passaggio successivo), quindi aggiungere il nostro oggetto alla nostra scena e renderlo.
funzione protetta onObjClick (e: ProxyEvent): void var obj: IsoDisplayObject = e.target as IsoDisplayObject; obj = obj.clone (); if (obj is IsoSprite && (obj as 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 ();
C'è un listener di eventi rimanente chiamato onPickup che è un evento MOUSE_DOWN per gestire l'inizio del trascinamento. Inizieremo creando una variabile privata chiamata dragObject, che sarà di tipo IsoDisplayObject, utilizzare inяreferenceiano al nostro oggetto trascinato così come appare dal suo nome. Inoltre creeremo un punto per gestire la posizione dell'oggetto trascinato.
Nel gestore pickup assegneremo l'oggetto trascinato al nostro dragObject variabile, quindi per ottenere l'attuale punto isometrico del mouse usiamo il viewPort.localToIso () metodo. Questo punto sarà utile per calcolare la distanza tra l'oggetto trascinato e la posizione corrente del mouse, inoltre fermerà l'oggetto trascinato dallo snap alla posizione del mouse.
Infine rimuoveremo questo listener di eventi, poiché quando il nostro oggetto viene prelevato non vogliamo riprenderlo! Invece, aggiungeremo due listener di eventi per il rilascio: uno per l'oggetto trascinato e un altro per viewPort. Infine, potresti chiedere dove avviene la mossa effettiva; la risposta è che succede nel onMoveObject gestore che copriremo nel passaggio successivo e finale.
private var dragObject: IsoDisplayObject; private var dragPt: Pt; funzione privata onPickup (e: ProxyEvent): void dragObject = e.target as IsoDisplayObject; dragPt = viewPort.localToIso (new Pt (stage.mouseX, stage.mouseY)); dragPt.x - = dragObject.x; dragPt.y - = dragObject.y; dragObject.removeEventListener (MouseEvent.MOUSE_DOWN, onPickup); dragObject.addEve
