Texture et création de batiment RTP-Like

Yosh ! Aujourdh’hui je vous présenter un tutoriel que j’ai réalisé en juin dernier qui étais à la base fait pour la réouverture de Make The Evolution. Malheureusement de nombreux problèmes sont survenue et du coup, la réouverture n’es plus dans mes priorités pour le moment, ce qui est plutôt dommage vue le travail colossal de l’ensemble du site.
Pour ne pas sombrer dans l’oubli, je vous partage tout de même ce tutoriel sur lequel j’ai passé énormément de temps, j’espère qu’il vous sera utile.

Ce tuto est une exclusivité MakeTheEvolution / LePalaisDuMaking, merci de respecter mon travail et de ne pas le partager ailleurs.

------------------------------------------------------------------------

Avant de passer à la partie amusante, soit de faire joujou avec les textures, il vous faudra d’abord réaliser la bases de votre bâtiment. Pour ce tutoriel, j’ai décidé de réaliser un temple japonais en me basant sur cette image. J'ai découvert par la suite qu'il s’agissait du ''Matsue Castle'' :


Le plan de travail
créer un nouveau document de la taille désirez celons la taille de votre futur bâtiment. Vous aurez ensuite besoin d’un ‘’template pour tileset’’. Copier-coller celui-ci dans votre document jusqu’à remplir la totalité de votre plan de travail. Celui-ci vous sera très utile pour bien délimiter votre bâtiment sur les cases Rpg Maker. Chacune d'elle mesure 32*32px.

Personnellement, j’aime bien importer un ‘’chablon de character’’ afin d’avoir une meilleur idée des proportions in-game. Mes plans de travail sont généralement très grand (900*900), la taille n'a pas vraiment d'importance, vous pourrez l’agrandir/la rétrécir par la suite, de même pour les carreaux partiellement coupé.
Mon plan de travail

La base
Le plan de travail étant mis en place, nous pouvons maintenant commencer. À l’aide de l’outil rectangle , le crayon ou peu importe celons vos préférence, tracé les formes de base de votre bâtiment en prenant soin de décocher la case ‘’lissage’’.
Pour ceux qui ce demanderais pourquoi décocher le lissage, voici un petit aperçue avec l’outil ellipse
Le rendu lissé rend mieux visuellement, certes mais il vous sera plus difficile de le travaillé. De plus, pour être qualifier de RTP-Like, vos bâtiment devront être fait uniquement en pixel art, donc pas de lissage.

1. Donc comme je le disais, tracé la base de votre bâtiment avec des formes simple. Ici, seul l'outil rectangle a été utilisé.
Mon exemple est très sobre mais n'hésitez pas à utiliser plusieurs couleurs comme dans ce vieux tuto, nous les changerons par la suite de toute façon. Ici, il n'y a pas d'effet de profondeur, chaque teinte de gris représentera une texture différente.
***Attention, vous devez créer un nouveau calque pour chacun des éléments/teintes/couleurs différentes. Ce bâtiment compte donc actuellement 4 calques sans compter le chablon.***

2. Pour forme une plus complexe, je vous suggère d’utiliser la plume . Je l'utilisé ici pour réaliser la courbe du toit. Pour ce faire il vous suffit de placer vos points d'ancrage afin de tracé la forme désiré. Une fois satisfait, faite clique droit puis ''Fond du tracé''. Le bâtiment compte maintenant 6 calques.
3. La perspective de RM permet de voir à la fois votre bâtiment de face et de haut. Le toit devra donc avoir une certaine profondeur. Pour ce faire, j'ai tout simplement dupliqué le calque du toit afin de le mettre une case plus haut. Une fois ceci fait, il suffira de faire rejoindre les extrémités du toit ce qui donnera une impression de profondeur.
Suivez le même procédé calque par calque, couleur par couleur.
Comme vous pouvez le voir sur mon modèle un peu plus haut, le bâtiment comporte une division en pierre construit tout autour. Je vais donc ajouter de la profondeur à celle-ci en la dupliquant, comme pour le toit. Comme ces pierres sont tout autour du bâtiment, la profondeur dois également longer les murs sur les coté droit et gauche. Les extrémités des murs sont en biais. Comme nous travaillons avec une perspective de face/haut, je dois également ajouter une profondeur au mur de biais.
4. Répété les procédés de l'étape 3 jusqu’à avoir complètement terminé les bases de votre bâtiment. Une fois que vous aurez terminé, vous pourrez commencer à mettre d'avantage de détails sur la structure. Au final, vous devriez avoir quelque chose comme ceci. Félicitation, vous pouvez désormais passé à l'application de la texture.

Appliquez la Texture
Nous voila enfin à la partie la plus amusante selon moi, l'application de la texture. À partir de maintenant, deux exemple seront montré à la fois sois une pour les textures XP et l'autre pour les textures VX/Ace. Vous pouvez bien sur utiliser les texture XP pour VX ou vice-versa. Éviter cependant de mixer les 2, XP est fait de pixel art alors que VX sont des texture réduite (enfin, probablement). Si mixer les genre ne vous dérange guerre, vous devrez tout de même réduire le contraste de VX ou augmenter celui de XP en fonction de vos préférences afin de les rendre compatible

1. Commençons d'abord par choisir notre première texture. Pour ce faire, vous pouvez parcourir les RTPs de base ou encore utiliser les textures que j'ai rassemblé ici.
- - Texture pack XP
- - Texture pack VX
Je vais personnellement utiliser mon assemblage, c'est beaucoup plus simple et rapide ainsi. Je souhaite d'abord commencer par la pierre autour de mon bâtiment. Je vais donc dans la section ''Pierres'' de l'assemblage de textures et choisis celui qui ce rapproche le plus de l'effet désiré.
2. La texture correspond à la forme que je désire mais pas à la couleur. Je vais donc commencer par désaturé la texture pour la préparé à son changement de couleur. Pour ce faire faite Image / Réglages/ Teinte Saturation.
Pourquoi ne pas directement passé au changement de couleur me direz-vous ? Voici un petit exemple, changeons la texture en vert. Bien sur tout dépend du résultat que vous souhaiter obtenir.
Comme vous le voyez, la texture original est beaucoup moins verte que celle avec la saturation = 0. En fait, la texture original comporte plusieurs couleurs différente et du coup, chacune de ces couleurs change différemment. Avec la saturation = 0, nous supprimons les couleurs et du coup, la texture à entièrement de la même teinte.

Une fois désaturé, faite Image / Réglages / Balance des couleurs et ajuster la couleur désiré. Au besoin, aidé vous également de Image / Réglage / Teinte Saturation pour obtenir la couleur parfaite.

3. Cette étape est facultative et fonctionneras uniquement avec les textures en pixel de XP. Une fois votre texture désaturé et coloris, vous pouvez donc tentez de faire un dynamisme de couleur qui donnerons vie à vos texture. Donc en résumer, reproduire l'effet de la texture original mais cette fois en maitrisant pleinement chacune des couleurs.

Spoiler:

4. Une fois votre texture finalisé, il est temps de l'appliquer à votre calque. Pour ce faire il existe trois méthode différente qui marche aussi bien les une que les autre.
- 1. Copier coller votre texture sur les cases RM. Sélectionner les contours de votre calque (Ctrl + clique sur le calque) puis faite Sélection / Intervertir puis Édition / Effacer.
- 2. Copier coller votre texture sur les cases RM. Assuré vous que le calque est juste au dessus de votre calque de base dans lequel il dois être. Faite ensuite Clique droit / Créez un masque d'écrêtage.
- 3. Sélectionner votre texture puis faite Édition / Utiliser comme motif. Sélectionner ensuite le calque qu contiendra la texture puis faite Clique droit / Option de Fusion / Incrustation de Motif. Choisissez maintenant le motif que vous venez de créer avec le magnétisme d'origine de préférence.
Une fois ma texture appliquez, j'ai ici décidé de changer la teinte de certaine pierre pour plus de réalisme.

Ajouté la même texture (ou une autre celons le résultat désiré) à la profondeur. À l'aide de Image / Réglage / Luminosité Contraste, éclaircissez ou assombrissez la texture celons la position de votre source de lumières. Pour ma part, comme la lumière viens du haut/gauche je devrais normalement éclaircir celle-ci. J'ai cependant fait le contraire ici, comme si le toit lui fessais de l'ombre (ce qui n'étais pas une bonne décision, j'ai rectifier quelques étapes plus bas). Ici j'ai ensuite retravailler manuellement les contours afin d'obtenir un effet de pierres superposé.
La texture de face est maintenant terminer pour le muret de pierre, mais n'oublions pas les extrémités droite et gauche. Pour ce faire, réutiliser votre texture et faite Édition / Transformation manuelle pour réduire son épaisseur. Une fois fait, faite une seconde transformation, Édition / Transformation / Inclinaison et inclinez la texture celons l'angle de votre mur.
5- Passons maintenant aux contours, plusieurs font l'erreur de simplement tracé une ligne plus foncé tout autour de la texture/du bâtiment. Il faux également prendre en compte la source de lumière et donc, un coté devras être foncé et l'autre pale.

Commençons avec le contour du bas. Comme il s’agit de roche, j'ai d'abord supprimé quelques pixels afin de préservé leur forme. J'ai ensuite sélectionner une couleur plus sombre puis j'ai tracé le contour en 2 teinte (3 serais encore mieux). J'ai terminer en ajoutant une ombre plus foncé sur les pierres du bas afin de faire une sorte de finition.
Comme ma source de lumière est en haut / gauche, j'ai répété exactement le même procédé sur le coté droit de mon bâtiment. Pour le coté gauche, c'est également le même principe, mais j'ai utiliser une couleur plus éclairé.
Une fois tout les contours peaufiner, vous aurez quelque chose comme ceci :
6- Passons maintenant à la texture du mur. Dans ce cas ci, aucune des textures présente dans le pack ne me conviens. Je vais donc créez ma propre texture à partir de celle disponible. Si je regarde mon modèle, les murs semble être en bois/bambou. Je vais donc choisir la texture qui je pense rendra le mieux.
1- J'ai d'abord retourner la texture sur le coté avec Édition / Transformation / Rotation dans le sens de ma source de lumière. La partie éclairé est donc en haut / gauche.
2- J'ai préservé 2 planche horizontale que j'ai ensuite réduit sur le sens de la largeur.
3- Afin de rendre ma texture répétitive, j'ai décalé ma planche de gauche de trois pixel pour ensuite coller l’excédant de l'autre coté.
4- Réduction de la hauteur des planches pour en ajouté une 5em.
5, 6, 7- J'ai reproduit l'étape 3 un peut plus haut.
8- J'ai terminé en ajoutant une ombre noir en opacité réduite sur la droite des planches.

Une fois satisfait de votre texture, appliquez la à votre mur en suivant l'une des 3 méthode expliquer à l'étape 4. Il ce peut que dans certain cas, certaine de vos textures ne ce fonde pas très bien les une avec les autres. C'est d’ailleurs le cas ici. J'ai donc décider de rectifier la profondeur en l’éclaircissant d'avantage plutôt que de l'assombrir.J'ai également assombris le devant pour que la texture ce fonde mieux avec le mur.

Comme j'ai fait en sorte de coupe la planche des extrémités droite et gauche en deux pour une meilleur répétition, les extrémités du bâtiment coupe également.Je vais tout simplement corriger le problème en ajoutant une planche supplémentaire.
Continuons avec la texture du haut de mur. En regardant dans la catégories pierres, il y a justement une texture parfaite qui ne nécessite aucune modification.
Ajoutons lui un contour, à droite une couleur plus éclairé et en bas et à gauche, une couleur plus sombre. Pour ce faire, j'ai simplement éclairé / assombris les rebord avec Image / Réglage / Luminosité Contraste.
Attention ! N’utiliser sous aucun prétexte une symétrie pour vos textures ! La partie ombré ce retrouveras du mauvais coté, meme chose pour la partie éclairé. Refaite le tout dans l'autre sens. Les symétries c'est le mal !


Exemple :


Il me semble qu'il manque quelque choses... Une porte bien sûr ! J'ai ici repris les planches du mur pour en faire un cadrage et ajouté une texture de pierre pour le sols. Ajoutons un dégradé avec l'outil et le tour est joué !
Nous pouvons désormais passé au toit. Malheureusement, encore une fois il n'y a aucune texture qui me convienne dans les RTP de XP. Par tout hasard, VX semble avoir un toit qui conviendrais.
Comme les textures de VX et XP sont très différente, j'ai tout simplement décider de créer ma propre texture à partir de celle de VX.
Ajoutons la maintenant au toit. J'ai supprimer quelques pixels afin de préservé la forme des tuiles pour ensuite ajouté un rebord arrondis et une bordure dans le haut. Jai terminer en dupliquant la texture pour lui faire une épaisseur que j'ai légèrement assombris.
Pour les cotés droit et gauche du toit, vous pouvez reprendre votre texture et lui appliquer une ou des transformations comme j'ai fait plus haut pour les cotés des pierres. Je vais cependant ici recréer entièrement la texture avec la courbe du toit afin d'obtenir un meilleur résultat.
1- Pour que chacune des tuiles ai exactement la même courbe que la forme du toit, j'ai sélectionner ma base de toit puis fait Édition / Contour. J'ai supprimer les lignes de droite, gauche et en bas pour garder uniquement ma courbe que j'ai dupliquer afin de représenter les partie arrondis du toit.
2- J'ai simplement changer la couleur des traits qui feront face au soliel afin que cette partie sois plus éclairé.
3- J'ai tracé chaque tuile.
4,5,6- Ici j'ai reproduit le shading de face pour les tuiles de coté.
7- J'ai terminer avec Image / Réglage / Luminosité Contraste pour éclairé la partie du toit face a ma source de lumière, et vice versa pour le coté ombré.
Je vais maintenant vous dévoilé une petite astuce toute simple que j'aime bien utiliser pour les vitres et fenêtres. Sélectionner tout d'abord le contour de votre fenêtre. À l'aide de l'outil Trait , tracé des lignes en diagonale (maintenez ctrl pour une ligne parfaite) de différente épaisseur sur plusieurs calques. Réduisez ensuite l'opacité de chaque calque jusqu’à obtenir le résultat désiré.
Continuez de texturé votre bâtiment avec les différente méthodes ci-dessous jusqu’à ce que celui-ci sois entièrement terminé. C'est également le moment d'ajuster les teintes et d'ajouter des détails. Une fois terminer, voila le résultat :

Ajoutez les ombres
D'accord le bâtiment est sympathique, mais il ne projette aucune ombres (sauf pour les partie déjà assombris) !
1. Sélectionner la partie à ombré puis faite Image / Réglage / Luminosité Contraste.
2. Sur un nouveau calque, créez des ombres de couleur noir et abaisser l'opacité.

Personnellement, j’utilise presque toujours la méthode 2. D'accord les couleurs sont brimer mais c'est beaucoup plus rapide. J'espere pour vous que vous avez bien créez un calque pour chaque texture comme indiquer plus haut, sinon vous devrez tout sélectionner manuellement.

Débutons avec le plus simple, les ombres des toits. Noter que comme ma source de lumière est en haut gauche, les ombre seront à 45 degré en bas droit. Sélectionner d'abord votre calque contenant la texture désiré.
1. Dupliquer cette texture et abaissez la de quelque pixels.
2. Rendez votre texture complétement noir en utilisant option de fusion / incrustation de couleur.
3. Appliquer lui une inclinaison, ici de 45 degré avec Édition / Transformation / Inclinaison et repositionner votre calque.
4. Gommer l'excédent et abaisser l'opacité de votre calque selon l'effet désiré. Ici j’utilise une opacité de 25%.
Pour les murs de pierre blanc, c'est le même principe. Ceux-ci sont superposé au dessus du mur de bois. Ont duplique, ont abaisse et ont joue avec l'opacité. Aucune transformation nécessaire puisque le mur est droit. Pour les autres détail j'y suis allé au crayon pixel par pixel tout en préservant un angle de 45 degré.

Et hop, votre bâtiment est désormais terminé !
-------------------------------
Certaine partie de ce tuto mériterais d’être d'avantage approfondis. J'avoue avoir un peu la flemme pour le moment... Donc si vous avez de quelconques questions n'hésiter surtout pas !

T'es un monstre Slaizen =D
Le résultat est magnifique, gavage pour ce tutoriel ^^


Heav'n

Toujours aussi impressionnant !

Mon dieu.
J'ai presque envie de doubler le nombre de points LPDM max pour te donner ce que tu mérites.

C'est juste monstrueux ce tutoriel.
Et puis ce soucis du détail, dans les ombres notamment, c'est assez dingue. o_o
Un gros bravo à toi, le résultat est formidable !

Et en plus il ne mentionne même pas que je lui aie fait refaire beaucoup de truc parce qu'il y avait plein de zolie défauts :3

(Oui, je me suis connecté rien que pour ça.)

Combien de temps pour un monstre pareil? ^^

Merci du tuto', j'en avais déjà vu un du genre, mais pour un bâtiment plus petit, il était de toi d'ailleurs, c'était une sorte de bar je crois :-)

Omg o_o

Je... t'es sérieux? T'es juste putain de sérieux? T'es un grand malade... La qualité du travail... C'est juste monstrueux. Y'a... Y'a tout qu'est bon! Comment c'est possible de faire un truc aussi classe!
T'explique tout en plus! Et ça se repose sur des textures basique! Mon dieu... Je sais pas comment tu fais, et ou tu as appris, mais t'es un putain de génie gars... Un putain de génie...

Comme l'on dit les autres au dessus.. et je vais essayé de résumé..

Mais OMG! Tu es un monstre ou un putain de génie! Mais c'est juste ENORME ^^

Houla, un grand merci pour tout c’est commentaires chaleureux. J’avais perdu la motivation depuis un petit moment, vous me donnez presque envie de poursuivre la réouverture de ME mais pour ça il me faudrait une petite équipe, des volontaires ? (la pub facile presque subtile x) )
En fait ce tuto étais à la base supposé être le premier d’une petite série, dans le second j’apprendrais à mettre ce genre de bâtiment ergonomiquement sur une planche tileset, ont passe ensuite au mapping etc. J’ai surtout tenté d’expliquer tout mon savoir de façon à ce que n’importe qui, débutant ou expérimenté puisse en profiter.
J’ai également fait de nombreux autres tutoriaux dans le même esprit hors rpg maker sur ME que vous pourrez voir à l’ouverture, si ouverture il y a.
J’ai également un projet vidéo en réflexion depuis plus d’un ans déjà, il serais temps de le mettre à terme, je pourrais même l’intégré en partie à ME. En gros beaucoup de projets mais malheureusement un peu moins de motivation..
Bon je me suis un peu égaré, j’arrête de vous embêter x).

Atwars a écrit:

Combien de temps pour un monstre pareil? ^^

En fait c’est difficile à dire puisque j’ai créé le bâtiment en parallèle ou j’écrivais le tutoriel en plus de bosser d’autre aspect du site. Je dirais donc qu’il m’a fallu une à deux semaines de travail non-stop.

Atwars a écrit:

Merci du tuto', j'en avais déjà vu un du genre, mais pour un bâtiment plus petit, il était de toi d'ailleurs, c'était une sorte de bar je crois :-)

Tout à fait, j’en fait d’ailleurs allusion quelque part dans ce tutoriel-ci :p.

Hareck a écrit:

Mon dieu... Je sais pas comment tu fais, et où tu as appris, mais t'es un putain de génie gars... Un putain de génie...

D’abord merci ^^, ensuite j’ai tout appris seul au fils des années, il faut dire que mon tout premier projet date de 2007 et depuis ce temps je n’ai cessé de créer et de m’améliorer. Sauf peut-être ces deux dernières années qui ont passé si vite et où j’ai eu un grand relâchement… Motive toi Slaizen non mais !!

Je vais porter le blâme. Ma démotivation au making le démotive lentement sans qu'il ne s'en rende compte. (MUHAHAHAHAHAHAHAHAHAHA)

Pour un tuto, on peut dire que c'est vraiment un bon tuto. Il n'est pas seulement bien expliqué avec un bon rendu final, il est surtout illustré avec soin et animations.

La plus grosse chose à redire, c'est la cohérence géométrique de la toiture et de sa texture qui se ballade un peu, pour les pans de face on ne peut rien dire, mais ceux sur les côtés c'est pas tip top entre les tuiles faîtières et l'alignement des autres tuiles, on est loin d'avoir des trapèzes en perspective.

Vive illustration moche de ce que je veux dire :


C'est l'étape 4 de "la base" qui est mal gérée, voir trop tardive. Si tu avais une meilleure idée de la géométrie finale, tu aurais pu donner des petites astuces comme tu le fais à droite à gauche pour tailler directement quelque chose de cohérent en taillant non pas à l'oeil mais avec des transformations (genre pour ton volume trapézoïdal, la partie haute est juste la partie basse que tu réduis de taille et place plus haut).  

Pour la partie 2 de "appliquer une texture", d'une il y a une fonction toute faite qui s'appelle "désaturation" dans "image>réglages" qui fait en un clic ce que tu fais un poil plus torduement avec "teinte/saturation". De deux, quand tu fais "teinte/saturation", tu as une option "Redéfinir" que tu peux cocher, qui permet directement de changer la couleur de ta texture à ta guise et de façon unie, sans passer par une désaturation, ni par la balance des couleurs qui est moins claire et qui dans le cas d'une image désaturée ne présente aucun avantage.  

Ensuite l'idée de rendre un tutoriel exclusif, c'est un peu dommage, au contraire tu peux faire ta pub en publiant tes tutoriels ailleurs en disant bien où les retrouver, comme ça tu seras toi-même et ton site/équipe/forum favori reconnu ailleurs qu'ici. Cela dit je suis mal placé pour dire ça car les tutoriels BilouCorp resteront sur la BilouCorp, mais c'est plus pour des raisons techniques de mise en page qu'autre chose.

Continue comme ça. : )

Vraiment excellent! Rien à redire!


EDIT: Pas faux Zex.

Bah... c'est un tuto de graphisme hein, rien n’empêche de l'appliquer pour VX ou VXAce en prenant simplement des dimensions différentes. C'est la méthode qui est intéressante ici plus que le résultat final.

Encore merci de vos impressions, c'est apprécié. ^^

Joke
Bonne remarque pour les toits du coté, les autres étages sont un peu plus réussis bien que sa manque de précision, je vais tenter d’être plus précis la prochaine fois.

Pour les étapes 3-4 (si j’ai bien compris) en effet, j’ai tendance à y aller surtout à l’œil pour ce qui est des profondeurs, une profondeur pré-calculé serais plus réaliste. C’est quelque chose que je fais fréquemment, privilégier le rendu ensuite le réalisme. C’est avantageux dans certain cas alors que d’autre pas vraiment..

La case redéfinir fait en effet exactement la même chose, j’ai surtout montré la désaturation pour tenter de mieux expliquer le rendu final et la différence avec l’autre méthode.

Pour l’exclusivité, ce tuto devait à la base ne pas être dévoilé avant la réouverture officielle. J’ai malheureusement eu quelques problèmes et j’ai donc reporté cette réouverture. J’ai tout de même voulu faire profiter les gens du palais tout simplement puisque c’est la seule communauté sur laquelle je suis actif. (j’avais également dans l’idée de faire un gros partenariat avec LPDM, d’où l’exclusivité au deux communauté) Donc certes, si je réussis à rassembler une équipe, trouvé le temps et la motivation nécessaire et de finalement ré-ouvrir ma communauté, je vais autoriser les gens à partager certain tuto. Mais comme ME est pour l’instant fermé, ce ne serais pas vraiment à mon avantage de l’autorisé pour le moment.

Zexion
Tout à fait, à la base je souhaitais réaliser deux exemple, un pour XP et un pour VX/ACE mais comme je ne suis pas dutout fan des ressources et dimension de VX, j’ai laissé tomber. J’ai cependant mis à disposition les deux pack de texture à l’étape 1 de la partie ‘’Appliquez la texture’’, cette méthode peut donc facilement être réutiliser peut importe la version de logiciel. :p

C'est bien foutu quand même, j'aime beaucoup merci !