Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. Isometric Games
Gamedevelopment

Maken Isometrische Worlds: Een Primer voor Game Ontwikkelaars

by
Difficulty:IntermediateLength:LongLanguages:

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

In deze tutorial, geef ik je een overzicht van wat je moet weten om te isometrische ervaringswerelden creëren. Je leert wat de isometrische projectie is, en hoe om te isometrische niveaus als 2D arrays te vertegenwoordigen. We zullen formuleren relaties tussen de weergave en de logica, zodat wij kunnen gemakkelijk het manipuleren van objecten op het scherm en handvat dakpan botsingdetectie. We zullen ook kijken diepte sorteren en karakter animatie.

Verwante Posten

Wil je nog meer tips voor het maken van isometrische werelden? Check out de follow-up post, isometrische werelden maken: A Primer voor Gamedevs, vervolg en Juwal het boek, Starling spel ontwikkeling Essentials.


1. De Isometrische Wereld

Isometrische weergave is een display methode gebruikt voor het maken van een illusie van 3D voor een anders 2D game - soms aangeduid als pseudo 3D of 2.5 D. Deze beelden (overgenomen uit Diablo 2 en Age of Empires) illustreren wat ik bedoel:

diablo

Diablo 2
AOE

Age of Empires

Uitvoering van een isometrische weergave kan worden gedaan op vele manieren, maar omwille van de eenvoud zal ik me concentreren op een tegel-gebaseerde benadering, die de meest efficiënte en meest gebruikte methode is. Ik heb elke screenshot hierboven bedekt met een diamant raster tonen hoe het terrein is opgedeeld in tegels.


2. Tegel Gebaseerde Spellen

Elk visueel element is in de tegel-gebaseerde benadering 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 2D matrix.

Zo laten we eens kijken een topdown standaard 2D weergave met twee tegels - een gras tegel en de tegel van een muur - zoals hier wordt weergegeven:

base 2d tiles

Sommige eenvoudige tegels

Deze tegels zijn elk dezelfde grootte als elke andere, en vierkant, zodat de hoogte van de tegel en de tegel breedte hetzelfde zijn.

Voor een niveau met grasland aan alle kanten omsloten door muren, zal het niveau gegevens 2D 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 de onder niveau afbeelding:

2d level simple

Een eenvoudige niveau, weergegeven in een weergave-van bovenaf.

Wij kan dit verbeteren door de toevoegen hoekelementen en aparte verticale en horizontale wandtegels, waarvoor vijf extra tegels:

2d level complex

Verbeterde niveau met getallen van de tegel

Ik hoop dat het concept van de tegel gebaseerde benadering is nu duidelijk. Dit is een eenvoudig 2D raster implementatie, die we kunnen code als volgt:

Hier veronderstellen wij dat tegel breedte en hoogte van de tegel zijn gelijke (en hetzelfde geldt voor alle tegels), en komen overeen met de tegel beelden afmetingen. Dus, de tegel breedte en hoogte van de tegel voor dit voorbeeld zijn zowel 50px, waardoor de totale niveau grootte van 300x300px - dat wil zeggen zes rijen en zes kolommen van tegels meten van elke 50x50px.

In een normale tegel gebaseerde benadering, voeren we ofwel een top-down weergave of een zijaanzicht; we moeten de isometrische projectie implementeren voor een isometrische weergave.


3. 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 eenvoudig. Wat we nodig hebben om te begrijpen is de relatie tussen 2D en de isometrische ruimte - dat wil zeggen, de relatie tussen het niveau gegevens en de beeld; de transformatie van top-down "Cartesiaanse" coördinaten naar isometrische coördinaten.

the_isometric_grid

Cartesische grid vs. isometrische raster.

(We zijn niet een zeshoekige tegel gebaseerd techniek, dat een andere manier is van de isometrische werelden gezien.)

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 naar isometrische coördinaten.

We zullen proberen om de isometrische weergave maken voor onze muur-omsloten grasland niveau gegevens:

In dit scenario kunnen wij een walkable gebied vaststellen door te controleren of het element van de matrix 0 op die coördinaat is, waardoor die aangeeft gras. De uitvoering van de 2D weergave van het bovenstaande niveau was een simpele iteratie met twee lussen, vierkante tegels compensatie elk met de vaste tegel hoogte en breedte van de tegel te plaatsen.

Voor de isometrische weergave, blijft de code alleen hetzelfde, maar de wijzigingen van de functie placeTile().

Voor een isometrisch aanzicht moeten we de bijbehorende isometrische coördinaten binnen de lussen berekenen. 
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:

Deze functies laten zien hoe je kunt converteren van het ene systeem naar het andere:

De pseudocode voor de lus ziet er dan als volgt:

isolevel screenshot

Onze muur-omsloten grasland in een isometrische weergave.

Als voorbeeld, 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].

De bovenstaande methode ons in staat stelt om te maken een directe correlatie tussen de 2D niveau gegevens en de isometrische coördinaten. 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.

Tip: Een andere methode van plaatsing is de Zigzag model, waarin een andere aanpak helemaal.

Verplaatsen in Isometrische Coördinaten

Beweging is heel eenvoudig: je manipuleren je gegevens van de game wereld in Cartesiaanse coördinaten en gewoon gebruik maken van de bovenstaande functies voor het bijwerken van het op het scherm. Bijvoorbeeld, als je een karakter voorwaarts in de positieve y-richting te verplaatsen wilt, kunt je gewoon de eigenschap y stapsgewijs wijzigen en haar positie vervolgens omzetten in isometrische coördinaten:

Diepte Sorteren

Naast normale plaatsing, zullen we moeten zorgen voor diepte sorteren voor het tekenen van de isometrische wereld. Dit zorgt ervoor dat onderdelen dichter naar de speler objecten verder weg zijn getekend.

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 werkt goed, zolang we hebben niet alle sprites die bezetten meer dan een ruimte van één tegel.

De meest efficiënte manier van diepte sorteren voor isometrische werelden is te breken alle tegels in één-tegel standaardafmetingen en niet toe te staan van grotere afbeeldingen. Bijvoorbeeld, hier is een tegel die niet passen in de standaard blokgrootte - Zie hoe kunnen we opsplitsen in meerdere tegels die elke aan de tegel afmetingen:

split big tile

Een grote afbeelding is opgesplitst in meerdere tegels van isometrische standaardafmetingen

4. Het Maken van de Kunst

Isometrische kunst pixel kunst kan zijn, maar het niet hoeft te worden. Bij de behandeling met isometrische pixelart, vertelt RhysD de gids je bijna alles wat die je moet weten. Enkele theorie kan worden teruggevonden op Wikipedia.

Bij het maken van isometrische art, zijn de algemene regels

  • Beginnen met een lege isometrische raster en voldoen aan de pixel perfecte precisie.
  • Proberen te breken van kunst in één isometrische tegel beelden.
  • Probeer ervoor te zorgen dat elke tegel een van beide is beloopbaar of niet-beloopbaar. 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 overeenkomt met hun hoogten 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:


5. Isometrische Tekens

Uitvoering van tekens in isometrische weergave is niet ingewikkeld als het klinkt. Kunst karakter dient te worden gemaakt volgens bepaalde normen. Eerst moeten we bepalen hoeveel bewegingsrichtingen zijn toegestaan ​​in onze game - meestal bieden games four-way beweging of beweging met acht richtingen

Eight-way navigation directions in top-down and isometric views

Acht-richtingen navigatie-instructies in top-down en isometrische weergaven.

Voor een weergave van bovenaf, kunnen we maken van een set van teken animaties in één richting, en draait je hen eenvoudig voor alle anderen. Voor isometrische tekens moeten we elke animatie opnieuw renderen in elk van de toegestane richtingen - dus voor beweging met acht richtingen moeten we acht animaties maken voor elke actie. Voor het gemak van begrip duiden we meestal de richtingen als Noord, noordwesten, West, Zuidwest, Zuid, South-East, East, en Noord-Oosten, tegen de klok, in die volgorde.

spriteSheet

Een isometrische teken geconfronteerd in verschillende richtingen.

We plaatst je tekens op dezelfde manier dat we tegels plaatsen. 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 0 zal worden, en zal worden bijgewerkt volgens de grafiek hieronder, waar U, D, R en L de omhoog duiden, omlaag, links en rechts pijltoetsen, respectievelijk. Een waarde van 1 onder een sleutel geeft die toets wordt gedrukt; 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 zo dus:

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 dat doen verhuizen teken naar 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.

Botsing Detectie

Botsingdetectie wordt gedaan door te controleren of de tile op de berekende nieuwe 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 - zelfs als hij niet beweegt, zoals in het geval van hem raken van een niet-walkable tegel.

Diepte Sorteren Met Tekens

Overwegen een karakter en een boom tegel in de isometrische wereld.

Voor goed begrip 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 hetzelfde y-coördinaat hebben dan wij beslissen op basis van de x-coördinaat alleen: welke is de hogere x-coördinaat overlapt anderzijds.

Een vereenvoudigde versie van dit is gewoon sequentieel te trekken de niveaus vanaf de verste tegel - dat wil zeggen, tegel[0][0] - 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.

Diepte sorteren moet worden gedaan telkens een tegel wijzigingen positie. Bijvoorbeeld, moeten we om het te doen wanneer tekens verplaatsen. We updaten dan de weergegeven scène, na het uitvoeren van de sorteerbewerking diepte, zodat de wijzigingen van de diepte.


6. Hebben een Go!

Nu, benut je nieuwe kennis door het creëren van een werkend prototype, met opties voor toetsenbordbediening en goede diepte sorteren en botsing detectie. Hier is mijn demo:

Klik hierop om aan te geven van de SWF focus, en vervolgens met de pijltoetsen. Klik hier voor de full-sized versie.

Misschien vindt je deze klasse nut handig (ik heb het geschreven in AS3, maar je moet zitten kundig te begrijpen in elke andere programmeertaal):

Als je echt vast zit, is hier de volledige code van mijn demo (in Flash en AS3 tijdlijn code mag wordengegeven):

Registratie Punten

Speciale aandacht besteden aan de registratiepunten van de tegels en de held. (Registratiepunten kunnen worden beschouwd als de oorsprong punten voor elke bijzondere sprite.) Deze vallen meestal niet in de afbeelding, maar zijn eerder de linkerbovenhoek van het selectiekader van de sprite.

We zullen onze tekencode moeten wijzigen om de registratiepunten correct te corrigeren, voornamelijk voor de held.

Botsing Detectie

Een ander interessant punt om op te merken is dat we berekenen botsingdetectie op basis van het punt waar de held is.

Maar de held volume, heeft en kan niet nauwkeurig worden vertegenwoordigd door één aanspreekpunt, dus we de held te vertegenwoordigen als een rechthoek en een selectievakje voor botsingen tegen elke hoek van deze rechthoek moeten zodat er geen overlappingen met andere tegels en dus geen diepte artefacten.

Snelkoppelingen

In de demo Ververs ik gewoon de scène opnieuw elk frame op basis van de nieuwe positie van de held. We vinden de tegel die de held inneemt en de held op de top van de tegel van de grond te trekken wanneer de rendering lussen die tegels bereiken.

Maar indien wij dichterbij kijken, zullen we vinden dat er is geen behoefte om te doorlopen alle tegels in dit geval. De gras tegels en de boven  en linkerrand wandtegels worden altijd getekend voordat de held wordt getekend, zodat we niet steeds hoeven ze helemaal te vernieuwen. Ook zijn de onderste en rechtse wandtegels altijd voor de held en dus getekend na de held is getekend

In wezen moeten, alleen wij uitvoeren van diepte sorteren tussen de muur binnen het actieve gebied en de held - dat wil zeggen twee tegels. Deze soorten snelkoppelingen te merken zal je helpen besparen een heleboel verwerkingstijd, die kan worden cruciaal voor de prestaties.


Conclusie

Onderhand, hebt je een grote basis voor het bouwen van isometrische spellen van je eigen: kunt je het renderen van de wereld en de objecten daarin, vertegenwoordigen niveau gegevens in eenvoudige 2D arrays, converteren tussen Cartesiaanse en isometrische coordiates, en deal met begrippen zoals diepte sorteren en animatie van het karakter. Geniet van het maken van isometrische werelden!

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.