Share
Dacă hackați un joc împreună pentru un gem sau # 1GAM, probabil că nu sunteți prea preocupat să faceți acest lucru "pe calea cea bună". În acest articol, voi împărtăși câteva sfaturi pentru desenarea și codarea nivelelor pseudo-izometrice rapid și ușor.
Tehnic, "izometric" se referă la o proiecție în care unghiul dintre axele x-, y- și z (în dimensiunile ecranului) este de 120 °. Si propriu-zis modalitatea de a converti între coordonatele ecranului și coordonatele izometrice este prin utilizarea unei matrice de transformare.
Dar uitați asta! În acest sfat rapid, vom tăia niște colțuri și vom înșela puțin.
Verifică asta. Putem transforma o grilă obișnuită de 90 ° în ceva care pare destul de aproape de o rețea izometrică cu doi pași simpli.
Începeți cu o rețea de genul asta (o voi numi o rețea carteziană):
Rotiți-o cu 45 °:
Squash-o 50% pe verticală:
Terminat! Acest lucru ar trebui să fie denumit în mod corect dimetric mai degrabă decât izometric, așa cum se explică în acest articol minunat, dar va face în cele mai multe scopuri.
Grila asta nu va face prea mult un joc de unul singur. Poate doriți să adăugați piese de șah, poate doriți să adăugați monștri - orice veți adăuga, va trebui să știți unde să îl puneți.
Iată obiectul pe care îl folosesc (de la The Noun Project):
Nu avem nevoie să îl rotim sau să-l împușcăm pentru a se potrivi pe grila; doar scalați-l în mod corespunzător:
După cum puteți vedea, baza (picioarele tipului, în acest caz) ar trebui să meargă doar în centrul spațiului grilei. Așa că trebuie să ne dăm seama unde este asta.
Am putea folosi trigonometria sau o matrice de transformare sau ceva, dar există o algebră simplă care va face treaba.
Măsurați jumătatea lățimii și jumătate înălțime a dalelor diagonale (în dimensiunile ecranului):
Aceasta este mărită. var tileHalfWidth = 17,5; var tileHalfHeight = 8,75;
Aflați indicii de rețea ai spațiului care vă interesează:
După cum puteți vedea, folosesc centrul originii rețelei. Tipul stă în spațiu (4, 2).
Conversia coordonatelor spațiului de rețea la coordonatele de ecran, utilizând următoarea formulă:
screenX = (izoX - izoY) * tileHalfWidth; screenY = (izoX + isoY) * tileHalfHeight;
În cazul nostru, acesta va afișa coordonatele ecranului (35, 52,5).
Acesta este de fapt colțul "de sus" al spațiului; pentru a obține centrul spațiului, va trebui să adăugați tileHalfHeight la rezultatul pentru screenY.
Va trebui să adăugați o compensare. Trebuie doar să dați manual coordonatele spațiului de origine (centru) al rețelei, în coordonatele ecranului și să le adăugați (screenX, screenY).
Codul dvs. final de conversie arată astfel:
screenX = ((izoX - izoY) * tileHalfWidth) + screenOriginOffsetX; screenY = ((izoX + izY) * tileHalfHeight) + tileHalfHeight + screenOriginOffsetY;
Să presupunem că vrem să aruncăm un obiect în oricare spațiu de rețea pe care jucătorul face clic. Cum ne dăm seama la ce spațiu a fost făcut clic?
Cu o algebră mică, putem rearanja ecuațiile de mai sus pentru a obține acest lucru:
// Mai întâi, reglați pentru offset: var adjScreenX = screenX - screenOriginOffsetX; var adjScreenY = screenY - screenOriginOffsetY; // Acum, extrageți spațiul grilă: isoX = ((adjScreenY / tileHalfHeight) + (adjScreenX / tileHalfWidth)) / 2; isoY = ((adjScreenY / tileHalfHeight)) - (adjScreenX / tileHalfWidth)) / 2;
Apoi scoateți toate lucrurile dincolo de punctele zecimale pentru a afla care spațiu de rețea este acesta.
Un mic lucru pe care trebuie să-l țineți minte: dacă vă bateți, asigurați-vă că faceți mai întâi obiectele din spate! În caz contrar, ați putea ajunge cu unele efecte suprapuse ciudate:
Este simplu să faceți acest lucru; trebuie doar să comandați cei cu cel mai mic (adică cel mai bun) screenY valori:
Rețineți, de asemenea, că nu este necesar să redimensionați obiectele pe baza distanței lor față de dvs.; cu o vedere pseudo-izometrică ca aceasta, obiectele care sunt mai departe nu apar mai mici decât cele apropiate de tine.
Accentsconagua