[Tuto] Jour 1 : Colorer un Jeu Gameboy - Débutant

[omg]

Jour 1 : Colorer un Jeu Gameboy - Débutant

A - Introduction

Elle a bientôt 20 ans notre petite Gameboy! Mais certain hits n'ont pas vieilli comme Zelda : Link's Awakening, Kirby Dream Land ou encore Tetris... Certes, il existe la Gameboy Color, la GBA ou les Super Gameboy mais le rendu d'un jeu monochrome en 4 couleurs via ces appareils n'est pas vraiment top...

Heureusement pour ces jeux (et pour nous) Brunni a réussi à implémenter un système de palettes séparées qui permet d'afficher jusqu'à 192 couleurs différentes.

Ce qui est bien c'est qu'aucune notion de programmation n'est vraiment nécessaire pour colorer un jeu. Bref, c'est pour tout le monde!


B - Les outils

Pour pouvoir laisser libre court à vos créations, vous avez besoin :
- d'un éditeur d'images comme par exemple MSPaint ou Gimp (j'utiliserai MSPaint)
- de la version spéciale de VBA Color Edition de Brunni dispo sur son site
- d'une copie de sauvegarde d'un de vos jeux Gameboy
- un éditeur de texte comme par exemple bloc note sous Windows ou vi si vous êtes sous Linux

Pour ce premier tutorial concernant la coloration, nous prendrons pour exemple un jeu Gameboy qui me tient a coeur : Donkey Kong Land.

Ce jeu made in Rareware est sorti en 1995. Il est un bon jeu de plateforme fidèle au monde de son grand frère Donkey Kong Country sur Super Nintendo.

Je vous rappelle que pour pouvoir travailler sur cette rom vous devez posséder le jeu original.


C - Donner ses premières couleurs à un Jeu

1 - Création du fichier .pal.ini

Nous allons nous familiariser avec les outils. Tout d'abord lancez la version spécial de VisualBoy Advance (VBA) :

Faites File puis Open et ouvrez votre copie de sauvegarde de Donkey Kong Land. Le jeu se lance...

Jusque là tout va bien. Fermez VBA.
Dans le même répertoire que celui qui contient la rom, créez un fichier txt (avec bloc note par exemple) nommé de la même manière que la rom mais avec l'extension .pal.ini au lieu de .gb

Ici la rom se nomme Donkey Kong Land (U) [s][!].gb
donc le .pal.ini se nommera Donkey Kong Land (U) [s][!].pal.ini

Attention! Vous devez sous Windows afficher les extensions de fichier sinon vous risquez d'avoir quelques problèmes !
Pour cela , ouvrez un dossier et faites Outils>Option des Dossiers
Puis dans l'onglet Affichage décochez "Masquer les extensions des fichiers..."

Une fois renommé, vous devriez avoir ces deux fichiers :

N'oubliez pas de mettre comme extension .pal.ini et non .pal.ini.txt
On peut maintenant commencer!


2 - Principe de base

Ouvrez votre fichier .pal.ini , votre émulateur et MSPaint.
Quand tout est ouvert vous aurez ceci :

Vous devez tout d'abord initialiser vos palettes, pour cela mettez ces données dans votre fichier .pal.ini :

Code PHP:

#Initialization 
Init: 
#The tiles we rely on for CRC 
ColorIt.addTileCrc 0, 383 
#For debugging 
ColorIt.autoShowVramCrc = true 
    
#Fall down here to set the default profile upon initialization 
[Default]: 
#Create a gray palette 
ColorIt.setPalette 0, rgb(255,255,255), rgb(168,168,168), rgb(88,88,88), rgb(0,0,0) 
#By default, we use the standard gray palette for everything 
ColorIt.addTileRule 0, 383, 0 
End 


Il faut savoir que les lignes commençant par un # sont des commentaires, très précieux d'en faire un max pour ne pas s'emmêler les pinceaux plus tard.
Nous expliquerons dans un autre tutoriel les trois premières fonctions.

Ensuite nous avons l'entête [Default] : c'est ce que Brunni appelle une section.
Une section est définie par une ligne toujours terminée par le caractère :.
MasterBoy PSP, DS ou le VBA exécutent le code d’une section à chaque fois que la palette pourrait avoir changé comme pour :
- lors d'un démarrage du jeu
- lors d'un changement de scène
- lors d'un chargement de state

La section [Default] est toujours exécutée, alors que certaines sections (nous verrons plus tard) ne sont exécutées que lorsque des conditions particulières sont réunies.

La ligne ColorIt.setPalette 0, rgb(255,255,255), rgb(168,168,168), rgb(88,88,88), rgb(0,0,0) définie que la palette 0 va utiliser les couleurs suivantes :

La ligne ColorIt.addTileRule 0, 383, 0 définie la zone où la palette 0 va être appliquée (ici sur l'ensemble des tiles de la Gameboy au nombre de 384)

Enregistrez le fichier en faisant Fichier/Enregistrer.
Faites maintenant un reset au jeu :
- Soit en sélectionnant la fenêtre de l'émulateur puis Ctrl+R
- Soit File>Reset

Vous obtenez alors un CRC :

Ici le CRC vaut c78fa589. Voilà, vous avez le CRC du premier screen du jeu. Nous allons pouvoir le colorier.

Généralement les jeux Rareware ont leur screen d'intro en fond noir avec une écriture verte. Regardons de plus prêt...

Tout d'abord (sans passer les fonctions au peigne fin) créons cette nouvelle section à la suite des autres informations dans le fichier .pal.ini:

Code PHP:

[c78fa589]:
#Coloriage Splashscreen
ColorIt.setPalette 0, rgb(255,255,255), rgb(168,168,168), rgb(88,88,88), rgb(0,0,0)
ColorIt.addTileRule 0, 383, 0
End 


Nous avons créé une nouvelle section qui sera prise en compte par l'émulateur quand le CRC (qui vaut c78fa589) de cette section sera détectée.

La première ligne crée la palette 0 de cette section. Elle est composé de 4 couleurs défini par rgb (x,y,z)
- x correspond à la couleur rouge
- y correspond à la couleur verte
- z correspond à la couleur bleue

Dans Couleur>Modifier les couleurs dans MSPaint nous allons choisir nos couleurs :

Ici par exemple nous voulons du vert foncé donc Rouge = 41 Vert = 143 Bleu = 16 et du vert un peu plus foncé Rouge = 48 Vert = 169 Bleu = 18.

Modifions notre fichier .pal.ini :

Code PHP:

[c78fa589]:
#Coloriage Splashscreen
ColorIt.setPalette 0, rgb(255,255,255), rgb(168,168,168), rgb(41,143,16), rgb(48,169,18)
ColorIt.addTileRule 0, 383, 0
End 


Hop, on enregistre le fichier .pal.ini et on reset le jeu :

Magnifique! Vous venez de colorer votre première scène !

Bon maintenant on veut un fond noir! Donc il faut changer la première couleur de la palette et mettre du noir :

Code PHP:

ColorIt.setPalette 0, rgb(255,255,255), rgb(168,168,168), rgb(41,143,16), rgb(48,169,18)
ColorIt.setPalette 0, rgb(0,0,0), rgb(168,168,168), rgb(41,143,16), rgb(48,169,18) 


Bien, maintenant on va ajouter des couleurs!


3 - Coloration des Tiles par paquet

Nous allons maintenant travailler directement sur plusieurs tiles afin de mettre plusieurs palettes.
Nous devons regarder les tiles du jeu.
Pour les regarder, dans VBA faites Tools>Map Viewer et Tools>Tile Viewer. Quand tout est ouvert vous aurez un bureau bordelique ressemblant a peu près à ça :

Sur la fenêtre Map Viewer vous voyez le « fond » affiché sur l’écran de la Gameboy. Si l’affichage n’est pas correct changez avec le Char Base.
Si le char base est sur 0x8000 vous jonglerez avec des valeurs de 0 à 383 (bien que la fenêtre de l’émulateur ne vous affiche que les 256 premiers tiles). Si il est sur 0x8800 vous jonglerez avec des valeurs de +0 à +255 ( les tiles 128 à 383 en mode 0x8000).
En gros les tiles +0 à +255 sont en fait ceux de 128 à 383.

Dans cet exemple comme le Char Base 0x8000 n’affiche pas le logo Rareware et que le 0x8800 affiche tout le screen d'intro, nous prendrons la valeur 0x8800.
Le Tile Viewer permet de voir les tiles qui compose notre map, en gros ce sont tous les petits carré de 8 pixels sur 8 pixels qui composent notre map.
Là aussi, si le mode 0x8000 n’affiche pas toutes vos tiles, vous pouvez passer en mode 0x8800.

Bon, après ce petit discourt ennuyeux, passons à l’application !
Nous ne voulons plus que le texte et le logo soient tout vert…
On veut du texte de couleur verdâtre et aussi le logo en jaune.
Donc maintenant il faut connaître la valeur des tiles qui nous intéresse.

Les tiles qui compose la police de caractère va des tiles +83 à +127 (ou en mode 0x8000 211 à 255)
Ceux du logo vont de +129 à +137 (ou de 257 à 265 en mode 0x8000)

Maintenant les couleurs! Alors pour le logo il nous faut du jaune :

Donc nous allons créer une deuxième palette.
Celle-ci sera la numéro 1 et comportera les couleurs jaunes du logo.

Code PHP:

[c78fa589]:
#Coloriage Splashscreen
#Police
ColorIt.setPalette 0, rgb(0,0,0), rgb(168,168,168), rgb(41,143,16), rgb(48,169,18)
ColorIt.addTileRule +83, +127, 0
#Logo Rareware
ColorIt.setPalette 1, rgb(0,0,0), rgb(255,245,125), rgb(255,242,79), rgb(223,206,0)
ColorIt.addTileRule +129, +137, 1
End 


Et voilà le résultat !

D – Maintenant à vous de jouer

D’après vous quelle sera la solution pour avoir en couleur ce type de screen ?

Ci-dessous la réponse!

Spoiler

Il faut d’abord analyser. Il faut une palette supplémentaire avec du rouge. De plus il faut re-déclarer la police qui comporte la couleur verte et déclarer les tiles des nombres (et du TM) :
La police de caractère en vert : de +83 à +116
Les nombres et le TM en Rouge : de +117 à +127
Le logo en Jaune : +129 à +137

Pour faire encore mieux on peut même ajouter le +128 dans un des trois groupes car ce tile correspond au fond avec la couleur de palette 1 identique à chacune des 3 palettes (0,0,0).
Nous l’ajouterons ici dans TM & Nombre.

Code PHP:

#Initialization
Init:
#The tiles we rely on for CRC
ColorIt.addTileCrc 0, 383
#For debugging
ColorIt.autoShowVramCrc = true
#Fall down here to set the default profile upon initialization
[Default]:
#Create a gray palette
ColorIt.setPalette 0, rgb(255,255,255), rgb(168,168,168), rgb(88,88,88), rgb(0,0,0)
#By default, we use the standard gray palette for everything
ColorIt.addTileRule 0, 383, 0
End
[c78fa589]:
#Coloriage Splashscreen
#Police
ColorIt.setPalette 0, rgb(0,0,0), rgb(168,168,168), rgb(41,143,16), rgb(48,169,18)
ColorIt.addTileRule +83, +116, 0
#Logo Rareware
ColorIt.setPalette 1, rgb(0,0,0), rgb(255,245,125), rgb(255,242,79), rgb(223,206,0)
ColorIt.addTileRule +129, +137, 1
#TM & Nombre
ColorIt.setPalette 2, rgb(0,0,0), rgb(168,168,168), rgb(255,0,0), rgb(223,0,0)
ColorIt.addTileRule +117, +128, 2
End 


Il y a bien sur de multiples réponses justes.

N'hésitez pas à poser vos questions si vous ne saisissez pas quelque chose.

Merci d’avoir lu ce tuto.
Merci à Brunni pour ses outils et son tuto sur lequel je me suis basé.

Suite : Jour 2 : Colorer un jeu Game Boy : Avancé

[Quentin]

Merci pour ce tuto clair et simple
Il sera bien utile pour les debutants qui veulent commencer a colorier les jeux GB!

[Dr.Vince]

joli tuto omg

dommage que j'ai pas le droit de participer à la compo

[Bobby Sixkilla]

Fais participer ta femme...

[omg]

Envoyé par Dr.Vince

joli tuto omg
dommage que j'ai pas le droit de participer à la compo

Et alors? Moi non plus pourtant je me tape la coloration/coloriage/colorant de Metroid 2!

[Bap65]

J'aurais bien envie de me faire F1 race.. quoi que, il y avait déja eu une version color il me semble...
Quoi d'autre... ...
Oh !!! Mais c'est bien sur !!!

[M@T]

très joli tuto! j'attends la suite!! je suis tout mélangé pour les changements de scène (crc) ... et l'utilisation de certaine partie dans toute les scèns, par exemple l'écriture, mais pas les dessins de niveaux je ne comprend pas cela lol très complexe

[omg]

le tuto jour 2 tres bientot!

[Riton]

Très bon tuto, et surtout bien illustré... mais la doc à Brunni ne dit elle pas exactement les même choses ?

[archipel]

depuis le temps que j'attendais ce tuto (hier 18h)

merci

[omg]

Merci! J'ai décortiqué la doc de Brunni qui se base surtout sur Masterboy (mais c'est exactement la même chose qui est expliquée). J'ai fait ce tuto afin d'essayer de simplifier au maximum car quelques personnes n'arrivent pas à se lancer. Là ce sont les bases.
Si vous arrivez à faire l'exercice qui se trouve à la fin c'est que vous êtes prêt à colorer un jeu! Rendez-vous très bientôt pour le tuto 2!

[Dr.Vince]

bon je viens de lire attentivement le tuto, et j'ai une question qui me vient à l'esprit : on est obligé pour coloriser entièrement un jeu de joueur à celui-ci et forcément d'atteindre la fin du jeu pour obtenir touts les crc des différents niveaux ???

quid dans ce cas des jeux qui possèdent des niveaux cachés, auquel je sais pas comment accéder (et donc pas coloriser) mais que le joueur attendra en jouant ??

[omg]

Oui, en gros faut connaitre a fond le jeu pour le colorier.
Après nous ne sommes que de pauvres mortels alors si tu as oublié des niveaux on te le fera remonter.
La personne te filera sa sauvegarde (.sav) et tu pourra continuer ton coloriage dans cette zone.

[sto]

Il existe aussi plein de triches (GameGenie et consors) pour arriver à finir un jeu sans problème...

[Dreamkey]

Merci pour le tuto, vu que j'avais mis la colorisation de côté je ne me rappelais pas de tout

[Brunni]

Excellent tuto, merci bcp omg
Alors oui on est obligé d'aller au bout, mais la section [Default] permet de définir un truc à faire "par défaut", au cas où le niveau n'existe pas (= vous n'avez pas de section pour son CRC).

[omg]

Envoyé par Brunni

Excellent tuto, merci bcp omg

Je n'ai aucun mérite c'est le même que le tient mais encore plus décortiqué et surtout orienté "toute plateforme".

[Bodom-Child]

J'ai essayé de tester un peu avec Zelda Link's Awakening (version française, en .gb, pas la DX), et le crc de l'écran titre change à chaque reset Oo.

Quelqu'un sait pourquoi?

[Lord Deimos]

J'ai justement tester avec ce jeu aussi... :/ Mais moi VBA ne m'affiche même pas les crc.
Et pourtant j'ai bien suivi le début du tuto (avec le fichier .ini qui n'est pas un vulgaire .txt!)

[archipel]

moi aussi ca marche po

Le son marche perfect, je peux jouer sauf que je vois rien (l'écran clignote noir-blanc)

[Brunni]

Le CRC change à chaque reset> C'est bizarre ça, mais je crois que c'est parce que VBA ne vide pas la mémoire vidéo au reset, alors il reste des résidus aux endroits non initialisés; je regarderai

[Lord Deimos]

Merci de te pencher sur ce problème, Brunni.
Au pire on efface le fichier "vba.ini" pour reset à 100% l'émulateur, non?



Petit HS pour Brunni: J'ai laissé tomber MasterBoy pour MMS Plus, en attendant de trouver pourquoi il freeze sur ma PSP. MMS Plus -> aucun problème!

[Yodajr]

Pour ceux dont le CRC change tout le temps, vous avez pensé à modifier cette valeur ? :

Code PHP:

ColorIt.addTileCrc 0, 383 


Car par défaut, le CRC se base ici sur l'ensemble des tiles, y compris les animés et tout...
Il faut sélectionner avec cette ligne uniquement les tiles fixes qui identifient à coup sûr le niveau/la scène en cours

[M@T]

oh merci Yoda JR!! voilà pourquoi dépendament de ou tu viens le crc change parce que certain truc change seulement 3

#Initialization
Init:
#The tiles we rely on for CRC
ColorIt.addTileCrc 0, 383
#For debugging
ColorIt.autoShowVramCrc = true

si je change le ColorIt.addTileCrc 0, 383, est-ce que tout les crc vont changer? alors je dois choisir ca avant de commencer à colorier sinon je vais d'avoir tout changer les CRC?

[Cuissedemouche]

Bonjours.
J'ai le VBA spécial pour la colorisation mais il ne fonctionne pas, Simon anglais est bon, il faut que je bascule mon ordinateur en anglais.
Merci d'avance et A+