Share
In deze zelfstudie introduceer ik het concept van het maken van isometrische inhoud en de basisbeginselen van ontwerpen ermee, met behulp van de open-sourcebibliotheek As3isolib. We zullen deze vaardigheden gebruiken om een eenvoudige niveau-editor te maken, geschikt voor een isometrisch spel.
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
De SWF is enigszins geplet om op de pagina te passen; klik hier om het op ware grootte te zien.
Ten eerste is het belangrijk om te weten waarmee we bedoelen isometrische. Isometrisch is aяGreekяterm wat gelijk meten betekent: alle metingen zijn op schaal, ongeacht hoe dichtbij of hoe ver ze in de verte zijn vanuit het gezichtspunt. Dus is inematematica, isometrische projectie een soort projectie die afstand langs objecten weergeeft.
Stel dat u zich in een isometrisch aanzicht bevindt; je hebt een 3D-weergave (bijvoorbeeld wanneer een camera een foto van je maakt) waar je ook bent, je wordt op dezelfde schaal weergegeven volgens die camera. Dit staat in contrast met een echt perspectief, waar je kleiner wordt als je ver weg bent van de camera.
As3isolib verwerkt alle onderliggende wiskundige gegevens die bij het maken van je scènes en weergaven zijn betrokken, dus maak je geen zorgen over de wiskunde!
Op tegels gebaseerd is een term die wordt gebruikt voor grafische inhoud die tegels als een fundmenteel element gebruikt. Het concept zelf is een beetje oud - het werd om technische redenen in oudere spellen gebruikt - maar dit betekent niet dat op tegels gebaseerde games nu dood zijn; Tegenwoordig is 3D-rendering, maar deze 3D-spellen kunnen op tegels zijn gebaseerd (en vele zijn). Hier komen isometrische spellen binnen. Tegels zijn meestal rechthoekig, maar er zijn ook vierkante tegels, driehoekige tegels en zelfs zeshoekige tegels (zoals in sommige beschavingstitels).
Rechthoekige tegels zijn het gemakkelijkst om mee te werken, maar meestal werk je in rechthoekig land met vierkante tegels. Je kunt natuurlijk andere maten gebruiken, maar vierkant lijkt favoriet te zijn. Het gezichtspunt voor spellen met vierkante tegels is meestal van boven naar beneden of boven het hoofd. Dit betekent alleen dat al uw afbeeldingen moeten worden getekend alsof u naar beneden kijkt op het object. Soms kun je je spel een enigszins schuin beeld geven, zodat je meestal naar beneden kijkt, maar je kunt een deel van de voor- of achterkant zien.
Een ander gezichtspunt voor vierkante tegels is de "side-scroller" -weergave, waarin u de wereld vanaf de zijkant bekijkt. Dit was erg populair bij oudere actiespellen zoals Super Mario Bros en de originele 2D Duke Nukem. In een rechthoekige kaart betekent bewegen langs de X-as verplaatsen naar het oosten en bewegen langs de Y-as betekent naar het zuiden verplaatsen. In een isometrische tilemap, afhankelijk van het type, kan het verplaatsen langs de X-as betekenen dat u naar het zuidoosten moet verplaatsen en als u langs de Y-as beweegt, betekent dit dat u naar het zuidwesten moet verplaatsen. In isometrische tegels gebruiken we nog steeds rechthoekige gebieden om de tegels te bevatten; dit gaat niet veranderen. Wat er zal veranderen, is hoe je ze zult weergeven.
(Noot van de redactie: een goede gids voor verschillende soorten perspectieven is hier te vinden.)
Er zijn drie soorten isometrische tilemaps: schuiven, verspringen en diamant. Elk heeft zijn eigen set eigenaardigheden, zijn eigen methoden van weergave, zijn eigen manier om een tilemap weer te geven, en zijn eigen methode om ze te navigeren. Ik zal ze in deze stap alvast kort introduceren.
Kaarten schuiven:яDe tilemap van de dia is waarschijnlijk de gemakkelijkste weergave, navigatie en interactie. Helaas heeft het een beperkt aantal. Het wordt voornamelijk gebruikt om actiegames te scrollen. Meestal heeft een diapresentatie een horizontale X-as en een diagonale Y-as, hoewel het mogelijk is om een verticale yisaaxis en een diagonale X-as te hebben. De tegels worden van boven naar beneden in horizontale rijen geblazen.
Gestapelde kaarten:ÅGestagerde kaarten werken perfect in turn-based strategiespellen. Het is ook erg handig bij het simuleren van een ronde wereld; het is het meest geschikt voor kaarten die zich omwikkelen (van de ene naar de andere kant). Elke nieuwe rij van de kaart wordt afwisselend een helft van een tegel naar links of rechts verschoven, wat resulteert in een zigzagpatroon van tegels. De X-as is meestal horizontaal (groter naar het oosten) en de Y-as is zuidoost en zuidwest. Gestapelde kaarten zijn de meest onregelmatige van de drie. De tegels worden geblazen in horizontale rijen, van boven naar beneden.
Diamond Maps: Dit type kaart is erg populair in real-time strategiespellen. Deze kaarten zijn het minst aanstootgevend; plattegronden hebben "gescheurde" toppen en bodems, en verspringende kaarten hebben "aan flarden" randen, dus diamantkaarten zijn de meest natuurlijke. In diamantkaarten is de enige vereiste dat zowel de X-я als de Y-as diagonaal zijn, dus je kunt X vergroten -as of Y-as zoals u past, zoals de X-as die stijgt naar het zuidwesten en de Y-as naar het zuidoosten.
Dat is voldoende context - tijd om te beginnen met ontwikkelen!
De eerste stap is het downloaden van As3isolib (ActionScript 3 Isometric Library), een open source-bibliotheek voor het maken van isometrische geprojecteerde inhoud. Een voorbeeld van een game die ermee is gemaakt, isEmpires and Allies fromяZynga.
De bibliotheek bevat een aantal items, zoals primaire formaten (rechthoeken, kubussen, enzovoort) en enkele hulpprogramma's om het maken van uw isometrische inhoud te vergemakkelijken. Het is ook gratis en kan worden gebruikt in elk commercieel werk (hoewel je het kunt doen als je dat wilt).
Laten we het nu van hier downloaden. Na het downloaden, decomprimeert het zip-bestand naar een nieuwe map en geeft het een naamNiveau-editor.
Op elk moment tijdens het gebruik van As3isolib kunt u de documentatie raadplegen via deze link
Start Flash op en maak een nieuwe FLA ActionScript 3.0. Nu moeten we het PSD-bestand importeren voor de Level Editor-interface die ik heb gemaakt (het staat in de bronbestanden van de zelfstudie), of je kunt de interface opnieuw ontwerpen voor wat je er goed uitziet. Dus klik op Bestand> Importeren> Importeren naar werkgebied, selecteer het PSD-bestand en markeer de optie "Stel stageformaat in op dezelfde grootte als een fotoshopvascanvas".
Nu hebben we de onbewerkte afbeeldingen voor onze niveau-editor. We moeten onze documentklasse creëren waarin we onze niveau-editor zullen implementeren: in het paneel? Eigenschappen van het gedeelte Publiceren vindt u een klasse-veld; schrijf CDoc en klik op de potloodknop. Sla nu het ActionScript-bestand dat verschijnt op en noem dit CDoc.
Laten we onze drie knoppen in het onderste paneel maken; klik met de rechtermuisknop op de achtergrondafbeelding van de knop en selecteer Converteren naar symbool zoals het beeld dat u ziet in de afbeelding, en hernoem de knop vervolgens naar btnClear, voeg tekst toe in de frames Omhoog, Boven, Onder en Hit en typ daarin WIS ALLES. Voeg in de Over and Hit-staten de Hover-afbeelding in, net als in de schermafbeelding.
Herhaal vervolgens deze stap om de resterende twee knoppen te maken.
Nu zullen we de drie tabbladen maken: een van hen zal voor Soild Colors zijn, een andere voorяBricks, en de laatste voor Grass.
Teken een zwarte verlooprechthoek, klik er met de rechtermuisknop op en kies Converteren naar symbool. Geef het een naam aan Tab en kies het type om een filmclip te zijn. Markeer nu de optie Exporteren voor ActionScript en vervolgens in het veld Klasse schrijven CTAB welke de klassenaam zal zijn voor deze tabbladfilmclip.
Dubbelklik op de filmclip en plaats er tekst in; schrijf hierin NAAM. Deze tekst wordt gewijzigd met de naam van het tabblad; om dit toe te staan, converteert u deze tekst naar Dynamische tekst met de naam tekst, zoals in de onderstaande afbeelding.
Nu hebben we een filmclip voor onze tab, we moeten er drie exemplaren van maken en een naam geven, dus laten we dat doen in onze documentklasse.
pakket import flash.events.MouseEvent; import flash.text.TextField; import flash.display.MovieClip; public class CTab breidt MovieClip uit public var txt: TextField; openbare functie CTab (Name: String) txt = this.txt als TextField; txt.text = Naam; addEventListener (MouseEvent.ROLL_OVER, onRollOver, false, 0, true); addEventListener (MouseEvent.ROLL_OUT, onRollOut, false, 0, true); beschermde functie onRollOver (e: MouseEvent): void this.alpha = 0.9; beschermde functie onRollOut (e: MouseEvent): void this.alpha = 1;
Accentsconagua
pakket import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class CDoc breidt MovieClip uit // Instantiating The Tabs private var Solid: CTab; private var Bricks: CTab; privé var Gras: CTab; openbare functie CDoc () addEventListener (Event.ADDED_TO_STAGE, onAddedToStage, false, 0, true); beschermde functie opAddedToStage (e: Event): void // De tabbladen aanmaken Solid = nieuwe CTab ("SOLID"); Solid.y = 469; Solid.addEventListener (MouseEvent.CLICK, onSolidClick, false, 0, true); addChild (continu); Bricks = nieuwe CTab ("BRICKS"); Bricks.y = 494; Bricks.addEventListener (MouseEvent.CLICK, onBricksClick, false, 0, true); addChild (stenen); Gras = nieuwe CTab ("GRASS"); Grass.y = 521; Grass.addEventListener (MouseEvent.CLICK, onGrassClick, false, 0, true); addChild (Grass); beschermde functie onSolidClick (e: MouseEvent): void // zal later worden geïmplementeerd beschermde functie onBricksClick (e: MouseEvent): void // zal later worden geïmplementeerd beschermde functie opGrassClick (e: MouseEvent): void // zal later worden geïmplementeerd Laten we nu eens kijken naar een van de belangrijkste dingen in As3isolib: de isometrische weergave die dienst doet als een camera die de isometrische objecten toont. Het heeft veel nuttige functies, zoals pannen en zoomen en scherpstellen op een punt of een object. Het biedt ook de mogelijkheid om objecten buiten de grenzen te verbergen / verbergen en laat ons ook de achtergrond en voorgrondinhoud ervan wijzigen.
We zullen twee weergaven maken in onze Niveaus-editor, de eerste is voor onze weergavebibliotheek die een raster bevat en ook de objecten van ons niveau, de andere weergave is voor de objectenbrowser die veel objecttypen zal hebben die kunnen worden gebruikt in het ontwerp van het niveau.
Nu voegen we de volgende code toe aan onze CDoc-klasse - controleer de regelnummering of bekijk de bronbestanden van de zelfstudie.
// Voeg deze regel toe vóór de constructor private var viewPort: IsoView;
viewPort = nieuwe IsoView (); viewPort.setSize (800, 600); viewPort.centerOnPt (nieuwe 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);
In de eerste regel hebben we onze IsoView gemaakt en deze een naam gegeven uitkijk postje dan stellen we in de tweede regel de grootte in op 800x600px. We moeten het op een punt of op een object centreren, dus we hebben een nieuw punt gemaakt vanuit de ingebouwde as3isolib.geom pakket en gaf het wat x- en y-waarden in 3D isometrische ruimte (die we in de volgende stap zullen bespreken).
Nu moeten we onze viewPort laten zien, zodat we deze als kind aan de weergavelijst van het document hebben toegevoegd en onderaan in onze interface om te zorgen dat deze niet overlapt met enig ander element dat we hebben toegevoegd aan index 0. Vervolgens hebben we twee gebeurtenislisteners toegevoegd aan onze viewPort, een voor pannen en de andere voor zoomen (wat ik later nog zal uitleggen).
Het coördinatensysteem dat in Flash wordt gebruikt, wordt theя genoemdCartesiaanse coördinaatsystem.яHet cartesiaanse coördinatensysteem is gebaseerd op een raster (bestaande uit vele evengrote denkbeeldige vierkanten), met een horizontale as genaamd dex-axisяen een verticale as genaamd theяY zoals in de linkerbovenhoek van de onderstaande afbeelding.
De isometrische ruimte is een beetje anders; elk van zijn drie assen lijkt gelijk in grootte яen de hoeken tussen twee van hen zijn 120 graden. As3isolib biedt een manier om een punt om te rekenen van Cartesiaanse naar isometrische coördinaten (en vice versa) door callingяIsoMath.screenToIso (Point: Pt) om een manier te converteren, enяIsoMath.isoToScreen (Point: Pt) om de andere te converteren.
Het is heel eenvoudig om de isometrische scène te creëren die onze objecten vasthoudt. (Deze objecten zullen allemaal worden overgenomen van IsoDisplayObject я (bijvoorbeeld IsoBox, IsoRectangle, IsoSprite, enz.), Dit is de basisklasse die alle primitieve en complexe isometrische weergaveobjecten uitbreiden.)
We zullen een nieuw IsoScene instellen en vervolgens onze scène toevoegen aan het kijkvenster.
// Voeg deze regel toe vóór de constructor private var scene: IsoScene;
scène = nieuwe IsoScene (); viewPort.addScene (scene);
Om een raster in de viewport toe te voegen, moeten we eenvoudig een nieuwe IsoGrid starten en dan kunnen we de breedte en lengte instellen op 10 om ons een raster van 10x10 te geven. We kunnen ook de celgrootte instellen op wat we willen (ik heb er 30 uitgezocht). De laatste en zeer belangrijke stap is om het raster aan de scène toe te voegen.
// Voeg deze regel toe vóór het private grid van de constructor: IsoGrid;
grid = nieuwe IsoGrid (); grid.setGridSize (10, 10, 1); grid.cellSize = 30; scene.addChild (rooster);
We moeten een gebeurtenislistener toevoegen om de scène weer te geven, en het is heel eenvoudig, voeg gewoon de luisteraar toe en bel in zijn lichaam de luisteraar render () functie ter plaatse.
// Voeg deze code toe aan onAddedToStage listener addEventListener (Event.ENTER_FRAME, onRender, false, 0, true);
private function onRender (e: Event): void scene.render ();
In deze stap zullen we de luisteraars toevoegen voor de klikgebeurtenissen op onze knoppen op het onderste paneel, maar eerst moeten we ze openen, wat we kunnen doen met de functie getChildByName ().
Op de eerste gebeurtenishandler voor de Duidelijk knop verwijderen we alle kinderen van de scène en dan moeten we het raster opnieuw toevoegen. In de Fit to Screen knop zullen we de huidige zoom van het kijkvenster instellen op 1, die het terugzet naar de standaardwaarde, dan zullen we het naar zijn standaard positie met de panto() functie. De laatste knop is waar we de oorsprong van het raster zullen tonen / verbergen, dus we zullen de weergavestatus ervan omkeren; als het wordt getoond, zullen we het verbergen en omgekeerd.
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); protected functnClearClick (e: MouseEvent): void scene.removeAllChildren (); scene.addChild (rooster); protected-functie onbtnFitClick (e: MouseEvent): void viewPort.currentZoom = 1; viewPort.panTo (-100, 100); beschermde functie onbtnShowClick (e: MouseEvent): void if (grid.showOrigin) grid.showOrigin = false; else grid.showOrigin = true;
Toen we onze viewport maakten, hebben we een gebeurtenislistener toegevoegd voor de gebeurtenis MOUSE_DOWN. In dit geval luisteraar zullen we omgaan met het starten van panning: we zullen eerst een punt maken en het een naam geven panPt als een algemeen punt om het op verschillende plaatsen te gebruiken, omdat het de locatie van de muis in elk frame verwerkt. We geven het de X- en Y-posities van de muis (ik zal uitleggen waarom in de volgende stap).
Vervolgens verwijderen we de gebeurtenislistener voor muis omlaag en voegen we twee nieuwe gebeurtenislisteners toe: een voor de feitelijke afhandeling van de panning en de andere voor het stoppen van onze panning.
private var panPt: Pt; private function 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);
Deze gebeurtenislistener wordt gebeld wanneer de muis beweegt en wat deze doet is erg eenvoudig: hij pans de viewport volgens de X- en Y-posities van de initiële positie van de muis min zijn huidige posities, om het verschil in locatie van het laatste frame te berekenen. Vervolgens stellen we de X en Y in op de huidige muisposities.
private function onPan (e: MouseEvent): void viewPort.panBy (panPt.x - stage.mouseX, panPt.y - stage.mouseY); panPt.x = stage.mouseX; panPt.y = stage.mouseY;
Als we stoppen met pannen, moeten we beide verwijderen onPan en onStopPan gebeurtenis luisteraars omdat we ze niet meer nodig hebben, en dan opnieuw toevoegen onStartPan gebeurtenislistener om de gebruiker de viewport opnieuw te laten pannen.
private function 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);
We hebben de onZoom MOUSE_WHEEL evenement luisteraar vroeger, dus nu zullen we het implementeren.
Het is heel simpel: om te weten of de muis omhoog of omlaag beweegt, moeten we de eigenschappen van de muis controleren (e) die 'delta' wordt genoemd; als dit groter is dan 0, zouden we moeten inzoomen, anders moeten we uitzoomen. Om dit te doen, verlaagt of verlaagt u de zoomwaarde. De laatste stap is het instellen van de viewports currentZoom eigenschap aan onze zoomwaarde.
privé var zoomValue: Number = 1; private function onZoom (e: MouseEvent): void if (e.delta> 0) zoomValue + = 0.10; if (e.delta < 0) zoomValue -= 0.10; viewPort.currentZoom = zoomValue;
Houd er rekening mee dat we geen enkele begrenzing hebben ingesteld voor de zoomwaarden of panning, wat betekent dat u kunt zoomen of de weergave van de rand van het werkgebied kunt verschuiven. Het is heel eenvoudig om ze toe te voegen, maar ik laat dat aan jou over.
Nadat we onze viewport hebben voltooid en de functionaliteit hebben toegevoegd, moeten we het objectvenster maken waarin we onze objecten kunnen bekijken en aan de viewport kunnen toevoegen.
We beginnen met het maken van een nieuwe isometrische scène, genaamd objectScene, om onze objecten te houden. Vervolgens maken we een nieuwe isometrische weergave om de objecten in de scène te renderen en de grootte in te stellen op 215x468 px, wat in het objectenvenster past. Nu moeten we het uitlijnen, zodat we het centreren op een punt van 40x80px. Uiteindelijk voegen we de objectScene naar de objectview de ... gebruiken addScene () functie en voeg het objectView toe aan de weergavelijst van ons document.
// Voeg deze code toe aan een luisteraar opAdddedToStage-objectScene = new IsoScene (); objectView = nieuwe IsoView (); objectView.setSize (215, 468); objectView.centerOnPt (nieuwe Pt (40, 80, 0), false); objectView.addScene (objectScene); addChild (objectView);
Nu moeten we enkele solid-coloured objecten maken voor het solide tabblad, dus we zullen een muisklik evenement luisteraar toevoegen.
beschermde functie onSolidClick (e: MouseEvent): void objectScene.removeAllChildren (); var p: Pt = nieuwe 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) 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();
Eerst verwijderen we alle kinderen uit de objectScene om alle objecten te verwijderen als we daadwerkelijk op een ander tabblad hebben gedrukt. We moeten nu een punt maken naar de X- en Y-posities van de objecten, dan maken we een reeks effen kleuren en plaatsen we er een aantal hex hex-waarden in. Daarna maken we een lus waarin we onze acht objecten maken en deze in een raster tonen. Vervolgens maken we elke isometrische rechthoek met behulp van een ingebouwde As3isolibяisometric primitieve vorm en stellen we de grootte in op 30x30 px en vullen we de kleur met een effen kleur (ook gebouwd in As3isolib) met een waarde uit onze array, met een alpha van 1.
Nu moeten we onze puntwaarden wijzigen om in isometrische coördinaten te zijn, dus gebruiken we het bovenstaande screenToIso () functie, verplaats dan ons object naar de nieuwe positie en reset ons punt om in schermcoördinaten te zijn - dit maakt het gemakkelijk voor ons om onze objecten in een raster uit te lijnen met onze vertrouwde cartesiaanse coördinaten, terwijl we onze objecten verplaatsen met wat het beste bij hen past ( isometrische coördinaten).
Vervolgens voegen we eenvoudig de X-waarde toe met 80 en voegen we drie gebeurtenislisteners toe: de eerste twee zullen de ROLL_OVER-evenementen afhandelen, om het object te markeren wanneer het wordt omgerold, en de derde zal de CLICK-evenementen afhandelen. Uiteindelijk voegen we het object toe aan de scène en hebben alles gerenderd.
Deze stap lijkt veel op theяpreviousяone, behalve dat we de array-inhoud wijzigen in onze Bricks, die we zullen maken en importeren in onze volgende stappen.
beschermde functie onBricksClick (e: MouseEvent): void objectScene.removeAllChildren (); var p: Pt = nieuwe Pt (-20, -10); var bricks: Array = [Bricks1, Bricks2, Bricks3, Bricks4, Bricks5, Bricks6, Bricks7, Bricks8]; for (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();
Het andere verschil met de vorige stap is dat we een isometrisch sprite-object hebben gemaakt waarvan we het uiterlijk eigenlijk kunnen veranderen in wat we maar willen; we hebben onze stenen eraan toegevoegd door er een verwijzing naar door te geven sprite.sprites wat een reeks sprites is.
Nu kun je de grasobjecten maken net zoals we met de stenen hebben gedaan, je moet gewoon de bakstenen array naar de gras rangschikking.
We gaan onze textuurelementen maken, dus begin een nieuw Flash-document en importeer onze items uit een afbeelding of een PSD-bestand. Klik vanuit Bestand Importeren> Importeren naar werkgebied, kies vervolgens om de lagen als te importeren Bitmapafbeelding met bewerkbare laagstijlen.
Nu moeten we elke bitmap naar een filmclip converteren door er met de rechtermuisknop op te klikken en te kiezen Converteren naar symbool, vervolgens zijn naam te schrijven zoals in de arrays Bricks and Grass (Brick1, brick2, enz).
Markeer de Exporteren voor runtime delen optie en type textures.swf in het veld URL. Eindelijk ga naar Bestand> Publicatie-instellingen en markeer de SWC-optie in de PUBLICEREN sectie en klik vervolgens op Publiceren. Nu hebben we een SWC die al onze activa bevat, die we kunnen importeren in onze LevelEditor om te gebruiken.
Het is heel eenvoudig om ons SWC-bestand te importeren. Klik in het menu Bestand op ActionScript-instellingen, en van de Bibliotheekpad klik op de Flash-knop die in de afbeelding hieronder verschijnt en blader naar onze SWC.
Dat is het! Nu zijn onze activa geladen.
We moeten omgaan met muisgebeurtenissen voor onze objecten - onthoud dat we in stap 18 en 19 drie eventistinglists hebben toegevoegd voor elk object. We zullen de ROLL_OVER gebeurtenislisteners in deze eenvoudige stap implementeren.
Ik zou willen dat onze objecten een gloei-effect hebben wanneer we eroverheen rollen, dus we moeten toegang hebben tot de objecten zelf. Hiervoor heeft As3isolib een ingebouwd gebeurtenistype genaamd ProxyEvent die we kunnen gebruiken om toegang te krijgen tot het gebeurtenisobject met behulp van via e.target. We zouden het moeten casten als IsoDisplayObject (dit is de basisklasse voor elk isometrisch weergaveobject) om deze gebeurtenislistener zo generiek mogelijk te maken en vervolgens een gloeifilter toe te voegen met behulp van de ingebouwde filters van Flash.
De eerste parameter van de GlowFilter constructor is de kleur; de tweede is de alpha, die we gewoon op 1 zetten; we zullen de blurX- en blurY-waarden standaard laten staan, 6, omdat we geen vervaging nodig hebben; en tot slot zullen we de kwaliteit instellen op 64.
In de uitrol-handler zetten we de filters gewoon opnieuw in.
private function onRollOverHandler (e: ProxyEvent): void var glow: GlowFilter = new GlowFilter (0xC24704, 1, 6, 6, 64); (e.target als IsoDisplayObject) .container.filters = [glow]; private function onRollOutHandler (e: ProxyEvent): void (e.target as IsoDisplayObject) .container.filters = [];
De derde gebeurtenislistener voor onze objecten is het CLICK-evenement. Wat gebeurt er als we op een object klikken? Nou, we moeten er een kopie van maken in de viewport en er een sleep-en-drop-functie aan toevoegen, om het voor ons gemakkelijk te maken om naar elke plaats in de scène te gaan.
Het is heel eenvoudig om dit te doen. We zullen eerst een object van het type maken IsoDisplayObject en geef het ons voorwerp door waarop we klikten, precies zoals we eerder deden.
Nu moeten we het geklikte object klonen; dit is gemakkelijk, omdat As3isolib een ingebouwde methode heeft genaamd clone (), die behoort tot de IsoDisplayObject klasse, die een kopie van het gekloonde object retourneert met behoud van de eigenschappen van de dimensie en stijl. Dit werkt perfect voor isometrische rechthoekobjecten (die we hebben gemaakt op het tabblad met de effen kleuren), maar in de case van de sprites (stenen en gras) moeten we ook de sprites-array kopiëren voor elk object, dus we doen een eenvoudige controle om te zien of het object van het type is IsoSprite, en als het spritesяpropertyяis niet nul is, dan zullen we het object instellen spritesяpropertyяto overeenkomt met de aangeklikte objecten sprites.
Vervolgens verplaatsen we onze objecten naar boven (langs de Z-as) met 50 om overlapping met het raster te voorkomen. Als laatste voegen we drie gebeurtenislisteners toe voor ons gemaakte object: twee voor roll-over / out en de laatste voor het verwerken van drag-and-drop (die we in de volgende stap behandelen), voeg dan ons object toe aan onze scène en render het.
beschermde functie onObjClick (e: ProxyEvent): void var obj: IsoDisplayObject = e.target als IsoDisplayObject; obj = obj.clone (); if (obj is IsoSprite && (obj als IsoSprite) .sprites! = null) (obj als 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 ();
Er is een resterende gebeurtenislistener gebeld onPickup wat een MOUSE_DOWN-gebeurtenis is om het begin van het slepen te behandelen. We zullen beginnen met het creëren van een private variabele genaamd dragObject, die van het type zal zijn IsoDisplayObject, om in een verwijzing naar ons gesleept object te gebruiken zoals het uit de naam ervan blijkt. We zullen ook een punt maken om de positie van het gesleepte object te behandelen.
In de pickup-handler wijzen we het gesleepte object toe aan onze dragObject variabele, dan om de huidige isometrische punt van de muis te verkrijgen gebruiken we de viewPort.localToIso () methode. Dit punt is handig bij het berekenen van de afstand tussen het gesleepte object en de huidige positie van de muis, en het zal ook voorkomen dat het gesleepte object in de muispositie snapt.
Eindelijk zullen we deze gebeurtenisluisteraar verwijderen, want wanneer ons object wordt opgehaald, willen we het niet meer ophalen! In plaats daarvan voegen we twee gebeurtenislisteners toe om te laten vallen: een voor het gesleepte object en een voor het viewPort. Ten slotte kun je je afvragen waar de daadwerkelijke verhuizing plaatsvindt; het antwoord is dat het gebeurt in de onMoveObject handler die we in de volgende en laatste stap zullen behandelen.
private var dragObject: IsoDisplayObject; private var dragPt: Pt; private function onPickup (e: ProxyEvent): void dragObject = e.target as IsoDisplayObject; dragPt = viewPort.localToIso (nieuwe Pt (stage.mouseX, stage.mouseY)); dragPt.x
