Share
Als je samen een game hackt voor een jam of # 1GAM, ben je waarschijnlijk niet al te bezorgd om het op de juiste manier te doen. In dit artikel deel ik enkele tips voor het snel en eenvoudig tekenen en coderen van pseudo-isometrische niveaus.
Technisch gezien, "isometrisch" verwijst naar een projectie waarbij de hoek tussen de x-, y- en z-assen (in schermafmetingen) 120 ° is. En de gepast manier om tussen schermcoördinaten en isometrische coördinaten om te zetten, is door een transformatiematrix te gebruiken.
Maar vergeet dat! In deze Snelle tip gaan we enkele hoeken knippen en vals spelen.
Bekijk dit. We kunnen een gewone 90 ° -grid in twee eenvoudige stappen in een isometrisch raster omzetten in iets dat er dicht genoeg bij staat.
Begin met een raster zoals dit (ik noem dit een Cartesiaans raster):
Draai het 45 °:
Plet 50% verticaal:
Gedaan! Dit moet correct worden aangeduid als Dimetrale in plaats van isometrisch, zoals uitgelegd in dit prachtige artikel, maar het zal voor de meeste doeleinden doen.
Dat raster gaat op zich niet veel van een spel uitmaken. Misschien wil je schaakstukken toevoegen, misschien wil je monsters toevoegen - wat je ook toevoegt, je moet weten waar je het moet neerzetten.
Dit is het object dat ik zal gebruiken (van The Noun Project):
We hoeven het niet te draaien of te pletten om het op het rooster te laten passen; gewoon naar behoren schalen:
Zoals je ziet, zou de basis (de voeten van de man in dit geval) gewoon in het midden van de rasterruimte moeten gaan. Dus we moeten uitvinden waar dit is.
We kunnen trigonometrie of een transformatiematrix of zoiets gebruiken, maar er is een eenvoudige algebra die het werk goed doet.
Meet de diagonale tegel op halve breedte en halve hoogte (in schermafmetingen):
Dit is ingezoomd. var tileHalfWidth = 17.5; var tileHalfHeight = 8,75;
Zoek de rasterindices van de ruimte waarin u bent geïnteresseerd:
Zoals je kunt zien, gebruik ik het midden van het raster als de oorsprong. De man staat op de ruimte (4, 2).
Converteer de coördinaten van de rasterruimte naar schermcoördinaten met behulp van deze formule:
screenX = (isoX - isoY) * tileHalfWidth; screenY = (isoX + isoY) * tileHalfHeight;
In ons geval geeft dit schermcoördinaten van (35, 52.5).
Dit is eigenlijk de "bovenste" hoek van de ruimte; om het midden van de ruimte te krijgen, moet je toevoegen tileHalfHeight naar het resultaat voor screenY.
U moet een offset toevoegen. Bereken handmatig de coördinaten van de oorsprong (midden) rasterruimte, in schermcoördinaten en voeg ze toe (schermX, schermY).
Uw uiteindelijke conversiecode ziet er als volgt uit:
screenX = ((isoX - isoY) * tileHalfWidth) + screenOriginOffsetX; screenY = ((isoX + isoY) * tileHalfHeight) + tileHalfHeight + screenOriginOffsetY;
Stel dat we een object willen spawnen in de rasterruimte waarop de speler klikt. Hoe komen we erachter op welke ruimte is geklikt?
Met een beetje algebra kunnen we alleen de bovenstaande vergelijkingen herschikken om dit te krijgen:
// Pas eerst de offset aan: var adjScreenX = screenX - screenOriginOffsetX; var adjScreenY = schermY - schermOriginOffsetY; // Haal nu de rasterruimte op: isoX = ((adjScreenY / tileHalfHeight) + (adjScreenX / tileHalfWidth)) / 2; isoY = ((adjScreenY / tileHalfHeight) - (adjScreenX / tileHalfWidth)) / 2;
Plak dan alles achter de decimale punten om erachter te komen welke rasterruimte dit is.
Een klein ding om te onthouden: als je aan het blitten bent, zorg dan dat je eerst de objecten achterin rendert! Anders zou je een aantal rare overlappende effecten kunnen krijgen:
Het is eenvoudig om dit te doen; je hoeft alleen degenen met de laagste (dat wil zeggen, de beste) te bestellen screenY waarden eerst:
Merk ook op dat u de grootte van de objecten niet hoeft aan te passen op basis van hun afstand tot u; met een pseudo-isometrische weergave zoals deze, lijken objecten die verder weg zijn niet kleiner dan degenen die dichter bij je staan.
Accentsconagua