Différences

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

--- tutos:creer_chipset_gimp [2020/08/31 19:22] – lyssitz
+++ tutos:creer_chipset_gimp [2022/09/25 19:11] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
-====== REALISER SES PROPRES CHIPSETS ======
+====== REALISER SES PROPRES CHIPSETS AVEC GIMP ======
-===== Réaliser un Chipset avec "The GIMP" =====
+Avant d'aller plus loin, prenez le temps de bien lire ces __[[general:nouveaux_fichiers|quelques conseils]]__ pour éviter de rencontrer d'éventuels bugs par la suite !
+__**Attention :**__
+- **La transparence** d'un chipset ne peuvent se faire __**QUE**__ sur les **logiciels GIMP ou Photofiltre**. __Aseprite__, __Photofiltre studio__, ou bien __Photoshop__ ne conviennent pas pour réaliser ces actions sinon les cartes seront lentes et le chipset non transparents.
+- **L'indexation** n'est pas nécessaire pour le projet SoRE, néanmoins si vous effectuer une indexation, utilisez GIMP, il est le logiciel avec la plus performante quantisation d'image (algorithmes de réduction de couleur)  entre tous les logiciels parmi les logiciels précédemment cités (à tester : __Aseprite__)
+----
 ===== Introduction =====
-The GIMP est un logiciel de création graphique totalement gratuit, performant et en français. Vous pouvez le télécharger en version Windows [[http://www.01net.com/telecharger/windows/Multimedia/creation_graphique/fiches/5245.html|ici]] ou en version Linux [[http://www.01net.com/telecharger/linux/Multimedia/fiches/3182.html|ici]].
+The GIMP est un logiciel de création graphique totalement gratuit, performant et en français. Vous pouvez le télécharger en version [[http://www.01net.com/telecharger/windows/Multimedia/creation_graphique/fiches/5245.html|Windows]] ou en version [[http://www.01net.com/telecharger/linux/Multimedia/fiches/3182.html|Linux]].
 {{tutoriaux:gimp1.png?110x480 }} {{tutoriaux:gimp2.png?389x143 }}
 <html><br><br><br><br><br><br><br><br><br><br><br><br></html>
-  *	Après l’avoir installé sur votre ordinateur, lancez-le. (le logiciel peut être assez long à se lancer, c’est normal)
+  *	Après l’avoir installé sur votre ordinateur, lancez-le. Le logiciel peut être assez long à se lancer, c’est normal.
-//Les images ci contre apparaissent, il s’agit de la boite à outil du logiciel (à gauche) et de l’éditeur d’image (en haut). Dans ce tutorial nous allons juste voir les principales fonctions pour réaliser un chipset pour Slayers Online. Il y a bien évidement d’autres fonctions utiles.//
+//Les images ci-contre apparaissent, il s’agit de la boite à outil du logiciel (à gauche) et de l’éditeur d’image (en haut). Dans ce tutoriel, nous allons juste voir les principales fonctions pour réaliser un chipset pour Slayers Online. Il y a bien évidement d’autres fonctions utiles.//
 ===== Préparation de notre chipset =====
-  *	Pour créer un nouveau chipset cliquez sur **Fichier/Nouveau…**, la fenêtre suivante apparait :
+  *	Pour créer un nouveau chipset, cliquez sur **Fichier/Nouveau…**, la fenêtre suivante apparaît :
 {{tutoriaux:nouveaugimp.png| }}
-//La taille normale d’un chipset est de 480*256 pixels. Il est possible de faire plus grand, dans la limite du raisonnable. Si vous n’utilisez pas toute la feuille, vous rétrécirez à la fin votre chipset afin de ne pas laisser trop de vide sur votre page.//
+//La taille normale d’un chipset est de 480*256 pixels. Il est possible de faire plus grand tant que ça reste dans la limite du raisonnable. Si vous n’utilisez pas toute la feuille, vous n'aurez qu'à rétrécir à la fin votre chipset afin de ne pas laisser trop de vide sur votre page.//
-<html><br><br></html>
-  * 	Donc remplissez les champs à votre convenance, puis **Valider** pour faire apparaître votre page vierge.
-{{:tutoriaux:page_vide_gimp.png}}
+  * 	Donc remplissez les champs à votre convenance puis **Valider** pour faire apparaître votre page vierge.
-<html><br><br></html>
+{{:tutoriaux:page_vide_gimp.png}}
-  * 	Nous allons maintenant créer une grille pour faciliter notre importation de décors sur notre chipset (cette étape est facultative si vous l’avez déjà faites). Pour cela, allez dans **Edition/Préférences/Grille par défaut** :
+  * 	Nous allons maintenant créer une grille pour faciliter notre importation de décors sur notre chipset (cette étape est facultative si vous l'avez déjà fait auparavant). Pour cela, allez dans **Edition/Préférences/Grille par défaut** :
 {{tutoriaux:preferencegimp.png|}}
 Chaque carré de décor d’un chipset doit faire 16*16 pixels. Donc dans **Espacement** mettez **16** en Largeur et **16** en Hauteur. Puis **Valider**.
-<html><br><br></html>
-  * 	Nous allons maintenant activer (si ce n’est pas fait) cette grille. Pour cela cliquez sur **Affichage/Afficher la grille**.
+  * 	Nous allons maintenant activer (si ce n’est pas fait) cette grille. Pour cela, cliquez sur **Affichage/Afficher la grille**.
 {{tutoriaux:affichergrillegimp.png|}}
-<html><br><br></html>
+  * 	Enfin, pour placer facilement vos éléments sur cette grille, faites **Affichage/Aligner sur la grille**.
-  * 	Enfin, pour placer facilement nos éléments sur cette grille, faites **Affichage/Aligner sur la grille**.
 {{tutoriaux:alignergrillegimp.png|}}
-<html><br><br></html>
   * 	Voila enfin notre page de prête :
 {{tutoriaux:pagegrillegrille.png|}}
-=====Importation de décor appartenant à d’autres chipsets =====
+===== Importation de décor appartenant à d’autres chipsets =====
 **Attention, pour respecter les règles d’acceptation, il est important que votre chipset soit bien différent de ceux déjà existant en jeu !**
   * 	Ouvrez avec The Gimp le chipset dont vous voulez prendre des éléments. (**Fichier/Ouvrir…**)
-<html><br></html>
   *     Activez, comme précédemment, la grille et l’alignement sur la grille dans le menu Affichage.
-<html><br></html>
   *     Sur la boîte à outils, sélectionnez l’outil de **sélection rectangulaire** (ou appuyez sur **R**) :
 {{tutoriaux:rectanglegimp.png|}}
-<html><br><br></html>
+  *	Sur votre chipset, sélectionnez les éléments que vous voulez (vous remarquerez que l’alignement sur la grille facilite grandement la tache de sélection ^_^). N’hésitez pas à utiliser l’outil de zoom pour mieux voir votre sélection.
-  *	Sur votre chipset, sélectionnez les éléments que vous voulez (vous remarquerez que l’alignement sur la grille facilite grandement la tache de sélection ^^). N’hésitez pas à utiliser l’outil de zoom pour mieux voir votre sélection.
 {{tutoriaux:selectiongimp.png|}}
-<html><br><br></html>
   * 	Copier ces éléments grâce à **Edition/Copier** (ou **Ctrl** + **C**)
-<html><br></html>
+  * 	Retournez sur votre page vierge pour coller vos éléments graphiques avec **Edition/Coller** (ou **Ctrl** + **V**) (le zoom peut être utile aussi ici)
-  * 	Retournez sur votre page vierge, pour coller vos éléments graphiques avec **Edition/Coller** (ou **Ctrl** + **V**) (le zoom peut être utile aussi ici)
+  * 	Il ne vous reste plus qu’à placer vos éléments sur votre page où vous les voulez. Il faut obligatoirement que les décors restent dans la grille créée précédemment. (voir exemple ci-dessous)
-<html><br></html>
-  * 	Il ne vous reste plus qu’a placer vos éléments sur votre page où vous les voulez. Il faut obligatoirement que les décors restent dans la grille créée précédemment. (voir exemple ci-dessous)
 {{tutoriaux:placementgimp.png|}}
-<html><br><br></html>
   * 	Répétez ces étapes pour tous les éléments que vous souhaitez avoir pour créer votre map. Voilà mon début de chipset pour ma part :
 {{tutoriaux:chipset1gimp.png|}}
-<html><br><br></html>
+  * 	On remarque qu’on ne peut pas appliquer une transparence pour le moment car le fond des images n’est pas de la même couleur. Il faut donc changer ça. Choisissez une couleur de fond que vous n’utilisez pas ailleurs. Pour ma part j’ai utilisé le rouge foncé. A vous de mettre une couleur qui n’est pas utilisée dans vos éléments de décor. Puis utilisez l’outil de **remplissage** (voir ci-dessous) (ou **Maj** + **B**)
-  * 	On remarque qu’on ne peut pas appliquer une transparence pour le moment, car le fond des images n’est pas de la même couleur. Il faut donc changer ça. Choisissez une couleur de fond que vous n’utilisez pas ailleurs. Pour ma part j’ai utilisé le rouge foncé. A vous de mettre une couleur qui n’est pas utilisé dans vos éléments de décor. Puis utilisez l’outil de **remplissage** (voir ci-dessous) (ou **Maj** + **B**)
 {{tutoriaux:remplissagegimp.png|}}
-<html><br><br></html>
   * 	Il ne vous reste plus qu’à mettre le fond d’une couleur uniforme pour qu’on puisse enfin appliquer la transparence. Voici mon chipset terminé sans transparence :
 {{tutoriaux:chipset2gimp.png|}}
-<html><br><br></html>
-=====Réaliser la transparence d’un chipset =====
+===== Réaliser la transparence d’un chipset =====
-//Nous voilà à l’étape finale de notre chipset. Pour éviter les lag en jeu et avoir un bon chipset, il est important de suivre attentivement les étapes suivantes.//
+//Nous voilà à l’étape finale de notre chipset. Pour éviter les lags en jeu et avoir un bon chipset, il est important de suivre attentivement les étapes suivantes.//
-  * 	La première étape consiste à sélectionner la couleur que l’on veut voir transparente. Pour cela on va utiliser l’outil de **sélection par couleur** (voir ci-dessous) (ou **Maj** + **O**), et sélectionnez la couleur de fond sur votre chipset (le rouge pour ma part).
+  * 	La première étape consiste à sélectionner la couleur que l’on veut voir transparente. Pour cela on va utiliser l’outil de **sélection par couleur** (ou **Maj** + **O**) et sélectionnez la couleur de fond sur votre chipset (le rouge pour ma part).
 {{tutoriaux:selectionparcouleurgimp.png|}}
-<html><br><br></html>
-  * 	Ensuite, il faut appliquer un canal alpha, pour cela cliquez sur **Calque/Transparence/Ajouter un canal alpha** (Si vous possédez déjà d’un canal alpha, il suffit de cliquer sur **Supprimer le canal alpha**, et ensuite appliquer le canal alpha comme décrit avant).
+  * 	Ensuite, il faut appliquer un canal alpha. Pour cela cliquez sur **Calque/Transparence/Ajouter un canal alpha** (Si vous possédez déjà d’un canal alpha, il suffit de cliquer sur **Supprimer le canal alpha**, et ensuite appliquer le canal alpha comme décrit avant).
 {{tutoriaux:ajoutercanalalphagimp.png|}}
 //Il est normal que vous ne voyez rien d’appliqué concrètement sur votre chipset pour le moment.//
-<html><br><br></html>
   * 	Pour appliquer notre transparence il ne reste plus qu’à supprimer notre couleur de fond. Pour cela, cliquez sur **Edition/Effacer** (ou en appuyant sur **Suppr**).
@@ Ligne 106: / Ligne 90: @@
 //Le quadrillage de fond nous indique que la transparence est bien appliquée.//
-<html><br><br></html>
   * 	Si le pixel tout en haut à gauche de votre chipset n’est pas transparent il va falloir suivre les étapes suivantes :
-<html><br><br></html>
+    * 	Sélectionnez à l’aide de l’outil **pipette** ce pixel.
-  * 	Sélectionnez à l’aide de l’outil **pipette** ce pixel.
 {{tutoriaux:pipettegimp.png|}}
-<html><br><br></html>
-  * 	Puis sélectionnez ce pixel avec l’outil de **sélection rectangulaire**.
+    * 	Puis sélectionnez ce pixel avec l’outil de **sélection rectangulaire**.
 {{tutoriaux:selectionpixelgimp.png|}}
-<html><br><br></html>
-  * 	Supprimez ce pixel grâce à la touche **Suppr** de votre clavier ou dans **Edition/Effacer**.
+    * 	Supprimez ce pixel grâce à la touche **Suppr** de votre clavier ou dans **Edition/Effacer**.
-<html><br><br></html>
+===== Réaliser une indexation d’un chipset =====
-  * 	Le jeu n’accepte que les éléments graphiques en 256 couleurs, nous allons donc indexer notre chipset. Pour cela, cliquez sur **Image/Mode/Couleurs indexées**. Si votre chipset est déjà en Couleurs indexées, il faut passer en mode **RVB** avant, et ensuite repasser en **Couleurs indexées**.
+Le jeu n’accepte que les éléments graphiques en 256 couleurs, nous allons donc indexer notre chipset.
+Cette contrainte technique ne s'applique pas au moteur de jeu SoRE. Passez cette étape à l'étape [[tutos:creer_chipset_gimp#Enregistrement du chipset|Enregistrement du chipset]].
+  * 	Pour cela, cliquez sur **Image/Mode/Couleurs indexées**. Si votre chipset est déjà en Couleurs indexées, il faut passer en mode **RVB** avant et ensuite repasser en **Couleurs indexées**.
 {{tutoriaux:couleurindexegimp.png|}}
-<html><br><br></html>
+  * 	Sélectionnez « **Générer une palette optimale** », **255** couleurs maximales et enfin sélectionnez « **Positionné** » dans Tramage et **Convertir**. (Attention cette méthode peut détériorer votre chipset, n’oubliez donc pas de le sauvegarder avant de le convertir (voir méthode de sauvegarde plus bas))
-  * 	Sélectionnez « **Générer une palette optimale** », **255** couleurs maximales, enfin sélectionnez « **Positionné** » dans Tramage et **Convertir**. (Attention cette méthode peut détériorer votre chipset, n’oubliez donc pas de le sauvegarder avant de le convertir (voir méthode de sauvegarde plus bas))
 {{tutoriaux:convertircouleurindexe.png|}}
-<html><br><br></html>
   * 	Si vous avez supprimé le pixel en haut à gauche, il ne reste plus qu’à le remettre avec l’outil **crayon**.
 {{tutoriaux:crayongimp.png|}}
-<html><br><br></html>
-  * 	Voilà notre chipset est terminé, il ne reste plus qu’à l’enregistrer. Pour cela, sélectionnez **Fichier/Enregistrer sous…** La fenêtre suivante apparait :
+===== Enregistrement du chipset =====
+  * 	Voilà notre chipset est terminé, il ne reste plus qu’à l’enregistrer. Pour cela, sélectionnez **Fichier/Enregistrer sous…** La fenêtre suivante apparaît :
 {{tutoriaux:enregistrergimp.png|}}
-<html><br><br></html>
+  * 	Choisissez le nom de votre chipset (**le nom choisit ne doit pas déjà exister dans le dossier Client du jeu**) et choisissez **Image PNG** comme type de ficher. Votre chipset ne peut être que sous le format PNG pour être accepté. Cliquez sur **Enregistrer**. La fenêtre suivante s’ouvre, cochez les cases comme ci-dessous et **Enregistrer**.
-  * 	Choisissez le nom de votre chipset (**le nom choisit ne doit pas déjà exister dans le dossier Client du jeu**) et choisissez **Image PNG** comme type de ficher. Votre chipset ne peut être que sous le format PNG pour être accepté. Cliquez sur **Enregistrer**. La fenêtre suivante s’ouvre, coché les cases comme ci-dessous et **Enregistrer**.
 {{tutoriaux:enregistrer2gimp.png|}}
-<html><br><br></html>
-Voila j’ai terminé ce petit tutorial de base pour la création d’un chipset. J’espère qu’il vous a été utile, bon mappage à vous.
+Voila j’ai terminé ce petit tutoriel de base pour la création d’un chipset. J’espère qu’il vous a été utile, bon mappage à vous.
 <html><br><br></html>
  --- //Algo // ---