Comment créer des tuiles dans votre jeu HTML5
Un monde basé tuiles est une technique utilisée dans les jeux HTML5 pour fournir milieux flexibles intéressants sans coûts énormes 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 d'arrière-plan complet.
En règle générale, vous allez construire un objet de tuiles, qui contient un certain nombre de petites images (32 x 32 pixels). Chaque objet tuile peut afficher l'une des images sur commande. Ce système a un certain nombre d'avantages intéressants:
Les exigences de mémoire peuvent être très petites. Chaque image se charge en mémoire une seule fois, vous pouvez donc créer un monde très grande avec une faible empreinte mémoire.
La carte est dynamique. L'image affichée dans chaque tuile peut être modifiée 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 l'eau qui ne peut franchir ou les montagnes qui donnent un avantage à un défenseur.
Les cartes sont simplement des tableaux d'entiers. Pour stocker une carte à base de tuiles, vous n'avez pas besoin de stocker les tuiles du tout. Au lieu de cela, vous gardez simplement la trace des états de tuiles.
Les cartes peuvent être beaucoup plus grande que l'écran. Une feuille de tuile peut être un quelconque réseau à deux dimensions d'entiers.
Un tileset est scrolling 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 tuiles se déplacent rarement eux-mêmes.
Les carreaux sont appropriés pour les types de jeu multiples. Les carreaux sont fréquemment utilisés pour les jeux de rôle, ainsi que des jeux de société, jeux tactiques et les jeux de plate-forme à défilement horizontal.
Comment créer un objet de carreaux
L'objet de carreaux est la base de cartes à base de tuiles. Voici le code pour un simple prototype de tuile:
La partie la plus importante d'une tuile est sa nature multi-états. Il a plusieurs états. Chaque état affiche une autre image. Voici comment l'écrire:
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) quelques tuiles que vous pouvez utiliser.
Construire des constantes pour les états.
La meilleure façon de travailler avec les États est d'attribuer des constantes pour eux. Constantes ont l'avantage d'être facilement lisible par l'homme et des nombres entiers simples à l'ordinateur.
Construire un sprite standard.
La tuile est encore essentiellement un sprite. Il ne se déplace pas en général, 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.
Attribuez un état par défaut.
La propriété de l'Etat est l'aspect le plus important d'une tuile. Il indique quel état la tuile est actuellement affiche. La valeur de l'Etat doit toujours être l'une des constantes de l'Etat.
Créer un tableau d'images.
Chaque tuile aura accès à toutes les images possibles. les stocker dans un tableau. Assurez-vous que les lignes de commande de tableau haut avec les valeurs constantes.
Définir une ligne et colonne.
Les carreaux sont généralement placés dans une grille à deux dimensions, il peut donc être très utile pour suivre la ligne et la colonne de la tuile en cours.
Ajouter une méthode setState ().
Cette méthode vous permet de changer facilement une tuile à l'une des valeurs de l'Etat. Utilisez une constante pour assurer l'état est reconnu par vos tuiles. La propriété de l'État est modifié pour tenir compte de l'état actuel, et l'image est également modifiée, de sorte que l'image correcte affiche sur la prochaine mise à jour.
Fournir des techniques de récupération de données.
Ces fonctions retournent la ligne, la colonne, et l'état actuel de la tuile.
Autoriser un comportement d'édition.
Le procédé checkMouse () détermine si le carreau a été cliqué. Dans ce cas, 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 la puissance réelle de la structure à base de tuiles est la façon dont les tuiles sont combinés pour créer une carte complète. Le 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 la mise en place du tileset:
Il y a quelques points à garder à l'esprit ici:
Le tileset est un tableau. Chaque membre du réseau de tileset est en fait une ligne. Construire un tableau de lignes de longueur.
Parcourir chaque ligne. Utiliser une norme pour la boucle à l'étape à travers toutes les lignes.
Chaque rangée est une rangée de Col. de longueur. Un tableau à deux dimensions est en fait un tableau de tableaux. Faire un tableau de Col. de longueur pour chaque ligne.
Étape à travers les colonnes. Faire une boucle qui se produit une fois par colonne. Vous avez maintenant deux variables de comptage (de rangée et col), qui, ensemble, décrivent 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égler la position de la tuile. Vous pouvez multiplier la rangée et de la colonne par la largeur et la hauteur de la cellule afin de déterminer un emplacement approximatif.
Affecter les données de rangée et de colonne de l'image-objet. Copiez simplement les données de ligne et col aux propriétés de l'image-objet.