Share
În acest tutorial, vă voi introduceintroduceyouou la conceptul de creare de conținut izometric și la elementele de bază ale proiectării cu acesta, folosind biblioteca open source As3isolib. Vom folosi aceste abilități pentru a crea un editor de nivel simplu, potrivit pentru un joc izometric.
Să aruncăm o privire la rezultatul final la care vom lucra:
SWF a fost răsturnat ușor pentru a se încadra în pagină; faceți clic aici pentru a vedea dimensiunea completă.
În primul rând, este important să știm la ce ne referim Izometrică. Izometricul este un Gheorghe care are o măsură egală: măsurătorile sunt scalabile, indiferent cât de aproape sau cât de departe sunt în depărtare din punct de vedere. Deci, inimatatea, proiecția izometrică este un tip de proiecție care oferă o rezistență de-a lungul obiectelor.
Să presupunem că sunteți într-o viziune izometrică; veți avea o vizualizare 3D (de exemplu, atunci când o cameră foto vă ia o fotografie), indiferent dacă sunteți, veți fi afișat la aceeași scară în funcție de camera respectivă. Acest lucru este în contrast cu o perspectivă adevărată, în cazul în care veți fi reduse în dimensiune atunci când sunteți departe de aparatul de fotografiat.
As3isolib se ocupă de toate matematica care stau la baza pentru a vă crea scene și vederi, așa că nu vă faceți griji cu privire la matematică!
Placarea pe bază de țiglă este un termen folosit pentru orice conținut grafic care folosește plăci ca element fundamental. Conceptul în sine este un pic mai vechi - a fost folosit în jocuri mai vechi din motive tehnice - dar acest lucru nu înseamnă că jocurile bazate pe țiglă sunt acum moarte; în aceste zile este o rendere 3D, dar aceste jocuri 3D pot fi bazate pe țiglă (și multe sunt). Aici intră jocurile izometrice. Placile sunt de obicei dreptunghiulare, dar există și plăci pătrate, plăci triunghiulare și chiar plăci hexagonale (ca în unele titluri de civilizație).
Plăcile dreptunghiulare sunt cele mai ușor de lucrat, deși, de cele mai multe ori, când lucrați în teren dreptunghiular, utilizați plăci pătrate. Puteți folosi și alte dimensiuni, desigur, dar pătrat pare a fi un favorit. Punctul de vedere al jocurilor cu plăci pătrate este, de obicei, de sus în jos sau deasupra capului. Aceasta înseamnă că toate graficele dvs. trebuie să fie desenate ca și cum ați privi în jos pe obiect. Uneori îți poți oferi jocului o vedere ușor înclinată, astfel încât să te uiți în cea mai mare parte în jos, dar puteți vedea unele din față sau din spate.
Un alt punct de vedere al plăcilor pătrate este aspectul "side-scroller", în care priviți lumea dincolo. Acest lucru a fost foarte popular printre jocurile de acțiune mai vechi precum Super Mario Bros și originalul 2D Duke Nukem. Într-o hartă rectangulară, deplasarea de-a lungul axei X înseamnă deplasarea spre est și deplasarea de-a lungul axei Y înseamnă mișcarea spre sud. Într-o placă izometrică, în funcție de tipul acesteia, deplasarea de-a lungul axei X ar putea însemna o mișcare spre sud-est, iar deplasarea de-a lungul axei Y ar putea însemna deplasarea spre sud-vest. acest lucru nu se va schimba. Ce se va schimba este cum le veți face.
(Nota editorului: un ghid excelent pentru diferite tipuri de perspective poate fi găsit aici.)
Există trei tipuri de tilemaps izometrice: diapozitiv, eșalonat și diamant. Fiecare are un set propriu de quirks, propriile sale metode de redare, propriul mod de reprezentare a unei tablouri și metoda proprie de navigare a acestora. Voi le introduce pe scurt în acest pas.
Slide Maps:Harta țintă diapozitiv este, probabil, cel mai ușor de a face, naviga și interacționa cu. Din nefericire, ea are limite de utilizare. Este folosit în principal pentru derularea jocurilor de acțiune.Utilizat, o hartă diapozitivă are o axă X orizontală și o axă Y diagonală, deși este posibil să existe o axă verticală Yaxaxis și o diagonală X. Plăcile sunt așezate în rânduri orizontale de sus în jos.
Hărți incorectă:h Maps-urile personalizate funcționează perfect în jocurile de strategie turn-based. Este, de asemenea, foarte util în simularea unei lumi rotunde; este cel mai potrivit pentru hărțile care se înfășoară (trec de la o margine la alta). Fiecare rând nou al hărții este alternativ mutat jumătate dintr-o țiglă la stânga sau la dreapta, ceea ce duce la un model zig-zag de gresie. Axa X este, de obicei, orizontală (crescând spre est), iar axa Y este sud-est și sud-vest. Hărțile înclinate sunt cele mai neregulate dintre cele trei. Plăcile sunt așezate în rânduri orizontale, de sus în jos.
Diamond Maps: Acest tip de hartă este foarte popular în jocuri de strategie în timp real. Aceste hărți sunt cele mai puțin ofensive; hărțile de diapozitive au "tavite" vârfurile și fundul, iar hărțile eșalonate au marginile "zdrențuite", astfel încât hărțile cu diamante sunt cele mai simple. În hărțile cu diamante, singura cerință este aceea că atât axa X cât și axa Y sunt diagonale, - axa sau axa Y se potrivește cu tine, ca și axa X crescând spre sud-vest și axa Y spre sud-est.
Asta e destul context - timpul pentru a începe să se dezvolte!
Primul pas este descărcarea As3isolib (Biblioteca izometrică ActionScript 3), care este o bibliotecă open source pentru crearea conținutului proiectat izometric. Un exemplu de joc creat cu ajutorul acestuia este Emiratele și Aliații de la Zynga.
Biblioteca conține câteva elemente asemănătoare cu pictogramele (dreptunghiuri, cuburi și așa mai departe) și unele utilitare pentru a facilita crearea conținutului dvs. izometric. Este, de asemenea, gratuit și poate fi folosit în orice lucrare comercială (deși vă puteți canadonează-o dacă doriți).
Să o descarcă acum din loc. După descărcare, se decomprima fișierul zip într-un folder nou și se numește ityaEditor de nivel.
În orice moment în timp ce utilizați As3isolib, puteți consulta documentația prin acest link
Aprinde Flash și crea un nou FLA ActionScript 3.0. Acum trebuie să importați fișierul PSD pentru interfața editorului de nivel pe care l-am creat (este în fișierele sursă tutorial), sau puteți reprograma interfața la ceea ce vă simțiți bine. Deci, faceți clic pe File> Import> Import To Stage, selectați fișierul PSD și marcați opțiunea "setați dimensiunea scenei la aceeași dimensiune asyaPhotoshopycanvas".
Acum avem imaginile brute pentru editorul nostru de nivel. Trebuie să creăm clasa noastră de documente în care vom implementa Editorul de nivel: în panoul Particularități din secțiunea Publicați veți găsi un câmp Clasă; scrieți CDoc și faceți clic pe butonul creion. Salvați acum fișierul ActionScript care apare și îl numiți CDoc.
Să facem cele trei butoane din panoul de jos; faceți clic dreapta pe imaginea de fundal a butonului și selectați Conversie la Simbol ca și ceea ce vedeți în imagine, apoi redenumiți butonul btnClear, introduceți textul în cadrul Up, Over, Down și Hit și scrieți-l CURATA TOT. În stările Over și Hit introduceți imaginea Hover la fel ca în captura de ecran.
Apoi, repetați acest pas pentru a obține celelalte două butoane.
Acum vom crea cele trei tab-uri: una dintre ele va fi pentru Soild Colors, iarna pentru Briggs, iar ultima pentru Grass.
Desenați un dreptunghi de gradient negru, faceți clic dreapta pe el și alegeți Conversie la simbol, apoi denumiți-o în Tab și alegeți tipul acestuia pentru a fi un film clip. Acum marcați opțiunea Export pentru ActionScript, apoi scrieți câmpul Class CTAB care va fi numele clasei pentru acest film de filme Tab.
Faceți dublu clic pe fila Film Tab și introduceți textul în ea; înăuntru, scrie NUME. Acest text va fi modificat cu numele filei; pentru a permite acest lucru, convertiți acest text la Text dinamic cu numele txt, la fel ca în imaginea de mai jos.
Acum avem un clip video pentru fila noastră, trebuie să instanțiate trei copii ale acestuia și să le numim, așa că hai să facem asta în clasa noastră de documente.
pachet import flash.events.MouseEvent; import flash.text.TextField; import flash.display.MovieClip; clasa publică CTab extinde MovieClip public var txt: TextField; funcția publică CTab (Nume: String) txt = this.txt ca TextField; txt.text = Nume; addEventListener (MouseEvent.ROLL_OVER, onRollOver, false, 0, adevărat); addEventListener (MouseEvent.ROLL_OUT, peRollOut, false, 0, adevărat); funcția protejată onRollOver (e: MouseEvent): void this.alpha = 0.9; funcția protejată peRollOut (e: MouseEvent): void this.alpha = 1;
Accentsconagua
pachet import flash.display.MovieClip; importul flash.events.Event; importul flash.events.MouseEvent; clasa publica CDoc extinde MovieClip // Instantiating tab-urile private var Solid: CTab; private var Bricks: CTab; private var Grass: CTab; funcția publică CDoc () addEventListener (Event.ADDED_TO_STAGE, onAddedToStage, false, 0, true); funcția protejată onAddedToStage (e: Eveniment): void // Crearea filelor Solid = CTab nou ("SOLID"); Solid.y = 469; Solid.addEventListener (MouseEvent.CLICK, onSolidClick, false, 0, adevărat); addChild (Solid); Caramizi = nou CTab ("BRICKS"); Bricks.y = 494; Bricks.addEventListener (MouseEvent.CLICK, peBricksClick, false, 0, adevărat); addChild (cărămizi); Iarbă = CTab nou ("GRASS"); Grass.y = 521; Grass.addEventListener (MouseEvent.CLICK, peGrassClick, false, 0, adevărat); addChild (Grass); funcția protejată onSolidClick (e: MouseEvent): void // va fi implementată mai târziu funcția protejată onBricksClick (e: MouseEvent): void // va fi implementată mai târziu funcția protejată onGrassClick (e: MouseEvent): void va fi implementat mai târziu Acum, să învățăm despre unul dintre cele mai importante lucruri din As3isolib: vederea izometrică care servește ca o cameră care prezintă obiectele izometrice. Are multe funcții utile, cum ar fi panningul și mărirea și focalizarea pe un punct sau un obiect. Oferă, de asemenea, capacitatea de a ascunde / clipiza obiecte din afara limitelor sale și, de asemenea, ne permite să ne schimbăm conținutul de fond și de prim plan.
Vom crea două vizualizări în editorul nostru de niveluri, primul este pentru ourrayviewportywhich va avea o grilă în el și, de asemenea, obiectele de la nivelul nostru, cealaltă vedere este pentru Object Browser care va avea o mulțime de tipuri de obiecte care pot fi folosite în proiectarea nivelului.
Acum vom adăuga următorul cod în clasa noastră CDoc - asigurați-vă că verificați numerotarea liniilor sau doar aruncați o privire la fișierele sursă ale tutorialului.
// Adăugați această linie înaintea construcției private var viewPort: IsoView;
viewPort = nou IsoView (); vederePort.setSize (800, 600); viewPort.centerOnPt (noul Pt (-100, 100, 0), false); addChildAt (vizualizarePort, 0); viewPort.addEventListener (MouseEvent.MOUSE_DOWN, peStartPan, false, 0, true); viewPort.addEventListener (MouseEvent.MOUSE_WHEEL, peZoom, false, 0, true);
În prima linie am creat IsoView și l-am denumit privind dimensiunea grafică apoi în al doilea rând am stabilit dimensiunea la 800x600px. Trebuie să-l centreze pe un punct sau pe un obiect, așa că am creat un nou punct de la construit in as3isolib.geom pachet și a dat niște valori x și y în spațiul isometric 3D (pe care îl vom discuta în pasul următor).
Acum trebuie să afișăm vizualizarea noastră, astfel încât am adăugat-o în lista de afișare a documentului ca un copil și să o facem în partea de jos a interfeței noastre pentru a ne asigura că nu se va suprapune cu niciun element pe care l-am adăugat la indexul 0. Apoi am adăugat doi ascultători de evenimente pe viewPort, unul pentru panning și altul pentru zoom (ceea ce din nou o voi explica mai târziu).
Sistemul de coordonate utilizat în Flash este numit tiaCartesian coordonatesystem.яSistemul de coordonate cartezian este bazat pe grilă (alcătuit din mai multe pătrate imaginare de dimensiuni egale), cu o axă orizontală numităx-axisяși o axă verticală numită acesteay ca în colțul din stânga sus al imaginii de mai jos.
Spațiul izometric este puțin diferit; fiecare dintre cele trei axe ale acestuia apar egale în dimensiune și unghiurile dintre oricare două dintre acestea sunt de 120 de grade. As3isolib oferă o modalitate de a converti un punct de la cartesian la coordonate izometrice (și invers) prin calliaIsoMath.screenToIso (Punct: Pt) pentru a converti într-o singură cale, ияIsoMath.isoToScreen (Punct: Pt) pentru a converti cealaltă.
Este foarte simplu să creați scena izometrică care să țină obiectele noastre. (Aceste obiecte vor fi toate mostenite de la IsoDisplayObject (ex. IsoBox, IsoRectangle, IsoSprite, etc), care este clasa de bază pe care toate obiectele de afișare izometrice primitive și complexe se extind.)
Vom institui un nou IsoScene și apoi vom adăuga scena noastră în portul de vizualizare care va fi afișat.
// Adăugați această linie înainte de scena constructor priv var: IsoScene;
scena = nou IsoScene (); viewPort.addScene (scena);
Pentru a adăuga o grilă în fereastra de vizualizare, trebuie doar să instanțializăm un nou IsoGrid, apoi putem seta lățimea și lungimea lui la 10 pentru a ne oferi o grilă de 10x10. De asemenea, putem seta dimensiunea celulei la ceea ce dorim (am ales 30). Ultimul și foarte important pas este să adăugați grila la scenă.
// Adăugați această linie înaintea constructorului var var privat: IsoGrid;
grilă = noul IsoGrid (); grid.setGridSize (10, 10, 1); grid.cellSize = 30; scene.addChild (grilă);
Trebuie să adăugăm un ascultător al evenimentului pentru a reda scena și este foarte simplu, doar adăugați ascultătorul și în corpul său sunați face() funcția pe scenă.
// Adăugați acest cod în ascultătorul onAddedToStage addEventListener (Event.ENTER_FRAME, onRender, false, 0, true);
funcția privată peRender (e: Event): void scene.render ();
În acest pas vom adăuga ascultătorului pentru evenimentele clic pe butoanele din panoul de jos, dar mai întâi trebuie să le accesăm, ceea ce putem face cu funcția getChildByName ().
La primul manipulator de evenimente pentru clar butonul va elimina toate copiile scenei și apoi trebuie să re-adăugăm grila. În Incadrat in ecran butonul va seta zoom-ul curent al ferestrei de vizualizare la 1, care îl resetează la valoarea sa implicită, apoi îl vom alinia la starea sa implicită cu Panto () funcţie. Butonul final este locul în care vom arăta / ascunde originile rețelei, astfel încât vom inversa starea de afișare a acesteia; dacă este arătat, o vom ascunde și invers.
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); funcția protejată onbtnClearClick (e: MouseEvent): void scene.removeAllChildren (); scene.addChild (grilă); funcția protejată onbtnFitClick (e: MouseEvent): void viewPort.currentZoom = 1; ViewPort.panTo (-100, 100); funcția protejată onbtnShowClick (e: MouseEvent): void if (grid.showOrigin) grid.showOrigin = false; altceva grid.showOrigin = true;
Când am creat portul de vizualizare, am adăugat un ascultător de eveniment pentru evenimentul MOUSE_DOWN. În acest eveniment de ascultare vom proceda la începutul panningului: vom crea mai întâi un punct și îl vom numi panPt ca un punct global de utilizare a acestuia în locuri diferite, deoarece se va ocupa de locația mouse-ului în fiecare cadru. Îi vom da pozițiile X și Y ale mouse-ului (Voi explica de ce în pasul următor).
Apoi, eliminăm ascultătorul evenimentului și adăugăm noi ascultători de evenimente: unul pentru manipularea efectivă a panningului și celălalt pentru a opri panningul.
privat var panPt: Pt; funcția privată onStartPan (e: MouseEvent): void panPt = nou Pt (stage.mouseX, stage.mouseY); viewPort.removeEventListener (MouseEvent.MOUSE_DOWN, peStartPan); viewPort.addEventListener (MouseEvent.MOUSE_MOVE, onPan, false, 0, adevărat); viewPort.addEventListener (MouseEvent.MOUSE_UP, onStopPan, false, 0, true);
Acest ascultător al evenimentului se numește atunci când se mișcă mouse-ul și ceea ce face este foarte simplu: acesta afișează portul de vizualizare în funcție de pozițiile X și Y ale poziției inițiale a mouse-ului minus pozițiile sale curente, pentru a calcula diferența de locație de la ultimul cadru. Apoi am setat X și Y la pozițiile curente ale mouse-ului.
funcția privată onPan (e: MouseEvent): void viewPort.panBy (panPt.x - stage.mouseX, panPt.y - stage.mouseY); panPt.x = stage.mouseX; panPt.y = stage.mouseY;
Când oprim panningul, trebuie să eliminăm ambele onPan și onStopPan ascultători de evenimente, deoarece nu mai avem nevoie de ele, apoi re-adăugăm onStartPan pentru a permite utilizatorului să redea vizualizarea din nou.
funcția privată onStopPan (e: MouseEvent): void viewPort.removeEventListener (MouseEvent.MOUSE_MOVE, onPan); viewPort.removeEventListener (MouseEvent.MOUSE_UP, onStopPan); viewPort.addEventListener (MouseEvent.MOUSE_DOWN, peStartPan, false, 0, true);
Am adăugat onZoom MOUSE_WHEEL evenimentul ascultător în mod anterior, așa că acum îl vom implementa.
Este foarte simplu: pentru a ști dacă mouse-ul se mișcă în sus sau în jos, trebuie să verificăm proprietatea asupra evenimentului mouse-ului (e) care se numește "delta"; dacă aceasta este mai mare decât 0, atunci ar trebui să mărim, altfel ar trebui să micșorăm. Pentru a face acest lucru se reduce sau reduce valoarea de zoom. Ultimul pas este de a seta fereastra de vizualizare currentZoom proprietate la valoarea noastră de zoom.
private var zoomValue: număr = 1; funcția privată onZoom (e: MouseEvent): void if (e.delta> 0) zoomValue + = 0.10; în cazul în care (e.delta < 0) zoomValue -= 0.10; viewPort.currentZoom = zoomValue;
Rețineți că nu am setat nicio verificare a legăturilor în cadrul valorilor de zoom sau de panoramare, ceea ce înseamnă că puteți să măriți sau să panorameze vederea de la marginea scenei. Este foarte simplu să le adăugați, dar vă voi lăsa asta.
După finalizarea ferestrei de vizualizare și adăugarea funcțiilor sale, trebuie să creați panoul de obiecte în care să vedem obiectele noastre și să le adăugăm în fereastra de vizualizare.
Începem cu crearea unei noi scene izometrice, numită objectScene, să ne ținem obiectele. Apoi vom crea o nouă perspectivă izometrică pentru a reda obiectele din scenă și a seta dimensiunea lor la 215x468px, care se potrivește panoului obiectelor. Acum trebuie să o aliniem astfel încât să o centrăm pe un punct de 40x80px. În cele din urmă adăugăm objectScene la objectview folosind addScene () funcția și adăugați objectView la lista de afișare a documentului nostru.
// Adăugați acest cod în ascultătorAddedToStage objectScene = new IsoScene (); objectView = nou IsoView (); objectView.setSize (215, 468); objectView.centerOnPt (noul Pt (40, 80, 0), false); objectView.addScene (objectScene); addChild (objectView);
Acum trebuie să creăm niște obiecte colorate solid pentru fila solidă, așa că vom adăuga un ascultător de evenimente pentru un clic de mouse.
funcția protejată onSolidClick (e: MouseEvent): void objectScene.removeAllChildren (); var p: Pt = Pt nou (0, 0); var solidColori: Array = [0xD15415, 0xFF6600, 0xFFCC00, 0x66FF00, 0xFF6699, 0x6699FF, 0x99FF00, 0xFF0066]; pentru (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();
Mai întâi eliminăm toți copiii din objectScene pentru a elimina toate obiectele dacă am apăsat de fapt o altă filă.îSecondăm că trebuie să facem un punct pentru a stabili pozițiile X și Y ale obiectelor, apoi vom face o serie de culori solide și vom plasa niște valori hexagonale în ea. După aceea vom face o bucla în care vom crea cele opt obiecte și le vom arăta într-o rețea. Apoi, de fapt, creăm fiecare dreptunghi izometric, folosind o formă primitivă As3isolibiaisometrică încorporată și setăm mărimea acesteia la 30x30px și umplem culoarea ei cu o culoare solidă (construită și în As3isolib) folosind o valoare din matricea noastră, cu un alfa de 1.
Acum trebuie să ne schimbăm valorile punctuale pentru a fi în coordonate izometrice, deci folosim cele menționate mai sus screenToIso () funcția, apoi să ne mutăm obiectul în noua poziție și să ne reinițializăm punctul de a fi în coordonatele ecranului - aceasta ne ușurează să ne aliniem obiectele într-o rețea cu coordonatele noastre de imagine (cartesiană), în timp ce ne mutăm obiectele cu ceea ce le convine cel mai bine coordonate izometrice).
Apoi pur și simplu creștem valoarea X cu 80 și adăugăm trei ascultători de evenimente: primele două se vor ocupa de evenimentele ROLL_OVER, pentru a evidenția obiectul când s-au rostogolit, iar cel de-al treilea se va ocupa de evenimentele CLICK. În cele din urmă, adăugăm obiectul la scenă și facem totul.
Acest pas este foarte asemănător cu cel precedent, cu excepția faptului că schimbăm conținutul de matrice în cărămizile noastre, pe care le vom crea și le vom importa în etapele următoare.
funcția protejată onBricksClick (e: MouseEvent): void objectScene.removeAllChildren (); var p: Pt = nou Pt (-20, -10); cărămizi var: matrice = [cărămizi1, cărămizi2, cărămizi3, cărămizi4, cărămizi5, cărămizi6, cărămizi7, cărămizi8]; pentru (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();
Cealaltă diferență față de pasul anterior este că am creat un obiect sprite izometric al cărui aspect putem canιαentirelychange să fie ceea ce dorim; am adăugat cărămizile noastre prin trimiterea unei referințe sprite.sprites care este o serie de sprites.
Acum puteți crea obiectele de iarbă exact așa cum am făcut cu cărămizile, trebuie doar să le schimbați cărămizi array la iarbă mulțime.
Vom face proprietățile noastre de textură, așa că începeți un nou document Flash și importați activele noastre dintr-o imagine sau dintr-un fișier PSD. Din fișier faceți clic pe Import> Stare importă, apoi alegeți să importați straturile ca Imagine bitmap cu stiluri de strat editabile.
Acum trebuie să convertim fiecare bitmap într-un clip video făcând clic dreapta pe el și selectând Conversia la simbol, scriind apoi numele său ca în matricele de cărămizi și iarbă (Brick1, Brick2, etc).
Marcați Exportați pentru partajarea în timpul rulării opțiune și tip textures.swf în câmpul URL. În cele din urmă mergeți la Fișier> Publicați setările și marcați opțiunea SWC în PUBLICA secțiune, apoi faceți clic pe Publicare. Acum avem un SWC care conține toate activele noastre, pe care le putem importa în LevelEditor pentru a fi utilizate.
Este foarte simplu să importați fișierul nostru SWC. Din meniul Fișier faceți clic pe Setările ActionScript, și de la Calea bibliotecii faceți clic pe butonul Flash care apare în imaginea de mai jos și căutați în SWC.
Asta e! Acum, activele noastre sunt încărcate.
Avem nevoie să gestionăm evenimentele mouse-ului pentru obiectele noastre - amintim în Pași 18 și 19 am adăugat trei evenimente pentru fiecare obiect. Vom implementa ascultătorii evenimentului ROLL_OVER în acest pas simplu.
Aș dori ca obiectele noastre să aibă un efect de strălucire atunci când o trecem peste el, așa că trebuie să accesăm obiectele înșiși. Pentru aceasta, As3isolib are un tip de eveniment încorporat numit ProxyEvent pe care le putem folosi pentru a accesa obiectul evenimentului folosind via e.target. Ar trebui să o punem ca IsoDisplayObject (care este clasa de bază pentru orice obiect afișat izometric) doar pentru a face ca acest ascultător al evenimentului să fie cât mai generic posibil și apoi să adăugați un filtru strălucitor utilizând filtrele încorporate Flash.
Primul parametru al parametrului GlowFilter constructorul este culoarea sa; al doilea este alfa, pe care o vom seta doar la 1; vom lăsa valorile blurX și neclar la valoarea lor implicită, 6, deoarece nu avem nevoie de nici o estompare; și, în final, vom seta calitatea la 64.
În dispozitivul de lansare vom reinițializa filtrele.
funcția privată peRollOverHandler (e: ProxyEvent): void var strălucire: GlowFilter = nou GlowFilter (0xC24704, 1, 6, 6, 64); (e.target ca IsoDisplayObject) .container.filters = [strălucire]; funcție privată onRollOutHandler (e: ProxyEvent): void (e.target ca IsoDisplayObject) .container.filters = [];
Cel de-al treilea ascultător de eveniment pentru obiectele noastre este evenimentul CLICK. Ce se va întâmpla când faceți clic pe orice obiect? Ei bine, trebuie să facem o copie a acesteia în fereastra de vizualizare și să adăugăm o drag-and-passionfacilityajto aceasta, pentru a ne ușura să ne mutăm în orice loc al scenei.
Este foarte simplu să faceți acest lucru. Mai întâi vom crea un obiect de tip IsoDisplayObject și să ne transmitem obiectul pe care l-am făcut clic, așa cum am făcut înainte.
Acum trebuie să clonăm obiectul clickat; acest lucru este ușor, deoarece As3isolib are o metodă construită numită clona (), care aparține IsoDisplayObject , care returnează o copie a obiectului clonat păstrând proprietățile sale de dimensiune și stil. Acest lucru va funcționa perfect pentru obiectele izometrice dreptunghiulare (pe care le-am creat în tabelul de culoare solidă), dar în cazul spritelor (cărămizi și iarbă) trebuie să copiem și matricea sprite pentru fiecare obiect, așa că vom face o simplă verificare pentru a vedea dacă obiectul este de tip IsoSprite, și dacă spritesiapropertyyais nu este nulă, atunci vom seta obiectul spriteяпроpertyяto se potrivesc cu obiectul clicului sprite.
Atunci ne vom muta obiectele în sus (de-a lungul axei Z) cu 50 pentru a evita suprapunerea cu grila. În cele din urmă, vom adăuga trei ascultători de evenimente pentru obiectul creat: două dintre ele pentru roll-out / out și ultima pentru a trage drag and drop (pe care o vom acoperi în pasul următor), apoi adăugăm obiectul nostru la scenă și îl facem.
funcția protejată onObjClick (e: ProxyEvent): void var obj: IsoDisplayObject = e.target ca IsoDisplayObject; obj = obj.clone (); dacă (obj este IsoSprite && (obj ca IsoSprite) .sprites! = null) (obj ca IsoSprite) .sprites = (e.target ca IsoSprite) .sprites; obj.moveTo (0, 0, 50); obj.addEventListener (MouseEvent.ROLL_OVER, peRollOverHandler, false, 0, true); obj.addEventListener (MouseEvent.ROLL_OUT, peRollOutHandler, false, 0, true); obj.addEventListener (MouseEvent.MOUSE_DOWN, onPickup, false, 0, true); scene.addChild (obj); scene.render ();
Există un apelător de eveniment rămas numit onPickup care este un eveniment MOUSE_DOWN pentru a gestiona începutul tragerii. Vom începe prin crearea unei variabile private numite dragObject, care va fi de tip IsoDisplayObject, să folosească inyreferenceentaul obiectului nostru tras, așa cum apare din numele său. De asemenea, vom crea un punct pentru a trata poziția obiectului tras.
În dispozitivul de preluare a prelucrării vom aloca obiectul tras la noi dragObject variabilă, apoi pentru a obține punctul izometric actual al mouse-ului pe care îl folosim viewPort.localToIso () metodă. Acest punct va fi util în calcularea distanței dintre obiectul tras și poziția curentă a mouse-ului, de asemenea, va opri obiectul tras de la fixarea la poziția mouse-ului.
În cele din urmă vom elimina acest ascultător al evenimentului, ca atunci când obiectul nostru este luat, nu vrem să îl luăm din nou! În schimb, vom adăuga două ascultători de evenimente pentru cădere: unul la obiectul tras și altul la viewPort. În cele din urmă, s-ar putea să întrebați unde se face mișcarea reală; răspunsul este că se întâmplă în onMoveObject care vom acoperi în etapa următoare și finală.
privat var dragObject: IsoDisplayObject; privat var dragPt: Pt; funcția privată onPickup (e: ProxyEvent): void dragObject = e.target ca IsoDisplayObject; dragPt = viewPort.localToIso (noul 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);
Cei doi ascultători finali ai evenimentului pentru editorul nostru de niveluri sunt onDrop -- care tocmai a ascultat toți ascultătorii pentru obiectul tras și pen
