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.30 Tiles hexagonales.

No solo podemos utilizar Tiles en forma cuadrada para crear mapas de nuestros juegos. Puede utilizar otro tipo de formas, por ejemplo triangulos. En este capítulo, vamos a ver como utilizar tiles en forma hexagonal. Las rejillas de tipo hexagonal son ampliamente utilizadas en juegos estrategicos de tablero (strategic board games), entre otras cosas porque permite 3 direcciones de movimiento manteniendo la distancia entre Tiles igual para cualquiera de estas direcciones. El movimiento en diagonal para juegos basados en Tiles cuadrados, no es buena idea, ya que la distancia entre Tiles a traves de la diagonal, es superior a las distancias en recto horizontal/vertical.

Un hexagono regular tiene seis lados y tiene este aspecto:

La variables importantes a tener en cuenta aquí son la altura (height) y el tamaño del lado (size), que utilizaremos para colocar los Tiles adecuadamente en la escena. Veamos como deben ser ubicados los Tiles en la escena, fijesé en la imagen:

De forma vertical, cada Tile contiguo se coloca en incrementos de "height".

tile3._y=tile2._y+h;

Además, en una misma fila, cada dos elementos se desplaza la altura en la mitad de "height". Podemos utilizar el operador de "modulo" para detectar los cambios en la fila. x%2 devolverá 0 si x es par (columnas A,C y E) y 1 si es impar (columnas B,D y F). Así que la ecuación final para encontrar la coordenada y es:

tile._y=y*h+(x%2)*h/2;

Horizontalmente cada Tile se ubica correctamente por el valor:

tileC._x=tileB._x+s*1.5;

Obviamente necesitamos encontrar de alguna forma el valor de size para ubicar los Tiles hexagonales. Size se puede encontrar a partir de height así:

s=h/cos(30)/2

y la ecuación final queda así:

s=h/Math.cos(30*Math.PI/180)/2;
tile._x=x*s*1.5;
tile._y=y*h+(x%2)*h/2;

Algunas veces, necesitamos calcular x e y a partir de las coordenadas de pantalla, por ejemplo para averiguar en que Tile está el cursor del ratón:

x=_x/s/1.5;
y=(_y-(x%2)*h/2)/h;

Aquí tiene una película de ejemplo, donde se han ubicado Tiles hexagonales en panatalla para hecer un mapa simple, y que además devuelve las coordenadas del Tile donde el ratón está ubicado.




Los vecinos de un Tile Hexagonal!

Cuando utilizabamos Tiles cuadrados, era muy fácil encontrar a sus vecinos. El Tile a la izquierda era x-1, el de la derecha x+1, abajo y+1 y arriba y-1. Con los Tiles hexagonales, la forma de encontrar a los vecinos depende de la columna donde el Tile esté ubicado. Por supuesto el Tile superior e inferior son fáciles, y-1 e y+1. Ahora los Tiles arriba-izquierda y abajo-izquierda, tienen x-1 y los Tiles arriba-derecha y abajo-derecha son x+1. Pero debemos comprobar los que pertenecen a la misma fila.

Si los Tiles actuales, están en las columnas B,D y F entonces sus vecinos son:

ul.y=y;
dl.y=y+1;
ur.y=y;
dr.y=y+1;

Si los Tiles actuales son de las columnas A,C o E entonces sus vecinos son:

ul.y=y-1;
dl.y=y;
ur.y=y-1;
dr.y=y;

Al igual que anteriormente, puede utilizar el "modulo 2" para evitar escribir código diferente para 2 columnas:

//down
dx=x;
dy=y+1;
//up
ux=x;
uy=y-1;
//up-left
col=x%2;
col1=(x+1)%2;
ulx=x-1;
uly=y-col1;
//down left
dlx=x-1;
dly=y+col;
//up-rigth
urx=x+1;
ury=y-col1;
//down-right
drx=x+1;
dry=y+col;

Descargue el código de ejemplo para observar como está implementado.

Con este tutorial hemos finalizado todo el temario. En el siguiente capítulo haremos una breve conclusión de lo que ha sido este extenso tutorial.

« Anterior
Indice
Siguiente »