Création de mondes isométriques Notions élémentaires pour les développeurs de jeux
Dans ce tutoriel, je vais vous donner un aperçu de ce que vous devez savoir pour créer des mondes isométriques. Vous apprendrez ce que la projection isométrique est, et comment représenter des niveaux isométriques sous forme de tableaux 2D. Nous formulons des relations entre la vue et la logique, de sorte que nous pouvons facilement manipuler des objets à l'écran et gérer la détection de collision à base de tuiles. Nous examinons aussi le tri de la profondeur et l'animation des personnages.
6 Guides Incroyablement en profondeur au développement du jeu et du design pour les débutants
Michael James Williams
1. Le monde isométriques
vue isométrique est une méthode d'affichage utilisée pour créer une illusion de la 3D pour un jeu 2D autrement - parfois désigné sous le pseudo 3D ou 2.5D. Ces images (prises de Diablo 2 et Age of Empires) illustrent ce que je veux dire:
La mise en œuvre d'une vue isométrique peut se faire de plusieurs façons, mais par souci de simplicité, je vais me concentrer sur une approche fondée sur la tuile, qui est la méthode la plus efficace et largement utilisé. J'ai recouvert chaque capture d'écran ci-dessus avec une grille de diamant montrant comment le terrain est divisé en tuiles.
2. Jeux base-Carreaux
Dans l'approche fondée sur la tuile, chaque élément visuel est décomposé en petits morceaux, les carreaux appelés, d'une taille standard. Ces tuiles seront organisées pour former le monde du jeu en fonction des données de niveau prédéterminé - habituellement un tableau 2D.
Par exemple considérons une vue standard 2D haut en bas avec deux tuiles - une tuile d'herbe et une tuile de mur - comme indiqué ici:
Quelques tuiles simples
Ces tuiles sont chacun la même taille que l'autre, et sont chacun un carré, de sorte que la hauteur de la tuile et de la largeur de la tuile sont les mêmes.
Pour un niveau de prairie fermée de tous côtés par des murs, le tableau 2D de données de niveau ressemblera à ceci:
Ici, 0 désigne une tuile d'herbe et 1 désigne une tuile de mur. Organiser les tuiles en fonction des données de niveau produiront l'image de niveau inférieur:
Un simple niveau, affiché dans une vue de haut en bas.
Nous pouvons améliorer en ajoutant les carreaux de coin et carreaux de mur vertical et horizontal séparés, ce qui nécessite cinq tuiles supplémentaires:
niveau amélioré avec des numéros de tuiles
J'espère que le concept de l'approche fondée sur tuiles est maintenant clair. Ceci est une simple mise en œuvre de la grille 2D, que l'on pourrait coder comme ceci:
Ici, nous partons du principe que la largeur de la tuile et de la hauteur de tuiles sont égaux (et la même chose pour toutes les tuiles), et correspondent aux dimensions des images de tuiles. Ainsi, la largeur et la hauteur de la tuile de tuile pour cet exemple sont tous les deux 50px, ce qui en fait la taille du niveau total de 300x300px - soit six lignes et six colonnes de carreaux de 50x50px chacun.
Dans une approche basée sur les tuiles normales, nous mettons en œuvre soit une vue de haut en bas ou une vue latérale; pour une vue en perspective, nous devons mettre en œuvre la projection isométrique.
3. Projection Isométrique
La meilleure explication technique de ce que la « projection isométrique » signifie, pour autant que je sache, est de cet article par Clint Bellanger:
Nous angle notre caméra le long de deux axes (balancer la caméra à 45 degrés sur un côté, puis 30 degrés vers le bas). Cela crée un diamant (losange) de grille en forme où les espaces de la grille sont deux fois plus larges que sont grands. Ce style a été popularisé par les jeux de stratégie et jeux de rôle d'action. Si l'on regarde un cube dans ce point de vue, les trois côtés sont visibles (en haut et deux côtés faisant face).
Bien que cela semble un peu compliqué, la mise en œuvre fait ce point de vue est simple. Ce que nous devons comprendre est la relation entre l'espace et l'espace 2D isométrique - à savoir, la relation entre les données de niveau et la vue; la transformation de « cartésien » haut-bas de coordonnées en coordonnées isométriques.
grille cartésienne par rapport à la grille isométrique.
(Nous ne considérons pas une technique à base de tuiles hexagonales. Ce qui est une autre façon de mettre en œuvre des mondes isométriques.)
Mise en place isométriques Tiles
Je vais essayer de simplifier la relation entre les données de niveau stockées sous forme de tableau 2D et la vue isométrique - à savoir, la façon dont nous transformons les coordonnées cartésiennes en coordonnées isométriques.
Nous allons essayer de créer la vue isométrique pour nos données au niveau des prairies clos de murs:
Dans ce scénario, nous pouvons déterminer une zone accessible à pied en vérifiant si l'élément de tableau est 0 à cette coordonnée, ce qui indique l'herbe. La mise en œuvre de la vue 2D du niveau au-dessus avait une itération simple avec deux boucles, en plaçant des dalles carrées de compensation chacune des valeurs de largeur de la hauteur de la tuile fixe et tuiles.
Pour la vue isométrique, le code reste le même, mais les changements de fonction placeTile ().
Pour une vue isométrique, nous devons calculer les coordonnées isométriques correspondantes dans les boucles.
Les équations pour ce faire sont les suivantes, où ISOX et isoY représentent x- isométrique et coordonnées y, et cartX et Carty représentent x- cartésiennes et les coordonnées y:
Ces fonctions montrent comment vous pouvez convertir d'un système à l'autre:
Le pseudo-code pour la boucle ressemble alors à ceci:
Notre prairie clos de murs dans une vue isométrique.
À titre d'exemple, nous allons voir comment une position 2D typique est convertie en une position isométrique:
De même, une entrée de [0, 0] se traduira par [0, 0]. et [10, 5] donnera [5, 7,5].
Le procédé ci-dessus nous permet de créer une corrélation directe entre les données de niveau en 2D et les coordonnées isométriques. Nous pouvons trouver les coordonnées de la tuile dans les données de niveau de ses coordonnées cartésiennes en utilisant cette fonction:
(Ici, nous supposons essentiellement que la hauteur et la largeur de tuiles de carreaux sont égaux, comme dans la plupart des cas.)
Par conséquent, à partir d'une paire d'écran (isométrique) les coordonnées, nous pouvons trouver des coordonnées tuiles en appelant:
Ce point de l'écran pourrait être, par exemple, une position de clic de souris ou une position de pick-up.
Astuce: Une autre méthode de placement est le modèle Zigzag. qui prend tout à fait une approche différente.
Déménagement en isométriques Coordonnées
Le mouvement est très simple: vous manipuler vos données du monde de jeu en coordonnées cartésiennes et il suffit d'utiliser les fonctions ci-dessus pour la mise à jour sur l'écran. Par exemple, si vous souhaitez déplacer un personnage vers l'avant dans la direction y positive, vous pouvez simplement augmenter sa propriété y, puis convertir sa position en coordonnées isométriques:
Tri de profondeur
En plus du placement normal, nous aurons besoin de prendre soin de tri en profondeur pour dessiner le monde isométrique. Cela fait en sorte que les éléments plus proches du joueur sont tirés au-dessus des éléments plus loin.
La méthode de tri de profondeur est plus simple d'utiliser simplement la valeur y coordonnées cartésiennes, comme mentionné dans ce Astuce rapide. le plus haut de l'écran est l'objet, la première devrait être tirée. Ce travail bien aussi longtemps que nous n'avons pas sprites qui occupent plus d'un espace de carreau.
La façon la plus efficace de la profondeur de tri des mondes isométriques est de briser toutes les tuiles en dimensions standard unique de tuiles et de ne pas permettre à des images plus grandes. Par exemple, voici une tuile qui ne rentre pas dans la taille des carreaux standard - voir comment on peut le diviser en plusieurs tuiles que chaque ajustement des dimensions de carreaux:
Une grande image est divisée en plusieurs tuiles de dimensions standards isométriques
4. Création de l'Art
art isométriques peut être pixel art, mais il ne doit pas être. Lorsque vous traitez avec pixel art isométrique, guide de RhysD vous dit presque tout ce que vous devez savoir. Un peu de théorie se trouve sur Wikipédia aussi.
Lors de la création d'art isométrique, les règles générales sont
- Commencez par une grille isométrique en blanc et adhérer au pixel une précision parfaite.
- Essayez de briser l'art en images de tuiles isométriques simples.
- Essayez de faire en sorte que chaque tuile est soit accessible à pied ou non accessible à pied. Ce sera compliqué si nous devons accueillir une tuile qui contient les zones propices à la marche et non praticables.
- La plupart des tuiles devront en toute transparence tuile dans une ou plusieurs directions.
- Les ombres peuvent être difficiles à mettre en œuvre, à moins d'utiliser une approche en couches où nous tirons des ombres sur la couche de sol, puis tirer le héros (ou d'arbres ou d'autres objets) sur la couche supérieure. Si l'approche que vous utilisez est fait pas multi-couches, les ombres tombent sûr à l'avant afin qu'ils ne tombent pas, disons, le héros quand il se tient debout derrière un arbre.
- Si vous avez besoin d'utiliser une image de tuiles plus grande que la taille des carreaux isométrique standard, essayez d'utiliser une dimension qui est un multiple de la taille des carreaux iso. Il est préférable d'avoir une approche à plusieurs niveaux dans de tels cas, où l'on peut diviser l'art en différentes pièces en fonction de sa hauteur. Par exemple, un arbre peut être divisé en trois parties: la racine, le tronc et le feuillage. Cela rend plus facile à trier des profondeurs que nous pouvons tirer des morceaux dans les couches correspondantes qui correspond à leur hauteur.
tuiles isométriques qui sont plus grandes que les dimensions de tuile va créer des problèmes avec le tri en profondeur. Certaines des questions sont abordées dans ces liens:
5. Caractères isométriques
Huit voies directions de navigation en haut vers le bas et des vues isométriques.
Pour une vue de haut en bas, nous pourrions créer un ensemble d'animations de caractère face dans une direction, et les faire pivoter simplement pour tous les autres. Pour l'art isométrique de caractère, nous avons besoin de re-rendre chaque animation dans chacune des directions permises - donc pour le mouvement en huit sens, nous devons créer huit animations pour chaque action. Pour faciliter la compréhension, nous noterons généralement les directions comme du Nord, du Nord-Ouest, Ouest, Sud-Ouest, Sud, Sud-Est, l'Est et du Nord-Est, dans le sens antihoraire, dans cet ordre.
Un caractère isométrique face dans des directions différentes.
Nous plaçons des personnages de la même manière que nous plaçons les tuiles. Le mouvement d'un personnage est accomplie en calculant le déplacement en coordonnées cartésiennes, puis en convertissant en coordonnées isométriques. Supposons que nous utilisons le clavier pour contrôler le caractère.
Maintenant, en utilisant les valeurs de Dx et Dy. nous pouvons mettre à jour les coordonnées cartésiennes comme si:
Donc, Dx et Dy représentent le changement dans le x et y positions du personnage, en fonction des touches pressées.
Nous pouvons facilement calculer les nouvelles coordonnées isométriques, comme nous l'avons déjà discuté:
Détection de collision
La détection de collision se fait en vérifiant si la tuile à la nouvelle position calculée est une tuile non accessible à pied. Donc, une fois que nous trouvons la nouvelle position, on ne bouge pas tout de suite le caractère là, mais d'abord vérifier pour voir ce que la tuile occupe cet espace.
Dans la fonction isWalkable (). nous vérifions si la valeur du tableau de données de niveau à la coordonnée donnée est une tuile accessible à pied ou non. Nous devons prendre soin de mettre à jour la direction dans laquelle le personnage est confronté - même s'il ne bouge pas. comme dans le cas de le frapper une tuile non accessible à pied.
Profondeur tri avec des caractères
Considérons un caractère et une tuile d'arbre dans le monde isométrique.
Pour bien comprendre le tri en profondeur, il faut comprendre que chaque fois que le x et y coordonnées du personnage sont inférieurs à ceux de l'arbre, l'arbre chevauche le caractère. Chaque fois que le caractère et X- de coordonnées y sont supérieures à celle de l'arbre, le personnage chevauche l'arbre.
Une version simplifiée de c'est juste dessiner successivement les niveaux à partir de la tuile la plus éloignée - à savoir, la tuile [0] [0] - puis tirer toutes les tuiles dans chaque rangée un par un. Si un personnage occupe une tuile, nous tirons la tuile de terre d'abord, puis la tuile rendions caractère. Cela fonctionne très bien, parce que le personnage ne peut pas occuper une tuile de mur.
Le tri de profondeur doit être fait à chaque fois une tuile change de position. Par exemple, nous devons le faire à chaque fois que les personnages se déplacent. Nous mettons à jour alors la scène affichée, après avoir effectué la sorte de profondeur, afin de refléter les changements de profondeur.
6. Avoir un Go!
Maintenant, mettez vos nouvelles connaissances à profit en créant un prototype fonctionnel, avec des commandes clavier et bon tri de profondeur et la détection de collision. Voici ma démo:
Cliquez pour donner le focus SWF, puis utilisez les touches fléchées. Cliquez ici pour voir la version pleine grandeur.
Si vous êtes vraiment coincé, voici le code complet de ma démonstration (sous forme de code timeline Flash et AS3):
Points d'inscription
Accorder une attention particulière aux points d'enregistrement des tuiles et le héros. (Les points d'enregistrement peuvent être considérés comme les points d'origine pour chaque sprite particulier.) Ces généralement ne tomberont pas dans l'image, mais sera plutôt le coin supérieur gauche de la zone de délimitation de l'image-objet.
Nous devrons modifier notre code de dessin pour fixer correctement les points d'enregistrement, principalement pour le héros.
Détection de collision
Un autre point intéressant à noter est que l'on calcule la détection de collision en fonction du point où le héros est.
Mais le héros a un volume, et ne peut pas être représenté avec précision par un seul point, nous avons donc besoin de représenter le héros comme un rectangle et vérifier les collisions contre chaque coin de ce rectangle afin qu'il n'y ait pas de chevauchement avec d'autres tuiles et donc pas d'artefacts de profondeur .
Dans la démo, je redessine simplement à nouveau la scène chaque image en fonction de la nouvelle position du héros. Nous trouvons la tuile que le héros occupe et dessiner le héros sur le dessus de la dalle de sol lorsque les boucles de rendu atteignent ces tuiles.
Mais si l'on regarde de plus près, nous constatons qu'il n'y a pas besoin de boucle à travers toutes les tuiles dans ce cas. Les tuiles d'herbe et les carreaux de mur haut et à gauche sont toujours tirées avant que le héros est dessiné, donc nous ne jamais pas besoin de les redessiner du tout. En outre, les carreaux de mur en bas et à droite sont toujours en face du héros et donc utilisé après que le héros est dessiné.
Pour l'essentiel, alors, nous avons besoin que d'effectuer un tri en profondeur entre la paroi interne de la zone active et le héros - à savoir deux tuiles. Remarquant ce genre de raccourcis vous aider à économiser beaucoup de temps de traitement, qui peut être crucial pour la performance.
Conclusion
Maintenant, vous devriez avoir une grande base pour la construction de jeux isométriques de votre propre: vous pouvez rendre le monde et les objets qu'il contient, représentent des données de niveau dans de simples tableaux 2D, convertir entre coordiates cartésien et isométriques, et de traiter avec des concepts tels que le tri de profondeur et l'animation des personnages. Profitez de la création des mondes isométriques!