Share
Si vous piratez un jeu ensemble pour un jam ou # 1GAM, vous n'êtes probablement pas trop préoccupé par l'idée de le faire "de la bonne façon". Dans cet article, je partagerai quelques astuces pour dessiner et coder rapidement et facilement des niveaux pseudo-isométriques..
Techniquement, "isométrique" fait référence à une projection où l'angle entre les axes x, y et z (en dimensions d'écran) est de 120 °. Et le correct moyen de convertir les coordonnées de l’écran en coordonnées isométriques est d’utiliser une matrice de transformation.
Mais oublie ça! Dans ce petit conseil, nous allons couper certains coins et tricher un peu.
Regarde ça. Nous pouvons transformer une grille régulière à 90 ° en quelque chose qui ressemble assez à une grille isométrique en deux étapes simples.
Commencez avec une grille comme celle-ci (je l'appellerai une grille cartésienne):
Faites-le pivoter de 45 °:
Écrasez-le à 50% verticalement:
Terminé! Ceci devrait être correctement appelé dimétrique plutôt que isométrique, comme expliqué dans ce merveilleux article, mais cela ira dans la plupart des cas.
Cette grille ne fera pas beaucoup d'un jeu à elle seule. Peut-être que vous voulez ajouter des pièces d'échecs, peut-être que vous voulez ajouter des monstres - quoi que vous ajoutiez, vous aurez besoin de savoir où le mettre.
Voici l'objet que je vais utiliser (de The Noun Project):
Nous n'avons pas besoin de le faire pivoter ou de l'écraser pour l'adapter à la grille; il suffit de le réduire de manière appropriée:
Comme vous pouvez le constater, la base (les pieds du gars, dans ce cas) doit simplement aller au centre de la grille. Nous devons donc savoir où cela se trouve.
Nous pourrions utiliser la trigonométrie ou une matrice de transformation ou quelque chose du genre, mais il existe une algèbre simple qui fera l'affaire..
Mesurer la demi-largeur et la demi-hauteur du carreau diagonal (en dimensions d'écran):
Ceci est zoomé. var tileHalfWidth = 17,5; var tileHalfHeight = 8,75;
Déterminez les indices de grille de l'espace qui vous intéresse:
Comme vous pouvez le constater, j’utilise le centre de la grille comme origine. Le mec est debout sur l'espace (4, 2).
Convertissez les coordonnées d'espace de la grille en coordonnées d'écran à l'aide de cette formule:
screenX = (isoX - isoY) * tileHalfWidth; screenY = (isoX + isoY) * tileHalfHeight;
Dans notre cas, cela donnera les coordonnées à l'écran de (35, 52,5).
C'est en fait le coin "supérieur" de l'espace; pour obtenir le centre de l'espace, vous devez ajouter tileHalfHeight au résultat pour écranY.
Vous devrez ajouter un décalage. Il suffit de déterminer manuellement les coordonnées de l’espace de la grille d’origine (au centre), en coordonnées d’écran, et de les ajouter à (screenX, screenY).
Votre code de conversion final ressemble à ceci:
screenX = ((isoX - isoY) * tileHalfWidth) + screenOriginOffsetX; screenY = ((isoX + isoY) * tileHalfHeight) + tileHalfHeight + screenOriginOffsetY;
Supposons que nous voulions créer un objet dans l'espace de la grille sur lequel le joueur clique. Comment pouvons-nous déterminer quel espace a été cliqué?
Avec un peu d'algèbre, nous pouvons simplement réorganiser les équations ci-dessus pour obtenir ceci:
// Tout d'abord, ajustez le décalage: var adjScreenX = screenX - screenOriginOffsetX; var adjScreenY = screenY - screenOriginOffsetY; // Maintenant, récupérez l'espace de la grille: isoX = ((adjScreenY / tileHalfHeight) + (adjScreenX / tileHalfWidth)) / 2; isoY = ((adjRecreenY / tileHalfHeight) - (adjScreenX / tileHalfWidth)) / 2;
Puis lopez tout ce qui dépasse les décimales pour savoir quel est l’espace de la grille..
Une petite chose à retenir: si vous bêlez, assurez-vous de rendre les objets à l'arrière en premier! Sinon, vous pourriez vous retrouver avec des effets étranges qui se chevauchent:
C'est simple à faire. il vous suffit de commander ceux qui ont le plus bas (c'est-à-dire le plus haut) écranY valeurs en premier:
Notez également qu'il n'est pas nécessaire de redimensionner les objets en fonction de leur distance par rapport à vous. avec une vue pseudo-isométrique comme celle-ci, les objets plus éloignés n'apparaissent pas plus petits que ceux plus proches de vous.
Accentsconagua