Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Phaser

Een bijgewerkte Primer voor het maken van Isometrische Worlds, Deel 1

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Primer for Creating Isometric Worlds.
Updated Primer for Creating Isometric Worlds, Part 2

Dutch (Nederlands) translation by Meyria (you can also view the original English article)

Final product image
What You'll Be Creating

We hebben allemaal ons eerlijk deel van de geweldige isometrische spellen gespeeld, de oorspronkelijke Diablo, of Age of Empires of commando's. De eerste keer die je kwam een isometrisch spel, kan je al afgevraagd of het was een 2D spel of een 3D spel of iets heel anders. De wereld van isometrische spellen heeft haar mystieke aantrekkingskracht voor game ontwikkelaars zo goed. Laten we proberen te ontrafelen het mysterie van isometrische projectie en proberen een wereld te creëren eenvoudige isometrische in deze tutorial.

Deze tutorial is een bijgewerkte versie van mijn bestaande tutorial over isometrische werelden creëren. De oorspronkelijke tutorial Flash met ActionScript gebruikt en is nog steeds relevant zijn voor ontwikkelaars van Flash of OpenFL. In deze nieuwe instructie die ik besloten heb om de Phaser met JS code gebruikt, waardoor interactieve HTML5 output in plaats van SWF uitvoer.

Houd er rekening mee dat dit niet een Phaser ontwikkeling tutorial is, maar we zijn net met behulp van Phaser gemakkelijk communiceren de kernbegrippen van het creëren van een isometrisch scène. Daarnaast, zijn er veel beter en eenvoudiger manieren om te isometrische inhoud maakt in Phaser, zoals de Phaser isometrische Plugin.

Omwille van de eenvoud, zullen we de tegel gebaseerde benadering gebruiken maken van onze isometrische scène.

1. Tegel Gebaseerde Spellen

In 2D games met behulp van de tegel gebaseerde benadering, is elk visueel element opgesplitst in kleinere stukken, zogenaamde tegels, van een standaard formaat. Deze tegels worden gerangschikt om te vormen van de game wereld volgens vooraf bepaalde niveau gegevens — meestal een tweedimensionale matrix.

Verwante Posten

Dakpan spellen gebruiken meestal een top-down weergave of een zijaanzicht voor de spel scène. Laten we eens kijken naar een top-down standaard 2D weergave met twee tegels — een gras-tegel en de tegel van een muur — zoals hier wordt weergegeven:

Green and Maroon tiles

Beide tegels zijn vierkante afbeeldingen van dezelfde grootte, vandaar dat de tegel hoogte en de tegel breedte hetzelfde zijn. Laten we rekening houden met een spel dat is, grasland aan alle kanten ingesloten door muren is. In een dergelijk geval, zal het niveau gegevens vertegenwoordigd met een tweedimensionale matrix als volgt uitzien:

Hier 0 duidt een gras tegel en 1 duidt op een tegel van de muur. Regelen van de tegels volgens de niveau gegevens zal produceren onze ommuurde grasland, zoals weergegeven in de afbeelding hieronder:

Top view level - grass area surrounded by walls

We kunnen een beetje verder gaan door hoekelementen en aparte verticale en horizontale wandtegels, die vijf extra tegels, die leidt ons naar onze bijgewerkte niveau gegevens toe te voegen:

Bekijk de afbeelding hieronder, waar ik de tegels hebt gemarkeerd met hun bijbehorende rugnummers van de tegel in de niveau gegevens:

Better top view level with corner tiles and tile numbers

Nu dat we hebben begrepen dat het concept van de tegel gebaseerde benadering, laat me je tonen hoe we een eenvoudig 2D raster pseudocode kunt gebruiken om te renderen van ons niveau:

Als we de bovenstaande tegelafbeeldingen gebruiken, zijn de tegelbreedte en tegelhoogte gelijk (en hetzelfde voor alle tegels) en komen deze overeen met de afmetingen van de tegelafbeeldingen. Dus de tegelbreedte en tegelhoogte voor dit voorbeeld zijn beide 50 px, wat de totale niveaugrootte van 300 x 300 px —is, dat wil zeggen zes rijen en zes kolommen met tegels van elk 50 x 50 px.

Zoals eerder besproken in een normale tegel gebaseerde benadering, implementeren we ofwel een topdown-weergave of een zijaanzicht; we moeten voor een isometrische weergave, voeren de isometrische projectie.

2. Isometrische Projectie

De beste technische uitleg van wat isometrische projectie betekent, voor zover ik weet, is uit dit artikel door Clint Bellanger:

We hoek onze camera langs twee assen (swing de camera 45 graden aan de ene kant, vervolgens 30 graden omlaag). Hiermee maakt je een raster van de ruitvormige (ruit) waar de raster ruimten twee keer zo groot zijn als ze hoog zijn. Deze stijl werd gepopulariseerd door Strategiespellen en actie RPG's. Als we kijken naar een kubus in deze weergave, drie zijden zijn zichtbaar (boven en twee tegenoverliggende zijden).

Hoewel het klinkt een beetje ingewikkeld, is eigenlijk de uitvoering van deze weergave heel makkelijk. Wat we nodig hebben om te begrijpen is de relatie tussen 2D en de isometrische ruimte — dat wil zeggen, de relatie tussen de niveau gegevens en de beeld; de transformatie van bovenaf Cartesiaanse coördinaten naar isometrische coördinaten. De afbeelding hieronder toont de visuele transformatie:

Side by side view of top down and isometric grids

Isometrische Tegels Plaatsen

Verhuren mij uitproberen voor het vereenvoudigen van de relatie tussen niveau gegevens opgeslagen als een 2D-matrix en de isometrische weergave — dat wil zeggen, hoe we transformeren Cartesiaanse coördinaten in isometrische coördinaten. We zullen proberen om de isometrische weergave voor onze inmiddels beroemde ommuurde grasland te maken. De 2D-weergave-implementatie van het niveau was een eenvoudige iteratie met twee lussen, waarbij vierkante tegels werden geplaatst die met de vaste tegelhoogte en tegelbreedtewaarden waren verschoven. Voor de isometrische weergave blijft de pseudo-code hetzelfde, maar de functie placeTile() verandert.

De oorspronkelijke functie trekt gewoon de tegel beelden op de meegeleverde coördinaten x en y, maar voor een isometrische weergave die we nodig hebben voor het berekenen van de corresponderende isometrische coördinaten. De vergelijkingen om dit te doen zijn als volgt, waar isoX en isoY isometrische x - en y-coördinaten vormen, en cartX en cartY Cartesiaanse x - en y-coördinaten vertegenwoordigen:

Ja, thats it. Deze eenvoudige vergelijkingen zijn de magie achter isometrische projectie. Hier zijn Phaser hulpfuncties die kunnen worden gebruikt voor het converteren van het ene systeem naar het andere met behulp van de klasse Point erg handig:

Zo kunnen we de cartesianToIsometric helper methode gebruiken de binnenkomende 2D coördinaten converteren naar isometrische coördinaten binnen de placeTile methode. Afgezien van deze, de weergave code blijft hetzelfde, maar wij moeten nieuwe beelden voor de tegels. Wij niet de oude vierkante tegels gebruikt voor de weergave van onze top-down gebruiken. De afbeelding hieronder toont de nieuwe isometrische gras en wandtegels samen met de gesmolten isometrische niveau:

Isometric level walled grassland along with the isometric tiles used

Ongelooflijk, nietwaar? Laten we eens kijken hoe een typische 2D positie wordt omgezet naar een isometrische positie:

Ook een input van [0, 0] zal resulteren in [0, 0], en [10, 5] zal [5, 7.5].

Voor onze ommuurde grasland, kunnen we een walkable gebied vaststellen door te controleren of het element van de matrix 0 op die coördinaat is, waardoor die aangeeft gras. Hiervoor moeten we bepalen de coördinaten van de matrix. We kunnen van de tegel coördinaten vinden in de niveau gegevens uit de cartesiaanse coördinaten met behulp van deze functie:

(Hier, wij in wezen veronderstellen dat tegel hoogte en tegel breedte zijn gelijk, net als in de meeste gevallen.)

Vandaar, van een paar schermcoördinaten (isometrische), kan vinden we tegel coördinaten door te bellen naar:

Dit scherm punt zou kunnen zijn, bijvoorbeeld een muis klik op positie of de positie van een pick-up.

Registratie Punten

In Flash kunnen we willekeurige punten instellen voor een afbeelding als middelpunt of [0,0]. Het Phaser equivalent is Pivot. Wanneer je de afbeelding plaatst bij zeg [10,20], dan is deze Pivot punt wordt uitgelijnd met [10,20]. Standaard wordt de linkerbovenhoek van een afbeelding beschouwd als zijn [0,0] of Pivot. Als je het bovenstaande niveau probeert te maken met behulp van de opgegeven code, krijgt je het weergegeven resultaat niet. In plaats daarvan krijg je een vlak land zonder de muren, zoals hieronder:

The issue with wall tiles when rendered normally

Dit komt omdat de tegel afbeeldingen verschillende formaten hebben en we niet het hoogte kenmerk van de wandtegel aanspreken. De onderstaande afbeelding toont de verschillende tegel afbeeldingen die we gebruiken met hun selectiekaders en een witte cirkel waar hun standaardwaarde [0,0] is:

How to properly align the different tiles along with their registration points

Zie hoe de held krijgt uitgelijnd wanneer tekenen met behulp van de standaard pivots. Merk ook op hoe we verliezen de hoogte van de tegel van de muur als getekend met behulp van standaard pivots. De afbeelding hiernaast toont hoe ze moeten correct wordt uitgelijnd zodat de tegel van de muur de hoogte krijgt en de held wordt geplaatst in het midden van de tegel gras. Dit probleem kan op verschillende manieren worden opgelost.

  1. Maak alle tegels op dezelfde afbeeldingsgrootte met de afbeelding op de juiste manier in de afbeelding uitgelijnd. Dit creëert veel lege gebieden binnen elke tegel afbeelding.
  2. Punten van de spil handmatig voor elke tegel zo instellen dat deze naar behoren worden uitgelijnd.
  3. Tegels met specifieke verschuivingen tekenen zodat ze naar behoren worden uitgelijnd.

Voor deze tutorial, heb ik besloten te gebruiken de derde methode zodat dit zelfs met een kader zonder de mogelijkheid werkt om punten van de spil.

3. Verplaatsen in Isometrische Coördinaten

Wij zullen nooit proberen om onze karakter of projectiel in isometrische coördinaten rechtstreeks. In plaats daarvan, zullen wij manipuleren de gegevens van onze game wereld in Cartesiaanse coördinaten en gewoon de bovenstaande functies gebruiken voor het bijwerken van die op het scherm. Bijvoorbeeld, als je een karakter voorwaarts in de positieve y richting te verplaatsen wilt, kunt je eenvoudig verhogen de eigenschap y in 2D coördinaten en de resulterende positie vervolgens omzetten in isometrische coördinaten:

Dit is een goed moment de nieuwe begrippen die we tot nu toe hebben geleerd en om te proberen en maak een werkend voorbeeld van iets bewegen in een isometrisch wereld. De nodige afbeelding activa vindt je in de map van de activa van de git broncode repository.

Diepte Sorteren

Als je probeert de bal de afbeelding wilt verplaatsen in onze ommuurde tuin dan je over de problemen met het sorteren van de diepte komen zou. Naast normale plaatsing, zullen we moeten zorgen voor diepte sorteren voor het tekenen van de isometrische wereld, als er zijn bewegende elementen. Goede diepte sorteren zorgt ervoor dat onderdelen dichter op het scherm worden getekend op de top van objecten verder weg.

De eenvoudigste diepte sorteermethode is gewoon het gebruik van de Cartesische waarde van de y-coördinaat, zoals vermeld in deze Quick Tip: verdere omhoog het scherm het object is, hoe eerder het moet worden getrokken. Dit kan goed werken voor zeer eenvoudige isometrische scènes, maar een betere manier zullen de isometrische scène te vernieuwen zodra een beweging, volgens de de tile array coördinaten gebeurt. Laat het me uitleggen dit concept in detail met onze pseudocode voor niveau tekening:

Stel je voor onze item of teken op de tegel [1,1] — dat wil zeggen, de bovenste groene tegel in de isometrische weergave. Correct opstelling het niveau, het teken moet worden getrokken na het trekken van de muur hoekelement, zoals zowel links als rechts wandtegels, en de tegel van de grond, hieronder:

Hero standing on the corner tile

Als we onze lus trekken volgens de pseudocode hierboven volgen, we eerst de middelste hoek muur zal trekken, en vervolgens zal blijven trekken alle muren in het bovenste gedeelte van de juiste totdat het bereikt de juiste hoek.

Vervolgens zal het in de next lus, de muur trekken aan de linkerzijde van het teken, waarna de gras tegel waarop het teken staat. Zodra we gaan dit de tegel die bezet van ons karakter, zullen wij het karakter trekken na het trekken van de gras tegel. Op deze manier alsof er muren op de drie gratis gras tegels verbonden met degene waarop het teken staat, dan zal die muren het karakter, wat resulteert in goede diepte gesorteerd op weergave overlappen.

4. Creëren van de Art

Isometrische kunst kan pixelkunst zijn, maar dat hoeft het niet te zijn. Wanneer het gaat om isometrische pixelart, vertelt de gids van RhysD je bijna alles wat je moet weten. Sommige theorieën zijn ook te vinden op Wikipedia.

Wanneer je isometrische art maakt, wordt de algemene regels zijn:

  • Beginnen met een lege isometrische raster en houden aan pixel-perfecte precisie.
  • Proberen te breken van kunst in één isometrische tegel beelden.
  • Probeer ervoor te zorgen dat elke tegel walkable of niet-walkable is. Het zou ingewikkeld zijn als wij nodig hebt aan één tegel die zowel walkable en niet-walkable gebieden bevat.
  • De meeste tegels moet naadloos naast elkaar in een of meer richtingen.
  • Schaduwen kunnen lastig uit te voeren, tenzij we gebruik maken van een gelaagde benadering waar we schaduwen op de grond laag tekenen en tekent je de held (of bomen of andere objecten) op de bovenste laag. Als de aanpak die je niet multi-gelaagde, zorg ervoor dat schaduwen vallen aan de voorzijde, zodat ze niet zal op, zeg, de held vallen wanneer hij achter een boom staat.
  • In het geval dat je nodig hebt om een groter is dan de standaard isometrische tegel tegel afbeelding te gebruiken, probeer te gebruiken van een dimensie die een veelvoud van de grootte van de tegel iso is. Het is beter om een gelaagde benadering in dergelijke gevallen, waar we de kunst in verschillende stukken die zijn gebaseerd op de hoogte opsplitsen kunt. Bijvoorbeeld, een boom kan worden gesplitst in drie stukken: de wortel, de romp en het gebladerte. Dit maakt het gemakkelijker om te sorteren diepten als we stukken in de bijbehorende lagen die met hun hoogten overeenstemmen kunnen trekken.

Isometrische tegels die groter dan de één tegel afmetingen zijn zal kwesties maken met diepte sorteren. Enkele van de kwesties worden besproken in deze links:

Verwante Posten

5. Isometrische Tekens

Eerst zullen we moeten vaststellen hoe vele richtingen van de beweging zijn toegestaan in ons spel — meestal spelletjes zorgt voor vierwegtoets beweging of 8-voudige beweging. Bekijk de afbeelding hieronder om te begrijpen de correlatie tussen de 2D en isometrische ruimte:

The directions of motion in top view and isometric view

Houd er rekening mee dat een teken zou bewegen verticaal omhoog wanneer we druk op de pijltje omhoog in een top-down wedstrijd, maar voor een isometrisch spel die het karakter zal bewegen op een hoek van 45 graden richting de hoogste juiste hoek.

Voor een top-down weergave, we kunnen één set karakteranimaties maken die in één richting worden weergegeven, en draai ze gewoon voor alle anderen. Voor isometrische karakterkunst, we moeten opnieuw re-nderen elke animatie in elk van de toegestane richtingen—dus voor acht-wegbeweging, moeten we acht animaties maken voor elke actie.

Voor het gemak van begrip duiden we meestal de richtingen als Noord Noord-West, West, Zuidwest, Zuid, South-East, East, en Noord-Oost. De teken frames hieronder Toon inactieve frames vanaf Zuid-Oost en gaan met de klok mee:

The different frames of the character facing the different directions

Wij zullen plaatst u tekens op dezelfde manier dat we tegels geplaatst. De beweging van een karakter wordt bereikt door berekening van het verkeer in Cartesiaanse coördinaten en vervolgens te converteren naar isometrische coördinaten. Laten we aannemen dat we zijn met behulp van het toetsenbord om te controleren van het teken.

We zullen twee variabelen, dX en dY, op basis van de directionele toetsen instellen. Standaard deze variabelen zullen 0 en volgens de grafiek hieronder, waar U, D, R en L duiden de Up, Down, Right, en Left pijltoetsen, respectievelijk. Vertegenwoordigt een waarde van 1 onder een sleutel dat de toets wordt ingedrukt; 0 betekent dat de sleutel niet wordt ingedrukt.

Nu, met behulp van de waarden van dX en dY, we kunnen updaten het Cartesiaanse coördinaten als volgt:

Dus dX en dY staan voor de verandering in de x - en y-positie van het teken, gebaseerd op de toetsen die worden ingedrukt. Zoals we al hebben besproken, kunnen we gemakkelijk de nieuwe isometrische coördinaten, berekenen:

Zodra we de nieuwe isometrische positie hebben, moeten we om het teken op deze positie. Op basis van de waarden die wij voor dX en dY hebben, kunnen we beslissen welke richting het teken wordt geconfronteerd met en gebruiken van het bijbehorende teken art. Zodra het teken wordt verplaatst, vergeet dan niet moet worden bijgewerkt het niveau met de juiste diepte sorteren als de coördinaten van de tegel van het karakter kunnen zijn gewijzigd.

Botsing Detectie

Botsingdetectie wordt gedaan door te controleren of de tile op de nieuw berekende positie een niet-walkable tegel is. Dus, zodra we de nieuwe positie vinden, wij onmiddellijk de teken er niet verplaatsen, maar eerst te controleren om te zien welke tegel die ruimte inneemt.

In de functie isWalkable() controleren we of de waarde van de array niveau gegevens op bepaalde coördinaat een walkable tegel of niet is. We moeten oppassen voor het bijwerken van de richting waarin het teken wordt geconfronteerd met — zelfs als hij niet beweegt, zoals in het geval van hem raken van een niet-walkable tegel.

Nu kan dit klinkt als een goede oplossing, maar het werkt alleen voor objecten zonder volume. Dit is omdat we slechts één aanspreekpunt, die het middelpunt van het teken overweegt, voor de berekening van de botsing. Wat we echt moeten doen is het vinden van alle vier hoeken van het karakter van de beschikbare 2D middelpunt coördineren en botsingen voor al degenen te berekenen. Als een van de hoeken is vallen binnen een niet-walkable tegel, moeten we de teken niet verplaatsen.

Diepte Sorteren Met Tekens

Overwegen een karakter en een boom tegel in de isometrische wereld, en ze hebben allebei de dezelfde beeldgrootte, echter onrealistisch dat klinkt.

Om goed te begrijpen diepte sorteren, moeten we begrijpen dat wanneer het karakter van de x - en y-coördinaten minder dan die van de boom zijn, de boom het teken overlapt. Wanneer het karakter van de x - en y-coördinaten groter dan die van de boom zijn, overlapt het teken de boom. Als ze de dezelfde x-coördinaat, hebben dan wij beslissen op basis van de y-coördinaat alleen: welke is de hogere y-coördinaat de andere overlapt. Als ze de dezelfde y-coördinaat hebben dan wij beslissen op basis van de x-coördinaat alleen: welke is de hogere x-coördinaat overlapt anderzijds.

Zoals al eerder heb uitgelegd, een vereenvoudigde versie van dit is gewoon sequentieel trekken de niveaus vanaf de verste tegel — dat wil zeggen, tegel[0][0] — en teken vervolgens alle tegels in elke rij één voor één. Als een karakter een tegel neemt, we trekken de tegel van de grond eerst en dan maken de karakter tegel. Dit werkt prima, omdat het karakter niet kan een tegel van de muur bezetten.

6. Demo Tijd!

Dit is een demo in Phaser. Klik op om te concentreren op het interactieve gebied en gebruik je pijltjestoetsen om te bewegen van het teken. Je kunt twee pijltjestoetsen om te bewegen in de diagonale richtingen.

Vindt je de volledige broncode voor de demo in de broncode repository voor deze tutorial. Hieronder vindt je de belangrijkste JS code:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.