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.3 Formato del mapa.

Formato del mapa

Almacenaremos los mapas de nuestro juego en el formato más idóneo que flash admite: arrays. Si no sabes lo que es un array, abre la ayuda de Flash y lee primero un poco acerca de ellos para poder continuar.

Arrays bi-dimensionales (matrices).

Necesitamos una matriz (array de 2 dimensiones) para definir un mapa. Me hace gracia el comentario que ha hecho el autor aquí. "No es nada de otra dimensión" :) .
Lo cierto es que esta implementación en falsh es lo que se conoce como un Array de Arrays ! Hace algún tiempo redactamos otro tutorial aquí en redribera, que explica el uso de matrices con Flash Tutorial de matrices con ActionScript. Si esto te confunde, echa un vistazo a estos ejemplos:

Normal, la forma mas sencilla de declarar un Array.

myArray=["a", "b", "c", "d"];

Es sencillo, se puede consultar el valor del primer elemento mediante myArray[0] , cuyo valor es "a", el segundo elemento myArray[1] tiene el valor "b" y así sucesivamente.

Ahora, sinedo un poco astutos, que sucede sin en lugar de poner "a", "b" y "c" como valores del array, ponemos otros arrays en su lugar? Pues si, lo podemos hacer. Esta es la forma:

a=["a1", "a2", "a3"];
b=["b1", "b2", "b3"];
c=["c1", "c2", "c3"];
myArray=[a, b, c];

De este modo el valor del primer elmento de myArray, myArray[0] es a y a a su vez es el array ["a1", "a2", "a3"], el segundo elemento es ["b1", "b2", "b3"] y así sigue...
Ahora si escribimos, myVar=myArray[2]; entonces myVar se convierte en un array que adquiere los valores ["c1", "c2", "c3"].

Pero no hemos acabado, si ahora escribimos, myVar=myArray[2][0]; entonces myVar adquiere el valor del tercer elemento en myArray , oseasé "c1".
Un poco mas de práctica. myVar=myArray[0][1] adquiere el primer elemento de myArray ( a ) y dentro de este, el valor del segundo elemento ( "a2" ).
myVar=myArray[1][0] se corresponde con "b1".

Declaración del mapa

Lo primero, es declarar el array que especifica el mapa que captura la información de cada Tile.

myMap = [
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1]
];

Como se puede observar, nuestro mapa está compuesto por 6 filas y 8 columnas. Si nuestro heroe (el protagonista que manejamos), comienza en la esquina superior-izquierda, debiera moverse 8 pasos hacia la derecha y 6 pasos hacia abajo antes de salirse del mapa y caer en el espacio desconocido, que lo envuelve todo !.
Ahora mismo la curiosidad nos debe hacer preguntarnos, ¿Que significado tienen esos números diseminados en el array del mapa?. Bien, pues vamos a utilizar un poco de programación orientada a objetos, conicida por sus siglas en inglés OOP. ¿Pero eso son objetos?, pues si, pero no te asustes, que no es tan fiero el león como lo pintan !. Vamos a utilizarlos para crear los Tiles y para el manejo de nuestro juego. Al final, en la sección de enlaces de este tutorial, encontrarás algún enlace hacia tutoriales que hablan de la OOP. No obstante una busqueda en Google, arrojará cientos de resultados explicativos en Inglés y Español. Es importante que tengas en cuenta, que el código ActionScript utilizado en este tutorial hace referencia a la programación orientada a objetos para el lenguaje ActionScript 2.0. Existen importantes diferencias con el modelo de declaración de objetos con la última versión de ActionScript (la 3.0), por lo que este código probablemente (mejor dicho seguramente) no es compatible.
Lo cierto es que AS3, se acerca mas al modelo puro de OOP que su predecesor AS2, sin embargo AS2 todavía está lo suficientemente extendido para tenerlo en cuenta, y de hecho cuando se redactó este tutorial no existía AS3.
No obstante, ni con las últimas versiones de Flash CS3 y CS4 nos desaparece la posibilidad de crear películas basadas en AS2.

Lo primero que haremos, será declarar como objetos, algunos Tiles. Serán como plantillas mediante las cuales podremos instanciar los Tiles que visualizaremos en nuestro juego. Después recorreremos el Array mediante el uso de un bucle, y consultaremos todos los números existentes en cada posición.

Si por ejemplo,consultando el mapa, obtenemos el número 1, entonces crearemos un Tile desde la plantilla (objeto) declarado como Tile1. Entonces, una vez estemos jugando, nuestro programa, se deberá encargar de que cuando alcancemos dicho Tile, se chequeen las propiedades de ese Objeto Tile. Se pueden declarar muchas propiedades para un Tile. Muchos Tiles tan solo declaran 2 propiedades básicas, walkable ( se puede caminar ) y frame (fotograma).

walkable es una propiedad que indica si un personaje puede caminar o atravesar a traves de dicho Tile. Si se establece a true, indicaremos que se puede caminar por el, en caso contrario lo estableceremos a false. No utilizaremos el método hitTest porque hitTest es lento, además no es nada "cool" utilizarlo con juegos basados en Tiles.

frame es la propiedad que nos indica el fotograma dentro del movieClip de Tiles, que debemos mostrar para dicho Tile. Se utiliza cuando añadimos Tiles en pantalla. Como utilizaremos el mismo movieClip de Tiles para almacenar todos los Tiles diferentes a utilizar, cuando realicemos un "attach", añadamos el clip a la escena, por defecto esta se mostrará en el fotograma 1, lo cual deberemos cambiar si procede, según lo indicado por la propiedad frame. Veremos mas acerca de esto cuando lleguemos a los apartados de Tiles.

Procediendo de esta forma, al declarar un Tile de la siguiente forma:

Tile1= function () {};
Tile1.prototype.walkable=false;
Tile1.prototype.frame=2;

conseguiremos objetos similares cada vez que obtengamos un "1" en el array del mapa (Tile1). Además sabremos que no se puede caminar sobre dicho Tile (walkable=false), y que la imagen que se debe mostrar en pantalla es la contenida en el fotograma 2.

continuamos con mas acerca de los mapas.....

« Anterior
Indice
Siguiente »