Nous allons ici nous intéresser à l'isométrie et à son utilisation dans les jeux à base de tuiles.

Les tuiles isométriques correspondent globalemenent à un losange (nous nous y intéresserons plus précisément dans la suite du tuto), utilisées de la même façon que les tuiles 2D (assemblage de tuiles pour former une carte).

Il existe de nombreux jeux basés sur l'isométrie. Parmis eux, on se doit de citer les célèbres jeux d'Ankama (Dofus, Dofus Arena, Wakfu), mais bien d'autres existent, pour n'en citer qu'un seul autre, on peu par exemple prendre Sonic 3d flickies'Island.

L'isométrie est un moyen d'approcher une vue 3D tout en utilisant des sprites 2D. Cette méthode est donc idéale pour créer un jeu simplement et nécessitant peu de ressources.

Le principal avantage est la vue qui s'approche plus de la 3D, permet d'utiliser les hauteurs, etc. On peut également utiliser huit mouvements (c'est également possible en 2D, mais avec beaucoup moins d'intérêt).

Le principe d'une tuile isométrique est simple : il s'agit d'un losange donc la hauteur est la moitié de la largeur.

Pour obtenir cette figure, on peu par exemple partir d'un carré, le faire pivoter de 45° puis diviser sa hauteur par deux. Si ce n'est pas clair, j'ai fait ce schéma pour clarifier un peu.

En utilisant flash, il s'agit de faire ceci :

1) Pour commencer, il faut dessiner le carré. De façon à être sûr que la hauteur soit égale à la largeur (c'est à dire qu'il s'agisse bel et bien d'un carré), placez vous sur la diagonale en traçant le carré, le rond au coin du carré sera plus gros lorsque vous être bien placé sur la diagonale (vous informant ainsi qu'il s'agit bien d'un carré), comme le montre la figure ci-contre. (pensez à vérifier que l'aimant est bel est bien activé, comme ceci : ).

Notez qu'en maintenant la touche majuscule enfoncée pendant que vous dessinez, l’homothétie est contrainte (dit autrement, ça force à faire un carré ou un cercle)


2) Une fois le carré dessiné, allez dans le menu modification, puis Transformer et enfin, sélectionnez Redimensionner et faire pivoter, ou utilisez le raccourci clavier “CMD + ALT + S” sur mac ou “CTRL + ALT + S” sur windows, comme ceci :

Une fenêtre s'ouvre alors. Laisser l'échelle à 100%, et indiquez “45” dans la case “Faire pivoter”, comme ceci :

Si vous utilisez l'outil de transformation libre (raccourci Q), et que vous faites pivoter “à la main” vous constaterez avec bonheur que la rotation est contrainte par pas de 45, la chance !


3) Enfin, il ne vous reste plus qu'à diviser la hauteur par deux. Pour cela, reportez vous au panneau “Propriétés”. Commencez d'abord par vérifier que la chaine (entourée en rouge sur l'image) n'est pas sélectionnée (pour éviter que la largeur soit modifiée en même temps que la hauteur). Ensuite, divisez la hauteur par deux, en ajoutant ”/2” dans le champ hauteur, comme c'est fait sur l'image.


Comme vous le voyez, dessiner un sol isométrique avec flash est relativement facile et rapide. Après ces quelques manipulations, vous devriez obtenir un résultat similaire au résultat suivant :

Nous allons maintenant voir quelques autres techniques pour compléter cette initiation à l'isométrie.

L'isométrie permet de dessiner relativement facilement grâce aux très nombreuses parallèles présentes, et flash aide beaucoup à la réalisation de ce genre de dessins.

En isométrie, il y a de très nombreuses parallèles. Ainsi, le copier-coller peut beaucoup vous aider dans la structuration de vos dessins. Ceci mis à part, voici quelques conseils pour vous aider à bien structurer en isométrie :

• La plupart du temps, vous pouvez partir d'une tuile simple (un sol, tel que nous l'avions réalisé au début de cette page par exemple), comme base de votre dessin.
• Lors d'un copier-coller, vous pouvez maintenir la touche shift en collant (si vous utiliser les raccourcis clavier) ou choisir coller en place au lieu de coller dans le menu “Modifier”, de façon à coller l'objet au même endroit que l'objet copié.
• En déplaçant un objet avec le clavier, maintenir la touche shift permet de le déplacer 10 fois plus vite qu'en temps normal. Attention cependant, la translation dépend du zoom, faites donc attention au zoom actuel si vous voulez déplacer des objets d'un même intervalle.
• Lorsque vous déplacez un objet à la souris, pensez à activer l'aimant (comme ceci : ), de façon à placer l'objet en fonction des autres de façon précise.

Une autre méthode peu vous aider à réaliser des dessins complexes. Comme nous l'avons vu, nous pouvons passer d'une vue 2D à une vue iso en faisant pivoter de 45° puis en divisant la hauteur par deux. Dans de nombreux cas, dessiner d'abord en 2D permet de simplifier grandement le dessin. Pour vous donner un exemple, j'ai mis les étape de la réalisation d'un synthé ci-dessous, ou cette technique m'a permis de réaliser très simplement les touches de celui-ci.

Pour revoir tous les conseils vu dans cette partie, nous allons dessiner une table étape par étape. Bien sur, il n'y a pas de difficultés, mais ces conseils semblerons plus concrets si nous les abordons en pratique ! Nous allons donc attaquer la construction … de notre table.

1. Pour commencer, on va partir d'un sol simple (qui sera ici la surface de la table), comme nous l'avions fait au début de cette page (sans remplissage, nous nous en occuperons après).
2. Nous allons maintenant copier les deux traits inférieurs de la tuile (en collant, utilisez la touche shift ou choisissez “coller en place” de façon à les coller au même endroit), et le décaler vers le bas (en maintenant la touche shift enfoncée, vous pouvez appuyer sur la flèche vers le bas 7 fois par exemple), de façon à obtenir la figure suivante.
3. Nous allons maintenant relier les deux figures par trois traits verticaux. Pour cela, choisissez l'outil ligne (icône , ou appuyez sur N), et reliez les deux figures (pensez à activer l'aimant).
4. Maintenant, nous allons réaliser la même opération, pour, cette fois, réaliser l'épaisseur de la surface de la table. Collez à nouveau les deux traits copiés précédemment, et décalez les vers les bas d'une fois par exemple (en maintenant la touche shift, ce qui correspond à dix fois sans).
5. Ensuite, nous allons réalisez les pieds de la table. Nous allons donc copier les trois traits verticaux, et les déplacer vers la gauche et la droite. De façon à ce qu'ils soient suffisament grands (qu'ils atteignent voir dépassent les lignes dans l'autre sens), vous pouvez les coller plusieurs fois à différentes hauteurs, pour obtenir ceci :
6. Il est maintenant tant de supprimer les traits de construction, mis en rouge sur la figure suivante.
7. Maintenant, de façon à réaliser l'epaisseur des pieds de la table, on peut copier coller les traits du millieu, et les déplacer sur les pieds extérieurs (en activant l'aimant, il seront placés au bon endroit simplement en les déplaçant depuis un bord et en s'approchant du bon endroit). On obtient ainsi la figure suivante (les traits copiés et collés sont en vert).
8. On obtient alors la figure suivante : Choisissez alors l'outil pot de peinture (icône , ou appuyez sur la touche K), et peignez la table (nous pouvons utiliser une seule couleur pour l'instant, les effets d'ombrage seront vus plus tard).

La première étape pour réaliser l'ombrage est de choisir l'emplacement de la source de lumière. Généralement, on choisit de la faire provenir de la droite où de la gauche, comme ceci :

Une méthode simple pour appliquer les différences de lumière est de superposer, sur les graphiques, des calques noirs semi-transparents. En choisissant un éclairage latéral, de la droite ou de la gauche, il suffit de choisir un coté plus foncé que l'autre. Par exemple, si l'éclairage provient de la droite, on peut appliquer un calque noir avec un alpha de 20% sur les faces de droite, et 40% sur celles à gauche, étant moins éclairées que celles de droite.

Faites attention à ce que tous les tuiles d'une même carte soient réalisées sur le même éclairage, des incohérences à ce niveau gâcheraient fortement votre projet ! L'intensité de l'ombrage doit dépendre des tuiles, selon les couleurs (voire textures) utilisées, différentes intensités sont nécessaires. Enfin, évitez d'utilisez des tuiles trop sombre, si vous faites un décor de nuit, profitez en pour réalisez de forts effets d'éclairage et de contraste, mais évitez à tout pris les scènes trop sombres, très désagréables pour le joueur.

Nous allons donc maintenant nous occuper d'ajouter les différences de couleur sur notre table. Nous pourrions simplement utiliser différentes couleurs, mais nous allons ici utiliser des calques transparents pour réaliser les ombres. Ici, j'ai choisis d'utiliser un éclairage venant de la gauche.

1. Pour commencer, sélectionnez l'ensemble des traits de la table en double-cliquant sur l'un d'entre eux.
2. Groupez ces traits en appuyant sur CTRL/CMD + G, ou en sélectionnant l'option “Grouper” du menu “Modification”. Entrez ensuite dans le groupe créé en double cliquant dessus. Les traits sont donc maintenant séparés du remplissage, et ce groupe servira à contenir les effets d'ombrage.
3. Remplissez ensuite les faces latérales de noir (la lumière provenant de la gauche, choisissez une transparence de 20% sur les faces à gauche, et 40% sur les faces à droite). On obtient alors ceci :
4. Enfin, sortez du groupe en double cliquant quelque part en dehors de la table. On a alors notre table avec les effets d'ombre.

Les textures sont loin d'être obligatoires pour dessiner en isométrie, mais elles conviennent parfaitement à certains styles de dessins (le 3D-like particulièrement). Flash permet là encore une utilisation particulièrement facile de celles-ci.

Pour commencer, il faut importer les textures choisies dans la bibliothèque, pour cela, utilisez le menu Fichier > Importer > Importer dans la bibliothèque…. Une fenêtre s'ouvre, et il vous suffit alors de choisir la texture à importer (vous pouvez aussi glisser tout simplement les images dans le panneau Bibliothèque).

Une fois la texture importée, nous pouvons l'appliquer à une face. Commencez par sélectionner la face à texturer, et reportez vous au panneau “Couleur”. Dans la liste déroulante en haut à droite, sélectionnez “Remplissage bitmap”.

Ensuite, choisissez la texture à utiliser parmis celles proposées dans les cases présentes dans la partie inférieure du panneau Couleur. Maintenant, il ne reste plus qu'à placer correctement la texture choisie.

Pour cela, choisissez l'outil “transformation de dégradé” (icône ou appuyez sur la touche F), et placez la texture dans le même sens que la face. Cliquez sur pour modifier l'inclinaison de la texture (verticale ou horizontale), et sur pour changer la taille de la texture (de même, horizontalement ou verticalement), pour placer correctement la texture.

Et voila, votre texture est correctement appliquée !

Bien, nous pouvons maintenant appliquer des textures à notre table ! Les étapes à suivre pour appliquer une texture viennent d'être détaillées, je pense qu'il est donc inutile de le refaire pour la table, je vous laisse vous en occuper.

Pour ma part, j'ai choisis cette texture :

Et j'obtiens le résultat suivant :

En général, chaque jeu ou projet se distingue par un style graphique particulier, que les designers choisissent avant de commencer à dessiner. Nous allons ici voir brièvement deux styles que vous pouvez utiliser dans vos projets.

Pour avoir un rendu du style cel-shading, on utilise généralement des traits épais sur les bords extérieurs des objets, et aucun trait à l'intérieur de ceux-ci.

Pour appliquer un trait épais à un objet, commencez par choisir l'outil encrier (icône ou appuyez sur la touche “S”), reportez vous au panneau “Propriétés”, et choisissez l'épaisseur et le style de trait (attention, aucun objet ne doit être sélectionné pour avoir accès à ce panneau) :

Et cliquez sur les bords sur lesquels vous voulez créer des traits.

Pour avoir un rendu du style 3D-like, on utilise généralement des textures sur toutes les faces, un ombrage précis et prononcé, et on évite le plus souvent d'utiliser des traits. Ici, rien de plus à vous expliquer, nous avons déjà abordé tout ça .

De même que dans la partie précèdente, nous ne ferons pas d'étape par étape ici, toutes les compétences nécessaires ayant été déjà vues.

Pour notre table et notre chaise, nous pouvons alors obtenir ceci (en fonction du style choisi) :

J'espère que ce tutoriel vous aura permis de vous initier au dessin en isométrie. Si vous avez des questions, n'hésitez pas à m'en faire part ; de même, si vous vous lancez dans la réalisation d'un projet et que vous réutilisez des compétences acquises ici, n'hésitez surtout pas à me montrer le résultat, j'en serais ravis !

Il ne nous reste maintenant plus qu'à passer au code dans la deuxième partie !