Pintado de mapa isométrico

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

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!

Pues es solo un cuadrado con algo de Skew ¿No crees?

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

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 :/

Creo que ya veo el modo de hacerlo, me declararé un vector auxiliar con todo el contenido del mapa y lo reordenaré posteriormente.
Gracias

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

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!

¿Alguna sugerencia?!?!?!? Por favor!

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

Saludos, Hernán . -

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

emedmaria escribió:

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