Construire un jeu HTML5 basé tuiles, Creative Bloq
Les carreaux peuvent travailler pour une variété de jeux. Dan Neame vous montre comment construire un jeu HTML5 basé tuiles qui fonctionnera sur différents navigateurs.
Dans ce tutoriel, je vais vous montrer comment vous pouvez créer des jeux à base de tuiles 2D en utilisant HTML5. Avec la zone de jeu défini par une simple carte, nous regarderons à faire des « agents » jouables à pied autour du niveau, voir comment étendre ces agents en utilisant le pathfinding "des foules de et apprendre comment rendre le jeu à l'écran avec différents types de Renderer. De PC de bureau pour téléphone mobile, en répartissant les responsabilités de façon appropriée, vous pouvez créer des jeux souples qui fonctionnent sur un appareil avec un navigateur.
Le code source / démo pour le tutoriel est disponible ici. Cela inclut tout le tutoriel et permet l'extension facile pour vos propres jeux.
Le tableau 2D montre carrés rouges sont 1s et 0s carrés vides sont
choix rendu
Nous allons commencer par la façon d'utiliser des éléments de toile multiples pour dessiner la zone de jeu, bien que les nœuds SVG ou même DOM peuvent également être utilisés pour le rendu de vos jeux HTML5. Le choix de la bonne technologie dépend de la façon dont vous voulez que le jeu fonctionne.
Si vous travaillez avec des bitmaps, alors la toile est généralement le meilleur choix, car il fournit une API cohérente qui fonctionne bien entre les navigateurs. Tous les navigateurs modernes prennent en charge, y compris les navigateurs sur les appareils mobiles. En ce qui concerne IE va, n'ont que des versions 9 et vers le haut support natif, mais il y a un polyfill que les correctifs de soutien pour IE7 et 8 hébergé sur Google Code appelé ExplorerCanvas. SVG est mieux pour les jeux qui utilisent des graphiques vectoriels et a un support de navigateur similaire à la balise canvas.
DOM / CSS est utilisé au mieux pour les jeux avec animation plus simple. L'un des avantages que les deux SVG et DOM / CSS ont sur la toile est que vous pouvez lier les écouteurs d'événement directement aux éléments rendus. Avec une toile, vous devrez calculer quel élément est en cours cliqué. Heureusement, ce n'est pas une préoccupation pour ce tutoriel parce que le jeu ne sera pas nécessaire de répondre aux événements de souris.
Tout d'abord, nous allons mettre en place notre niveau. Les cartes permettent de définir la zone de jeu par programme, ce qui crée des murs avec des carreaux unwalkable. Ceux-ci peuvent être représentés dans leur forme la plus simple par 1 et 0 dans un tableau 2D - 0 ici est une tuile accessible à pied et 1 est un mur:
À partir du code ci-dessus, nous pouvons voir que la zone de jeu a des murs tout autour du bord, ainsi que quelques obstacles au milieu. Vous pouvez utiliser ce type de carte comme base pour les calculs de collision, ainsi que pour rendre le jeu à l'écran.
Rendu la carte
Afin de rendre votre carte, vous aurez besoin d'un objet Renderer, qui sera chargé de rendre une couche du jeu. L'utilisation de plusieurs couches est plus facile et plus rapide que d'utiliser une seule couche comme cela signifie que vous n'aurez pas à redessiner l'arrière-plan chaque fois qu'un personnage se déplace.
Le rendu montre la zone de jeu sur un fond noir solide
Améliorer le rendu
Nous avons une simple représentation de notre zone de jeu, mais il semble assez basique pour le moment. Alors, la prochaine, nous allons voir des images au lieu de l'utilisation toile drawRect. Tournons notre fond en quelque chose qui ressemble à l'herbe en utilisant le CSS. Ceci est aussi simple que l'application d'une propriété de base à la première couche:
L'amélioration de la prestation des murs implique que nous allons modifier la carte. Au lieu d'utiliser 1s pour représenter les murs, on peut utiliser 1s, 2 et 3 temps pour représenter les différentes images.
Dans la nouvelle carte, 0 représente une tuile peut marcher comme avant (transparent), la figure 1 représente une image de la paroi continue, la figure 2 représente le bord gauche d'un mur et la figure 3 représente le bord droit d'un mur.
En utilisant sprites dans un tileset
Lorsqu'il est utilisé avec l'étiquette de toile, feuilles de sprite peuvent également améliorer les performances. Il est plus rapide de l'échantillon à partir d'une toile en cache que de tirer des objets d'image séparés.
Afin de savoir quelle partie de l'image-objet échantillon pour les différentes tuiles, nous avons besoin d'une spécification de tuiles, qui peut être défini comme une propriété du moteur de rendu. La spécification de la tuile est une table de hachage contenant les coordonnées X et Y des graphiques sur la feuille de l'image-objet. Par exemple, nos carreaux de fond ont la spécification de tuiles suivantes:
L'image de notre tuile « 1 » est à la position 0,0 dans la feuille de l'image-objet, « 2 » est à 48,0 et « 3 » est à 24,0 (comme représenté sur l'image ci-dessous). Nous aurons besoin d'un nouvel objet pour maintenir l'image-objet et sa spécification de tuiles, que nous nommons Tileset. Il sera responsable du chargement du sprite dans un élément d'image et le chargement de la spécification de tuiles JSON via Ajax, ainsi que des méthodes permettant d'accéder aux données.
La feuille de l'image-objet d'arrière-plan
Les autres méthodes peuvent rester les mêmes. Nous avons juste besoin de changer drawTile de sorte qu'il accepte un sprite, ainsi que les détails de l'endroit où l'échantillon. Maintenant que nous utilisons le sprite du tileset, le rendu de notre zone de jeu est beaucoup plus agréable.
Faire un agent
La zone de jeu rendu avec sprites au lieu de simples rectangles
Dans la méthode ci-dessus, sprite du joueur, la spécification de tuiles et la position sont passés de l'agent de joueur à la méthode drawTile. La méthode getSprite renvoie une référence au sprite de l'agent de son tileset. getTileSpec ainsi getTileId retourner la spécification pour les carreaux de courant de l'agent de joueur.
La position de l'agent est stocké sous forme de coordonnées X et Y, qui, à la différence des positions de tuiles, peuvent être des fractions, pour permettre un mouvement continu autour de la carte.
Manipulation de l'entrée d'utilisateur
L'agent de joueur rendu au-dessus consulter Présentation de la zone de jeu
S'il n'y a pas gamepad et aucun contact, puis Joystix écoutera WASD ou flèche événements de presse clés. Les touches Espace et Enter agissent comme le bouton de tir.
La source Joystix est livré avec les fichiers de ce tutoriel, ou peut être consulté sur GitHub.
gestion des collisions
Nous pouvons déplacer notre agent de joueur autour, mais il marche droit sur tous les murs. Nous allons avoir besoin d'un objet qui peut gérer la détection de collision. La détection de collision peut être compliquée, en fonction du type de jeu que vous faites. Il y a beaucoup de différents cadre de sélection et les algorithmes intersection de la ligne à choisir - et ceux-ci peuvent être difficiles à maîtriser. Heureusement, pour les jeux à base de tuiles, il est beaucoup plus facile. Nous pouvons simplement mettre une tuile praticabilité ou unwalkable et empêcher le mouvement en eux.
Pour notre CollisionManager nous avons besoin de savoir ce que la carte du jeu ressemble, où le joueur est et où ils veulent aller. Il vérifie ensuite si la nouvelle position est accessible à pied et, le cas échéant, retourne leur nouvelle position. Si la tuile est unwalkable, le CollisionManager retourne la position d'origine.
Garder les collisions gérés par un objet réduit le couplage entre l'entrée d'utilisateur et le lecteur, et permet l'extension plus facile ou modification ultérieure. Avoir le retour CollisionManager leur nouvelle position plutôt que de retourner si une collision signifie ou non que les agents ne sont pas à se soucier de ce qui se passe quand ils ont frappé un mur. Tous les agents ont besoin de savoir est où ils finissent.
Vous remarquerez que le premier argument passé à la fonction est appelée getPosition Isy et que getPosition retourne une seule valeur. Cela nous permet de traiter le mouvement Y et X séparément. Si l'agent frappe un mur, puis ils glissent le long plutôt que de se collé à elle.
Une projection 3D des couches distinctes sur la base utilisée dans l'image-objet-rendu
L'extension des agents en ennemis
La prochaine chose à faire pour notre jeu est les ennemis. Les ennemis seront des agents, tout comme notre joueur, sauf qu'ils ne répondront pas à l'entrée de l'utilisateur. Au lieu de cela, l'objet Mob étendra l'objet Agent et ajouter une méthode de chooseAction, qui remplace l'entrée utilisateur avec une certaine intelligence artificielle simple (AI).
La foule prendra également une référence à la position du joueur dans son constructeur. Le targetAgent est l'agent que la foule devrait marcher vers:
chooseAction prend une position de l'ennemi qui est le plus proche du joueur, plafonnée à un maximum de la distance 0,05 +/- loin dans X ou Y pour l'arrêter trop vite. Cela signifie que l'ennemi marchera vers le joueur à chaque tick du moteur de jeu.
En plus de ce changement, nos ennemis ont tous les mêmes méthodes et propriétés que notre agent de joueur et peuvent être traitées de la même manière par notre CharacterRenderer et CollisionManager. La seule différence est que, lorsque l'entrée utilisateur définit où le joueur veut aller, nous devons exécuter chooseAction afin d'obtenir les coordonnées qui définissent où la foule veut aller.
Les foules ont leur propre tileset, qui utilise le même sprite que l'agent, mais utilise une spécification de tuiles différentes pour faire référence à des images de l'ennemi sur l'image-objet plutôt que le joueur.
La feuille de sprite de caractère
Avec une carte légèrement plus grand, le chemin de notre ennemi prendra si le joueur ne se déplace pas est affichée au verso. Notez que le temps passe dans la treizième tuile, l'ennemi se coince derrière la ligne des arbres. À chaque tour, il va essayer de se déplacer en ligne droite vers le joueur, qui, par ce point, est tout droit dans un arbre.
Trouver son chemin
Notre ennemi n'est pas l'un des outils les plus pointus dans la boîte au moment, et se dirige tout droit dans les murs. Il serait beaucoup mieux s'il pouvait marcher autour d'eux à la place. Pour ce faire, nous allons avoir besoin d'utiliser un algorithme de pathfinding.
Nous allons utiliser l'algorithme A *, qui est très précis, ainsi que d'être raisonnablement rapide. Tout d'abord, nous allons ajouter une nouvelle méthode à notre foule: getAStarMovement.
Un chemin généré par l'algorithme simple AI
chooseAction utilise ensuite getAStarMovement afin de déterminer quel carreau de se déplacer dans de manière à suivre le chemin optimal calculé par A *:
L'algorithme A * utilisé est livré avec les fichiers de ce tutoriel. Il est basé sur Matthew Trost de «A-Star Pathfinding algorithme.
Le chemin d'accès générée par l'algorithme A *
En conclusion
Dans ce tutoriel, nous avons construit un jeu de HTML5 basé tuiles qui se déroulera sur une grande variété de navigateurs. Nous avons examiné comment un tableau 2D peut être transformé en une zone de jeu, la façon dont nous pouvons le remplir avec des ennemis et un joueur, et comment nous pouvons contrôler ces agents dans une variété de façons.
Vous n'avez pas juste pour faire un jeu de roguelike: tuiles peuvent travailler pour une grande variété de jeux et le code source doit servir de bonne base pour beaucoup. S'amuser!
Cet article a paru dans le numéro 245 du magazine net.