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.26 Fondo rotatorio.

En el capítulo anterior, el heroe obtuvo la habilidad de girar y caminar en cualquier ángulo. Seguramente nuestro heroe nos estrá muy agradecido por ello ¿Quien no lo estaría?. Pero también podemos llegar un poco mas allá consiguiendo que sea el fondo el que gire y además que realice scrolling. Así que de forma análoga, hacemos que el fondo gire cuando presionamos las teclas izquierda y derecha y el scroll se realiza al pulsar las teclas arriba y abajo. Fijesé en la película flash de ejemplo:



Si realiza una publicación previa de la película (publish preview), observará como todo el mapa está dibujado en la escena, aunque solo una pequeña porción es visible en todo momento. Así que tenga cuidado cuando experimente con mapas enormes con áreas de visualización grandes; posiblemente su juego sea demasiado lento para jugarlo. No olvide que cada Tile en Flash tiene que dibujarse/moverse/rotarse. Es cierto que en los últimos tiempos los ordenadores personales (donde se presupone se jugarán sus juegos) tienen una eneorme capacidad de cómputo con arquitecturas de procesador avanzadas y muchos GHz de velocidad de CPU, sin embargo siguen existiendo muchos PC sin capacidades de calculo tan grandes. Así que intente llegar a un termino medio en el consumo de recursos de sus juegos.

Sigamos !
Lo primero que necesitamos es girar los Tiles. Disponemos del movieClip "tiles" que contiene todos los Tiles de mapa dibujados, así que quizás piense que con aplicar una rotación a este movieClip es suficiente para conseguir nuestro objetivo, ¡FALSO! Este mundo es muy injusto a veces, pero es así !... El problema reside en que todos los movieClips en Flash se rotan tomando como eje de rotación el punto de referencia (la famosa cruz). Nuestro movieClip de Tiles "tiles", tiene este punto de referencia en la esquina superior izquierda. A no ser que usted desee que el fondo gire sobre el eje situado en la esquina superior izquierda (no he visto nunca un juego a si, pero para gustos...), necesitará añadir un nuevo movieClip contenedor. Pondremos el movieClip "tiles" dentro de este nuevo movieClip con el punto de referencia donde deseemos y así no debemos preocuparnos mas de que el fondo gire sobre la esquina superior izquierda.

Al principio de la función buildMap añada este código:

_root.attachMovie("empty", "rotate_tiles", 1);
_root.rotate_tiles._x=120;
_root.rotate_tiles._y=140;
_root.rotate_tiles.attachMovie("empty", "tiles", 1);
game.clip = _root.rotate_tiles.tiles;

El movieClip "rotate_tiles" es el que giraremos realmente. La componente x del eje la situamos en el centro de la escena y la componente y la he situado algo mas pegada a la zona inferior de la escena, de ese modo el área visible es superior hacia donde está encarado el heroe, y algo menos a sus espaldas.

Como tenemos que desplazar el fondo (hacer scrolling), nuestro heroe permanecerá en el mismo lugar, pero el fondo (el movieClip "game.clip"), se mueve en dirección opuesta. Así que también debemos especificar su ubicación en la función buildMap. Añada a la función buildMap estas líneas:

game.clip._x = -(char.xtile*game.tileW)-game.tileW/2;
game.clip._y = -(char.ytile*game.tileH)-game.tileH/2;

(char.xtile*game.tileW)-game.tileW/2 , es donde se situa al heroe en la escena y el movieClip "tiles" (el contenedor de tiles, el fondo!), se mueve en la misma cantidad calculada en el camino completamente opuesto (así que se pone en negativo).

También necesitamos añadir 2 líneas al final de la función moveChar, para hacer el scroll del fondo una vez se haya movido al heroe:

game.clip._x = game.centerx-ob.x;
game.clip._y = game.centery-ob.y;

Y ahora para actualizar la rotación actual del fondo, simplemente añadimos una línea para girar el movieClip contenedor nuevo que creamos (con el eje de giro centrado), en la dirección correcta. Como hemos declarado "game.clip" dentro del nuevo movieClip, podemos acceder a aquel a traves de la propiedad _parent de "game.clip":

if (Key.isDown(Key.RIGHT)) {
  game.clip._parent._rotation -=5;
  ob.clip._rotation +=5;
} else if (Key.isDown(Key.LEFT)) {
  game.clip._parent._rotation +=5;
  ob.clip._rotation -=5;
}

Un último apunte: puede ser que al girar el fondo los Tiles dejen una línea de separación fea tras el nuevo renderizado entre ellos:

Esto se puede solucionar de incrementando en un pixel el tamaño de los Tiles. En nuestro ejemplo los Tiles son insertados con una separación de 30px entre si, pero el tamaño actual declarado es de 31px.

Y aquí dejamos el movimiento girando el fondo. Otra herramienta mas que puede ser que sus juegos requieran.

En el siguiente capítulo abordaremos el trazado de rutas o "pathfinding".

« Anterior
Indice
Siguiente »