Also mache ich ein HTML5-RPG nur zum Spaß. Die Map ist a<canvas> (512 Pixel Breite, 352 Pixel Höhe | 16 Kacheln, 11 Kacheln von oben nach unten). Ich möchte wissen, ob es eine effizientere Methode zum Malen gibt<canvas>.

So habe ich es gerade:

Wie Kacheln auf die Karte geladen und gemalt werden

Die Karte wird mit Hilfe der Kacheln (32x32) gezeichnetImage() Stück. Die Bilddateien werden über eine einfache geladenfor Schleife und in ein Array namens setzentiles[] gemalt werden mitdrawImage().

Zuerst laden wir die Fliesen ...

und so wird's gemacht:

// 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);
}

Wenn ein Spieler ein Spiel startet, lädt er natürlich die Karte, die er zuletzt verlassen hat. Aber für hier ist es eine reine Graskarte.

Derzeit verwenden die Karten 2D-Arrays. Hier ist eine Beispielkarte.

[[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]];

Ich bekomme verschiedene Karten mit einem einfachenif Struktur. Sobald das 2d-Array oben istreturnwird die entsprechende Nummer in jedem Array gemaltImage() drinnen aufbewahrttile[]. DanndrawImage() wird auftreten und nach dem malenx undy und mal so vorbei32 auf dem richtigen malenx-y Koordinate.

Wie mehrfache Kartenumschaltung erfolgt

Bei meinem Spiel müssen auf Karten fünf Dinge beachtet werden:currentID, leftID, rightID, upID, undbottomID.

currentID: Die aktuelle ID der Karte, auf der Sie sich befinden.leftID: Welche ID voncurrentID zu laden, wenn Sie auf der linken Seite der aktuellen Karte beenden.rightID: Welche ID voncurrentID zu laden, wenn Sie auf der rechten Seite der aktuellen Karte beenden.downID: Welche ID voncurrentID zu laden, wenn Sie am unteren Rand der aktuellen Karte beenden.upID: Welche ID voncurrentID zu laden, wenn Sie oben auf der aktuellen Karte beenden.

Etwas zu beachten: Wenn auch nichtleftID, rightID, upID, oderbottomID sind NICHT spezifisch, das heißt, sie sind a0. Das bedeutet, dass sie diese Seite der Karte nicht verlassen können. Es ist nur eine unsichtbare Blockade.

Sobald eine Person eine Seite der Karte verlässt, hängt es davon ab, wo sie sie verlassen hat.bottomID wird die Nummer dermap laden und damit auf die karte gemalt werden.

Hier ist ein gegenständliches .GIF, mit dem Sie sich besser vorstellen können:

Wie Sie sehen, werde ich mich früher oder später mit vielen Karten beschäftigenviele IDs. Und das kann möglicherweise etwas verwirrend und hektisch werden.

Die offensichtlichen Vorteile sind, dass 176 Kacheln gleichzeitig geladen, eine kleine 512x352-Zeichenfläche aktualisiert und jeweils eine Karte verarbeitet werden. Der Nachteil ist, dass die MAP-IDs beim Umgang mit vielen Maps manchmal verwirrend sein können.

Meine FrageIst dies eine effiziente Methode zum Speichern von Karten (bei Verwendung von Kacheln), oder gibt es eine bessere Methode zum Behandeln von Karten?

Ich dachte an eine riesige Karte. Die Karte ist groß und es ist alles ein 2D-Array. Das Ansichtsfenster hat jedoch immer noch eine Größe von 512 x 352 Pixel.

Hier ist eine weitere .gif-Datei, die ich (für diese Frage) erstellt habe, um sie zu visualisieren:

Entschuldigung, wenn Sie mein Englisch nicht verstehen können. Bitte fragen Sie alles, was Sie nicht verstehen können. Hoffentlich habe ich es klar gemacht. Vielen Dank.