[Léo's tuts] Effets de lumières dynamiques

Alors ! heu... de quoi je voulais parler déjà... ah oui, les fameux effets de lumières !

Nombreux sont les tutoriels traitant ce sujet, mais en général, on parle d'effets sur des lampadaires, des fenêtres, des lampes etc...

Ici je vous expliquerai bien sûr ce procédé, mais aussi comment faire pour mettre des effet sur tous les éléments d'une map, sans connaissance particulière en graphisme.
Mais surtout, je vais vous montrer comment faire pour que ces effets soit dynamiques sur une map, c'est à dire que la lumière s'estompera, puis s'intensifiera sur un laps de temps déterminé.

Donc, commençons. Tout d'abord, il nous faut une map :


Prenez un screen de votre map sous rpgmaker, à l'aide d'un logiciel de capture d'écran (FastStone Capture est parfait pour ça )
Voilà ce que ça donne :


Ici, la map fait 20 carreaux sur 15, donc le screen doit faire 640*480 pixels.

Ouvrons maintenant ce screen sous un logiciel de retouche (photoshop, Gimp, Paint.net, Artweaver ou autre..)
Faites un nouveau calque( qu'on nomera "noir"), et remplissez-le de noir, mettez son opacité à 0,
et créez encore un nouveau calque (qu'on nomera "Effet 1") :


Nous allons commencer par mettre un effet sur les lampes (le lampadaire, et la lampe au dessus de la porte de la maison).
(et tout ça bien sûr sur le calque "Effet 1")
Pour cela, je vais prendre à l'aide de la pipette, la couleur jaune de la lampe au dessus de la maison.
Puis je vais faire un petit cercle rempli du jaune en question, avec une opacité de 100.
Ensuite je fais un autre cercle un peu plus grand, en opacité 75. Puis un autre encore plus grand, en opacité 50, et un dernier en opacité 25.

Je fais la même chose avec l'autre lampadaire, et voilà ce que nous avons :


Appliquez maintenant un flou gaussien à ce calque, ce qui donne ceci :


Les lampes sont faites !

Passons maintenant aux autres élément du décors..

Commençons par les plantes.
Faites donc un nouveau calque, qu'on nommera "Effet 2".
Avec la pipette, je vais prendre la couleur "violette" de cette plante :

Puis, à l'aide de la brosse, j'applique cette couleur sur tous les élément de la map qui sont "violet".
Je fais le même procédé avec les différentes plantes de la carte (en restant toujours sur le calque "Effet 2", pas besoin d'en faire plusieurs pour chaque élément).
On ajoute un flou gaussien, et voilà le résultat :


Maintenant on fait un nouveau calque, et on fait le même procédé pour le sol, le toit des maison, les falaises, etc..

Ensuite, on remet l'opacité du calque qui se nome "noir" à 100, et voilà, nous avons notre image finalisée :


A présent, il faut mettre notre image en 256 couleurs, pour cela, utilisez Photofiltre, et enregistrez donc votre image dans le dossier "pictures" de votre projet.



Ça, c'est fait !

Maintenant la prog' !

Sur votre map, faites un évènement sur la première case (celle qui est le plus en haut à gauche), en processus parallèle.
Nous aurons besoin de deux variables, que l'on nommera "Lumière X" et "Lumière Y".

Donc, première commande de l'évènement : Modifier la variable "Lumière X".
Et faites comme ceci :


Ensuite on fait pareil avec la variable "Lumière Y", mais bien sûr avec ça comme opérande :

Maintenant il fait retirer la taille de la case de l'évènement (une case fait 8*16), donc on fait -8 pour la variable "Lumière X" et -16 pour la variable "Lumière Y".
Mais il faut aussi ajouter aux variables, la taille de la map (ici la map fait 20 cases sur 15 cases, donc elle fait 160 pixels de haut sur 120 pixels de large).
Voilà ce que donne nos commandes d'évènement pour l'instant :


Ensuite il faut donc afficher votre image comme ceci :

(notez que pour la transparence, c'est vous qui voyez, suivant l'effet recherché ^^)


Donc voilà, notre image s'affiche ! :dance:

Mais on parlait, au début du tuto, de rendre le tout "animé".
Donc pour cela, ce n'est pas bien compliqué.

Commencez par faire une boucle (la commande se trouve en page 3).

A l'intérieur, faites "déplacer une image" comme ceci :

(notez que le plus important à modifier, c'est le "temps de transition" ainsi que la "transparence")

Puis, faites un copier/coller de ces commandes :

Ensuite, faites une nouvelle fois "déplacer une image", en changeant seulement la transparence, et mettez là à 70 (ou plus, ou moins, suivant l'effet recherché).
Puis re-faites un copier/coller de ces commandes :


Et voilà ! :dance:

Le rendu final de votre évènement doit être comme ça :



Et le rendu final in-game :





Vous pouvez aussi télécharger une démonstration, et pouvoir ainsi regarder directement la programmation :

Télécharger la démonstration
(1,5Mo)

Voilà !

Joli Léo, joli

God des variable je vais pleurer ^^,bon boulot Léo.

Magnifique tuto, pour une débutant comme moi, j'ai quand même réussi a tout comprendre

Merci les gens !
J'espère que ça vous aidera un jour.

Je pense que ça va servir à plein de monde, et pendant plein de jours ^^"

J'aime !

(qui a dit facebook ? )


Sinon je veut pas faire mon rabat joie mais...

Citation :

Prenez un screen de votre map sous rpgmaker, à l'aide d'un logiciel de capture d'écran

Sur un PC fixe ou un grand portable : Touche "Impécr Syst" puis 'coller' dans un logiciel de dessin quelconque.
Sur un PC équipé de Windows : logiciel pré-installé nommé "Outil Capture" ou dérivés, y a normalement pas besoin de plus pour un log de screenshot

Très bon Této Luo

Citation :

Sur un PC fixe ou un grand portable : Touche "Impécr Syst" puis 'coller' dans un logiciel de dessin quelconque.
Sur un PC équipé de Windows : logiciel pré-installé nommé "Outil Capture" ou dérivés, y a normalement pas besoin de plus pour un log de screenshot

Ouais mais chez moi cette touche ne marche pas.. Donc si des personnes sont dans le même cas que moi, ça peut les aider.
Et puis c'est un très bon log de capture d'écran qui peut servir dans de nombreux cas (moi je m'en sers presque tous les jours ^^').

Citation :

Très bon Této Luo

^^ merci.

Attention, il y a un piège: des fois, sur portable, il faut appuyer sur la touche "fn" en même temps que "imp écr". NE VOUS FAITES PAS AVOIR !!!1

Mais sinon y a le "outil capture" de Windows, pré-installé dans le dossier "accessoire" je crois

Citation :

Mais sinon y a le "outil capture" de Windows, pré-installé dans le dossier "accessoire" je crois

Quoi ?! Tu utilises cette horreur ?!
Non franchement essayez FastStone Capture ça vaut le détour, il est simple et efficace !

Nan je l'utilise pas, la touche Impécr Syst est plus rapide ^^
Mais ce log m'avait l'air pas mal, juste en le voyant une ou deux fois comme ça...
(c'est juste un carré de sélection et ça t'enregistre l'image hein, je vois pas où est le problème ^^")

EDIT pour Slup : Il y a ceux qui savent ce que "découpage" signifie, et ceux qui savent pas...

Citation :

Mais ce log m'avait l'air pas mal, juste en le voyant une ou deux fois comme ça...
(c'est juste un carré de sélection et ça t'enregistre l'image hein, je vois pas où est le problème ^^")

Cette merde, mets un affreux cadre rouge autour du screen.

Bibux > Bah disons que ce qu'il a de vraiment pratique, c'est que l'outil de sélection de capture affiche un carré, en au à gauche de l'écran, qui zoom ce qu'il se passe autour de la souris.
Ce qui fait que tu peux être très précis pour faire une sélection..

Citation :

Cette merde, mets un affreux cadre rouge autour du screen.

Si tu parles de Faststone Capture, je peux t'assurer que non.

Enfin bref, on part un peu en hs là..^^"

Nan, tu ne suis pas, je parlais à bibux qui parlait de windows vista capture.

Slup > je parle pas de Windows Vista Capture ^^

Je l'ai éssayé (celui de Win7) et il ne me met pas de contours rouges hein ^^

C'est ta faute si t'utilise un truc aussi pourri que WinVista

Y'a un soft de screen intégré ?
Comme quoi, j'en apprends tous les jours. Même si ça m'intéresse pas particulièrement, le bon vieux Imp écr/CTRL+V dans Paint marche toujours aussi bien pour moi.

Citation :

C'est ta faute si t'utilise un truc aussi pourri que WinVista Tire la langue

Je suis sous seven maintenant



STOP !! Flood maintenant, retournez dans le sujet

Les effets de lumière c'est bien... sauf que pour 2003, ses pixels et sa résolution de nain ça passe pas si bien.
Pour faire bien faudrait les faire en full pixel art (où dans le carde du full custom comme Nonor) sans cela ça gâche plus que ça n'améliore. Surtout que généralement on les fait mal et vite les effets.
Mais bon. C'est bien quand même d'avoir fait un tuto dessus.
Maintenant faut faire un tuto: Faites vos effets de lumière en pixel art... sauf que personne ici ne sait faire ça.

Bah, tu trouves que le rendu final n'est pas bien ?

Perso je procède comme ça pour toutes mes maps, et ça donne un effet simple et discret, qui est très appréciable je trouve..

Après c'est sûr qu'on peut faire toutes les maps en panorama aussi, mais là ça prend encore plus de temps..

Comme me le faisait à juste remarquer Zim à juste titre, les effets de lumière servent à montrer qu'on sait les faire et puis c'est tout.
On peut parfaitement donner une ambiance à une map sans passer par là. Et très souvent les effets gâchent plus que ce qu'il améliorent. Mais comme ça fait beau dans certains jeux on se dit que ça fera beau sur le notre. Mais enfaite non.
Sous 2003 les effets de lumière rendent mal parce qu'ils sont pas en pixel art comme les ressources nes/RTP/Mac and Blue.
Donc désolé mais oui, au final je trouve que c'est pas terrible. Pour faire ressortir la luminosité d'un truc je préfère plus le saturer que lui mettre un halo.

Mais bon. Ça impression les novices alors on va pas cracher dessus. Et puis ce n'est que mon avis. Selon d'autres les effets de lumière c'est trop bien.

Et ne prend pas ça pour une attaque personnelle ou une critique de ton tuto hein. C'est juste une remarque que je me devais de faire après m'être rendu compte de l'énorme erreur que je faisait avec mes effets pourris.

Ok, je vois bien ce que tu veux dire, et tu as tout à fait raison.

Sinon j'ai récemment trouver une technique pour améliorer les effets de lumières justement (oui, en panorama).

En fait je fais d'abord un effet de lumière, comme expliquer dans le tuto, puis je prends un screen in-game que je retouche sous Paint.net (ou autres).
Je rajoute donc juste quelques ombres par ci par là, et le résultat est tout de suite beaucoup mieux (toujours moins bien qu'en pixel art, je te l'accorde ^^') :

Les ombres sont pas réalistes.







GG !
C'est a peu près ce que je fait pour mes projets ^^
je rajoute toujours les ombres et les lumières avec paint.NET ^^

Fais ça pour toutes les maps maintenant

Bibux > merci. ^^
Peut être qu'un jour je me motiverai à refaire toute les maps de ToT, mais c'est pas pour tout de suite.. ^^'



Sinon j'ai fais une petite démonstration pour compléter tout ça :

Télécharger la démonstration
(1,5Mo)

Voilà !


ps : je compte en faire une autre pour le tuto "animation des monstres en combat". ^^

OWI LEO je t'aime quel chouette tuto jvais enfin pouvoir user du toshop <3