creazioni mappe in 2D

---

dall'oggetto sembra sia andato fuori sezione. ^^
invece no (spero), e mo spiego perch? (al limite cambiate sezione). e correggetemi qualora dicessi qualche cavolata.

E' facilmente immaginabile una mappa in 2D, magari piazzata dentro <table> (tanto per rendere l'idea).
Ma per creare una mappa 2D on effetto 3D senza usare oggeti flash, ma semplicemente xhtml e css?

Personalmente mi sarei fatto un'idea ricavata dall'osservazione di qualche giochino mmorpg online (ad esempio www.travian3.it). Devo avviare dei test, ovviamente, ma volevo prima parlarne con voi.

Dunque, per creare una mappa in 2D, instintivamente verrebbe di fare una sorta di tabella con righe e colonne orizzontali e verticali. magari non si noter? la griglia ma, nel caso di un gioco mmorpg, sar? utile per poter piazzare altri oggetti dinamicamente, senza dover modificare di continuo l'immagine originaria.
Dare agli oggetti una sensazione da 3D non basta, e bisognerebbe ruotare la mappa, facendola vedere su schermo da "quadrata" a "rombo". Avete in mente ci? che voglio dire?

Ebbene: come realizzare la mappa con griglia a rombo?
<table> non ci ? pi? d'aiuto, in quanto non permette di poter fare una tabella a forma di rombo. Allora che fare?

Prendiamo in esame i CSS e xhtml.
Attraverso le propriet? del box model (cio? border, padding, margin, etc) e la possibilit? di poter applicare qualsiasi sfondo o sfondo trasparente su qualsiasi elemento, ? possibile ipotizzare la costruzione della nostra mappa tramite una serie di elementi blocco i quali prendono in consegna porzioni di mappa e relativi oggetti. Inoltre, ? possibile definire la posizioni di ogni elemento con precisione al pixel, magari sovrapponendo blocco su blocco.

Prendiamo in esame i formati di immagini: GIF.
Tale formato, cos? come la propriet? background dei CSS, ci d? la possibilit? di creare in un'immagine porzioni trasparenti.

Abbiamo tutto quello che ci serve: ipotizziamo un uso pratico.
Su una mappa (base, DIV#A) con un campo erboso, l'utente sistemer? degli alberi dove vuole (i rombi, DIV secondari).

Iniziamo col mettere l'immagine di base come sfondo di un DIV#A (tramite codice xhtml e CSS).
Poi dentro l'elemento DIV#A mettiamo una serie di DIV in modo tale da poter dividere la base in tanti rombi uguali (o quadrati qualora non avessimo ancora girato la mappa). Agendo con i CSS, settiamo lo sfondo trasparente.
Poi associamo ad ogni DIV che andranno a collocarsi dentro il DIV#A una bella immagine di sfondo. Tale immagine di sfondo ? un rombo di mappa, al di fuori dei suoi bordi la GIF ? trasparente.

Se mettessimo questi rombi uno accanto all'altro sfruttando le propriet? dei CSS, consapevoli che porzioni di immagine potranno essere trasparenti e sovrapposte, l'utente potr? creari a tratti porzioni di bosco e modificare quando vuole.

Non abbiamo risolto il problema?

Dite la vostra ^^