Comment créer des tuiles dans votre jeu HTML5

Un monde basé tuile est une technique utilisée dans les jeux HTML5 pour fournir milieux flexibles intéressants sans d'énormes coûts de mémoire. L'idée de base est de prendre un certain nombre de petites images et de les utiliser en combinaison pour construire une image de fond complète.

Typiquement, vous allez construire un objet de tuile, qui contient un certain nombre de petites (32 x 32 pixels) des images. Chaque objet de la tuile peut afficher une des images sur commande. Ce système a un certain nombre d'avantages intéressants:

• Les besoins en mémoire peuvent être très petites. Chaque image se charge en mémoire une seule fois, de sorte que vous pouvez créer un monde très vaste avec une faible empreinte mémoire.

• Vous pouvez utiliser de nombreuses tuiles différentes. Vous pouvez construire un monde extrêmement complexe avec l'un des beaux ensembles de tuiles que vous pouvez télécharger à partir de sites comme OpenGameArt.org.

• La carte est dynamique. L'image affichée dans chaque tuile peut être modifié lors de l'exécution.

• Les carreaux peuvent avoir des effets de gameplay. Vous pouvez utiliser des tuiles pour créer des situations tactiques intéressantes, comme de l'eau qui ne peut être franchi ou les montagnes qui donnent un avantage à un défenseur.

• Les cartes sont simplement des tableaux de nombres entiers. Pour stocker une carte basée tuiles, vous ne devez pas stocker les tuiles du tout. Au lieu de cela, vous gardez une trace de tout simplement les états de tuiles.

• Les cartes peuvent être beaucoup plus grande que l'écran. Une carte de la tuile peut être tout tableau à deux dimensions d'entiers.

• Défilement d'un tileset est simple. Il est facile de faire de grands mondes de défilement avec un système de tuiles, car l'affichage est séparé des données. Les carreaux eux-mêmes se déplacent rarement.

• Les carreaux sont adaptées aux types de jeu multiples. Les tuiles sont fréquemment utilisés pour les jeux de rôle, ainsi que des jeux de société, jeux tactiques, et les jeux de plateforme à défilement horizontal.

Comment créer un objet Tile

La Tuile objet est la base de cartes à base de tuiles. Voici le code pour un prototype de dalle simple:

 var = 0 GRASS-var NUMSTATES EAU DIRT = 1-var = 2-var = 3-Tile fonction () {tTile = new Sprite (scène, "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 = function ( Etat) {this.state = état-this.setImage (this.images [this.state]) -} // fin setStatetTile.getRow = function () {return this.row-} // getRowtTile.getCol final = function ( ) {return this.col-} // getCol-tTile.getState fin = function () {return this.state-} // fin getStatetTile.checkMouse = function () {if (this.isClicked ()) {= ce newState .state-newState ++ - si (newState> = NUMSTATES) {newState = 0-} // fin ifthis.setState (newState) -} // fin si} // fin ifreturn tTile-} // constructeur de tuiles de fin

La partie la plus importante d'une tuile est sa nature multi-état. Il a plusieurs états. Chaque Etat affiche une image différente. Voici comment l'écrire:

1. 
   
   
   
   

   Préparez vos images.

   Les parties les plus visibles du système à base de tuiles sont les différentes images. Construire ou obtenir (avec les autorisations nécessaires, bien sûr) des carreaux que vous pouvez utiliser.

2. Construire des constantes pour les Etats.

   La meilleure façon de travailler avec les États consiste à attribuer des constantes pour eux. Constantes ont l'avantage d'être facilement lisible par les humains et les nombres entiers simples à l'ordinateur.

3. Construire un sprite standard.

   La tuile est encore essentiellement un sprite. Il ne bouge pas généralement, de sorte que vous pouvez régler la vitesse à 0. Utilisez l'une des images de sprite que vous voulez que la valeur par défaut.

4. Attribuer un état par défaut.

   La état la propriété est l'aspect le plus important d'une tuile. Il indique quel état la dalle affiche actuellement. La état valeur doit toujours être l'une des constantes de l'Etat.

5. Créer un réseau d'images.

   Chaque tuile aura accès à toutes les images possibles. Rangez-les dans un tableau. Assurez-vous que les lignes de l'ordre du tableau jusqu'à des valeurs constantes.

6. Définir une ligne et colonne.

   Les tuiles sont généralement placés dans une grille bidimensionnelle, de sorte qu'il peut être très utile pour suivre la ligne et la colonne de la tuile courante.

7. Ajouter un setState () Procédé.

   Cette méthode vous permet de modifier facilement une tuile à l'une des valeurs d'état. Utilisez une constante pour assurer l'état est reconnu par vos tuiles. La état propriété est modifiée afin de refléter l'état actuel, et l'image est également modifiée, afin que l'image correcte affichera sur la prochaine mise à jour.

8. Fournir des techniques d'extraction de données.

   Ces fonctions renvoient la ligne, colonne, et l'état actuel de la tuile.

9. Autoriser un comportement d'édition.

   La checkMouse () procédé détermine si la tuile a été cliqué. Si oui, l'état est incrémenté et le nouvel état est affiché.

Comment construire une carte du jeu de tuiles

Chaque tuile est un outil puissant, mais le pouvoir réel de la structure à base de tuiles est de savoir comment les carreaux sont combinés pour créer une carte complète. La tileset est un tableau à deux dimensions d'objets de tuiles. Comme la plupart des tableaux à deux dimensions, il est normalement géré par une paire de boucles imbriquées. Voici le code pour mettre en place le tileset:

 setupTiles de fonction () {de tileset = new Array (lignes) -pour (rang = 0- rangée lt; Rangée ROWS- ++) {Trow = new Array (COLS) -pour (col = 0- col lt; Col COLS- ++) {Trow [col] = nouvelle tuile () - xPos = 16 + (32 * col) -yPos = 16 + (32 * rangée) -tRow [col] .setPosition (xPos, YPos) -tRow [col ] = .row rangée Trow [col] = .col collaboration} // fin de col pour looptileset [suite] = tRow-} // fin de ligne pour en boucle} // setupTiles finaux

Il ya seulement quelques points à garder à l'esprit ici:

• Le tileset est un tableau. Chaque membre de la tileset tableau est en fait une rangée. Construire un tableau de longueur RANGS.

• Étape à travers chaque rangée. Utilisez une norme pour boucle pour parcourir toutes les lignes.

• Chaque ligne est un tableau de longueur COLS. Un tableau à deux dimensions est en fait un tableau de tableaux. Faire un tableau de longueur COLS pour chaque ligne.

• Étape à travers les colonnes. Faire un pour boucle qui se produit une fois par colonne. Vous avez maintenant deux variables de comptage (rangée et col), Qui décrivent ensemble la position de chaque tuile dans la structure à deux dimensions.

• Créer une nouvelle tuile. Il suffit d'utiliser le constructeur de tuiles pour construire une nouvelle tuile.

• Réglez la position de la tuile. Vous pouvez multiplier la ligne et de la colonne par la largeur et la hauteur de la cellule afin de déterminer un placement approximatif.

• Attribuer les données de rangées et de colonnes au sprite. Copiez simplement le rangée et col données aux propriétés de l'image-objet.