ordine di disegno isometrico con immagini più grandi di una singola tessera - algoritmo di ordine di disegno?

Ho una mappa isometrica sulla quale metto varie immagini. La maggior parte delle immagini si adatta a una singola tessera, ma alcune immagini sono leggermente più grandi. Ad esempio, ho un letto di dimensioni 2x3 piastrelle.

Questo crea un problema quando si disegnano i miei oggetti sullo schermo mentre ottengo alcune tessere che si sovrappongono erroneamente ad altre tessere.

Le due soluzioni che conosco sono la suddivisione dell'immagine in segmenti di riquadro 1x1 o l'implementazione del mio algoritmo di ordine di disegno, ad esempio assegnando un numero a ciascuna immagine. Prima viene disegnata l'immagine con il numero 1, quindi 2, 3 ecc.

Qualcuno ha consigli su cosa dovrei fare?

Mi sembra che dividere un'immagine isometrica non sia molto ovvio. Come decidi quali parti dell'immagine sono "in" una particolare tessera? Non posso permettermi di dividere manualmente tutte le mie immagini.

L'algoritmo dell'ordine di disegno sembra una scelta migliore, ma non sono sicuro che sarà facile da implementare. Non riesco a risolvere, nella mia testa, come affrontare le situazioni in cui si modifica l'indice di un'immagine, il che provoca un effetto a catena su molte altre immagini. Se qualcuno ha delle risorse / tutorial su questo sarei molto grato.

Ciò di cui hai bisogno si chiama algoritmo di un pittore.

Prima devi disegnare la tessera più lontana, inclusi eventuali scarabocchi o personaggi.

Quindi disegna il prossimo più vicino e ripeti fino al termine.

I tuoi oggetti che si estendono su più di una tessera devono avere un punto di ancoraggio / origine dichiarato. Questa è la cella della griglia che, se disegnata, comporterà anche il disegno dell'oggetto più grande. Il punto di origine viene scelto in modo tale da essere disegnato dopo che tutte le celle in cui sanguina l'oggetto vengono disegnate per prime.

In base alla domanda, il punto di origine sarà la tessera più vicina alla telecamera. (Se stai usando tessere quadrate, piuttosto che a forma di diamante, dovresti scegliere la tessera in basso a sinistra o in basso a destra.)

Codice di esempio per una griglia quadrata. Modifica la direzione del loop per la tua griglia diamantata.

for(int y = 0; y < GridHeight; ++y) {
    for(int x = GridWidth - 1; x > -1; --x) {
        MapCell cell = getMapCell(x,y);
        DrawTerrain(cell);
        if(cell.IsDoodadOrigin){
            DrawDoodad(cell);
        }
        if(cell.IsCharacterOrigin){
            DrawCharacter(cell);
        }
    }
}

Dividi i tuoi oggetti in cubi 1 × 1 × 1, assegnando a ciascun cubo un'immagine delle parti dell'oggetto che si troverebbero fisicamente in quel cubo.

Questo è facile se inizi con oggetti 3D reali e li riduci in 2D. Se disegni i tuoi oggetti direttamente in 2D (o se hai opere d'arte che devi dividere), ci vuole un po 'di sforzo manuale. Fortunatamente, la divisione non deve essere esatta, purché si assicuri che nessuna delle parti dell'immagine assegnate a un dato cubo fuoriesca dall'area esagonale coperta da un cubo solido 1 × 1 × 1 in quella posizione. Può essere utile creare un overlay che mostri i contorni di ciascun cubo come un livello aggiuntivo nell'editor grafico.

Quindi assegni una priorità a ciascun cubo come p = x + y + z (supponendo che tutte e tre le coordinate aumentino verso la telecamera) e renda i cubi in ordine crescente per priorità.

Ecco un breve esempio basato su questa immagine di Wikimedia Commons (di Phasmatinox / Allefant , utilizzata con la licenza CC-By-SA 3.0 ):

La cassettiera nella foto occupa due tessere e su di essa ho tracciato i contorni di quelle tessere (gli esagoni rossi). Le parti dell'immagine che giacciono all'interno di ciascun esagono dovrebbero essere assegnate alla tessera corrispondente; la parte in cui gli esagoni si sovrappongono può essere assegnata a una delle tessere (o anche a entrambe, se lo si desidera), poiché la scelta non influirà sul risultato finale.

Nota che potresti dover elaborare questo semplice algoritmo se puoi avere più oggetti in una tessera, pareti / pavimenti tra le tessere o oggetti (come le persone) che si muovono senza problemi tra le tessere. Le pareti e i pavimenti sono piuttosto semplici da gestire: possono essere disegnati in qualsiasi momento dopo il contenuto della piastrella di fronte (dal punto di vista della telecamera) e prima della piastrella dietro. Questa è anche un'utile regola empirica per gli oggetti che si muovono tra le tessere; trattali come faresti con un muro tra quelle tessere.

Per quanto riguarda più oggetti in una tessera, a volte quelli sono piuttosto semplici: ad esempio, se nella foto ci fosse un libro sul petto, dovrebbe ovviamente essere disegnato dopo la superficie su cui giace. Tuttavia, le cose possono diventare più complicate se, ad esempio, hai oggetti su cui le persone possono sedersi. Ad esempio, se una persona era seduta su una panchina, di fronte alla telecamera, il corpo della persona dovrebbe essere disegnato dopo la panchina ma le gambe (che sono dietro la panchina dalla telecamera) devono essere disegnate prima di essa. Una soluzione, in questo caso, sarebbe quella di dividere le gambe di una persona seduta in un componente separato con la propria posizione (nella tessera adiacente o tra le tessere).

Può aiutarti a partizionare i tuoi oggetti per tipo o per altitudine. Ad esempio, il paesaggio (pavimenti, pareti) deve essere disegnato prima degli oggetti (letti). Inoltre, a causa della prospettiva isometrica, le tessere a bassa quota dovrebbero essere disegnate prima di quelle ad alta quota.

Inoltre, se segui la numerazione dell'indice (ordinamento Z, in realtà), ti consiglio di usare degli spazi tra i numeri: non creare pavimenti 1e letti 2. Usa qualcosa come pavimento = 10e letti = 20o 100qualcos'altro, così puoi "inserire" elementi nel mezzo senza incrementare tutto il domino.