Etape 1 : La création du plan de jeu
Bon, la première étape c'est de créer une grille en 2D isométrique, Unity à un component built-in pour ça mais ayant peur que ça ne soit pas assez permissif j’ai préféré coder ça moi même, de ce que j’ai vu c’est une pratique assez courante
Bon déjà la 2D isométrique, c’est quoi ?
Une cellule en 2D isométrique à (le plus souvent) un ratio de 2:1 c’est à dire que c’est 2 fois plus large que haut, sur Dofus 2 une cellule fait 43px de hauteur et 86px de largeur, pour connaître le milieu de la cellule il suffit de diviser ces deux valeurs par 2.
Petite recette pour créer un carré en 2D isométrique (ça nous servira à rien mais ça peut vous aider à visualiser)
- Faire un carré en 2D, par exemple 86x86
- Le tourner à 45°
- Diviser sa hauteur par 2
Bravo, vous avez créé un carré en 2D isométrique ! (un losange quoi)
Sur Unity l’unité de mesure n’est pas en pixel, on fait un peu comme on veut mais par simplicité on va dire qu’on est en 1:100, 100 pixel = 1 unité
Maintenant que toutes les notions sont bien définies, on va construire une grille complète.
On crée un Empty Object sur une scène Unity, on crée un script “GridManager“ et on l’associe à l’objet.
Le script sera en Singleton pour faciliter son accès depuis d’autres scripts plus tard
Sur Dofus 2 la grille fait 14 cellules de large et 20 de hauteur, sauf qu’en isométrique il faut aussi compter les cellules impaires, donc on a 14 * 20 * 2, pour un total de 560 cellules, le compte est bon !
Pour me faciliter la vie je décide d’écrire une petite fonction qui me donnera la position exact en pixel d’une cellule en fonction de son numéro (id), par exemple la cellule 0 est tout en haut à gauche et la 559 est tout en bas à droite (0 à 559 ça fait 560 cellules btw)
public static PointF GetPixelCoordByCellId(int cellId)
{
// Une division renvoi la position Y de la cellule
var y = cellId / 14;
// Le modulo renvoi la position X de la cellule
var x = cellId % 14;
var xInPx = col * 86;
var yInPx = (float)-(line * (43 / 2));
if (y % 2 != 0)
{
xInPx += 43;
}
yInPx += MaxHeight * 86f;
return new PointF(x, y);
}
Pour que ça soit plus clair voilà une visualisation de X et Y sur la grille
![[Image Introuvable]](https://lh6.googleusercontent.com/xxhhhEpdI4nq63yghevOAM1SIZWoxmbwo7u9eiZNESJ8l3KjvKyIpZVvjBNk2GlgHNVzU_D7_EexUwoFxHyPDQAyy6RMQk9MvFNy2NjmSJUfMyB_EUMlx_jYoXIXmfdgju0lgck5lw76eRs1sGZAenI)
Donc on a bien 14 cellules par lignes (X) et 20 * 2 = 40 par colonnes (Y)
Revenons au code rapidement
var yInPx = (float)-(line * (43 / 2));
Ce code fait que quand on descend d’une ligne, on descend d’une demi hauteur de pixel si vous avez bien suivis, vu que c’est isométrique, lors d’une nouvelle ligne le milieu de la prochaine ligne se trouve à la moitié de la hauteur de la cellule donc 21.5px.
var yInPx = (float)-(line * (43 / 2));
Unity décide que lorsqu’on on va vers le haut la valeur Y augmente, ce qui est plutôt contre intuitif vu que normalement le pixel 0,0 (x=0;y=0) sur une image c’est en haut à gauche, et si on descend Y monte, bref c’est l’inverse ici
Donc MaxHeight contient la hauteur maximum de la grille c’est à dire 20 * la hauteur d’une cellule donc 20 * 43 = 860, donc ça revert le grille, sinon ça serait la cellule en bas à gauche qui serait le 0,0, nous on veut que ça soit en haut a gauche !
La fonction renvoi donc à quel pixel se trouvera chaque cellule,
Il faudra pas oublier de diviser par 100 le résultat final pour utiliser le système de mesure d’Unity.
Maintenant créons la grille !
Dans notre script GridManager on créé une fonction Initialize()
Le principe est simple, pour chaque cellule on récupère sa position et on crée l’objet à partir de ça
On imagine quelque chose du genre
public void Initialize()
{
const short numCells = 560;
for (var cellId = 0; cellId < numCells; cellId++)
{
CreateCell(cellId);
}
}
public static PointF GetSceneCoordByCellId(int cellId)
{
var point = GetPixelCoordByCellId(cellId);
return new PointF(point.X / 100f, point.Y / 100f);
}
private void CreateCell(short cellId)
{
var point = GetSceneCoordByCellId(cellId);
var posX = point.X;
var posY = point.Y;
// Chaque cellule sera contenu dans un GameObject
var cell = new GameObject();
// Le parent de chaque cellule sera la grille
cell.transform.SetParent(gameObject.transform);
// On positionne la cellule à sa position
cell.transform.position = new Vector3(posX, posY, 0);
}
C’est déjà un bon début, par contre on y voit rien, il faudrait surement mettre un contour sur chaque cellule, on y rajoute donc un LineRenderer pour tracer des lignes !
var lr = cell.AddComponent<LineRenderer>();
lr.sortingLayerName = "UI";
lr.sortingOrder = 32700;
lr.startWidth = 0.01f;
lr.endWidth = 0.01f;
lr.shadowCastingMode = UnityEngine.Rendering.ShadowCastingMode.Off;
lr.receiveShadows = false;
On doit créer un matérial avec un Shader pour la couleur du contour, on le mets blanc avec une opacité assez basse pour pas que ça soit trop moche
var transparentMaterial = new Material(Shader.Find("Sprites/Default"))
{
color = new Color(1, 1, 1, 0.12f), // White with 12% opacity
};
On commence par créer une constance avec la taille d’une cellule avec la métrique d’Unity donc / 100f
const float cellWidth = 0.86f;
const float cellHeight = 0.43f;
On veut créé 5 lignes sur le LineRenderer ! (0 à 1, 1 à 2, 2 à 3, 3 à 4) + 1 pour le début
![[Image Introuvable]](https://lh5.googleusercontent.com/xqqDphP9acX8p03zS_eiI9-kDoReyF2TfIirwQsOOINHEnqR9ffGvFFAPz7LfRMA_tDnSfXeOvm9bm0HnB9faDUK-JMcru1sRyZAgtFRSPVzERbBK4O7YsTG6YAFLEbVN2R4DT4QHYiYhQZwysHNADA)
posX et posY correspondent au milieu gauche de la cellule, donc le point 0 sur la figure au dessus
lr.SetPosition(0, new Vector3(posX, posY, 0));
On y ajoute la moitié de la largeur pour avoir le milieu et la moitié de la hauteur pour être en haut, super on a fait notre première ligne ! de 0 à 1
lr.SetPosition(1, new Vector3(posX + cellWidth / 2f, posY + cellHeight / 2f, 0));
Ensuite on fait de 1 à 2, donc c’est simple, on prendre juste la position de base et on y ajoute la taille de cellule pour aller de l’autre côté
lr.SetPosition(2, new Vector3(posX + cellWidth, posY, 0));
Bon je vous fais pas un dessin on ajoute pour le reste
lr.SetPosition(3, new Vector3(posX + cellWidth / 2f, posY - cellHeight / 2f, 0));
lr.SetPosition(4, new Vector3(posX, posY, 0));
Ensuite on va rajouter un PolygonCollider2D pour créer une hitbox de la cellule qui pourra être utilisée plus tard pour handle les cliques de la souris.
Et voilà ! On à vu pas à pas comment créer une grille 2D Isométrique, la prochaine étape sera de charger une map et ses tiles !