Donc, je fais un jeu de rôle HTML5 juste pour le fun. La carte est une <canvas>
(largeur de 512px, hauteur de 352px | 16 tuiles, 11 tuiles de haut en bas). Je veux savoir s’il existe un moyen plus efficace de peindre le <canvas>
.
Voici comment je l'ai maintenant.
Comment les tuiles sont chargées et peintes sur la carte
La carte est peinte par des carreaux (32x32) utilisant la Image()
pièce. Les fichiers image sont chargés par une simple for
boucle et placés dans un tableau appelé tiles[]
à être peint en utilisant drawImage()
.
D'abord, nous chargeons les carreaux ...
et voici comment cela se fait:
// 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);
}
Naturellement, lorsqu'un joueur commence une partie, il charge la carte qu'il a laissée en dernier. Mais pour ici, c'est une carte entièrement en herbe.
Pour le moment, les cartes utilisent des tableaux 2D. Voici un exemple de carte.
[[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]];
Je reçois différentes cartes en utilisant une if
structure simple . Une fois que le tableau 2d ci-dessus est return
, le nombre correspondant dans chaque tableau sera peint en fonction de Image()
stocké à l'intérieur tile[]
. Ensuite, drawImage()
se produira et peindra selon le x
et y
et le temps par 32
peindre sur la bonne x-y
coordonnée.
Comment se produit le changement de carte multiple
Avec mon jeu, les cartes ont cinq choses à garder une trace de: currentID
, leftID
, rightID
, upID
et bottomID
.
- currentID: l'ID actuel de la carte sur laquelle vous vous trouvez.
- leftID: Quel ID
currentID
à charger lorsque vous quittez à gauche de la carte actuelle. - rightID: Quel ID
currentID
à charger lorsque vous quittez à droite de la carte actuelle. - downID: quel ID
currentID
à charger lorsque vous quittez en bas de la carte actuelle. - upID: quel identifiant
currentID
charger lorsque vous quittez en haut de la carte actuelle.
Quelque chose à noter: Si l' leftID
, rightID
, upID
ou bottomID
ne sont pas spécifiques, ce qui signifie qu'ils sont 0
. Cela signifie qu'ils ne peuvent pas quitter ce côté de la carte. C'est simplement un blocus invisible.
Ainsi, une fois qu'une personne quitte un côté de la carte, en fonction de l'endroit où elle est sortie ... par exemple, si elle est sortie en bas, bottomID
le numéro de la map
charge sera chargé et sera ainsi peint sur la carte.
Voici un fichier .GIF représentatif pour vous aider à mieux visualiser:
Comme vous pouvez le constater, tôt ou tard, avec de nombreuses cartes, je traiterai de nombreux identifiants. Et cela peut éventuellement devenir un peu déroutant et mouvementé.
L’avantage évident est de charger 176 mosaïques à la fois, d’actualiser une petite toile 512x352 et de gérer une carte à la fois. L'inconvénient est que les identifiants MAP, lorsqu'ils traitent de nombreuses cartes, peuvent parfois être confus.
Ma question
- Est-ce un moyen efficace de stocker des cartes (compte tenu de l'utilisation de mosaïques) ou existe-t-il un meilleur moyen de gérer les cartes?
Je pensais dans les lignes d'une carte géante. La taille de la carte est grande et ne contient qu'un tableau 2D. La fenêtre d'affichage, cependant, est toujours de 512x352 pixels.
Voici un autre .gif que j'ai créé (pour cette question) pour aider à visualiser:
Désolé si vous ne comprenez pas mon anglais. S'il vous plaît demander à tout ce que vous avez du mal à comprendre. Si tout va bien, j'ai été clair. Merci.