♠ But du cours : Apprendre à créer de A à Z à l'aide de vos petits doigts et d'un logiciel de graphisme un tile de sol.

Notes :

- J'ai la théorie en tête, mais ce sera une première pour moi aussi donc on va y aller au pas à pas.
- Le logiciel utilisé sera Photoshop, mais ce tuto est relativement adaptable aux autres logiciels. Pourquoi ce choix ? Pour la rentabilité et l'efficacité, tout simplement. 'Toshop permet en effet des filtres intéressants, dont la bonne vieille translation qui vous sera expliquée plus loin.
- J'utilise toshop en anglais, mais je m'efforcerai de vous traduire les termes du mieux possible.

♠ Les bases des bases :

Un tile [ /!\ des tilesets A5 - B - C - D - E ] mesure 32*32 pixels. Il s'agit d'un carré tout simple, destiné à se répéter, du moins lorsque nous parlons de "sols" ou de "murs" comme aujourd'hui. C'est donc simplement ce que vous utilisez lorsque vous mappez quelque chose.
Dans le cas des sols - cas qui sera abordé ici, le raccord entre les carrés ne doit idéalement pas être visible ! ( sauf si on parle de dalles, de sols artificiels de type "maison", possédant carrément un bord, dont la répétition est voulue ).


Deux sous-types possibles de tiles de sol, à gauche, naturels - dont la répétition est discrète -, à droite, type "dalles" à répétition visible.

Pour pouvoir être utilisable, ce type de tile doit être impérativement intégré à votre tile A5. Il ne peut en effet être utilisé ailleurs ( les tiles A1 à A4 ayant un comportement particulier, et les B-C-D-E formant la couche n°2 ( ce qui signifierait qu'ajouter votre tile de sol là vous empêcherait d'ajouter des éléments dessus, sauf peut-être en event ! ) ).
Après la théorie, commençons maintenant la pratique.

♠ De l'herbe pas à pas :

1) Créez un nouveau document de 32*32 pixels sous votre logiciel de graphisme ( pour rappel, nous utiliserons par défaut photoshop, ici ). Remplissez-le ( pot de peinture, ou alt+suppr. ) d'une couleur verte choisie selon vos besoins ( soit "un peu au pif" si vous vous créez votre style graphique, ou bien selon une palette de couleurs si vous voulez faire quelque chose collant aux rtps de Vx / d'XP etc.). Vous vous retrouvez donc avec un carré vert de 32*32, jusque là, rien de compliqué.
Ce n'est bien évidemment pas tout - à quoi servirait ce tuto, sinon ? L'herbe, ce n'est pas du vert uniforme style mur peint.
Examinons donc l'herbe que nous met à disposition Enterbrain et zoomons un peu.



Des pixels. Yeah, seriously. Passons donc à la suite pour améliorer ça.

2) Du bruit. L'herbe des rtps, ce n'est rien d'autre que du bruit. Keskilrakonte ? Voyons ça ensemble.
Dupliquez votre calque vert ( clic droit sur le calque, dupliquer ) et appliquez un effet "ajouter du bruit" ( Bruit > ajouter du bruit ) sur celui du dessus. Réglez l'effet comme vous le souhaitez ( je vous conseille de garder "uniforme" coché et de cocher également "monochromatique" ( monochrome ? ), sinon vous aurez du rose, par exemple, dans votre herbe ).
Si vous utilisez paint.net, mettez la "saturation de la couleur" le plus bas possible.

Avec 12% / uniforme / monochromatique, vous vous retrouvez normalement avec quelque chose qui commence doucement à ressembler à de l'herbe :



3)"Parfait, c'est bon !", vous dites vous déjà peut-être. Pas si vite. Commencez déjà par faire quelques réglages si vous estimez ça nécessaire ( ex : désaturer, faire varier la couleur, atténuer l'effet en réduisant l'opacité de votre calque supérieur, etc etc ). Ensuite, nous allons tester en live notre texture, sans même passer par RmVx.
Comment ? C'est très simple. Un tile de sol, ce n'est qu'un "motif" en terme de photoshop, et oui ! Sélectionnez votre tile ( ctrl+A, sélectionner tout ), allez dans "édition > utiliser comme motif" ( alias : edit > define pattern ). Ca vous ouvre une petite fenêtre : nommez vite fait votre tile ( herbe, ... ) et cliquez sur okay.
Créez un nouveau document, relativement grand ( ex : 800*800 px ). Nous allons donc simuler une map. Comment ?
En quelques clics. Edition > remplir > motif et là, vous choisissez le motif que vous venez de créer. Cliquez sur okay.
Et là, c'est le drame. Horreur ! En plissant les yeux, on peut voir le "carré" de votre motif, comme une grille plus claire/plus foncé selon votre tile. Bref, on peut voir la répétition - c'est un mauvais tile, un mauvais motif.




Pas de panique.

4) Retoucher les intersections - l'option translation ( offset ). Retournez sur votre tile et, en l'occurrence, le calque du dessus. Allez ensuite dans filtre > divers > translation. Vérifier que "wrap around" est bien coché ( troisième et dernière option ), et insérez les valeurs 16 dans horizontal et vertical. Votre tile sera donc translaté de 16 dans les deux sens et l'intersection apparaitra au milieu.



Nous arrivons au noeud du problème. L'endroit où se répète votre tile est au milieu du carré, mais votre oeil ( et le mien non plus ) n'est malheureusement pas apte à discerner parfaitement où ça cloche - il va donc valoir un peu improviser et le faire à coups d'essais et d'erreur. Prenez l'outil tampon, réglez le sur un petit pinceau ( 1-2 px ), puis mélangez très légèrement les pixels.



En d'autres termes, servez vous du tampon pour atténuer les jonctions ( ici, entre les repères cyans ), qui se trouvent à présent aux pixels 15-16-17-18, aussi bien horizontalement que verticalement parlant, grâce au filtre de translation. Attention à bien le faire dans la bonne zone et de façon discrète, pour ne pas faire de votre tile de la bouillie.
Comment se servir du tampon ? C'est un peu semblable à une aiguille et à du fil. Gardez alt enfoncé et cliquez sur la partie que vous voulez répéter. Lâchez alt, cliquez sur l'endroit où vous voulez répéter la partie sélectionnée et là, peignez comme avec un pinceau normal.
Où "piquer", alors ? Comme je l'ai dit, c'est comme recoudre une plaie - un coup au dessus, un coup en dessous. Changez souvent de zone à copier ou vous ferez plus de mal que de bien. Alt au dessus, peignez vers le bas. Déplacez vous vers la droite. Alt au dessous, peignez vers le haut. Et ainsi de suite.

Il est en outre recommandé de vérifier que vous n'avez pas de gros amas de pixels plus sombres ou plus clairs que les autres qui seraient trop visibles en cas de répétition. Si c'est le cas, prenez la gomme mettez la en opacité faible ( ex entre 30 et 50% ) et gommez légèrement l'endroit en question ( sur le calque supérieur, évidemment ).
Tout est une question d'essais et d'erreurs. Testez votre motif au fur et à mesure.

Remettez votre tile dans son état initial ( bien que ce ne soit pas si important que ça, m'enfin ) en faisant ctrl+F ( = répéter le dernier filtre ).
Ensuite, faites-en une nouvelle fois un motif ( ctrl+A, édition>utiliser comme motif), nommez-le autrement que votre premier pour ne pas confondre, et essayez-le sur un votre document de 800*800.
Comparons donc les deux.



Vous pouvez donc voir ici que nos petites modifications ont rendues notre tile beaucoup plus fluide et discret au niveau répétition.
Une fois satisfaits du résultat, aplatissez, ouvrez votre tileset A5 et collez le tile créé à la place adéquate ( ou, en cas de projet full custom, utilisez ce template ( piqué à SD-Arius ) et collez le où vous voulez ).
C'est tout !



Vous voilà donc avec votre herbe, prête à servir !

♠ De la terre :

1) On commence à comprendre le principe, d'abord un carré de 32*32 en brun clair et peu saturé, puis on compare ensuite avec la terre des rtps.



En extrapolant un peu, on peut voir :

- des pixels un peu comme l'herbe, mais en moins visibles, pour casser l'uniformité de la surface
- des sortes de "brisures" qui font penser à de la terre.

2) Commençons donc par un peu de bruit, mais en opacité beaucoup plus faible. Dupliquez donc le calque de base, filtre ajout de bruit + opacité basse.
Avec un ajout de bruit de 3, et une opacité de +/- 75, nous obtenons donc déjà :



Nous allons donc nous attaquer aux craquelures.

3) NON, nous n'utiliserons pas l'effet craquelure de 'toshop, bien essayé petit malin, mais c'est moche et ça ne ressemble à rien. Non, utilisons plus simplement nos doigts et un pinceau à bout fin ( 1-2 px ), couleur brun foncé. Dessinons tout simplement des craquelures un peu aléatoires sur un nouveau calque pour pouvoir ensuite rectifier.



Nous allons maintenant atténuer tout ça. Comment ? D'abord, en réduisant l'opacité des craquelures à quelque chose comme 22%. Ensuite, dupliquez ce calque et faites lui faire une rotation de 90 degrés pour entrecroiser vos craquelures. Vous pouvez répéter l'opération dans l'autre sens, accentuer un calque plus que l'autre etc, bref c'est à vous de jouer. N'oubliez pas de dézoomer de temps à autres pour voir l'effet final, car de près les choses sont bien souvent différentes.
Nous arrivons donc à quelque chose comme ceci :



4) Les finitions, à nouveau => essais avec motif, et corrections grâce à la translation ( n'oubliez pas d'aplatir avant la translation ou seul le calque supérieur sera translaté ).



Comme vous pouvez le voir, le principal problème vient de l'absence de craquelures au centre, donc nous allons nous servir du tampon pour combler ça. Atténuez également les morceaux trop foncés à l'aide d'un pinceau brun clair de faible opacité ( +/- 20% ). Un dernier test en remplissage de motif et c'est bon !



Votre nouveau tile est donc prêt à être ajouté à votre tileset.

C'est sympa, faire partager tes idées et ton savoir.

+ 2 en graphismes et + 3 en participation.