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 ^^

RE: creazioni mappe in 2D

---

ciao,
la cosa ? piuttosto interessante...

innanzitutto verifichiamo che ho capito

tu vorresti fare una cosa tipo questa: http://www.travian3.it/img/it/s/s8.gif
giusto?
inoltre questa mappa dovrebbe ruotare e spostarsi, giusto?
non vuoi farla in flash.. ma, perch??

il discorso di css e gif trasparenti in teoria dovrebbe funzionare, poi per ruotare/spostare la mappa, sarebbe sufficiente cambiare le immagini, giusto?

tipo: database con posizioni delle immagini e sfondo a rombo fisso..

ho capito bene?

RE: creazioni mappe in 2D

---

lo so ^^

si quello ? un tipo semplice di mappatura, che poi ho visto (e ipotizzato) mappe ben pi? complesse. cmq nel mio post partivo da questo sistema.

loro l'hanno fatta in flash? ho trovato una soluzione senza flash, riusciamo ad applicarla oppure il flash ci surclassa senza nemmeno vederci?
e poi se posso manipolare i css, perch? usare il flash?
ovviamente parlo di creazioni "semplici". se dovessi andare pi? in l?, non farei pi? un browsergame, ma un coso con client a parte tipo maple story (tanto per citarne uno a grafica semplice, o 2D), e via via pi? su.

per quel tipo di esempio, basterebbe accedere al database e caricare l'immagine giusta in quella casella. tutto funzionerebbe per coordinate insomma, x e y per incominciare, poi magari in casi di 3D (ne ho qualche idea) anche con z.
per l'esempio di travian si parlerebbe solamente di spostare la mappa: tu hai un "radar" di 10x10 caselle e ti piazzi al centro di una coordinata e renderizzi quello che c'? in quell'area.
se dovessimo ruotare, avremmo la stessa immagine ovviamente cambiando di posizione (ci? che stava a nord lo porto a sud e cos? via). con la rotazione, dovrei anche far caricare immagini ruotate (per non incappare nell'errore di stronghold: alla rotazione, gli edifici presentavano cmq la medesima faccia).
cmq il sistema preveda nel codice xhtml che siano strutturati una serie di elementi DIV che compongono i vari strati di grafica. Nel nostro esempio gli strati sono 2: l'immagine di sfondo sempre uguale (che cmq potrebbe cambiare spostandosi di zona) e gli oggettini dentro (gli alberelli nell'esempio).

pi? o meno si.
ovviamente non ? semplice strutturare il db in relazione allo script... ma la logica ? quella, a mio dire.

sembrerebbe di si... allora la domanda ?: che ne pensate?

domani quando ho tempo posto una cosa che direi sia 3D, perch? ho un'immagine con sfondo, e devo piazzare gli alberi tenendo conto anche di questo. Lo script elaborer? quanto piccoli saranno in rapporto alla distanza (non posso mettere un albero lontano dal mio punto di vista dell'immagine grande tanto quello vicino). ? che ora ho mal di testa xD

ciao ciao

RE: creazioni mappe in 2D

---

lo script con le coordinate non ? poi cos? difficile - per me - (se vuoi posso darti una mano tranquillamente)

io la vedo molto pi? dura a fare quel lavoro con i css :51:

per? mi sembra tutto fattibile..

avevo pensato al flash perch? una volta stavo progettando un sito 3d, purtroppo abbandonato perch? il progetto era immenso e il tempo pokissimo... e il flash mi sembrava la soluzione pi? semplice...

tu sei pratico di css?

RE: creazioni mappe in 2D

---

non impelaghiamoci col codice - per ora. anche perch? ho altre cose da fare prima. ^^
? che prima di testare l'applicazione, volevo vedere se esisteva un qualcosa di "preparato", o se era fattibile oppure no.
adesso ho la soglia davanti a me, il tempo di imboccarla arriver?... =)

PS: non ? bello elaborare una funzione per i controlli delle stringhe con i puntatori in c/c++ per poi scoprire che esistevano due comode funzioni stringcmp() o stringcmpi() della libreria <string.h>... x)

capisci?

piuttosto: altri commenti? =)
pi? siamo, meglio ? xD

---

RE: creazioni mappe in 2D

---

Molto interessante questo post!

Beh a dire la verit? non avrei mai pensato che si potesse fare una cosa del genere cono soli CSS e xhtml.
Daltronde credo sia molto pi? facile realizzare il tutto in flash.

E premesso che a me non piacciono molto i flash, se parte questo "progetto" vorrei dare anch'io il mio contributo.

Non dovrebbe essere impossibile farlo...

RE: creazioni mappe in 2D

---

ti scordi di php&mysql... senza di loro non andremo molto lontano =)

quindi ricapitoliamo:

• primo livello: immagine di sfondo a rombo, con sfondo trasparente (oltre il bordo del rombo);
• secondo livello: serie di DIV che incastonano immagini pi? piccole sempre a rombo (e questo potremmo farl o un po' di volte, finch? vorremmo - teoricamente);

Nel caso di una flotta su per mare, i DIV potrebbero prendere dimensioni proporzionalmente pi? grandi o pi? piccole. Se pi? piccole di un rombo standard, allora la GIF sar? di dimensione uguale alle altre, ma avr? pi? bordo trasparente; al contrario il DIV prender? dimensione x2, x3, in base alle necessit?.
Altra cosa (e qui non so se il server, il browser e il W3C mi picchieranno): anzich? usare dei DIV di dimensioni uguali o proporzionali, prende una dimensione sua personale ed eventualmente superfici e calcoli vari si danno per coordinate al pixel sul DIV del primo livello contenitore. Cosa cambia dal rombo al pixel come unit?? Niente. Anzich? calcolare le dimensioni e le distanze soprattutto con i rombi, le possiamo calcolare col pixel. Ovviamente la mappa sar? molto pi? fluida...

Dipende molto da quello che dobbiamo fare, ma ? bello esplorare un po', no?

In allegato una serie di foto...
la A, B e C appartengono a travian3.it (stessa cosa che ha postato fdalesio, solo che io ho ripreso i momenti in cui caricavano).
           

---

RE: creazioni mappe in 2D

---

Se si parla di lato client, ebbene l'unica soluzione che mi viene in mente, senza usare ne flash ne javascript, ? proprio quella prospettata prima... Rimanendo sempre fuori da flash (che comunque servirebbe benissimo allo scopo) abbiamo un altra risorsa, che forse piace molto di pi? agli sviluppatori: javascript.
date un occhiata qua:
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
Non ho studiato bene lo script, ma le applicazioni sembrano ottime... Ideale rimarrebbe comunque tracciare le mappe tramite l'utilizzo delle librerie per immagini offerte dai vari linguaggi server side, anche se forse sarebbe meno bello/figo.
A domani, quando avr? meno sonno, per una risposta migliore. XD

RE: creazioni mappe in 2D

---

=) bene ^^

flash non mi piace molto...
javascript o AJAX sarebbero altre valide alternative...

Anche a me...
Ma guardando il tuo link mi viene in mente quegli oggetti creati in Java per i mobile (bella la Canvas...), o quelle procedure Assembly per cosine sempre 2D, o meglio ancora quegli accenni di funzioni in C++.
JavaScript, a mio dire, si avvicina molto pi? a questo genere di programmazione, e si allontana un po' dal mondo dei mark-up!

Ad esempio?

xD

Altre aggiunte?

---

RE: creazioni mappe in 2D

---

Utilizzando php e le librerie gd, per esempio, si potrebbero assemblare una serie di immagini e mostrarle poi come oggetto unico, interfacciando le modifiche varie tramite l'utilizzo di area map.
Per esempio, con ajax, si pu? fare in modo che clickando sull'area definita di un determinato rombo, mettiamo occupato da foresta, venga costruita una casa, e questo semplicemente cambiando facendo un update sul database di riferimento e un refresh dell'immagine

RE: creazioni mappe in 2D

---

conoscevo gi? le possibilit? di JavaScript, AJAX, flash...

la "sfida" era di farlo a suon di markup...
I CSS hanno tutte quelle propriet? per lo sfondo, hanno rappresentato proprio la rivoluzione per i siti dal momento in cui si poteva agire sullo sfondo dell'elemento...
Dunque tentavo di usarli al "limite", se tale ? davvero un limite per loro...

RE: creazioni mappe in 2D

---

ok, la sfida ? farlo a suon di markup, per? non ? ottimale.
Ossia: ci sono strumenti adatti per ogni cosa e, per mia modesta opinione, una trentina di div posizionati assolutamente a sovrastarsi non sono ottimali

RE: creazioni mappe in 2D

---

ma dipende molto da quello che si deve fare e quanto...
perch? se pensiamo a travian3 e simili, ovviamente dietro ci sono aziende con tanto di staff che si occupa di diversi aspetti della creazione del browsergame...
Ma un povero comune mortale DA SOLO (come me) che magari non avr? 2.000 giocatori in contemporanea e 10.000 account registrati, e vorrebbe magari un po' emulare quest'aspetto del web, inizia magari a vedere le cose con i markup. Poi dopo, vedendo effettivamente quali sono i problemi, cerca di risolverli usando altri strumenti, altri linguaggi.
intendi?

---

RE: creazioni mappe in 2D

---

S?, ma non sono comunque d'accordo. Per il semplice fatto che a fare una struttura del genere utilizzando solo il markup si spende moolto (e dico molto) pi? tempo, risorse ed energia (mentale), ottenendo un lavoro, purtroppo, meno stabile e sicuramente meno accessibile (pensa a coloro che hanno i css disabilitati, chiss? cosa vedrebbero!).
Insomma, sono fermamente convinto che per ogni problema ci sia una soluzione, ma che il modo di raggiungerla, e la soluzione diversa, potr? essere diverso, migliore o peggiore, a seconda degli strumenti utilizzati, che possono rivelarsi pi? o meno adatti

Ovviamente ? solo una mia opinione, ed ? anche strettamente tecnica. Trovo sempre molto utile cercare di sviluppare nuove tecniche

---

RE: creazioni mappe in 2D

---

io aggiungerei anche una cosa...
? da poco che mi sto interessando di css per abbandonare il layout a tabelle... sai quanti migliaia di problemi di compatibilit? tra i browser hanno questi css??

delle cose assurde...

per una cosa complicata come quella che hai in mente tu non oso immaginare che casino possono fare i vari browser (in particolar modo IE, che mi sta facendo dannare!)

piccolo sfogo, perdonatemi :07:

RE: creazioni mappe in 2D

---

Perdonato :13:
Per? credo questa sia una sfida! E' pertanto credo che se ci sia una opportunit? di creare una mappa in 2D con i css, se uno ha un obiettivo lo deve portare fino in fondo ascoltando le critiche e prendendone atto.

Daltronde http://www.travian3.it credo proprio abbia usato questo tipo di codice. Normale che li ci sono persone espertissime, per? io ci vorrei provare...

RE: creazioni mappe in 2D

---

Beh, ma non si riesce a prelevare il codice della pagina per vedere un po come ? fatto? Io non sono iscritto, ma se qualcuno provvedesse...

RE: creazioni mappe in 2D

---

Ok rispondo al volo ai vostri post, iniziamo

@helmakil: sono un tecnico quanto te e non solo, e non sei mai stato d'accordo con me: pazienza... Non cerco questo, ma non mi serve che m'insegni come si risolve un problema: so fare da me, grazie. Conoscevo gli strumenti "alternativi" da te menzionati, e non avevo appunto chiesto sul forum cosa usare.
Ad ogni modo dubito che gli user disabilitino i CSS e poi pretendino di poter giocar ad un browsergame o di navigare su un qualsiasi sito nuovo... Ma, come tu stesso dicevi, si tratta di opinioni.

@fdalesio: conosco i problemi che danno i vari browser circa l'interpretazione dei fogli di stile. Aggiungo che il loro uso ? "recente", quindi diamo il tempo a chi di dovere per poter sviluppare browser sempre pi? precisi e veloci e che sopratutto rispondino fedelmente ai requisiti del W3C.
Il mio sistema imponeva solamente di dare a dei DIV uno sfondo (gif) da applicare su un altro sfondo del DIV padre; il posizionamento su di esso avverrebbe come indicato dalla specifica CSS. E non mi sembra ci sia niente di assurdo (almeno in teoria, e ripeto che ancora non ho avuto tempo per provare).
Ovviamente, se dovessi avere 2.000 utenti in contemporanea e 10.000 account, allora a quel punto qualche problema me lo farei...

@gokufg: io avevo lanciato sto messaggio... "Si potrebbe fare un qualcosa con questi linguaggi in questo modo?"

Ed infine il codice tanto agognato... L'ho preso, anche del CSS e di un file js, ed ho preso uno screen della pagina che il browser ha renderizzato. Dando un'occhiata al volo, sembra che la mappa sia stata generata dai tag <map> e <area> che puntino ad uno script php...

Consiglio di scaricare il "pacchetto grafico travian3" che troverete su questa pagina!!

---

RE: creazioni mappe in 2D

---

Mi scuso in anticipo con gokufg per la risposta che sta per partire:

Sar? anche cos?, ma quel non solo in quel campo sta a dire che sei parecchio infantile: quando uno scrive in un forum lo fa per confrontarsi, se vuoi stare sullo scranno e insegnare, allora ti apri un sito "Larchitetto insegna" e da l? detti legge quanto ti pare. Io parlo di risoluzione dei problemi, e mi sembra che quello che ti ho scritto non sia in alcun modo opinabile, o sbaglio? Dopodich? non ho visto il tuo curriculum, per me puoi essere anche un ingegnere informatico, con dottorato alla Normale di pisa e lode del CNR, non ? cosa che mi riguardi.
Per me stai prendendo la strada sbagliata, e oltretutto sbagli il modo in cui porti e rispondere: nessuno ti stava attaccando ne cercava di "bocciare" il tuo progetto, ne tantomeno di insegnarti come lavorare.
Posso capire che tu non abbia chiesto con che strumenti risolvere il problema, ma questo non ha la minima importanza. Non pensi che forse il consigliarti strumenti alternativi, pi? funzionali, non sia uno sgarbo alla tua competenza tecnica?

L'utilizzo di un area map ? la cosa migliore, alla fine.... Ah, mi sa che qualcun altro l'aveva proposta... XD
E l'impaginazione di div in quel modo (come "rombi") crea diversi problemi: dovresti lavorare parecchio sugli z-index, oltrech? sulle posizioni. Per quello ti ho sconsigliato di farlo.
Inoltre non so fino a che punto questo sia applicabile in pratica, vista la forma "quadrata" dei div e l'alto numero di essi. Anzi, temo proprio che non si possa fare

Chiudo cos? l'ultimo intervento in questo 3d, perch? non mi pare che ci siano le condizioni per lavorare bene.

RE: creazioni mappe in 2D

---

mmm Avevo scritto un qualcosa che mi difendesse, ma dato il tipo di post, ho pensato che ? assolutamente una perdita di tempo rispondere.
Si perch? ? un ciclo infinito inutile che non va avanti e fa alterare i nervi.
Ti chiedo solo una cosa: mettiti in un angolino e rifletti sul perch? io mi sia sentito attaccato (e offeso) solamente da te e non da altri che mi hanno risposto...
Detto questo, forse si dovrebbe chiudere il topic e magari ridarmi quel mezzo account bloccato dal Moderatore...
...Gi? vero: l'infantile sono io...

---