Robię więc HTML5 RPG tylko dla zabawy. Mapa jest<canvas> (Szerokość 512 pikseli, wysokość 352 pikseli | 16 płytek w poprzek, 11 płytek od góry do dołu). Chcę wiedzieć, czy istnieje skuteczniejszy sposób na malowanie<canvas>.

Oto jak mam to teraz:

W jaki sposób płytki są ładowane i malowane na mapie

Mapa jest malowana kafelkami (32x32) za pomocąImage() kawałek. Pliki obrazów są ładowane za pomocą prostegofor zapętlić i umieścić w tablicy o nazwietiles[] być MALOWANYM przy użyciudrawImage().

Najpierw ładujemy płytki ...

a oto jak to się robi:

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

Naturalnie, gdy gracz rozpoczyna grę, ładuje ostatnio przerwaną mapę. Ale tutaj jest to mapa całej trawy.

Obecnie mapy używają tablic 2D. Oto przykładowa mapa.

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

Dostaję różne mapy za pomocą prostegoif Struktura. Gdy powyższa tablica 2d jestreturn, odpowiedni numer w każdej tablicy zostanie pomalowany zgodnie zImage() przechowywane w środkutile[]. NastępniedrawImage() nastąpi i pomaluje zgodnie zx iy i razy przez32 malować na właściwymx-y koordynować.

Jak zachodzi wiele przełączeń map

W mojej grze mapy mają pięć rzeczy do śledzenia:currentID, leftID, rightID, upID, ibottomID.

currentID: Bieżący identyfikator mapy, na której się znajdujesz.leftID: Jaki IDcurrentID ładować po wyjściu z lewej strony bieżącej mapy.rightID: Jaki IDcurrentID ładować, gdy wyjdziesz po prawej stronie bieżącej mapy.downID: Jaki IDcurrentID ładować po wyjściu na dole bieżącej mapy.upID: Jaki IDcurrentID ładować po wyjściu z górnej części aktualnej mapy.

Coś do odnotowania: jeśli takleftID, rightID, upIDlubbottomID NIE są specyficzne, co oznacza, że ​​są0. Oznacza to, że nie mogą opuścić tej strony mapy. To tylko niewidzialna blokada.

Tak więc, gdy osoba wychodzi z boku mapy, w zależności od tego, gdzie wyszła ... na przykład, jeśli opuściły dno,bottomID będzie numermap ładować, a więc być pomalowanym na mapie.

Oto reprezentacyjny plik .GIF, który pomoże Ci lepiej wizualizować:

Jak widać, prędzej czy później będę miał do czynienia z wieloma mapamiwiele ID. I to może być trochę mylące i gorączkowe.

Oczywiste zalety to to, że ładuje po 176 płytek na raz, odświeża małe płótno 512x352 i obsługuje jedną mapę naraz. Problem polega na tym, że identyfikatory MAP, gdy mamy do czynienia z wieloma mapami, mogą czasami być mylące.

Moje pytanieCzy jest to skuteczny sposób na przechowywanie map (biorąc pod uwagę użycie płytek), czy jest lepszy sposób na obsługę map?

Myślałem wzdłuż linii gigantycznej mapy. Rozmiar mapy jest duży i jest to jedna tablica 2D. Jednak rzutnia nadal ma rozmiar 512x352 pikseli.

Oto kolejny plik .gif, który zrobiłem (na to pytanie), aby pomóc w wizualizacji:

Przepraszam, jeśli nie rozumiesz mojego angielskiego. Zapytaj o wszystko, co masz problem ze zrozumieniem. Mam nadzieję, że wyjaśniłem to. Dzięki.