Este tutorial es una traducción y adaptación al español por Julio Laguna, Autorizada por el autor , del tutorial de TONYPA Tile Based Games sujeta a una licencia Creative Commons.
Creative Commons License

Juegos basados en tiles para Flash.
por Julio Laguna (Traducción) - Originalmente escrito en Inglés por TONYPA

1 Juegos basados en "tiles" para Flash.

1.24 Scrolling en vista isométrica.

El scrolling en vista isométrica no difiere demasiado del scrolling en vista superior o inferior. Sin demasiada dificultad podemos adaptar el motor de scroll (capítulo 18), con las vistas isométricas (capítulo 21). Como resultado obtendremos scrolling en vista isométrica a partir de una vista en forma de diamante. Fijesé en el ejemplo resultante que mostramos:



Contaremos el movimiento del heroe exactamente igual a como lo haciamos con el scroll normal y del mismo modo moveremos los Tiles en dirección contraria cuando sea necesario. Cuando se hayan realizado todos los calculos y se hayan encontrado las posiciones correctas, las convertiremos a su correspondientes coordenadas en vista isométrica, tal y como hemos venido haciendo con anterioridad. No vamos a entrar en el detalle exacto del código para no hacer este capítulo mas complejo, ya que lo puede descargar del enlace bajo la película de ejemplo y observarlo detenidamente. La idea es explicar los conceptos necesarios antes de examinar dicho código y así sentar las bases teóricas de este sistema.

La vista en forma de diamante tiene un gran problema: tiene forma de diamante ! oops!. Está claro que los diamantes son los mejores amigos de las mujeres, y que entre tu y yo un diamante es para siempre, no tengo nada en contra de eso personalmente, solo que su monitor casi seguro que no tiene forma de diamante (si la tiene por favor envieme una foto!). Su juego deberá tener forma de rectangulo como su monitor. Ciertamente, podrá crear un montón mas Tiles para cubrir el área agujereada de la escena, mas un montón de Tiles fuera de la escena.

En la imagen de arriba no luce mal, pero será peor cuando su juego sea de dimensiones mas grandes que estos sencillos ejemplos. Muchos Tiles extras se comerán literalmente una gran cantidad de esos preciosos ciclos de CPU. Si su juegos en desarrollo no es mas que un juego pequeño similar a los de estos ejemplos, mas vale que no se estruje demasiado los sesos y es libre de implementar el método de scrolling isométrico simple. Para el resto de los comunes mortales y sus grandes juegos mas nos vale seguir las indicaciones siguientes.


Demoslé forma de rectangulo.

Podemos librarnos de todos esos Tiles extra con un poco mas de trabajo. La película que les muestro a continuación, no crea los Tiles del mismo modo que los ejemplos anteriores. Puede ver el movimiento de los Tiles detrás del marco gris.



El código que hay detrás de esta película de ejemplo, es algo tedioso y complejo, así que voy a tratar de expresar esta idea sin pasar por la revisión habitual de código que venimos haciendo. Descargue el fichero fla (el enlace está bajo la película de ejemplo), para llevar un mejor seguimiento y verificar como está hecho.

Aquí la idea básica, es rellenar el área visible con Tiles isométricos, y no tener mas Tiles que estos, salvo unos cuantos Tiles auxiliares extra, lo cual puede ver en la imagen de abajo.

Hay una fila extra de Tiles (marcada con puntos azules), y una columna extra (marcada con puntos rojos), para estar seguros de poder mover los Tiles y que estos rellenen el área visible sin huecos. Cuando nuestros Tiles se hayan movido lo suficiente a la derecha, cojemos la columna auxiliar y la movemos por completo al lado izquierdo tal como se puede ver en la imagen mas abajo. Procederemos del mismo modo con el movimiento y scroll hacia abajo y arriba.

Para lograr esta misión, debemos definir o inicializar un manojo de objetos para guardar información sobre estos Tiles. Cuando estemos construyendo el mapa, al principio, el Tile central (donde está el heroe), pasa a ser "t_0_0", sin importar en que Tile "real" esté el heroe.

if(y%2!=0){
  var noisox = x*game.tileW*2+game.tileW+ob.xiso;
}else{
  var noisox = x*game.tileW*2+ob.xiso;
}
var noisoy = y*game.tileW/2+ob.yiso;

La forma de posicionar los Tiles en horizontal para la vista isométrica es la mitad del ancho definido para los Tiles.

Lo siguiente es utilizar las formulas que aprendimos en el tutorial de movimiento con ratón en isométrico que encuentran que Tile en el espacio isométrico debe ser mostrado en esa posición.

var ytile = ((2*noisoy-noisox)/2);
var xtile = (noisox+ytile);
ytile = Math.round(ytile/game.tileW);
xtile = Math.round(xtile/game.tileW);

Continuamos del mismo modo a un sistema sin scroll isométrico, creamos un nuevo objeto isométrico a partir del mapa, encontramos su profundidad, etc... Pero como añadido, creamos un objeto noiso_??? , que contiene las relaciones entre entre objetos isométricos, normales y movieClips.

Cuando estamos moviendo la fila o la columna de Tiles sobre la escena con la función changeTile, utilizamos el mismo método: movemos el Tile a su nueva posición, buscamos el Tile que se debe mostrar ahí, creamos nuevos objetos y borramos los viejos.

Ahora queda evitar 2 problemas: Lo primero, es que como utilizamos otro movieClip para los Tiles pisables,para evitar problemas de profundidad (game.clip.back), podriamos encontrarnos que el nuevo Tile a poner tuviera que ser no pisable por ejemplo (o al revés), En este caso tenemos que eliminar el viejo movieClip, y añadir uno nuevo en "game.clip". Esto se controla guardando el nombre del clip de Tiles padre (_parent), con el objeto noiso_???? y comparandolo después con el nuevo, para saber si hay que añadir un Tile nuevo o renombrar el anterior. En el código de la función changeTile lo puede ver y quizás entenderlo mejor.

El segundo problema, es que a Flash no le gustan las profundidades (depth) con valor negativo. Aunque podemos ubicar los Tiles en profundidades con valor negativo, luego no seremos capaces de eliminarlos. Algunos de nuestros Tiles utilizando nuestro sitema, pueden acabar en profundidades negativas como -3456. Para evitar este problema, he añadido +100000 a todos los calculos de profundidad (no olvide al heroe también).

Descargue el fichero fla y observe mejor todo el código utilizado para una mejor comprensión de este tema.

Puede utilizar cualquiera de los dos métodos que vimos, este último es algo mas dificil de comprender, pero mucho mas óptimo que el scroll isométrico simple. La decisión depende de Usted.

Lo siguiente que veremos, un movimiento a partir de la rotación del heroe. Movimiento dirigido.

« Anterior
Indice
Siguiente »