Share
Se stai organizzando un gioco insieme per un jam o # 1GAM, probabilmente non sei troppo preoccupato di farlo "nel modo giusto". In questo articolo, condividerò alcuni suggerimenti per disegnare e codificare i livelli pseudoisometrici rapidamente e facilmente.
tecnicamente, "isometrico" si riferisce a una proiezione in cui l'angolo tra gli assi x-, y- e z (nelle dimensioni dello schermo) è 120 °. E il corretto modo per convertire tra coordinate dello schermo e coordinate isometriche è utilizzando una matrice di trasformazione.
Ma dimenticalo! In questo suggerimento rapido, stiamo andando a tagliare alcuni angoli e barare un po '.
Controllalo. Possiamo trasformare una normale griglia a 90 ° in qualcosa che sembra abbastanza vicino a una griglia isometrica con due semplici passaggi.
Inizia con una griglia come questa (la chiamerò griglia cartesiana):
Ruota di 45 °:
Schiaccia 50% in verticale:
Fatto! Questo dovrebbe essere correttamente indicato come dimetrica piuttosto che isometrico, come spiegato in questo meraviglioso articolo, ma lo farà per la maggior parte degli scopi.
Quella griglia non farà gran parte di un gioco da solo. Forse vuoi aggiungere pezzi di scacchi, magari vuoi aggiungere mostri - qualunque cosa tu aggiunga, dovrai sapere dove metterlo.
Ecco l'oggetto che userò (da The Noun Project):
Non è necessario ruotarlo o schiacciarlo per adattarlo alla griglia; ridimensionalo in modo appropriato:
Come puoi vedere, la base (i piedi del ragazzo, in questo caso) dovrebbe andare al centro dello spazio della griglia. Quindi dobbiamo capire dove si trova.
Potremmo usare la trigonometria o una matrice di trasformazione o qualcosa del genere, ma c'è dell'algebra semplice che farà il lavoro.
Misura la larghezza e la mezza altezza della piastrella diagonale (in dimensioni dello schermo):
Questo è ingrandito. var tileHalfWidth = 17,5; var tileHalfHeight = 8,75;
Calcola gli indici di griglia dello spazio che ti interessa:
Come puoi vedere, utilizzo il centro della griglia come origine. Il ragazzo è in piedi nello spazio (4, 2).
Converti le coordinate dello spazio della griglia in coordinate dello schermo, usando questa formula:
screenX = (isoX - isoY) * tileHalfWidth; screenY = (isoX + isoY) * tileHalfHeight;
Nel nostro caso, questo fornirà le coordinate dello schermo di (35, 52.5).
Questo è in realtà l'angolo "in alto" dello spazio; per ottenere il centro dello spazio, dovrai aggiungere tileHalfHeight al risultato per screenY.
Dovrai aggiungere un offset. Basta calcolare manualmente le coordinate dello spazio della griglia di origine (centro), nelle coordinate dello schermo e aggiungerle a (screenX, screenY).
Il tuo codice di conversione finale assomiglia a questo:
screenX = ((isoX - isoY) * tileHalfWidth) + screenOriginOffsetX; screenY = ((isoX + isoY) * tileHalfHeight) + tileHalfHeight + screenOriginOffsetY;
Supponiamo di voler generare un oggetto in qualsiasi spazio della griglia su cui il giocatore fa clic. Come possiamo capire quale spazio è stato cliccato?
Con un po 'di algebra, possiamo semplicemente riorganizzare le equazioni precedenti per ottenere questo:
// Innanzitutto, regola l'offset: var adjScreenX = screenX - screenOriginOffsetX; var adjScreenY = screenY - screenOriginOffsetY; // Ora, recupera lo spazio della griglia: isoX = ((adjScreenY / tileHalfHeight) + (adjScreenX / tileHalfWidth)) / 2; isoY = ((adjScreenY / tileHalfHeight) - (adjScreenX / tileHalfWidth)) / 2;
Quindi, basta rimuovere tutto quanto oltre i punti decimali per capire quale spazio della griglia è.
Una piccola cosa da ricordare: se stai facendo il blitter, assicurati di eseguire prima il rendering degli oggetti nella parte posteriore! Altrimenti potresti finire con strani effetti sovrapposti:
È semplice farlo; hai solo bisogno di ordinare quelli con il più basso (cioè, al massimo) screenY valori prima:
Si noti inoltre che non è necessario ridimensionare gli oggetti in base alla loro distanza da voi; con una vista pseudoisometrica come questa, gli oggetti più lontani non appaiono più piccoli di quelli più vicini a te.
Accentsconagua