Bonjour, alors aujourd'hui, un petit tuto pas bien compliqué pr réaliser de jolis effets de lumières.
Une screen du résultat voulu :


Une petite application du tutoriel (rm xp)


Voilà, maintenant, on commence :

Alors, une fois qu'on à crée sa map, on en fait une capture d'écran, on obtient ça :


Étape 2, on vas charger notre image avec un logiciel de retouche d'image (gimp, photoshop, paint pro...), peut importe lequel, du moment qu'il gère les calques. Pour ce tutoriel, je vais utiliser The Gimp, si vous n'avez pas le logiciel adéquat, je vous le conseil, il est gratuit, en français.
Donc on ouvre notre capture d'écran :


Comme vous le voyez, j'ai une fenêtre calque qui s'est ouvert (sur la droite). Il es possible que se ne soit pas le cas(lque) de tout le monde. Alors pour remédier à ce petit problème, il faut faire : fenêtre > fenêtre ancrables > calque (raccourcis : CTRL + L).

Maintenant, on crée un nouveau calque : calque > nouveau calque (raccourcis : CTRL + SHIFT + N). Ce qui devrait donner ceci :

Validez, en vérifiant que le remplissage du calque est bien transparent.
maintenant, allez dans votre second calque (en cliquant dessus dans la fenêtre calque)

Ensuite, nous allons créer nos effets de lumière :
on sélectionne l'outil dégradé :

On règle la couleur de la lumière (jaune, blanche, rouge... suivant ce qu'on veut) :


Et maintenant, on va appliquer le dégradé sur nos sources lumineuses, mais en le réglant en forme > radial (afin d'obtenir un dégradé en cercle) :


On clique sur l'origine de la lumière, et on étire pour obtenir le rayon voulu, voilà ce qu'on obtient :


C'est génant... et oui, on est aller trop vite. Pour remédier à sa, le raccourcis ctrl + Z permet d'annuler la dernière action.
Et on vas régler un autre facteur de notre dégradé :
Si vous êtes observateur(trice), vous aurez que dans la fenêtre des outils, il y a 2 petits carrés avec des couleurs (si si !). Et bien l'outil dégradé se sert de ces 2 couleurs pour réaliser son dégrader. Et bien on vas changer sa : on vas cliquer sur le petit ‘‘dégradé’’ :

Et on vas sélectionner PP vers transparent


Maintenant, on est bon. On prend donc la source lumineuse, et on étire de la taille qu'on veut (si la taille ou la couleur n'est pas satisfaisante, il suffit d'utiliser le raccourcis ctrl + z pour annuler la dernière action). On obtient donc ceci :

Sa y'est, maintenant qu'on à fait juste pour une source lumineuse, sa va tout seul. On répète donc la même opération pour toutes les lumières désirées. Sa devrait donner à peu près ceci :

Vous pouvez très bien changer les couleurs ou/et les rayons des lumière à votre guise.

Bon, quand on regarde notre image, on remarque que y'a quand même un petit défaut : on ne voit pas nos sources lumineuses ! Et oui, elles disparaissent sous la lumière.
Comment régler sa ?

Et bien c'est simple : il y a 2 solutions.
La première :
Il suffit d'aller dans la fenêtre des calques et de régler l'opacité du calque.

Mais qu'est ce que l'opacité ?


Pour en revenir à la fenêtre des calques : si vous vous positionnez dans le second calque (celui avec les lumières), vous devrez voir ceci au dessus :


C'est l'opacité de notre calque. En la baissant, on baisse l'opacité de TOUT notre calque. Je tiens à être précis sur ce point : toutes les lumières vont se retrouvées à la même opacité.
Voilà pour la première méthode.

La deuxième :
La deuxième méthode revient à peu près au même, sauf qu'on change l'opacité au cas par cas : on règle l'opacité pour chaque dégradé en laissant l'opacité du calque à 100%.

Oulala... qu'est ce qui me dit...

C'est très simple, l'explication en image :
Ici, on voit que j'ai mon image en arrière plan, et un autre calque transparent dessus :

Je vais appliquer 3 petits dégradés dessus :

On voit que l'opacité est à 100%, et si on utilise la première technique (celle décrite plus haut) pour baisser l'opacité, je vais baisser l'opacité des 3 dégradés.
Hors, ici, je ne veux baisser l'opacité que des dégradés sur les yeux du personnage, mais pas sur le baton... Comment faire ?
Et bien comme sa :
On clique sur l'outil dégradé, et on regarde :


Voilà, maintenant, une petite image récapitulative :



Sa y'est, on à finis !!

Et bien non... regardez :

Il est fort possible que vous vous retrouviez dans cette délicate position : la lumière sort de la salle, elle passe derrière le mur, ce qui est tout simplement impossible. Pour régler ceci, je vous propose une technique assez rapide :
sélectionnez l'outil de sélection par contiguë (il doit bien exister pour photoshop, mais j'en suis pas certain).
Cet outil, comme son nom l'indique vas sélectionner une zone de l'image par sa couleur. Mais il va s'arrêter au bord de la zone colorée MÊME si cette couleur se situe à un autre endroit de l'image. Si vous ne comprenez pas, c'est pas grave, sa ira vite mieux. C'est assez facile à comprendre.
Bon, on continu ?
Alors, on va passer dans le premier calque (pour ceux qui ont oublié, c'est celui avec la capture d'écran), et on va cliquer dans la zone à partir de laquelle sa devient impossible que la lumière aille (souvent une zone en noir) :


Une fois que vous aurez cliqué, sa devrait donner sa :

Bon, moi, là, j'ai de la chance, car la zone à été prise en entier, mais sa n'est pas forcément le cas (rappelez vous de ce que j'ai dit : si il y a quelque chose qui bloque la couleur, l'outil ne prendra rien plus loin). Donc si vous vous retrouvez dans cette situation, il suffit de faire SHIFT et de cliquer pour ajouter une zone. Si vous en prenez une en trop, ne vous énervez pas, il suffit de faire CTRL et de cliquer sur la zone à enlever de la sélection.
Bon, on y est ?
Alors on continu. On va passer dans le second calque, et on va simplement faire SUPPR. Et toutes les portions de dégradés qui se trouvaient dans la zone sélectionnée disparaissent !

C'est bien, mais la lumière est encore dans les salles derrière... et bien maintenant, sa n'est plus un problème : on prend l'outil de sélection rectangulaire , et on va sélectionner les zonez qui nous gênent encore :

Remarque : on peut encore une fois sélectionner plusieurs zones avec la touche SHIFT (et en enlever avec la touche CTRL). Je ferais aussi remarquer une chose intéressante : on peut redimensionner nos sélections.
Maintenant qu'on à fait sa, je suppose que vous vous attendez à la suite : SUPPR.
C'est quand même plus beau comme sa.

Je vous invite ensuite à refaire cette opération pour les portes :


Et cette fois, on à finis ?

Oui, enfin presque : il reste à incorporer notre image dans rpg maker. Pour sa, on vas rendre invisible le calque représentant la map en cliquant sur le petit œil dans la fenêtre des calques :

Certain me diront :
Pourquoi le rendre invisible ? On pourrait tout simplement le supprimer.

Bien sur, mais par mesure de précaution, il vaut mieux le rendre invisible : comme sa, en cas de problème (par exemple, si vous vous rendez compte qu'il y a encore des incohérence dans votre image), vous pourrez tjr revenir, rendre visible votre calque et réparer cette petite erreur.

Et on arrive à sa :

C'est normal, n'ayez pas peur.
Bon, maintenant, on va enregistrer. Le mieux, est d'enregistrer tout d'abord au format .xcf (qui est l'extension lisible pour Gimp, mais pour Photoshop & co. je ne me rappelle pas). Ensuite, on l'enregistre avec l'extension .png (c'est mieux, pour gérer la transparence). Le logiciel vas vous demander plusieurs petites choses, c'est normal.


Bon, pour ceux qui ne comprennent pas pourquoi on l'enregistre 2 fois, une explication plus détaillée :


Maintenant, on retourne sur rpg maker dans le gestionnaire de ressources (F10), et dans pictures > importer > et on vas chercher notre image


On retourne sur notre map, on crée un évenement (moi, je les fait en haut à gauche, sa vas vite pour s'y retrouver), on vas dans la deuxième page, et on sélectionne afficher une image, on vas ensuite sélectionner notre image, et s'assurer qu'elle ne bouge pas.
On règle le déclenchement de l'événement en processus parallèle (en bas).
Et quand on lance notre jeu :

(remarquez que la, j'ai baissé la luminosité du jeu)

Et voilà, c'est finis pour se petit tutoriel très facile, et qui rend plutôt bien.

Je vous rappelle que vous pouvez télécharger la petite application du tutoriel, qui vous montrera bien la différence que crée l'opacité de vos lumière sur la map :
tuto lumière (rmxp)

Simpliste, mais qui, malheureusement, frôle aussi l'aveuglement.
Tes effets de lumières sont trop flash et du coup, ça ne rend pas très bien.

Le mieux encore c'est d'utiliser un programme avec calque (Paint.net est le premier nom qui me viens en tête) et de faire tes effets sur un calque par dessus le screen question d'avoir un aperçu en tout temps et de ne pas avoir de mauvaises surprises comme on peut le voir ci-dessus.

Edit : En relisant, j'ai vu que tu avais bel et bien un calque avec ton screen mais tu ne l'utilises pratiquement pas ce qui est dommage.

Je ne comprends pas ce que tu veux dire...
Enfin, si j'ai compris, tu dis ce que j'ai fais... alors je pense que j'ai pas compris.

Ce que tu veux dire, c'est que l'effet est trop flachis ?
Bien sur, pour la lumière violette, c'est moche, mais pour la lumière blanche, l'effet est beaucoup plus agréable pour les yeux, en effet. Ensuite, sa vient du fait que quand tu fais un dégradé plus grand, il est moins opaque : donc c'est mieux.
Après, on peut tjr régler l'opacité du dégradé, voir du calque si le rendu final est désagréable.


Mais il suffit de mettre une lumière claire, et sa marche :

La, j'ai l'opacité à 100%, et pourtant, l'effet est, ou plutôt n'est pas flash.

+1.
Pour qu'un effet de lumière soit réussi, il faut que la lumière semble naturelle, or dans ton tutorial, à la fois dans ton choix de couleur et dans l'opacité que tu donnes à tes effets de lumière, on dirait plutôt des taches de couleur sur l'écran.

C'est dommage parce que tu as une bonne méthode. Tu pourrais choisir des couleurs moins saturées, déjà (un rouge saturé à 100% ce n'est pas une lumière naturelle, c'est un spot de disco). Pareil pour le jaune sur la bougie, prend un jaune saturé à 20% maxi. Et puis, pense vraiment à réduire l'opacité de ton calque. Personnellement, quand je fais des effets de lumière, leur opacité ne dépasse jamais 50% (et ça c'est quand il sont vraiment vifs). Pourquoi tu n'utilises pas le mélange "ajouter" dans RMXP?


Moi, je trouve que si, justement. Peut-être que nous n'avons pas les mêmes yeux, ou pas le même écran (ou les deux); dans tous les cas, tu fais des jeux vidéo pour que ce soit les autres qui y jouent, non?

Bon, c'est vrais que dans le tuto, j'ai utiliser des couleurs qui, en théorie ne devraient pas êtres utilisées, c'est vrai.


C'est vrai.

Je tacherai de faire plus attention à sa à l'avenir.

Ce n'est pas pour te faire la morale simplement comme tu as fait l'effort de faire un tuto qui montre une technique simple et efficace pour obtenir des effets sympa, je trouve ça dommage que tu l'illustres avec des exemples qui ne sont pas si sympa que ça, ça fait mauvaise pub. Le novice qui parcourt ton tuto va aller voir directement le screen qui montre le résultat, et si ça ne lui plaît pas, il va zapper. Ca fait d'autant plus mauvaise pub que tu as de bons talents de mappeur, si j'ai bien compris; or personnellement je ne doute pas une seconde de ces talents, mais tu peux les vendre bien mieux. D'alleurs sur ta toute première image, même si l'opacité est encore trop forte à mon goût, le choix de couleurs est bon.

Je te suggère de refaire des screens avec des couleurs plus douces et moins opaques, et de les mettre à la place de celles qui y sont actuellement, à mon avis ce sera un vrai plus pour ton tuto.

Bonne continuation.

Et voila comment, en tentant d'apprendre aux autres, j'ai moi même appris !
Je pense en effet que je vais refaire les screens de tous le tuto et rajouter une petite partie pour bien expliquer cette différence avec l'opacité

Hello, j'ai indexé ton tutoriel, merci du partage :)

Par contre si tu prévois de le modifier en fonction des remarques qui t'ont été faites, je te propose aussi de revoir la zone d'effet de tes lumières.
Là, on voit que le halo lumineux est dispensé circulairement et sans tenir compte des murs qui séparent les pièces, des zones noires qui servent à symboliser l'absence de visibilité (entre les cloisons) ou l’absence d'éléments sur les bords de la fenêtre de jeu.

En image, voici les erreurs dont je parle :

Ça me parait extrêmement important, pour l'instant certains endroits sont éclairés de manière totalement incohérente ; une "petite" imprécision visuelle qui relève quand même d'une erreur conceptuelle de taille.

Ça contribue à la mauvaise pub dont parle Perlune, l'idée et la méthode sont bonnes, maintenant il faudrait que le résultat suive ^^

Un tutoriel certes assez simple comme l'ont précisé certains au-dessus de moi, mais
je pense qu'il s'adresse plus aux débutants de ce genre d'effets, et de ce côté-là, c'est un très bon tuto. Ensuite chacun forge sa propre technique pour faire ses effets de lumière, mais il s'agit ici d'un bon guide pour commencer, de plus facile à lire.

Oulala... j'ai du mal
Pour les erreurs dont tu parles (je sais je n'ai aucune excuse), mais sur l'ancienne screen (la pas belle donc), je les avais rectifiés. Et en fait, j'ai fait celui ci en cours alors j'ai pas fais très gaffe, mais c'est une bonne remarque.

PS : voici une petite application de mon tutoriel : tutoLumiere.exe

L'image rectifiée :


Edit : j'ai rectifier une grande partie du tuto. Je pense que cette fois ci sa devrait aller.
Je rajouterais ensuite une partie pour rectifier l'erreur que Al Jeit à fait remarquer.