Ediwiki

Wiki officiel de l'éditeur de carte du jeu Slayers Online

Outils pour utilisateurs

Outils du site


tutos:faire_effet

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
tutos:faire_effet [2020/09/01 17:09] lyssitztutos:faire_effet [2022/09/25 19:11] (Version actuelle) – modification externe 127.0.0.1
Ligne 2: Ligne 2:
  
 ===== Avec GIMP ===== ===== Avec GIMP =====
-Ce tutoriel 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.+Ce tutoriel est destiné à enseigner la création et l'installation d'un effet de lumière ou ombre 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 ===== +{{tutoriaux:ico_gimp.png|}} Pour ce tutoriel, vous devez vous munir de [[http://www.thegimp.fr/|GIMP]].
-Pour réaliser un effet vous devez vous munir de GIMP. \\ +
-{{tutoriaux:ico_gimp.png|}} Vous pouvez télécharger  [[http://www.thegimp.fr/|GIMP]] en français.+
  
 +==== Création graphique de la base ====
  
-==== La taille du chipset ==== +=== 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 : \\+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’Editeur, 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 sera appliquéncomme ça :
  
-<html><center><table><tr><td></html>{{tutoriaux:introeventeffetlumiere.png|}}  +{{ tutoriaux:introeventeffetlumiere.png?x200 }}  
-<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 +-> En jaune la case de l'évent \\  
-<html></td></tr></table></center></html>+-> En violet les cases autours \\  
 +-> En vert/gris la place du PNJ 24*32
  
 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.)\\ 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.)\\
Ligne 23: Ligne 23:
 **Il est d'ailleurs préférable d'utiliser un seul chipset (toujours de petite taille) pour plusieurs effets.** **Il est d'ailleurs préférable d'utiliser un seul chipset (toujours de petite taille) pour plusieurs effets.**
  
-==== Choix des formes et couleurs ==== +=== 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. \\+{{tutoriaux:info.png|}} Sauf exception, vous n'aurez besoin que d'une seule couleur pour la base du chipset. Une ombre est noire, elle ne virera jamais au turquoise.
  
-Pour ce qui est de la forme du chipset, on admet deux possibilités plus ou moins ciblé. +Pour ce qui est de la forme du chipset, on admet deux possibilités 
 +  * Les effets simples 
 +  * Les effets ciblés
  
-=== Les effets simples === +**1. Les effets simples**\\ 
-Ce sont tout les effets basiques qui sont le plus couramment adaptés aux chipsets en jeu. \\+Ce sont tous les effets basiques qui sont les plus couramment adaptés aux chipsets en jeu.
  
-== Exemple : Les ombres de bâtiments ==+**__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**. \\ 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 fonduspour é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). \\+{{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>+{{ tutoriaux:baseventsimpleombre.png }}
  
-== Exemple : Les faisceaux d'une torche == +**__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. \\ +De la même façon, et sur tout les bords, la base du faisceaux ne doit pas toucher les bords du chipset.
-\\ +
-On prend ici l'exemple d'un chipset 48*48. \\+
  
-<html><center></html> {{tutoriaux:baseventsimplefaisceaux.png|}} <html></center></html>+On prend ici l'exemple d'un chipset 48*48. 
 +{{ tutoriaux:baseventsimplefaisceaux.png }}
  
-=== Les effets ciblés === +**2. Les effets ciblés**\\ 
-Pour cette étape, vous allez faire la même chosemais en utilisant le chipset pour en extraire sa forme pour calquer l'effet dessus.+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 ==+**__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).
  
-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)\\+{{ tutoriaux:baseventcibleforme.png }}
  
-<html><center></html> {{tutoriaux:baseventcibleforme.png|}} <html></center></html> +Une fois cette étape faite, vous pouvez réaliser la forme de l'ombre sur votre chipset
  
-Une fois cette étape faite, vous pouvez réaliser la forme de ombre sur votre chipset\\+{{ tutoriaux:baseventcibleombre.png }}
  
-<html><center></html> {{tutoriaux:baseventcibleombre.png|}} <html></center></html> +==== Transparences et fondus ====
- +
-===== 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.  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 ==== +=== 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. \\+Après avoir effectué 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**. Si ce n'est pas déjà fait, **Ouvrez votre image dans GIMP**.
Ligne 68: Ligne 68:
 {{tutoriaux:info.png|}} Veillez à ce que les deux fenêtres **Boite à Outils** et **Calques** soient ouvertes.  {{tutoriaux:info.png|}} Veillez à ce que les deux fenêtres **Boite à Outils** et **Calques** soient ouvertes. 
  
-=== Création d'un fond transparent === +**1. 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. \\+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> \\+{{ tutoriaux:transpacanalalpha.png }}
  
 Ensuite utilisez la **Sélection par couleur** pour **sélectionner votre couleur de fond**, et appuyez sur **la touche Suppr**. Ensuite utilisez la **Sélection par couleur** pour **sélectionner votre couleur de fond**, et appuyez sur **la touche Suppr**.
  
-<html><center></html> {{tutoriaux:selectionparcouleurgimp.png|}} <html></center></html>+{{ tutoriaux:selectionparcouleurgimp.png }}
  
 +**2. Transparence de l'effet**\\
 +Dans ce cas-là, on va utiliser la **Gomme** avec une **opacité à 80%**.
  
-=== Transparence de l'effet ===+{{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 !
  
-Dans ce cas là, on va utiliser la **Gomme** avec une **opacité à 80%**\\+{{ tutoriaux:transpaeffet.png }}
  
-{{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 !+=== L'effet fondu ===
  
-<html><center></html> {{tutoriaux:transpaeffet.png|}} <html></center></html>+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 touchent pas le chipset dans le cas d'une ombre)
  
 +{{ tutoriaux:flouttageeffet.png }}
  
- +Ensuite il ne vous reste qu'à **exporter le fichier en format png**.\\ 
-==== L'effet fondu ==== +<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>
- +
-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'imageet choisissez en bas le format png.  <html></center></html>  \\ \\+
  
 Voilà ce que devrait donner votre image sur un fond noir :  Voilà ce que devrait donner votre image sur un fond noir : 
  
-<html><center></html> {{tutoriaux:resultat_effet.png|}} <html></center></html>+{{ tutoriaux:resultat_effet.png }}
  
- +==== Mise en place sur l'Editeur ====
-===== 3ème étape : Mise en place sur l'Editeur =====+
 La transparence faite, on ne va pas utiliser celle que l’Éditeur nous met à disposition.  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**.+Pour qu'il y ait un effet sur le joueurl’évènement doit être en position **Toujours au dessus**.
  
-<html><center></html> {{tutoriaux:editeureffetlumiere.png|}} <html></center></html>+{{ tutoriaux:editeureffetlumiere.png }}
  
 Voilà ce que cela devrait donner :  Voilà ce que cela devrait donner : 
  
-<html><center></html> {{tutoriaux:exempleediteureffetlumiere.png|}} <html></center></html> +{{ tutoriaux:exempleediteureffetlumiere.png }}
  
 +----
 ===== Avec PHOTOSHOP ===== ===== Avec PHOTOSHOP =====
  
-Tout d'abord, Photoshop est un logiciel de graphisme très développer et qui vous permettra de faire de très bons effets et/ou de graphisme.+Tout d'abord, Photoshop est un logiciel de graphisme très développé et qui vous permettra de faire de très bons effets et/ou graphismes.
  
-Lancer donc photoshop et une fois que celui-ci est prêt, ouvrez le chipset que vous voulez modifié.+Lancez donc photoshop et une fois que celui-ci est prêt, ouvrez le chipset que vous voulez modifier.
  
-//Pour pouvoir faire cette effet, il faut que la transparence soit faite avant d'entamer cette méthode.//+//Pour pouvoir faire cet effet, il faut que la transparence soit faite avant d'entamer cette méthode.//
  
 {{tutoriaux:tutoeffet_1_.png|}} {{tutoriaux:tutoeffet_1_.png|}}
  
-Ensuite zoomé a environs 300% et faites **Image >> mode >> Couleur RVB**+Ensuite zoomez à environ 300% et faites **Image >> mode >> Couleur RVB**
  
 {{tutoriaux:tutoeffet_2_.png|}} {{tutoriaux:tutoeffet_2_.png|}}
  
-Les choses sérieuses commencent, sélectionner **l'outil ellipse** et faites un **cercle autours de la bougie**.+Les choses sérieuses commencent, sélectionnez **l'outil ellipse** et faites un **cercle autour de la bougie**.
  
 {{tutoriaux:tutoeffet_3_.png|}} {{tutoriaux:tutoeffet_3_.png|}}
Ligne 134: Ligne 129:
 {{tutoriaux:tutoeffet_4_.png|}} {{tutoriaux:tutoeffet_4_.png|}}
  
-Sélectionner ensuite **l'outil dégradé** //(Toujours dans les fonctions de gauche)//+Sélectionnez ensuite **l'outil dégradé** //(Toujours dans les fonctions de gauche)//
  
 {{tutoriaux:tutoeffet_5_.png|}} {{tutoriaux:tutoeffet_5_.png|}}
  
-Et en haut cliquez sur la **barre rectangulaire** //(Qui est dégradé du bleu vers le transparent)// pour pouvoir faire votre propre dégradé.+Et en haut cliquez sur la **barre rectangulaire** //(qui est dégradée du bleu vers le transparent)// pour pouvoir faire votre propre dégradé.
  
 {{tutoriaux:tutoeffet_6_.png|}} {{tutoriaux:tutoeffet_6_.png|}}
  
-A vous de jouer sur la couleur que vous souhaitezmais rester cohérent. Les bougies éclairent dans le ton jaunedonc ne mettez pas du vert ou du gris.+A vous de jouer sur la couleur que vous souhaitez mais restez cohérents. Les bougies éclairent dans le ton jaune donc ne mettez pas du vert ou du gris.
  
-Une fois votre couleur sélectionnerfaite une **longue diagonale du haut vers le bas** //(Ou dans le sens que vous voulez)// pour pouvoir appliquer le dégradé dans le cercle.+Une fois votre couleur sélectionnéefaites une **longue diagonale du haut vers le bas** //(ou dans le sens que vous voulez)// pour pouvoir appliquer le dégradé dans le cercle.
  
 {{tutoriaux:tutoeffet_7_.png|}} {{tutoriaux:tutoeffet_7_.png|}}
  
-Vous pouvez dès à présent enregistrer votre travail et vous voilà avec un jolie petit effet de lumière.+Vous pouvez dès à présent enregistrer votre travail et vous voilà avec un joli petit effet de lumière.
  
-**Apperçu** :+**Aperçu** :
  
 {{tutoriaux:tutoeffet_8_.png|}} {{tutoriaux:tutoeffet_8_.png|}}
tutos/faire_effet.1598972954.txt.gz · Dernière modification : 2022/09/25 19:10 (modification externe)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki