tuiles isométriques

Dans ce tutoriel, nous allons créer des tuiles isométriques pré-rendues pour l'utilisation dans les jeux 2D. Notez que ce n'est pas de l'ingénierie isométrique où chaque angle est de 60 degrés. Dans les jeux vidéo à base de pixels, nous obtenons des lignes diagonales plus nettes en utilisant une projection légèrement différente.

Caméra orthographique

La première chose que nous devons faire, c'est de passer à une caméra orthographique. Cliquez avec le bouton droit de la souris pour sélectionner la caméra en vue 3D. Cliquez ensuite sur l'icône Caméra dans le panneau Propriétés. Sous la section "Lens", choisissez Orthographique.

Dans le résultat, vous verrez que notre cube est maintenant dans la bonne perspective. Dans les jeux isométriques, les lignes perpendiculairement au plan de masse doivent apparaître parallèles les unes aux autres. Autrement dit, Orthographic signifie que les objets plus éloignés ne semblent pas plus petits.

Angle de la caméra isométrique

Ensuite, nous devons régler l'angle de la caméra pour un mode isométrique parfait. Dans les jeux vidéo, lorsque nous disons "isométrique", nous entendons généralement par là que la taille de la tuile de base est exactement 2 fois plus large que haute (ex. 64x32). Tant que la caméra est toujours sélectionné et que le curseur se trouve sur la fenêtre 3D, appuyez sur "N" pour afficher les propriétés de l'objet.

Les réglages de Rotation sont X = 60, Y = 0 et Z = 45. Et pendant que nous y sommes, plaçons la caméra dans un endroit prévisible : X = 10, Y = -10 et Z = 10. Une fois ceux-ci définis, vous pouvez appuyer à nouveau sur N pour fermer la fenêtre des propriétés de la transformation.

Que fait cet angle de caméra ? Si vous mesurez le dessus de ce cube, vous pouvez vérifier que la largeur du pixel est exactement le double de la hauteur du pixel.

Taille du rendu

Nous souhaitons que notre rendu soit exactement la bonne taille pour une utilisation dans un jeu. C'est plus facile si on commence par une simple dalle de sol. Tout d'abord, supprimez le cube en cliquant avec le bouton droit de la souris et en appuyant sur Supprimer ou en sélectionnant le cube et en appuyant sur la touche SUPPR. Ensuite nous ajoutons un Plane, en utilisant le menu principal Add > Mesh > Plane.

Dans la zone Propriétés, cliquez sur l'onglet Render pour changer la taille du rendu. Sous la section Dimensions, changez la résolution en X: 64 et Y: 32 et l'échelle à 100%. La rendu sera maintenant correctement dimensionnée à 64x32 pixels, mais le plane est décentré et trop petit.

Emplacement de la caméra et échelle orthographique

Maintenant, nous peaufinons la caméra jusqu'à ce que la tuile s'adapte à la zone de sortie. Dans la fenêtre 3D, passez en mode Caméra en appuyant sur Numpad 0 ou en cliquant sur View > Camera.

La fenêtre 3D ressemble maintenant à ceci. Tout à l'intérieur de la ligne pointillée est ce que la caméra voit. Tout ce qui se trouve à l'extérieur de la ligne pointillée est assombri et se trouve à l'extérieur de la vue de la caméra. Assurez-vous que la caméra est l'objet sélectionné - faites-le en cliquant avec le bouton droit de la souris sur le contour en pointillés de la vue de notre caméra en 3D (le contour va briller).

Ouvrez à nouveau les propriétés de la caméra (menu Propriétés, cliquez sur la caméra) et notez la valeur de l'échelle orthographique (Orthographic scale). Ouvrez à nouveau le panneau Propriétés de la transformation (touche N dans la vue 3D) et notez la valeur Location: Z.

Modifiez ces deux valeurs jusqu'à ce que le Plane occupe toute la zone de rendu. L'échelle orthographique change le "zoom" et l'emplacement Z change la position verticale. Modifiez d'abord l'échelle orthographique jusqu'à ce que la largeur du Plane soit correcte, puis changez l'emplacement Z jusqu'à ce qu'il soit centré verticalement. Ici les valeurs sont Scale: 2.800 et Location Z: 8.170.

Astuce : il est préférable que le Plane déborde légèrement plutôt que d'être trop petit. Cela permet d'éviter les coutures translucides entre les tuiles. Maintenant, votre Plane est à la bonne taille !

Transparence

Nos tuiles ne fonctionneront pas bien avec ce fond opaque. Voici comment configurer un arrière-plan transparent. Dans le panneau Propriétés, passez à la section Render. Sous Output changer pour RGBA (disponible uniquement dans certains formats, par exemple PNG). Sous Shading, passez du mode Alpha Sky au mode Alpha Transparent. Sans cela, les bords translucides de votre tuile aura la couleur de votre ciel 3D (causant généralement des coutures visibles).

Éclairage

Si vous regardez attentivement votre Plane, vous verrez que le côté gauche est plus sombre que le côté droit. Ceci est dû au fait que les lampes Point sont de plus en plus faibles au fur et à mesure qu'elles s'éloignent. Nous voulons utiliser des lampes qui ne sont pas affectées par la distance, comme les lampes solaires (Sun).

Dans la fenêtre 3D, passez en vue de dessus (pavé numérique 7 ou View > Top). Sélectionnez la lampe (clic droit), dans le menu Propriétés, cliquez sur le bouton Lampe (où se trouvait auparavant la caméra), puis changez le type de lampe de Point à Sun.

Grandes tuiles

Toutes vos tuiles ne seront pas en forme de plancher (64x32). Vous voudrez de grandes tuiles qui se superposent au sol. Ici, nous allons créer une tuile cubique. Supprimez le Plane et ajoutez un cube (assurez-vous qu'il est positionné à l'origine). Changez la résolution de sortie de 64x32 à 64x128. Maintenant, changez à nouveau l'emplacement Z et l'échelle orthographique de la caméra. Ici les valeurs sont Scale: 5.600 et Location Z: 9.600.

Il y a un peu d'espace inutilisé au-dessus du cube, mais pour la plupart des cas il est préférable de garder vos dimensions de carreaux à des puissances de 2 (par exemple 16, 32, 64, 128, 256, 512).

Tuiles surdimensionnées

Les tuiles qui s'étendent sur plusieurs espaces de grille peuvent être créés en quelques étapes supplémentaires. Disons que je veux créer un grand bâtiment qui occupe une surface de 2x3 tuiles, je calcule que la tuile devrait être 160x256 pixels. Tout d'abord, réglez la sortie de rendu sur le 160x256. Ensuite, créez un Plane "guide" qui occupe la surface de carreaux 2x3. Déplacez le plane de manière à ce qu'il soit centré sur l'origine (nous voulons positionner la tuile au lieu de changer l'emplacement X, Y de la caméra).

Maintenant, ajustez simplement l'échelle orthographique et la position Z de la caméra comme si vous créiez une tuile haute. Installez votre plan de guidage à gauche + droite + bas de la caméra. Maintenant, votre sortie capturera correctement cette tuile haute de 2x3.

Trucs et astuces

Voici quelques conseils supplémentaires qui pourraient vous éviter des ennuis plus tard.

• Configurez une scène Blender vierge qui contient vos caméras isométriques, lumières, etc. Utilisez-la comme point de départ pour créer de nouvelles tuiles.
• Cela aide à choisir une échelle fixe pour vos tuiles. Utilisez 1 unité de Blender = 1 mètre, et 1 tuile = 1 mètre carré. De cette façon, vous pouvez garder tous vos assets à la même échelle.
• Vous pouvez inclure des ombres projetées pour les grandes tuiles. Créez un grand Plane à Z = 0 pour attraper les ombres. Donnez-lui un matériau avec Shadow > "Shadows Only" activé. Réglez également la Transparency > Alpha sur 0,500 pour les ombres translucides.
• Si vous créez un grand nombre de tuiles, il est facile de les rassembler en une seule image de tuile à l'aide de l'outil ImageMagick "montage".
• Pour obtenir des détails plus précis dans votre rendu (peut-être au détriment du bruit), changez la taille d'anti-aliasing de Mitchell-Netravali de 1.000 à 1.500