Cómo crear azulejos en su juego html5

Un mundo basado en la baldosa es una técnica utilizada en juegos HTML5 para proporcionar fondos flexibles interesantes sin grandes costes de memoria. La idea básica es tomar una serie de pequeñas imágenes y utilizarlas en combinación para construir una imagen de fondo completa.

Normalmente, se va a construir un objeto de baldosas, que contiene una serie de imágenes pequeñas (32 x 32 píxeles). Cada objeto del azulejo puede mostrar cualquiera de las imágenes en orden. Este esquema tiene una serie de ventajas interesantes:

• Los requisitos de memoria pueden ser muy pequeñas. Cada imagen se carga en la memoria sólo una vez, por lo que puede crear un mundo muy grande con una pequeña huella de memoria.

• Puede utilizar muchos azulejos diferentes. Se puede construir un mundo extremadamente complejo con cualquiera de los bellos juegos de fichas se puede descargar desde sitios como OpenGameArt.org.

  Video: Como hacer un juego de pong en javascript Html5 y Canvas

• El mapa es dinámico. La imagen que aparece en cada ficha se puede modificar en tiempo de ejecución.

• Las baldosas pueden tener efectos de juego. Puede utilizar los azulejos para crear situaciones tácticas interesantes, como el agua que no puede ser cruzado o montañas que le dan una ventaja a un defensor.

• Los mapas son simplemente conjuntos de números enteros. Para almacenar un mapa basado en baldosas, que no es necesario para almacenar los azulejos en absoluto. En su lugar, sólo tiene que mantener un registro de los estados de baldosas.

• Los mapas pueden ser mucho más grande que la pantalla. Un mapa del azulejo puede ser cualquier matriz bidimensional de enteros.

• Desplazamiento de un conjunto de baldosas es simple. Es fácil de hacer grandes mundos de desplazamiento con un sistema de baldosas, ya que la pantalla está separada de los datos. Los azulejos mismos rara vez se mueven.

• Los azulejos son adecuados para múltiples tipos de juego. Los azulejos se utilizan con frecuencia para los juegos de rol, así como juegos de mesa, juegos tácticos, y los juegos de plataformas de desplazamiento lateral.

  Video: 01-. Crear un Juego HTML5 con GameMaker Studio.1

Cómo crear un objeto del azulejo

los Azulejo objeto es la base de mapas basados ​​en baldosas. Aquí está el código para un simple prototipo de baldosas:

 var GRASS = 0-var NUMSTATES agua sucia = 1-var = 2-var = 3-función Tile () {tTile = new Sprite (escena, "grass.jpg", 32, 32) -tTile.setSpeed ​​(0) -tTile.state = GRASS-tTile.images = new Array ("grass.jpg", "dirt.jpg", "water.jpg") -tTile.row = 0-tTile.col = 0-tTile.setState = función (estado) {this.state = estado-this.setImage (this.images [this.state]) -} // setStatetTile.getRow final = function () {return this.row-} // fin getRowtTile.getCol = function () {return this.col-} // fin getCol-tTile.getState = function () {return this.state-} // fin getStatetTile.checkMouse = function () {if (this.isClicked ()) {newState = this.state-newState ++ - si (newState gt; = NUMSTATES) {newState = 0-} // fin ifthis.setState (newState) -} // fin if} // fin ifreturn tTile-} // Tile constructor final

La parte más significativa de una baldosa es su naturaleza de múltiples estados. Tiene múltiples estados. Cada estado muestra una imagen diferente. Aquí es cómo se escribe:

1. Prepare sus imágenes.

   Las partes más visibles del sistema basado en baldosas son las diversas imágenes. Construir u obtener (con los permisos necesarios, por supuesto) algunos azulejos se pueden utilizar.

2. Construir constantes para los estados.

   La forma más fácil de trabajar con los estados es asignar constantes para ellos. Constantes tienen la ventaja de ser fácilmente legible por los seres humanos y los números enteros sencillos a la computadora.

3. Construir un sprite estándar.

   Video: Crear juego Sopa de letras - Html5, web (Juego Nº 13 -Intermedio y muy sencillo)

   El azulejo sigue siendo esencialmente un sprite. No suelen moverse, por lo que puede ajustar la velocidad a 0. Utilice cualquiera de las imágenes de sprite que desea como valor predeterminado.

4. Asignar un estado predeterminado.

   los estado la propiedad es el aspecto más importante de una baldosa. Indica que establecen la baldosa está mostrando actualmente. los estado valor debe ser siempre una de las constantes del estado.

5. Crear un conjunto de imágenes.

   Cada mosaico tendrá acceso a todas las imágenes posibles. Guárdelos en una matriz. Asegúrese de que las líneas de la orden matriz de arriba con los valores constantes.

6. Establecer una fila y columna.

   Los azulejos se colocan generalmente en una rejilla de dos dimensiones, lo que puede ser muy útil para realizar un seguimiento de fila y columna de la baldosa actual.

7. Agrega un setstate () método.

   Este método le permite cambiar fácilmente una baldosa a cualquiera de los valores de estado. Utilizar una constante para asegurar el estado es reconocido por sus azulejos. los estado la propiedad se modifica para reflejar el estado actual y la imagen también se cambia, por lo que la imagen correcta se mostrará en la próxima actualización.

8. Proporcionar técnicas de recuperación de datos.

   Estas funciones devuelven la fila, columna, y el estado actual de la baldosa.

9. Permitir a un comportamiento de edición.

   los checkMouse () el método determina si el azulejo se ha hecho clic. Si es así, se incrementa el estado y se muestra el nuevo estado.

¿Cómo construir un mapa de juego de los azulejos

Cada mosaico es una herramienta poderosa, pero el poder real de la estructura a base de azulejo es cómo se combinan las baldosas para crear un mapa completo. los juego de fichas es una matriz de dos dimensiones de los objetos de baldosas. Como la mayoría de las matrices de dos dimensiones, la cual es normalmente administrado por un par de bucles anidados. Aquí está el código para la creación de la juego de fichas:

 setupTiles de función () {tileset = new Array (filas) -para (fila = 0- fila lt; fila ROWS- ++) {TROW = new Array (COLS) -para (col = 0- col lt; col COLS- ++) {TROW [col] = azulejo nuevo () - xpos = 16 + (32 * col) -yPos = 16 + (32 * fila) -tRow [col] .setPosition (xPos, ypos) -tRow [col ] .row = fila-TROW [col] .col = COL-} // fin col para looptileset [fila] = tRow-} // fin de fila para loop-} // setupTiles finales

Hay sólo unos pocos puntos a tener en cuenta aquí:

• El conjunto de baldosas es una matriz. Cada miembro de la juego de fichas array es en realidad una fila. Construir una matriz de longitud FILAS.

• Paso a través de cada fila. Utilizar un estándar para bucle al paso a través de todas las filas.

• Cada fila es una matriz de longitud COLS. Una matriz de dos dimensiones es en realidad una matriz de matrices. Hacer una matriz de longitud COLS por cada fila.

• Paso a través de las columnas. Hacer una para bucle que pasa una vez por columna. Ahora tiene dos variables de conteo (fila y columna), Que juntos describen la posición de cada baldosa en la estructura de dos dimensiones.

• Crear un nuevo mosaico. Sólo tiene que utilizar el constructor del azulejo para construir una nueva ficha.

• Establecer la posición de la baldosa. Puede multiplicar la fila y columna por la anchura y la altura de la célula para determinar una colocación aproximada.

• Asignar los datos de fila y columna para el sprite. Basta con copiar el fila y columna datos a las propiedades del sprite.