Clikmag>Dossiers >Pixel-art: Annexe 2

Pixel art
Annexe 2: Une histoire de palettes.

Un cours très important aujourd'hui, puisqu'il concerne la ou les palettes d'un jeu, c'est à dire les couleurs le composant. Créer sa palette personnalisée, l'importer dans TGF ou MMF, gérer plusieurs palettes dans un seul jeu, des techniques relativement simples et surtout très efficaces.
Ce cours vous apprendra à maitriser l'aspect visuel de votre jeu en choisissant vous même vos couleurs préférées et ainsi retrouver un rendu plus réaliste (comme des variations plus fines de couleurs) en utilisant astucieusement des palettes personnalisées. On parlera bien entendu dans ce cours d'un jeu en 256 couleurs.
*Note: on s'aidera ici de Photoshop pour gérer ses palettes. Les manipulations proposées ont été effectuées avec Photoshop 6, il est possible que les raccourcis ou les emplacements des outils changent légèrement sur d'autres versions.


1: Les palettes TGF et MMF

- Emplacements:

Avant tout, notez où se trouve l'objet "Palette" dans les deux créateurs de logiciels.
- Dans TGF, créez une scene. Dans l'onglet "Edition", cliquez sur "Parametres de la scène". Dans la fenêtre qui va s'ouvrir, cliquez sur le deuxième onglet "Palette".
- Dans MMF, créez une nouvelle application, puis placez vous dans l'editeur de frame. Dans l'onglet "Objects", cliquez sur "Properties". Dans la liste, choisissez le menu "Palette".

Notez que dans les deux cas, vous voyez la palette utilisée et, à côté, un bouton "Charger" ("Import" pour mmf) C'esi ici que vous chargerez vos palettes, mais nous y reviendrons plus tard.

-Importer la palette dans Photoshop:

Vous avez sans doute remarqués que lorsque vous importez un graphisme exterieur à TGF ou MMF dans lesdits logiciels (par exemple, avec le bouton "importer une image" dans le logiciel de dessin), le résultat obtenu était souvent plus proche de la bouillie hideuse de pixels que d'un dessin. La manipulation suivante permettra de contourner cet obstacle en passant par Photoshop, bien plus doué que TGF pour réduire les couleurs sur une image.
Avant tout, il va falloir importer la palette spécifique a TGF (celle que vous voyez à droite quand vous dessinez dans le logiciel de dessin) dans Photoshop.

Dans Photoshop, choisissez "Fichier - Ouvrir". Allez dans le repertoire de TGF et normalement, vous devriez y trouver un fichier nommé "GF256". Ouvrez le, la palette TGF apparait. Dans le menu "Image", selectionnez "Mode - Couleurs Indexées"

La fenêtre "Couleurs indexées" ouverte, occupez vous de la partie en haut à gauche: vous remarquez que votre dessin comporte 256 couleurs (ce qui est normal, vu qu'il s'agit de la palette 256 couleurs de TGF). Dans le menu "Palette", choisissez Autre. La fenêtre "Table des couleurs" s'ouvre (ça fait beaucoup de fenêtres tout ça ^^). Ici, vous pouvez donc voir la Table des couleurs Photoshop avec les couleurs de la palette TGF. Il ne reste plus qu'à l'enregistrer en format ACT. Placez là dans un repertoire facile d'accès, elle resservira.

Si toutes ces manipulations vous paraissent compliquées, vous pouvez télécharger la Table de couleurs ici.


2: Gérer la palette standart

- Exemple:


Maintenant que vous avez votre Table des couleurs, vous pouvez tranquillement travailler sur Photoshop. Un exemple tout simple: on va améliorer l'ombre sur Glob sur Photoshop, puis on va le faire passer sous TGF sans perte de qualité. D'abord, il faut importer Glob sur Photoshop.
Vous remarquez que Glob a des contours noirs. Or, lorsque l'on importe la couleur transparente de TGF à Photoshop, elle devient noire, ce qui risque de faire disparaitre les contours si on veut le retravaillez. Pour pallier à cela, coloriez la couleur transparente en une couleur non utilisée dans le dessin (ici, en rouge). Ensuite, copiez - collez votre dessin dans Photoshop. Avec la baguette magique (tolérance 0), selectionnez le rouge et effacez le (suppr).
Ensuite, faites les retouches que vous voulez. Ici, jai retravaillé l'ombre en la dégradant un peu.

Ensuite, il va falloir charger la Table des couleurs TGF. Suivez la procédure d'au dessus: "Image - Mode - Couleurs Indexées - Autre". Comme vous pouvez le voir sur le shéma a gauche, la Table des couleurs est ici déjà chargée. Si ce n'est pas le cas, utilisez le bouton Charger à côté et cherchez votre table (.ACT). Puis cliquez sur ok.
Le resultat est ici très satisfaisant car on ne remarque presque pas la différence entre le dessin Photoshop (16 millions de couleurs) et le dessin avec les couleurs indexées (256 dont une 15aine de nuances de vert).
Vous n'avez plus qu'a copier-coller le dessin dans le logiciel de dessin de TGF. Le shéma à droite vous montre qu'il n'y a plus cette altération de couleurs qu'on peut trouver lorsqu'on importe une image directement.

- Problèmes rencontrés:

Si utiliser la palette standart de TGF pour faire son jeu est interessant quand il s'agit de couleurs simples ou de dégradés legers, il en va autrement quand il s'agit de dessins et de couleurs complexes, et surtout quand les couleurs sont sombres. On voit par exemple sur le dessin a droite que le papier peint et le sol ont perdu leurs couleurs, et une sensation de "grain" se dégage de l'ensemble.
En fait, Photoshop utilise la palette de TGF, et donc restreint grandement les couleurs pouvant etre utilisées; par exemple ici, les couleurs claires, le bleu ou le blanc ne sont pas utilisés, c'est donc un "gachis" qui entraine cette perte de qualité. C'est là qu'on va maintenant utiliser une palette créée par nos soins.


3: La palette customisée

- Exemple 1, le principe de l'écran titre:

Cette technique fonctionne avec un écran titre, mais aussi avec toute scene qui ne reprend aucun graphisme utilisé dans une autre scene. A défaut d'écran titre, c'est avec une photo qu'on continuera le cours :)

Il s'agit en fait de créer une palette spéciale qui ne sera utilisée que dans un seul niveau. On va donc commencer par faire son écran titre entièrement sur Photoshop. Les couleurs sont libres mais n'oubliez pas qu'au final, votre écran titre possedera 256 couleurs.
Lorsque vous etes satisfait, Indexez les couleurs ("Edition - Mode - Couleurs indexées") mais cette fois choisissez "Globale (Perceptive)" ou "Globale (Selective) et surtout, 256 couleurs. Si vous avez activé l'Apercu, vous apercevrez une petite perte de couleurs (ca dépend du nombre de couleurs utilisées).
Maintenant rappellez vous le début du cours: on avait vu comment importer une palette. En fait, TGF et MMF ne sont pas capables d'importer des palettes aux formats ACT (et PAL), mais ils chargent des fichiers Image et les transforme en palettes. Un des fichiers supporté est le gif.
Sauvegardez votre écran titre en gif. Verifiez que le nombre de couleurs est bien à 256. Les autres paramètres n'ont pas d'importance, car vous avez fait les reglages avant. Il ne vous reste plus qu'a ouvrir TGF ou MMF


Dans TGf ou MMF, dans l'onglet "Palette" (voir en haut), chargez votre écran titre. La palette change alors, et utilise seulement les couleurs que contient votre écran titre ! Vous n'avez plus qu'à ouvrir le logiciel de dessin de TGF/MMF et importez votre dessin sauvegardé en gif. Le tour est joué !

Même si votre application est en 256 couleurs, le fait de n'utiliser que les couleurs necessaires fait penser que plus de couleurs sont utilisées. Dans l'exemple à gauche, on remarque qu'il n'y a pratiquement aucune perte de qualité entre le dessin Photoshop et le dessin qui apparaitra dans TGF.

- Exemple 2, les niveaux de jeu:

La technique de l'écran titre fonctionne particulièrement bien pour les scenes ne contenant pas d'objets réutilisés après. Elle parait donc inutile lors qu'on veut, par exemple, faire les decors d'un jeu sur Photoshop. En effet, les elements que l'on retrouve à chaque niveau (personnage, barre de vie, bonus de jeu etc...) risquent d'avoir des couleurs différentes d'une scene à l'autre, ce qui risque de destabiliser le joeur. Heureusement il existe une petite astuce: les couleurs forcées.
Voici ici un exemple pour le héros (enfin, l'héroine :) de First Rain
.


Souvenez vous: dans l'annexe 1, je vous recommendais d'utiliser le moins de couleurs possibles pour le personnage principal. Aujourdhui, je vais vous expliquer pourquoi. Le principe des couleurs forcées est de dire à Photoshop de rajouter des couleurs spécifiques dans une palette de couleurs, même si ces couleurs ne sont pas indispensables.

Il va falloir choisir les couleurs que l'on imposera à Photoshop dans une palette. Utilisez le même principe que précedemment et allez dans la fenêtre "Couleurs indexées". Choisissez dans le menu "Palette" "Locale (Perspective). Placez vous dans la zone de texte "Couleurs" et à l'aide des fleches directionnelles, faites descendre le nombre de couleurs jusqu'a avoir une perte de couleurs. Ici, le personnage est alteré à partir de 19 couleurs (au niveau des yeux et de la bouche). Il y aura donc 20 couleurs forcées.

Procédez comme lors de l'enregistrement de la palette TGF: après avoir réglés les couleurs (20) dans la fenêtre Palette, choisissez "Autre" dans le menu Palette (au dessus de "Couleurs"). Vous verrez que la table des couleurs est peu remplie. Enregistrez là avec un nom de circonstante, par exemple "forcees.ACT"


Maintenant faites votre niveau de jeu. Lorsqu'il est terminé, procedez de la manière habituelle, vu dans le chapitre précédent (Principe de l'écran titre). Le changement s'effectue lorsque vous indexez vos couleurs. Dans le menu "Forcées", sous "Couleurs", choisissez "Autre...". Vous vous retrouvez avec une Table des couleurs vide. Chargez celle qui contient les couleurs de votre personnage (et si vous le faites bien, les couleurs des items, de l'interface...)

Selon le nombre de couleurs forcées, le resultat peut plus ou moins se dégrader. Cependant, la qualité restera bien superieure à une image indexée avec la palette standart de TGF.

C'est à vous maintenant de bien gérer vos couleurs. Tout est question d'équilibre: sachez manipulez vos couleurs lors de la création des personnages et des items, de façon à utilisez le moins possible de couleurs tout en gardant un bel aspect visuel. Travaillez en 256 couleurs est une épreuve difficile: on est tenté de mettre toujours plus de couleurs ou carrément de passer en 32 000 couleurs pour être tranquille. J'espere que ces quelques astuces vous convaincrons de rester limités :) Et n'oubliez pas que chaque scene (que ce soit sur TGF ou MMF) peut contenir une palette différente...

 

Cette annexe n°2 était plus axée sur la technique, car j'estimais qu'il était important de connaître les principes des couleurs indexées et des palettes. Après tout, il s'agit du "moteur graphique" de votre jeu :) J'espere vous avoir correctement appris les techniques que j'utilise. Si vous avez des questions, ou que vous n'avez pas compris quelque chose, c'est par là !

EssaimE

Pixel art et réalisme: première partie
Pixel art et réalisme: deuxieme partie
Annexe 1: Scan et retouches