Entonces, estoy haciendo un juego de rol de HTML5 solo por diversión. El mapa es un<canvas> (512 píxeles de ancho, 352 píxeles de altura | 16 azulejos a través, 11 azulejos de arriba a abajo). Quiero saber si hay una manera más eficiente de pintar el<canvas>.

Así es como lo tengo ahora mismo:

Cómo se cargan y pintan los azulejos en el mapa

El mapa está siendo pintado por azulejos (32x32) usando elImage() trozo. Los archivos de imagen se cargan a través de un simplefor bucle y poner en una matriz llamadatiles[] para ser pintado en el usodrawImage().

Primero, cargamos los azulejos ...

Y aquí está cómo se está haciendo:

// SET UP THE & DRAW THE MAP TILES
tiles = [];
var loadedImagesCount = 0;
for (x = 0; x <= NUM_OF_TILES; x++) {
  var imageObj = new Image(); // new instance for each image
  imageObj.src = "js/tiles/t" + x + ".png";
  imageObj.onload = function () {
    console.log("Added tile ... " + loadedImagesCount);
    loadedImagesCount++;
    if (loadedImagesCount == NUM_OF_TILES) {
      // Onces all tiles are loaded ...
      // We paint the map
      for (y = 0; y <= 15; y++) {
        for (x = 0; x <= 10; x++) {
          theX = x * 32;
          theY = y * 32;
          context.drawImage(tiles[5], theY, theX, 32, 32);
        }
      }
    }
  };
  tiles.push(imageObj);
}

Naturalmente, cuando un jugador comienza un juego, carga el mapa que dejó por última vez. Pero por aquí, es un mapa de todo el pasto.

En este momento, los mapas utilizan matrices 2D. Aquí hay un mapa de ejemplo.

[[4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 1, 1, 1, 1], 
[1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 13, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 13, 11, 11, 11, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 1, 1, 1, 1, 1, 1, 1, 13, 13, 13, 13, 13, 1], 
[1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1, 1, 1]];

Obtengo diferentes mapas utilizando un simpleif estructura. Una vez que la matriz 2d de arriba esreturn, el número correspondiente en cada conjunto se pintará de acuerdo conImage() almacenado en el interiortile[]. EntoncesdrawImage() ocurrirá y pintará de acuerdo a lax yy y lo multiplica por32 pintar en el correctox-y coordinar.

Cómo se produce el cambio de múltiples mapas

Con mi juego, los mapas tienen cinco cosas para realizar un seguimiento de:currentID, leftID, rightID, upIDybottomID.

ID actual: La ID actual del mapa en el que se encuentra.leftID: Qué ID decurrentID para cargar cuando salga a la izquierda del mapa actual.rightID: Qué ID decurrentID para cargar cuando salga a la derecha del mapa actual.downID: Qué ID decurrentID para cargar al salir en la parte inferior del mapa actual.upID: Qué ID decurrentID para cargar al salir en la parte superior del mapa actual.

Algo a tener en cuenta: si algunoleftID, rightID, upIDobottomID NO son específicos, eso significa que son una0. Eso significa que no pueden dejar ese lado del mapa. Es meramente un bloqueo invisible.

Entonces, una vez que una persona sale de un lado del mapa, dependiendo de dónde salió ... por ejemplo, si salió en la parte inferior,bottomID será el número de lamap Cargar y así pintarse en el mapa.

Aquí hay un .GIF representativo para ayudarte a visualizar mejor:

Como puede ver, tarde o temprano, con muchos mapas que tratarémuchos IDs. Y eso puede llegar a ser un poco confuso y agitado.

Las ventajas obvias es que carga 176 mosaicos a la vez, actualiza un pequeño lienzo de 512x352 y maneja un mapa a la vez. El problema es que las identificaciones de MAP, cuando se trata de muchos mapas, pueden resultar confusas a veces.

Mi pregunta¿Es esta una forma eficiente de almacenar mapas (dado el uso de mosaicos), o hay una mejor manera de manejar mapas?

Estaba pensando en las líneas de un mapa gigante. El tamaño del mapa es grande y es todo un arreglo 2D. La ventana gráfica, sin embargo, sigue siendo 512x352 píxeles.

Aquí hay otro .gif que hice (para esta pregunta) para ayudar a visualizar:

Lo siento si no puedes entender mi inglés. Por favor, pregunte cualquier cosa que tenga problemas para entender. Con suerte, lo dejé claro. Gracias.