Share
Om du hackar ett spel tillsammans för en sylt eller # 1GAM, är du förmodligen inte alltför bekymrad över att göra det "rätt väg". I den här artikeln delar jag några tips för att teckna och koda pseudo-isometriska nivåer snabbt och enkelt.
Tekniskt, "isometrisk" avser en projektion där vinkeln mellan x-, y- och z-axlarna (i skärmdimensioner) är 120 °. Och den rätt sätt att konvertera mellan skärmkoordinater och isometriska koordinater är genom att använda en transformationsmatris.
Men glöm det! I denna Snabba Tips ska vi skära några hörn och fuska lite.
Kolla in det här. Vi kan vända en vanlig 90 ° -grid till något som ser tillräckligt nära ett isometriskt nät med två enkla steg.
Börja med ett rutnät så här (jag kallar detta ett kartesiskt rutnät):
Vrid det 45 °:
Squash det 50% vertikalt:
Gjort! Detta bör korrekt betecknas som dimetriska snarare än isometrisk, som förklaras i denna underbara artikel, men det kommer att göra för de flesta ändamål.
Det nätet kommer inte att göra mycket av ett spel på egen hand. Kanske vill du lägga till schackbitar, kanske du vill lägga till monster - vad du än lägger till behöver du veta vart du ska uttrycka det.
Här är det objekt jag ska använda (från The Noun Project):
Vi behöver inte rotera eller squasha det för att passa på nätet. bara skala ner det på lämpligt sätt:
Som du kan se ska basen (killarens fötter, i det här fallet) bara gå i mitten av rutnätet. Så vi måste ta reda på var detta är.
Vi kan använda trigonometri eller en transformationsmatris eller något, men det finns en enkel algebra som gör jobbet.
Mät diagonalplattans halvbredd och halvhöjd (i skärmdimensioner):
Detta zoomas in. var tileHalfWidth = 17,5; var tileHalfHeight = 8,75;
Ta reda på rutnets index för det utrymme du är intresserad av:
Som du kan se använder jag mitt på nätet som ursprung. Killen står på rymden (4, 2).
Konvertera rutnätkoordinaterna till skärmkoordinater, med följande formel:
screenX = (isoX - isoY) * tileHalfWidth; screenY = (isoX + isoY) * tileHalfHeight;
I vårt fall kommer detta att ge skärmkoordinater för (35, 52,5).
Detta är faktiskt det "övre" hörnet av utrymmet; För att komma i mitten av utrymmet måste du lägga till tileHalfHeight till resultatet för Screeny.
Du måste lägga till en förskjutning. Bara manuellt räkna ut koordinaterna för ursprunget (center) rutnätet, i skärmkoordinater och lägg till dem till (screenX, screenY).
Din sista konverteringskod ser ut så här:
screenX = ((isoX - isoY) * tileHalfWidth) + screenOriginOffsetX; screenY = ((isoX + isoY) * tileHalfHeight) + tileHalfHeight + screenOriginOffsetY;
Antag att vi vill kasta ett objekt i vilket nätutrymme spelaren klickar på. Hur räknar vi ut vilket utrymme som klickades på?
Med lite algebra kan vi bara omordna ovanstående ekvationer för att få det här:
// Först justera för offset: var adjScreenX = screenX - screenOriginOffsetX; var adjScreenY = screenY-screenOriginOffsetY; // Hämta nu nätutrymmet: isoX = ((adjScreenY / tileHalfHeight) + (adjScreenX / tileHalfWidth)) / 2; isoY = ((adjScreenY / tileHalfHeight) - (adjScreenX / tileHalfWidth)) / 2;
Löp bara av allt förbi decimalerna för att ta reda på vilket gallerutrymme detta är.
En liten sak att komma ihåg: om du blitar, se till att du gör föremålen i ryggen först! Annars kan du hamna med några konstiga överlappande effekter:
Det är enkelt att göra det här; du behöver bara beställa dem med lägst (det vill säga högst) Screeny värden först:
Observera också att du inte behöver ändra storlek på objekten baserat på deras avstånd från dig. med en pseudo-isometrisk vy så här visas föremål som ligger längre bort inte mindre än de närmare dig.
Accentsconagua