[RMXP]-Mapping, ombres, lumières de Valefor-

Bonjour, petits choux à la crème.

Comme promis, sur le topic de Single Path, voici un très gros tuto sur comment je fais mes maps, nous allons donc voir comment réaliser la map en elle-même, les détails, les ombres, les effets de lumière (vite-fait)
Mon style de mapping n'a rien d'unique ou d'incroyablement compliqué, cependant il est très très gourmand en temps et en taille. Comptez un tileset par map (et pas un tileset par village par exemple) et pour chaque map, 2 images dans le dossier Picture.

Donc, ce n'est pas forcément un style de mapping que je recommande, du moins pas pour tout les types de projets. A mon avis il est très possible de faire de très belles choses avec un simple tileset, et le gain de temps et de place est considérable.

Pour ce tuto, voici les outils nécessaires:

-RPG Maker XP. (Le script Panoramisator de Zeus81 est très très utile pour ça.)
-Adobe Photoshop CS4, ou dessus, ou dessous, un logiciel moins complet peut faire l'affaire tant que ce logiciel gère les calques.
-Un Ordinateur
-Une paire de mains
-Un cerveau

Découpons le tuto en étapes.

1-
Prenez un tileset de votre collection, afin de créer la base de la map. Comme vous le voyez, pas besoin de surcharger la map, ne mettez que les éléments qu'il serais long à placer sur photoshop, comme les bâtiments, éléments en plusieurs parties (la corde d’étendage)  et les élévations. Surtout les élévations.



2-
Exportez votre map avec le panoramisator, exportez en format PNG, en séparant les couches de la map sur plusieurs fichier, n'affichez ni le brouillard ni le panorama.



Ensuite, ouvrez photoshop et ouvrez les 3 fichiers créers, et mélangez les en un seul ficher, qui devrait contenir 3 calques comme l'image ci-dessous :

1:Calque1
2:Claque 2
3:Calque 3

3-
Réouvrez RMXP, et remplissez la surface de la map avec une texture du tileset, comme des caillous, de l'herbe, du feuillage, n'importe quoi. Puis collez ces textures dans votre fichier photoshop, en tant que calques.



Il est sans doutes plus simple d'avoir une banque de larges textures directement dans son ordinateur, mais avec cette technique on est sûr(e) que les textures collent au style du tileset que l'on à utilisé pour la base.


4-
Ici on voit dont le tas de textures, placées en dessous de la première couche de la map.



5-
Prenez une brosse douce avec un flux léger et commencez à gommer le sol de la première couche. Ici j'ai commencé avec un texture d'herbe un peu plus « épaisse » que celle sur la couche 1.



Si une fois terminé, vous pensez ne jamais réutiliser cette texture ou modifier comment cette dernière interragit avec le calque 1, vous pouvez (je dirais même devez) fusionner les 2 calques, en pressant Ctrl + E ou en allant dans 'Calques' tout en bas,  'Fusionner les calques' (il faut que la couche 1 et la texture soit l'une en dessus de l'autre)


6-
Là je met le chemin, avec une brosse plus 'chaotique' histoire de donner un aspect naturel. Je gomme donc toujours la couche 1, qui a été fusionnée avec la texture précédente.



7-
Ici quelques zigouigouis d'herbe un peu plus foncée, subtil mais ca comble un peu les texture trop « uniformes », ce genre de détail c'est selon l'imagination de chacun.



8-
Ajout de « feuilles mortes »



9-
Migrons vers la couche 2, ou là ou il y a la maison. Un ptit truc sympa c'est d'utiliser la gomme avec une taille de 1 pixel pour « tailler » des expèces de brins d'herbes sur le bas de la maison, je trouve que ca « fond » assez bien la maison dans le décor et ca donne une illusion de « volume » à l'herbe.



10-
Time to incorporate some stuff. Ouvrez votre tileset dans photoshop. Ma règle en terme de mapping, c'est de commencer par les plus gros éléments pour finir par les détails. Donc on prend les gros éléments (arbres, buissons) et on les collent un peu partout en répartissant le tout avec goût.



(J'ai malheureusement oublié de faire une capture des arbres, vous le verrez plus loin dans le tuto)

Petite note- J'ai vite noté que le postionnement aléatoire d'élément comme les arbres peuvent poser problèmes pour les collision, si ils son placés à cheval entre 2 our 3 cases. Conc c'est à vous de voir si vous privilègiez des arbres placés de manière plus « random » donc naturelle ou des arbres qui suivent la grille de 32 x 32 de RM et ainsi sont plus facile a gérer en terme de collisions.


11-
Les arbres et buissons étant sur la couche 2, on retourne sur la couche 1, pour placer des petits objets et trucs et machins, comme des champignons, plantes et autres, enfin vous voyez.



12-
Ça devient technique ici, c'est totalement additionnel mais ce genre de manip' aide des éléments comme ça à se fondre dans le décor. Voici l'image :



A- Prenez l'outil Baguette magique, touchez une zone autre que les plantes vert clair.
B- Soyez sûr(e) d'avoir une tolérance de 2.
C- Clic droit, prenez « Contour progressif » et 1 pixel. Ensuite, pressez « Suppr » et déséléctionnez.

13-
Gauche avant, droite après contour progressif.


14-
Allez dans Image / Réglage / Luminosité, Contraste.
Puis jouez avec ces derniers pour fondre les plantes dans l'hebre en terme de couleurs, afin qu'elle ne sautent pas aux yeux mais qu'elles ne soient pas totalement invisible non plus.
Ce genre de manip' est au cas par cas bien sûr, selon le type de map et le type d'élément.



15-
Ajout des derniers p'tits éléments, rochers, puits, panneau d'affichage, bois, etc. Laissez parlez votre imagination, mais évitez la surcharge totale, sans limite de couche ou de case c'est facile d'en faire beaucoup trop.  Certains makers me diront que j'en fait déjà beaucoup trop avec ceci, mais m'voyez, c'est à vous de trouvez votre juste milieu.



16-
Petite retouche sur le puits, histoire de le rendre plus cohérent avec le reste. Balance des couleurs, Ctrl + B.



17-
Passons aux ombres ! Dans mes tilesets, je supprimes de base touts les ombres, pour les réaliser manuellement sur photoshop. C'est une étape facultative, qui rend le tout beaucoup plus joli à mon goût mais qui est très très gourmande en temps, surtout si l'on ne maîtrise pas bien l'outil plume, et il oblige la création d'une image dans le dossier Pictures du jeu, dont des Ko en plus pour votre projet.

Donc, les ombres, commencez par créer un nouveau calque tout en haut, en premier. Prenez l'outil plume (tutoriel sur son utilisation ici : https://openclassrooms.com/courses/maitriser-l-outil-plume-et-les-traces   ) et prenez n'importe quel élément. (ici le puit)



L'idée c'est donc de faire une forme assez grossière pour simuler l'ombre de l'objet. En prenant si possible une source de lumière qui reste la même sur tout les éléments (ici j'utilise la populaire haut-gauche)

18-
Un fois votre tracé terminé, clic droit, fond du tracé, puis OK (vérifiez bien que l'option « lissé » est cochée) Tant qu'on les fait, une couleur bien criarde est utile pour visualiser les ombres.



19-
Ptit coup de gomme douce pour faire un dégradé sur l'objet, ça fait joli.



20-
Répétez tout ça pour tout les objets assez grand pour avoir une ombre définie (pas besoin d'en mettre aux champignons, mais c'est utile d'en mettre sur le billot de bois par ex)



Très rapide à faire sur la maison, plus long et fastidieux à faire sur les arbres.

21-
En noir et en opacité 20, ça donne ça. Sauvegarder uniquement le calque d'ombre dans votre dossier picture.



Bien bien, pour une map de jour, c'est terminé. Mais pour rigoler on va ajouter un effet de lumière.

22-
Maintenant mettre un point lumineux sur le lampadaire (une brosse douce avec un léger flux, enfin c'est assez simple à faire. Dans un nouveau calque, au dessus de tout les autres.



23-
Créer un autre calque tout noir en dessous du point lumineux, fusionner les deux et enregistrer ça dans votre dossier picture,



24-
Il ne vous reste plus qu'a créer votre map. Vous pouvez la couper en tranche de 256 pixels de long en séparant les couches, utiliser le panorama, c'est comme vous voulez, c'est assez simple. (j'utilise les tranche de 256 pixels)

Un fois votre map assemblée, créez un événement qui affiche les 2 images (ombre en opacité normal et lumière en -faible- opacité éclaircie).
Et voici in-game, avec un joli panorama et quelque modifs de couleurs :



Si c'est pas clair, posez moi des questions, j'ai un peu été rapide sur certaines étapes, tout n'est pas parfait, voici ma technique générale pour mapper, je vois invite à créer vos propres trucs et astuces si vous vous lancer dans le mapping avec photoshop.

Quand je vois ça, je me dis qu'en dehors des ombres, je suis capable de faire le boulot assez facilement... mais en fait non, j'aurais la flemme.

En tout cas magnifique tuto. C'est rare d'avoir des trucs aussi clair et peu prise de tête.

Pas mal du tout comme technique ! Merci bien !

C'est vraiment très magnifique Valefor! Avec ton tuto je sens je peux faire de plus belle map maintenant xd

C'est très joli, mais on peut quasiment tout faire aussi depuis le logiciel aussi, enfin quand tu parles de respecter la grille de 32*32 surtout ! Parce que du coup à part avoir des sols un peu plus variés baaah !
Enfin perso j'aurais vraiment trop la flemme de faire comme ça, et puis c'est bête mais j'aime bien faire avec les limites de mapping du logiciel x3

En tout cas bon tuto pour les gens qui map de cette manière !

Ce serait pas plus simple d'importer les textures en motif dans photoshop plutôt que de faire des gros calques de textures ?
En tout cas merci pour ta technique, et gros up parce que t'as le courage de te farcir les ombres. x)

Chapeau, superbe tuto !

Magicalichigo a écrit:

C'est très joli, mais on peut quasiment tout faire aussi depuis le logiciel aussi, enfin quand tu parles de respecter la grille de 32*32 surtout !

Tout à fait, si on ne part pas trop dans le mélange excessif de ressources disparates (de toute façon à proscrire) on peut tout faire avec RM, cette technique sert surtout à pouvoir placer les éléments "n'importe ou" sans avoir 15 fois le même champignon mais légèrement décalé vers la gauche ou la droite.
La limite de RM fait ressortir la créativité du maker, et le "tout est permis" de photoshop ne donnera pas forcément des trucs jolis à la fin.

Zexion a écrit:

Ce serait pas plus simple d'importer les textures en motif dans photoshop plutôt que de faire des gros calques de textures ?

Ah j'y avais même pas pensé...

Tu fais des motifs et après tu peux utiliser le tout avec un tampon de duplication (allié avec une tablette et un stylet tu peux faire des choses très aisément :p).

Appelez moi fou mais que ce soit pour le dessin ou le mapping j'ai toujours préféré la souris. Objectivement c'est bien meilleur, mais ça ne me fait pas vibrer de corde.

C'est super cool, merci d'avoir fait ce tuto. :3 Je te mettrais bien des points mais ça s'avère compliqué ... x)

J'ai juste magnifique. Je suis très impressionner
Le rendu est superbe! Et c'est vraiment une facon de mappé pousser.

Après je rejoins Magi ^^ Je serais peut être flegmatique à vouloir faire ca pour chaque map ahah^^" Mais je pense que le pire... C'est que je me sentirai pas capable de refaire toute les maps de mon projet ^^" Mais après, pour un futur c'est à voir :p