Share
Hvis du hacker et spill sammen for en papirstopp eller # 1GAM, er du sannsynligvis ikke så bekymret for å gjøre det "den riktige veien". I denne artikkelen deler jeg noen tips for tegning og koding av pseudo-isometriske nivåer raskt og enkelt.
Teknisk sett, "isometrisk" refererer til en projeksjon hvor vinkelen mellom x-, y- og z-aksene (i skjermdimensjonene) er 120 °. Og ordentlig måte å konvertere mellom skjermkoordinater og isometriske koordinater er ved å bruke en transformasjonsmatrise.
Men glem det! I denne Quick Tip skal vi kutte noen hjørner og lure litt.
Sjekk ut dette. Vi kan slå en vanlig 90 ° -grid inn i noe som ser nær nok til et isometrisk rutenett med to enkle trinn.
Start med et rutenett som dette (jeg vil kalle dette et kartesisk rutenett):
Vri den 45 °:
Squash det 50% vertikalt:
Ferdig! Dette bør riktig refereres til som dimetrisk snarere enn isometrisk, som forklart i denne fantastiske artikkelen, men det vil gjøre for de fleste formål.
Det rutenettet kommer ikke til å gjøre mye av et spill alene. Kanskje du vil legge til sjakkstykker, kanskje du vil legge til monstre - uansett hva du legger til, må du vite hvor du skal sette det.
Her er objektet jeg skal bruke (fra The Noun Project):
Vi trenger ikke å rotere den eller squash den for å få den til å passe på rutenettet; bare skala det ned på riktig måte:
Som du kan se, bør basen (fyrens føtter, i dette tilfellet) bare gå i midten av rutenettet. Så vi må finne ut hvor dette er.
Vi kan bruke trigonometri eller en transformasjonsmatrise eller noe, men det er noen enkle algebra som skal gjøre jobben.
Mål den diagonale flisens halvbredde og halvhøyde (i skjermmål):
Dette er zoomet inn. var tileHalfWidth = 17.5; var tileHalfHeight = 8,75;
Finn ut gridindeksene for rommet du er interessert i:
Som du kan se bruker jeg midten av rutenettet som opprinnelse. Fyren står på plass (4, 2).
Konverter ruteplasskoordinatene til skjermkoordinater, ved hjelp av denne formelen:
screenX = (isoX - isoY) * tileHalfWidth; screenY = (isoX + isoY) * tileHalfHeight;
I vårt tilfelle vil dette gi skjermkoordinater av (35, 52,5).
Dette er faktisk det "øverste" hjørnet av rommet; For å komme til sentrum av rommet må du legge til tileHalfHeight til resultatet for screeny.
Du må legge til en forskyvning. Bare utfør koordinatene til opprinnelses- (senter) rutenett, i skjermkoordinater, og legg dem til manuelt (screenX, screenY).
Din endelige konverteringskode ser slik ut:
screenX = ((isoX - isoY) * tileHalfWidth) + screenOriginOffsetX; screenY = ((isoX + isoY) * tileHalfHeight) + fliserHalfHeight + screenOriginOffsetY;
Anta at vi ønsker å gyte et objekt i hvilket rutenett spilleren klikker på. Hvordan finner vi ut hvilken plass som ble klikket?
Med litt algebra kan vi bare omorganisere ovennevnte ligninger for å få dette:
// Først juster for offseten: var adjScreenX = screenX - screenOriginOffsetX; var adjScreenY = screenY - screenOriginOffsetY; // Nå, hent rutenettet: isoX = ((adjScreenY / tileHalfHeight) + (adjScreenX / tileHalfWidth)) / 2; isoY = ((adjScreenY / tileHalfHeight) - (adjScreenX / tileHalfWidth)) / 2;
Deretter bare løp av alt forbi desimaltallene for å finne ut hvilken rutenett dette er.
En liten ting å huske: Hvis du bliter, må du sørge for at du gjør gjenstandene i ryggen først! Ellers kan du ende opp med noen rare overlappende effekter:
Det er enkelt å gjøre dette; du trenger bare å bestille de som har den laveste (det vil si toppen) screeny verdier først:
Legg også merke til at du ikke trenger å endre størrelsen på objektene basert på avstanden fra deg; med en pseudo-isometrisk visning som dette, objekter som er lenger unna, vises ikke mindre enn de som er nærmere deg.
Accentsconagua