Différences

Ci-dessous, les différences entre deux révisions de la page.

--- tutoriaux:effetlumiere [2014/09/03 18:37] – correction breve kyller
+++ tutoriaux:effetlumiere [2020/08/23 14:36] (Version actuelle) – supprimée lyssitz
@@ Ligne 1: / Ligne 1: @@
-====== Les effets de lumière ======
-Ce tutorial est destiné à enseigner la création et l'installation d'un effet de lumière sur une map avec (effet ciblé) ou sans (effet simple) prendre en base un chipset particulier.
-===== 1ère étape : Création graphique de la base =====
-Pour réaliser un effet vous devez vous munir de GIMP. \\
-{{tutoriaux:ico_gimp.png|}} Vous pouvez télécharger GIMP en français ici : [[http://www.thegimp.fr/]].
-==== La taille du chipset ====
-La taille du chipset va jouer un rôle dans son implantation en jeu. En effet, lorsque vous mettez un événement sur une case avec l’Éditeur, l'effet visuel va être centré automatiquement sur sa largeur. Quant à la hauteur, il n'y pas de centrage, l'effet visuel est basé sur la position de l’événement. De cette façon un chipset comme une skin qui est en 24*32 va être appliquée comme ça : \\
-<html><center><table><tr><td></html>{{tutoriaux:introeventeffetlumiere.png|}}
-<html></td><td></html>
-En jaune la case de l'évent \\ En violet les cases autours \\ En vert/gris la place du PNJ 24*32
-<html></td></tr></table></center></html>
-De cette façon il est préférable de faire une largeur de chipset égale à la taille d'un nombre de case impair (16 pour 1 case; 48 pour 3 cases ..etc.)\\
-{{tutoriaux:attention.png|}} Vous devez veiller à ce que le chipset ne soit pas trop volumineux, et ce même si vous y mettez plusieurs effets. Dans le cas contraire, il peut générer des latences une fois en jeu. \\
-**Il est d'ailleurs préférable d'utiliser un seul chipset (toujours de petite taille) pour plusieurs effets.**
-==== Choix des formes et couleurs ====
-{{tutoriaux:info.png|}} Sauf exception, vous n'aurez besoin que d'une seule couleur pour la base du chipset. Une ombre est noire, elle virera jamais au turquoise. \\
-Pour ce qui est de la forme du chipset, on admet deux possibilités plus ou moins ciblé.
-=== Les effets simples ===
-Ce sont tout les effets basiques qui sont le plus couramment adaptés aux chipsets en jeu. \\
-== Exemple : Les ombres de bâtiments ==
-Généralement, les bâtiments en jeu ont **des murs d'une hauteur de** 3 cases soit de **48 pixels**. \\
-{{tutoriaux:attention.png|}} Pour des raisons graphiques, une ombre qui sera de la taille 32*48 sera disposée sur un chipset de taille 48*64 pour la simple et bonne raison que les contours seront à posteriori fondus, pour éviter les coupages nets manquant cruellement d'esthétique. (cf 2ème étape) \\ Donc les contours ne doivent pas toucher le bord du chipset à l'exception du bord qui touchera l'évent dans la situation d'une ombre (l'ombre ne peut pas se fondre elle-même SUR le bâtiment). \\
-<html><center></html> {{tutoriaux:baseventsimpleombre.png|}} <html></center></html>
-== Exemple : Les faisceaux d'une torche ==
-De la même façon, et sur tout les bords, la base du faisceaux ne doit pas touche les bords du chipset. \\
-\\
-On prend ici l'exemple d'un chipset 48*48. \\
-<html><center></html> {{tutoriaux:baseventsimplefaisceaux.png|}} <html></center></html>
-=== Les effets ciblés ===
-Pour cette étape, vous allez faire la même chose, mais en utilisant le chipset pour en extraire sa forme pour calquer l'effet dessus.
-== Exemple : Ombre d'un rocher ==
-Dans le cadre d'une ombre, il va juste falloir utiliser le bord qui va toucher l'ombre en respectant les cases pour faciliter son implantation en jeu (cf 3ème étape). \\
-<html><center></html> {{tutoriaux:baseventcibleforme.png|}} <html></center></html>
-Une fois cette étape faite, vous pouvez réaliser la forme de ombre sur votre chipset. \\
-<html><center></html> {{tutoriaux:baseventcibleombre.png|}} <html></center></html>
-===== 2ème étape : Transparences et fondus =====
-Jusqu'à maintenant l'utilisation de GIMP n'était pas vraiment nécessaire. Mais maintenant, on va se centrer sur le logiciel pour modifier le chipset brut créé ci-dessus.
-==== La transparence ====
-Après avoir effectuer un fond transparent sur le chipset, on va effectuer la transparence du chipset pour éviter celle de l'éditeur qui peut générer des latences si utilisée à trop grosse échelle. \\
-Si ce n'est pas déjà fait, **Ouvrez votre image dans GIMP**.
-{{tutoriaux:info.png|}} Veillez à ce que les deux fenêtres **Boite à Outils** et **Calques** soient ouvertes.
-=== Création d'un fond transparent ===
-On va alors alors **créer un canal alpha**. \\ Pour cela il faut se rendre sur la fenêtre **Calques**, faire **Clic Droit** sur le seul calque de votre image et cliquez sur Ajouter un canal Alpha. \\
-<html><center></html> {{tutoriaux:transpacanalalpha.png|}} <html></center></html> \\
-Ensuite utilisez la **Selection par couleur** pour **sélectionner votre couleur de fond**, et appuyez sur **la touche Suprr**.
-<html><center></html> {{tutoriaux:selectionparcouleurgimp.png|}} <html></center></html>
-=== Transparence de l'effet ===
-Dans ce cas là, on va utiliser la **Gomme** avec une **opacité à 80%**. \\
-{{tutoriaux:attention.png|}} Assurez vous de ne passer qu'une seule fois sur le chipset pour pas que la transparence ne s'applique deux fois. C'est à dire qu'il faut le faire un seul clic. Je conseille alors de mettre une taille assez grande !
-<html><center></html> {{tutoriaux:transpaeffet.png|}} <html></center></html>
-==== L'effet fondu ====
-Vous allez maintenant utiliser l'**Outil de flou**, là aussi en une seule fois avec une **opacité 100%**. C'est surtout pour fondre les cotés de l'effet (qui ne touche pas le chipset dans le cas d'une ombre).
-<html><center></html> {{tutoriaux:flouttageeffet.png|}} <html></center></html> \\
-Ensuite il ne vous reste qu'à **exporter le fichier en format png**.  \\
-<html><center></html>   **Fichier** >> **Export As** >> Modifier le format dans le nom de l'image, et choisissez en bas le format png.  <html></center></html>  \\ \\
-Voilà ce que devrait donner votre image sur un fond noir :
-<html><center></html> {{tutoriaux:resultat_effet.png|}} <html></center></html>
-===== 3ème étape : Mise en place sur l'Editeur =====
-La transparence faite, on ne va pas utiliser celle que l’Éditeur nous met à disposition.
-Pour qu'il y ait un effet sur le joueur l’événement doit être en position **Toujours au dessus**.
-<html><center></html> {{tutoriaux:editeureffetlumiere.png|}} <html></center></html>
-Voilà ce que cela devrait donner :
-<html><center></html> {{tutoriaux:exempleediteureffetlumiere.png|}} <html></center></html>