Comunidad de diseño web y desarrollo en internet online

Pintado de mapa isométrico

Citar            
MensajeEscrito el 23 Dic 2010 05:32 pm
Hola,

Estoy tratando de hacer un mapa isométrico, he conseguido hacerlo sin tener en cuenta la profundidad pero ahora querria que el orden de pintado fuera ya el correcto para no preocuparme después por el z-index y tener que hacer un swap de los clips de cada celda.

La idea es dibujar en la primera iteración la celda 00 en la segunda la 10 y la 10, en la tercera la 02 11 20 , así sucesivamente hasta la dimensión del mapa. Sin un dibujo es dificil de explicar...Es como si el nº de filas fuera variable en cada iterción, es decir dibujo una celda, luego 2 luego 3...así hasta la dimensión del mapa y después de decrementa de nuevo a n-1 celdas, ...2, 1 celda y ya tendía el mapa pintado en el orden correcto. No sé que condición imponer a los bucles anidados para que los límites sean variables....

Agradezco cualquier aporte...

Por emedmaria

73 de clabLevel



 

chrome
Citar            
MensajeEscrito el 27 Dic 2010 10:23 am
Hola de nuevo,
adjunto una imagen para explicar mejor lo que pretendo: http://l4c.me/fotos/emedmaria/mapaisometrico
Los números en amarillo se corresponden a las coordenadas ij de la matriz del mapa y los números en rojo es el orden que quiero del pintado. No acabo de dar con los límites en los bucles anidados (for) para recorrer la matriz y pintar el mapa en este orden.

Cualquier ayuda es bienvenida :) Gracias!

Por emedmaria

73 de clabLevel



 

chrome
Citar            
MensajeEscrito el 27 Dic 2010 10:51 am
Pues es solo un cuadrado con algo de Skew ¿No crees? :D

Pero sino quieres realizar las traslaciones, te recomiendo usar la librería Flare 3d.

De lo contrario, podemos guiarte. Pero... ¿En que exactamente? No veo una pregunta concreta. Si quieres hacerlo de 0 (Es el camino que yo tomaría sino quiero implementar un mapa 3d), necesitamos más info para guiarte.

Saludos, Hernán . -

Por Hernán

BOFH

6148 de clabLevel

19 tutoriales
23 articulos

Genero:Masculino   REC Desarrollador de GAIA

Marketing & IT

chrome
Citar            
MensajeEscrito el 27 Dic 2010 11:10 am
Disculpad, igual he ido muy rápido... Lo estoy haciendo en AS3 y el mapa es en 2D, respecto al Skew que comentas no es un problema los tiles (con forma de rombo) ya me vienen dados. Tengo un MovieClip (SetTiles) global que contiene tantos movieclips (tile_1, tile_2....tile_n)como distintos tipos de tile tengo. Externamente cargo la información del mapa (una matriz con valores numéricos), dependiendo del valor visualizo un movieclip (tile_n) del MovieClip global. Pero ésto no es un problema sino el orden de pintado. Ahora tengo una función:

Código ActionScript :

   //FUNCTION:
   //--------Displays map on screen
   public function paintMap():void {
         
      var mapPositions:Array = new Array(); 
      mapHolder = new Sprite(); 
         
      for (var i:int = 0; i < size_x; i++) {
            
         mapPositions[i] = new Array();
            
         for (var j:int = 0; j < size_y; j++) {
               
         //Select suitable tile type-provisional calling getTile function
         //One tileSet-Mc in each array position
            mapPositions[i][j] = getTile(map[i][j]);
               
            //Add each tile to holderMap
            mapHolder.addChild(mapPositions[i][j]);
               
            //Isometric coordinates to screen coordenates
            mapPositions[i][j].x = (j - i) * tileWidth /2; 
            mapPositions[i][j].y = (j + i) * tileHeight /2; 
               
         }//end 'for'
            
      }//end 'for'

      //Center map
      mapHolder.x = (800 - tileWidth)/2;
      mapHolder.y = (600 - mapHolder.height) / 2;
         
      addChild(mapHolder); 
         
   }//end 'function'

Esta función muestra correctamente el mapa pero sigue el orden de pintado 00 01 02 03....0N 10 11 12 13...1N etc. Ahora no es un problema pero en un futuro sí y quería que el orden de pintado sea 00 01 10 02 11 20 03 12 21 30...etc
Es cambiar las condiciones del buble haciendolo variable pero no consigo dar con la solución :/

Por emedmaria

73 de clabLevel



 

chrome
Citar            
MensajeEscrito el 27 Dic 2010 12:22 pm
Creo que ya veo el modo de hacerlo, me declararé un vector auxiliar con todo el contenido del mapa y lo reordenaré posteriormente.
Gracias

Por emedmaria

73 de clabLevel



 

chrome
Citar            
MensajeEscrito el 27 Dic 2010 05:08 pm
Ok, dicho de paso, yo usaría Vector no Array, son mucho más rápidos.

De curioso...¿De que sirve re-ordenar el mapa según ese criterio? No veo un patrón útil en ordenarlo "desordenado".

Saludos, Hernán . -

Por Hernán

BOFH

6148 de clabLevel

19 tutoriales
23 articulos

Genero:Masculino   REC Desarrollador de GAIA

Marketing & IT

chrome
Citar            
MensajeEscrito el 27 Dic 2010 05:17 pm
Sobre estos tiles luego se colocarán objetos (es para un juego basado en tiles con vista isométrica) que pueden ocupar uno o más tiles...Si se dibujan en ese orden (junto su contenido) no nos hemos de preocupar por la profundidad (z-index), i.e. un objeto colocado en la casilla 00 no se superpondrá a uno colocado en el 11.

Pero a todo ésto he cantado victoria muy rápido, no doy con el algoritmo de ordenación del vector puesto que no depende de su contenido sino de las posiciones o valores del índice de la matriz (i, j). Ayuda, please! :)

Por emedmaria

73 de clabLevel



 

chrome
Citar            
MensajeEscrito el 27 Dic 2010 05:49 pm
¿Alguna sugerencia?!?!?!? Por favor!

Por emedmaria

73 de clabLevel



 

chrome
Citar            
MensajeEscrito el 27 Dic 2010 07:15 pm
Pues asignarles el valor según el esquema que quieras.

Veamos... La secuencia que tienes es:

Código :

1,2,3,4,5,6,7,8,9,10,11,12,13


Lo que quieres:

Código :

0,1,10,02,11,20,03,12,21,30


¿Verdad?

Pues si eso quieres, entonces tendríamos primero que desglozarlo en rows-cols:

Código :

Fila 1: 1
Fila 2: 2,3
Fila 3: 4,5,6
Fila 4: 7,8,9,10
Fila 5: 11,12,13
Fila 6: 14,15
Fila 7: 16


Eso básicamente son tus coordenadas, lo único que tienes que hacer es trasladarlas a tu plano usando una sencilla ecuación, según la posición en filas.

Un tip, según el dibujo pusiste, el patrón esta diferencia a 9 posiciones entre sí, por cada fila.

¿Eso quieres? Realmente se me hace difícil entender la aplicación final, ergo solo puedo guiarte por un camino.

Reitero... Si el problema es el dibujado del mapa isométrico, el problema es que esta mal encarado. Yo primero dibujaría los cuadraditos y luego asignaría la rotación en Ambos ejes y ya :-D

Saludos, Hernán . -

Por Hernán

BOFH

6148 de clabLevel

19 tutoriales
23 articulos

Genero:Masculino   REC Desarrollador de GAIA

Marketing & IT

chrome
Citar            
MensajeEscrito el 13 Ene 2015 06:53 pm
El proceso/algoritmo de "renderizado" de sprites/tiles de forma isométrica es un poco más complicado que lo explicado.
Lo explicado sirve como base de trabajo y para escenarios en donde "ningún sprite" está encima/debajo de otro (los sprites solo están delante o detrás pero al mismo nivel/altura). Para este caso el algoritmo es claro: seguir el orden de "pintado" +(Z-X).
¿Pero qué pasa cuando tengo elementos flotantes a un nivel/altura Y?

a-) Si el/los sprite/s van exactamente encima de otros sprites sin solapar/intersectar con ningún adyacente de él/ellos (en el eje Y), se puede utilizar el orden de pintado +(Z-X)-Y.

b-) Si el sprite "solapa/intersecta" a más de 1 sprite al mismo tiempo (en el eje Y) TENEMOS UN PROBLEMA: En qué orden los pintamos?. Esto ya necesita de un algoritmo de ordenación complejo para determinar el orden. Y no digamos cuando tengamos 30 sprites flotantes que hay que "integrar".

Yo, después de un largo análisis y un mucho sufrimiento conseguí implementar un algoritmo. Nunca habría imaginado la complejidad (sinceramente pensé que era más sencillo) de este "asunto" y que fui descubiriendo a medida que empecé el desarrollo de mi primer juego 2.5D en cocos2D-x.
Adelanto que un algoritmo de este tipo necesita, en primer instancia, de una "comparación" de "todos con todos" pero es posible hacer una serie de optimizaciones y reducir el proceso de cálculo muchísimo.

Un ejemplo (demo cocos2d-js) del resultado del algoritmo puede verse aquí:
https://www.youtube.com/watch?v=tU1uJYdxUY4
https://www.youtube.com/watch?v=tBwxX44c6eE

Por celtic.sadness

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Nov 2019 03:20 am

emedmaria escribió:

Hola,

Estoy tratando de hacer un mapa isométrico, he conseguido hacerlo sin tener en cuenta la profundidad pero ahora querria que el orden de pintado fuera ya el correcto para no preocuparme después por el z-index y tener que hacer un swap de los clips de cada celda.
Speed Test Scrabble Word Finder Solitaire
La idea es dibujar en la primera iteración la celda 00 en la segunda la 10 y la 10, en la tercera la 02 11 20 , así sucesivamente hasta la dimensión del mapa. Sin un dibujo es dificil de explicar...Es como si el nº de filas fuera variable en cada iterción, es decir dibujo una celda, luego 2 luego 3...así hasta la dimensión del mapa y después de decrementa de nuevo a n-1 celdas, ...2, 1 celda y ya tendía el mapa pintado en el orden correcto. No sé que condición imponer a los bucles anidados para que los límites sean variables....

Agradezco cualquier aporte...
me declararé un vector auxiliar con todo el contenido del mapa y lo reordenaré posteriormente.

Por tayeadil

4 de clabLevel



 

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.