créer des mondes isométriques

Dans cet article, vous aurez un aperçu général de ce que vous devez savoir pour créer des mondes isométriques. Vous apprendrez ce qu'est la projection isométrique, et comment représenter les niveaux isométriques sous forme de tableaux 2D. Nous allons formuler des relations entre la vue et la logique, afin que nous puissions facilement manipuler des objets à l'écran et gérer la détection de collision basée sur les tuiles. Nous examinerons également le tri en profondeur et l'animation des personnages.

Le monde isométrique

La vue isométrique est une méthode d'affichage utilisée pour créer une illusion de 3D pour un jeu en 2D - parfois appelé 3D ou 2.5D. Le monde visuel autour de nous est tridimensionnel, mais les jeux auxquels nous jouons (pour l'instant) sont sur un écran 2D. La "projection" est, en termes simples, la façon dont nous "aplatissons" une vue 3D en 2D.

Il existe plusieurs projections populaires utilisées dans les jeux 2D. Le plus populaire est d'avoir la caméra exactement sur un axe majeur. Ceci est commun dans les jeux de puzzle, où chaque tuile est un simple carré et la troisième dimension n'est pas visible du tout. Cette vue est souvent directement au-dessus, ou d'un seul côté. Si nous regardons un cube dans cette vue, un seul côté serait visible (seulement le côté opposé).

Exemple de vue isométrique
Exemple de vue isométrique (Age of Empires).

Vous pourriez rencontrer certains des problèmes suivants lors du développement de jeux isométriques dans Unity :

  • Le calcul pour positionner les tuiles de manière à créer une vue 3D du jeu est complexe.
  • Le mappage de l'emplacement réel de l'objet dans un espace mondial / espace de jeu à l'emplacement en vue isométrique est complexe et prend du temps.
  • Unity n'a pas d'outil direct ou de support pour les projections isométriques.
  • La plupart des outils tiers disponibles jusqu'à présent n'étaient pas assez puissants ou suffisamment optimisés pour développer des jeux isométriques fluides et corrects.
  • Les calculs pour la génération de cartes sont lourds, pour l'instant, aucun outil n'était assez bon, pour charger des cartes isométriques à un taux optimisé.

Jeux à base de tuiles

Dans l'approche par mosaïque, chaque élément visuel est décomposé en morceaux plus petits, appelés tuiles, de taille standard. Ces tuiles seront agencées pour former le monde du jeu selon des données de niveau prédéterminées - généralement un tableau 2D.

Par exemple, considérons une vue 2D top-down standard avec deux tuiles, une tuile d'herbe et une tuile murale - comme montré ci-dessous :

Tuiles simples
Simples tuiles.

Ces tuiles ont chacune la même taille et sont carrées, donc la hauteur et la largeur des tuiles sont les mêmes. Pour un niveau avec une prairie entourée de tous les côtés par des murs, le tableau 2D des données de niveau ressemblera à ceci :

txt[[1,1,1,1,1,1],
 [1,0,0,0,0,1],
 [1,0,0,0,0,1],
 [1,0,0,0,0,1],
 [1,0,0,0,0,1],
 [1,1,1,1,1,1]]

Ici, 0 désigne une tuile d'herbe et 1 désigne une tuile murale. Disposer les tuiles selon les données de niveau produira l'exemple suivant :

Un niveau simple, affiché dans une vue de haut en bas
Un niveau simple, affiché dans une vue de haut en bas.

Nous pouvons améliorer cela en ajoutant des tuiles d'angle et séparer les tuiles de mur vertical et horizontal, ce qui nécessite cinq carreaux supplémentaires.

txt[[3,1,1,1,1,4],
 [2,0,0,0,0,2],
 [2,0,0,0,0,2],
 [2,0,0,0,0,2],
 [2,0,0,0,0,2],
 [6,1,1,1,1,5]]
Niveau amélioré avec les numéros des tuiles
Niveau amélioré avec les numéros des tuiles.

C'est une implémentation simple de la grille 2D, que nous pourrions coder comme suit :

C#int hauteur = 10;
int largeur = 10;

void maGrille()
{
    for (int i = 0; i < hauteur; i++)
    {
        for (int j = 0; j < largeur; j++)
        {
            // Code
        }
    }
}

Ici, la largeur des tuiles et la hauteur des tuiles sont égales, et correspondent aux dimensions des images des tuiles. Ainsi, la largeur et la hauteur des tuiles pour cet exemple sont de 50 pixels, ce qui constitue la taille totale du niveau de 500x500 pixels, soit dix rangées et dix colonnes de tuiles mesurant chacune 50x50 pixels.

Dans une approche basée sur des tuiles normales, soit nous implémentons une vue de haut en bas, soit une vue de côté; pour une vue isométrique, nous devons mettre en œuvre la projection isométrique.

Projection isométrique

Pour avoir une projection isométrique, nous inclinons notre caméra le long de deux axes (orienter la caméra de 45 degrés d'un côté, puis de 30 degrés vers le bas). Cela crée une grille en forme de losange (rhombus) où les espaces de grille sont deux fois plus larges qu'elles ne le sont en hauteur. Ce style a été popularisé par les jeux de stratégie et les RPG d'action. Si nous regardons un cube dans cette vue, trois côtés sont visibles (haut et deux côtés).

Il y a beaucoup d'autres styles de projection moins communs disponibles pour les jeux 2D. La grille peut être à un angle de 45 degrés, mais utiliser des espaces "carrés" comme le montre Ultima Online. Ou la grille peut être carrée et un angle de 90 degrés, avec des murs s'élevant à 45 degrés comme vu dans Ultima 7. Ou la caméra peut être tournée de façon à ce que chaque axe soit affecté différemment comme dans les jeux Fallout originaux (qui utilisent en fait une grille hexadécimale).

Bien que cela semble un peu compliqué, la mise en œuvre de cette vue est simple. Ce que nous devons comprendre, c'est la relation entre l'espace 2D et l'espace isométrique - c'est-à-dire la relation entre les données de niveau et la vue; la transformation des coordonnées "cartésiennes" de haut en bas en coordonnées isométriques.

Grille cartésienne contre grille isométrique.
Grille cartésienne contre grille isométrique.

Placer des tuiles isométriques

Pour essayer de simplifier la relation entre les données de niveau stockées en tant que tableau 2D et la vue isométrique - c'est-à-dire comment 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 de niveau de prairie entourées de murs.

C#[[1,1,1,1,1,1],
 [1,0,0,0,0,1],
 [1,0,0,0,0,1],
 [1,0,0,0,0,1],
 [1,0,0,0,0,1],
 [1,1,1,1,1,1]]

Dans ce scénario, nous pouvons déterminer une zone praticable en vérifiant si l'élément de tableau est 0 à cette coordonnée, indiquant ainsi l'herbe. L'implémentation de la vue 2D du niveau ci-dessus était une itération directe avec deux boucles, plaçant les tuiles carrés en les décalant chacun avec les valeurs de hauteur et de largeur des tuiles.

C#int hauteur = 10;
int largeur = 10;

public GameObject tuilePrefab;

// Use this for initialization
void Start () {
    maGrille();
}

void maGrille()
{
    for (int i = 0; i < hauteur; i++)
    {
        for (int j = 0; j < largeur; j++)
        {

            GameObject tuile = Instantiate(tuilePrefab, new Vector3(i, j, 0), Quaternion.identity) as GameObject;

            // Nom de la tuile dans le tableau
            tuile.name = "Tuile (" + i + "," + j + ")";

        }
    }
}

Pour la vue isométrique, le code reste le même, mais la fonction placerTuile() change. Pour une vue isométrique, nous devons calculer les coordonnées isométriques correspondantes à l'intérieur des boucles. Les équations pour ce faire sont les suivantes, où isoX et isoY représentent les coordonnées isométriques x et y, et cartX et cartY représentent les coordonnées x et y cartésiennes:

C#// Cartésien à isométrique
isoX = cartX - cartY;
isoY = (cartX + cartY) / 2;
C#// Isométrique à cartésien
cartX = (2 * isoY + isoX) / 2;
cartY = (2 * isoY - isoX) / 2;

Art isométrique

Isometric Pixel Art (IPA) est une forme moderne d'art numérique qui a récemment été acceptée comme une nouvelle forme d'art. La représentation bidimensionnelle (2D) d'un objet tridimensionnel (3D) est fascinante pour beaucoup de gens. Cela est probablement dû à la simplicité et à la quantité de petits détails qui peuvent s'insérer dans une seule pièce IPA. L'Isometric Pixel Art peut être comparé aux dessins animés à bien des égards, car les gens aiment regarder et accepte la forme d'art 2D car elle est très simpliste et facile à suivre.

Le but principal de toute œuvre d'art est d'attirer votre attention. À bien des égards, l'IPA est conçu pour y parvenir, c'est-à-dire pour représenter quelque chose qui semble provenir du monde réel, mais vous savez qu'il ne s'agit que d'une image générée par ordinateur (CGI).

Lors de la création d'art isométrique, les règles générales sont :

  • Commencez par une grille isométrique vierge et respectez la précision parfaite des pixels.
  • Créer des images uniques de tuiles isométriques.
  • Essayez de vous assurer que chaque tuile est praticable ou non praticable. Ce sera compliqué si nous avons besoin d'accueillir une seule tuile qui contient à la fois des zones praticable et non praticable.
  • La plupart des tuiles devront être dans une ou plusieurs directions.
  • Les ombres peuvent être difficiles à implémenter, à moins que vous utilisiez une approche en couches où vous dessinez des ombres sur la couche de sol, puis le héros (ou les arbres, ou d'autres objets) sur la couche supérieure. Si l'approche que vous utilisez n'est pas multicouche, assurez-vous que les ombres tombent vers l'avant pour qu'elles ne tombent pas sur le héros lorsqu'il se tient derrière un arbre.
  • Au cas où vous auriez besoin d'une image de tuile plus grande que la taille de tuile isométrique standard, essayez d'utiliser une dimension qui est un multiple de la taille de la tuile standard. Il est préférable d'avoir une approche par couches dans de tels cas, où vous pouvez diviser la tuile 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.

Choisir une taille de tuile

Généralement, un jeu utilisera la même taille de tuile de base pour l'ensemble du projet. Choisir la bonne taille dès le début est donc une tâche importante.

Il y a d'abord les dimensions en pixels de la tuile. Dans tous les jeux vidéo, il est courant de coller avec des puissances de deux dimensions pour les images. La taille de grille la plus courante des jeux isométriques est donc 32x16 ou 64x32 ou 128x64.

Vous pourriez décider que 100x50 est plus facile à travailler. Le fait de s'en tenir à deux puissances peut vous permettre de faire de bons tours de calcul (transfert de bits au lieu de multiplier/diviser). Si vous avez l'intention de fabriquer des tuiles réutilisables dans d'autres projets/jeux, il est probablement judicieux de respecter les formats traditionnels.

  • 32x16 est une très petite taille mais toujours utile sur les appareils mobiles ou si vous utilisez des images pixelisées.
  • 64x32 est une taille de tuile moderne commune, flexible pour beaucoup de types de jeu.
  • 128x64 est bon pour les jeux avec un niveau de détail élevé ou affiché sur les résolutions HD.

Même si vous choisissez par exemple une taille de 64x32, cela ne signifie pas que chaque image de votre jeu sera de 64 pixels par 32 pixels. Il est courant dans les jeux isométriques d'avoir de grandes tuiles qui s'alignent avec le bas de la grille. Un jeu utilisant 64x32 pourrait effectivement utiliser des images 64 pixels x 128 pixels pour des objets tels que les murs -- ou plutôt, chaque section de mur qui s'adapte exactement sur un espace de grille. L'utilisation de tuiles hautes est utile pour dessiner des objets dans l'axe Z.

Une fois que vous avez choisi une taille de tuile, vous devez toujours penser à ce que cette taille représente dans l'espace 3D.

  • Si vous faites un jeu de stratégie au tour par tour de conquête du monde, chaque tuile peut représenter une zone de 1km carré ou plus.
  • Si vous réalisez une simulation de construction d'une ville, une tuile peut être un carré de 10m x 10m. Cela pourrait être la largeur d'une rue ou la taille d'un petit bâtiment.
  • Si vous faites un RPG où l'accent est mis sur un héros, chaque tuile peut représenter 1m carré.

Cela dépend vraiment du genre de jeu et de la taille de l'écran cible.

Caractères isométriques

Implémenter des caractères dans la vue isométrique n'est pas compliqué comme cela peut paraître. Le caractère doit être créé selon certaines normes. Premièrement, nous devrons déterminer combien de directions de mouvement sont permises dans notre jeu - habituellement les jeux fourniront un mouvement à quatre voies ou à huit voies.

Mouvements isométrique
Directions de navigation à huit directions dans les vues top-down et isométriques.

Pour une vue top-down, nous pourrions créer un ensemble d'animations de personnages orientées dans une direction, et simplement les faire pivoter pour toutes les autres. Pour des personnages isométriques, nous devons ré-afficher chaque animation dans chacune des directions autorisées - ainsi pour le mouvement à huit directions, nous devons créer huit animations pour chaque action. Pour faciliter la compréhension, nous désignons habituellement les directions Nord, Nord-Ouest, Ouest, Sud-Ouest, Sud, Sud-Est, Est et Nord-Est, dans le sens inverse des aiguilles d'une montre, dans cet ordre.

Un personnage isométrique face à différentes directions
Un personnage isométrique face à différentes directions.

Nous plaçons les caractères de la même manière que nous plaçons des tuiles. Le mouvement d'un caractère est accompli en calculant le mouvement en coordonnées cartésiennes et en convertissant ensuite en coordonnées isométriques. Supposons que nous utilisons le clavier pour contrôler le personnage.

Nous allons définir deux variables, dX et dY, basées sur les touches directionnelles pressées. Par défaut, ces variables seront de 0 et seront mises à jour selon le tableau ci-dessous, où U, D, R et L désignent respectivement les flèches Haut, Bas, Droite et Gauche. Une valeur de 1 sous une touche indique que l'on appuie sur cette touche; 0 implique que l'on n'appuie pas sur la touche.

txtTOUCHE       POSITION
U D R L         dX dY
====================
0 0 0 0          0  0
1 0 0 0          0  1
0 1 0 0          0 -1
0 0 1 0          1  0
0 0 0 1         -1  0
1 0 1 0          1  1
1 0 0 1         -1  1
0 1 1 0          1 -1
0 1 0 1         -1 -1

Maintenant, en utilisant les valeurs de dX et dY, nous pouvons mettre à jour les coordonnées cartésiennes comme telles :

C#newX = currentX + (dX * vitesse);
newY = currentY + (dY * vitesse);

Donc dX et dY représentent le changement dans les positions x et y du personnage, basé sur les touches enfoncées. Une fois que nous avons la nouvelle position isométrique, nous devons déplacer le personnage à cette position. Sur la base des valeurs que nous avons pour dX et dY, nous pouvons décider de la direction à laquelle le personnage se déplace.

Trier en profondeur avec des caractères

Considérez un personnage et une tuile d'arbre dans le monde isométrique. Pour bien comprendre le triage en profondeur, il faut comprendre que chaque fois que les coordonnées x et y du personnage sont inférieures à celles de l'arbre, l'arbre chevauche le caractère. Chaque fois que les coordonnées x et y du caractère sont plus grandes que celles de l'arbre, le caractère chevauche l'arbre.

Lorsqu'ils ont la même coordonnée x, alors nous décidons en nous basant uniquement sur la coordonnée y: celle qui a la coordonnée y la plus élevée chevauche l'autre. Lorsqu'ils ont la même coordonnée Y, alors nous décidons en nous basant uniquement sur la coordonnée X: c'est la coordonnée X la plus élevée qui chevauche l'autre.

Une version simplifiée consiste à dessiner les niveaux de manière séquentielle à partir de la tuile la plus éloignée - c'est-à-dire la tuile[0][0][0] - puis à dessiner toutes les tuiles de chaque rangée une par une. Si un personnage occupe une tuile, nous dessinons d'abord la tuile de sol et ensuite nous la rendons. Cela fonctionnera très bien, car le personnage ne peut pas occuper une tuile murale.

Le triage en profondeur doit être effectué à chaque changement de position des tuiles. Par exemple, nous devons le faire à chaque fois que des personnages se déplacent. Nous actualisons ensuite la scène affichée, après avoir effectué le tri en profondeur, pour refléter les changements de profondeur.

Conseils pour améliorer la vue isométrique

Parlons d'abord du rendu isométrique; le rendu isométrique était très populaire à l'époque avec les jeux 2D. En fait, c'était une façon pas chère de montrer un monde "3D" avec un moteur de jeu 2D.

Le rendu isométrique n'est pas visuellement précis, mais notre cerveau pourrait reconstruire l'espace, ce qui nous donne le sentiment d'explorer un environnement 3D complet. La règle de base, c'est que 1 mètre affiché à l'écran aura toujours la même taille n'importe où sur l'écran. Il est communément utilisé pour les jeux de stratégie et RPG classique.

Si la hauteur était correcte dans les jeux isométriques, la plupart du temps, vous ne verriez que la tête et les pieds de votre petit bonhomme, tout comme dans le premier GTA et GTA 2. De nos jours, pour représenter les mondes isométriques, nous avons tendance à utiliser les moteurs 3D plutôt que les moteurs 2D. C'était déjà le cas avec Grandia en 1999; Les éléments complexes étaient en 2d, et le sol était en 3D.

Dans un monde isométrique 3D, l'utilisation du sprite 2D pour représenter des éléments complexes est une bonne idée. En effet, comme le sprite fait face à la caméra vous pouvez toujours tricher avec des hauteurs. Avec des mondes 3D entièrement rendus, il est plus difficile de tricher avec la hauteur. En effet, le moteur 3D restitue tous les éléments avec la taille correcte.

C'est pourquoi il est possible d'incliner tous les grands éléments, pour donner cette illusion de grandeur.

C#
using UnityEngine;
using System.Collections;
 
public class IsoFix : MonoBehaviour {
 
    public bool fix = true;
    //Si active est réglé sur true, le correctif sera appliqué à chaque image, utile si la caméra pivote.
    public bool active = false;
    public Vector3 fixPosition = new Vector3(-45f, 0f, 0f); 
 
    private void OnEnable () {
        Fix ();
    } 
 
    private void Update () {
        if (active) 
        Fix ();
    }
 
    private void Fix() {
        if (fix) 
        this.transform.rotation = Quaternion.LookRotation( Camera.main.transform.forward ) * Quaternion.Euler (fixPosition);
    }
}

les réactions

Pour laisser un avis, vous devez être inscrit et connecté

Se connecter