[Tuto] Jour 2 : Colorer un Jeu Gameboy - Avancé

[omg]

Jour 2 : Colorer un Jeu Gameboy - Avancé

A - Introduction

Vous avez bien aimé le premier cours sur les bases de la coloration? Mais vous voulez en savoir plus? Nous aborderons dans ce cours la coloration avancée pour que vous puissiez vous attaquer aux différents niveaux d'un jeu grâce aux outils "Made in" Brunni.

Encore un fois, je vous rappelle 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 aurez encore 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 deuxième tutorial concernant la coloration, nous prendrons pour exemple encore une fois : Donkey Kong Land.

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


C - Coloration complexe d'une Image

1 - Présentation de l'image

Nous allons travailler dans cette première partie du tuto sur le screen de présentation de Donkey Kong Land :

Analysons cette image afin de la colorer.


2 - Analyse de l'Image et Colorisation

Pour cette coloration, nous devons nous occuper :
- du texte Donkey Kong
- du texte Land
- de Rambi le Rhino
- de DK
- de Diddy
- de la cravatte de DK
- du socle sous DK

Découpons maintenant en fonction des tiles et aidons nous du Tile Viewer de VBA :

Voilà nos différentes zones :
- O texte Donkey Kong : Tiles +128 à +208
- O texte Land : Tiles 2 à 7 et 10 à 15
- O DK : 22 à 23, 32 à 35, 43, 49 à 56, 67 à 74, 79, 86 à 93, 92, 104 à 112, 121 à 124, 127 à 130, 140 à 143, 146 à 149, 159 à 162, 165 à 168, 177 à 180, 183 à 186, 192 à 195, 197 à 200, 215 et 233 à 235
- O cravatte de DK : Tiles 125 à 126, 144 à 145, 163 à 164, 181 à 182, 196 et 214
- O socle sous DK : Tiles 191, 201 à 213
- O Rambi le Rhino : Tiles 1, 8 à 9, 16 à 21, 26 à 31, 43 à 48, 61 à 66, 80 à 85, 99 à 103, 117 à 120, 136 à 139, 155 à 158 et 173 à 176
- O Diddy : Tiles 24 à 25, 36 à 42, 57 à 60, 75 à 79, 94 à 98, 113 à 116, 131 à 135, 150 à 154, 169 à 172 et 187 à 190

Diddy ne sera pas vraiment colorer entièrement ici car il y a un problème du à sa casquette rouge dont les tiles se mélangent avec le reste de la tête et sa queue... Bref en colorant la casquette en rouge, ont aurait par la même occasion la tête et un morceau de la queue en rouge. Nous verrons la coloration de cette casquette dans le tuto du jour 3.

Comme vous le voyez, cette analyse requiert beaucoup de temps. Mais au final nous avons découpé parfaitement nos palettes et tiles. D'ailleurs, que choisir pour les palettes?
Le titre doit être proche de l'original. Bref ecriture rouge entourée de jaune.
Rambi doit être gris, DK et Diddy marron, la cravate de DK rouge et le socle on le mettra gris foncé.

Pour le CRC, on se rend compte qu'il a la valeur 3afea85d au début, mais qu'après un niveau démo il prend la valeur 92a6b159.

Donc voilà ce qu'il faut mettre dans le fichier .pal.ini (en plus des données du dernier tuto) :

Code PHP:

[3afea85d]:
[92a6b159]:
#Coloriage Screen Intro
#Logo DK
ColorIt.setPalette 0, rgb(255,255,0), rgb(225,33,4), rgb(184,26,3), rgb(0,0,0)
ColorIt.addTileRule +128, +208, 0

#Logo Land
ColorIt.setPalette 1, rgb(182,170,22), rgb(170,85,0), rgb(128,64,0), rgb(0,0,0)
ColorIt.addTileRule 2, 7, 1
ColorIt.addTileRule 10, 15, 1

#DK
ColorIt.setPalette 2, rgb(255,210,117), rgb(163,86,1), rgb(121,64,0), rgb(0,0,0)
ColorIt.addTileRule 22, 23, 2
ColorIt.addTileRule 32, 35, 2
ColorIt.addTileRule 43, 43, 2
ColorIt.addTileRule 49, 56, 2
ColorIt.addTileRule 67, 74, 2
ColorIt.addTileRule 79, 79, 2
ColorIt.addTileRule 86, 93, 2
ColorIt.addTileRule 92, 92, 2
ColorIt.addTileRule 104, 112, 2
ColorIt.addTileRule 121, 124, 2
ColorIt.addTileRule 127, 130, 2
ColorIt.addTileRule 140, 143, 2
ColorIt.addTileRule 146, 149, 2
ColorIt.addTileRule 159, 160, 2
ColorIt.addTileRule 161, 162, 2
ColorIt.addTileRule 165, 168, 2
ColorIt.addTileRule 177, 180, 2
ColorIt.addTileRule 183, 186, 2
ColorIt.addTileRule 192, 195, 2
ColorIt.addTileRule 197, 200, 2
ColorIt.addTileRule 215, 215, 2
ColorIt.addTileRule 233, 235, 2

#DK Cravate
ColorIt.setPalette 3, rgb(0,0,0), rgb(255,0,0), rgb(196,0,0), rgb(0,0,0)
ColorIt.addTileRule 125, 126, 3
ColorIt.addTileRule 144, 145, 3
ColorIt.addTileRule 163, 164, 3
ColorIt.addTileRule 181, 182, 3
ColorIt.addTileRule 196, 196, 3
ColorIt.addTileRule 214, 214, 3

#DK Socle
ColorIt.setPalette 4, rgb(100,100,100), rgb(80,80,80), rgb(60,60,60), rgb(0,0,0)
ColorIt.addTileRule 191, 191, 4
ColorIt.addTileRule 201, 213, 4


#Rambi
ColorIt.setPalette 5, rgb(160,160,160), rgb(135,135,135), rgb(110,110,110), rgb(0,0,0)
ColorIt.addTileRule 1, 1, 5
ColorIt.addTileRule 8, 9, 5
ColorIt.addTileRule 16, 21, 5
ColorIt.addTileRule 26, 31, 5
ColorIt.addTileRule 43, 48, 5
ColorIt.addTileRule 61, 66, 5
ColorIt.addTileRule 80, 85, 5
ColorIt.addTileRule 99, 103, 5
ColorIt.addTileRule 117, 120, 5
ColorIt.addTileRule 136, 139, 5
ColorIt.addTileRule 155, 158, 5
ColorIt.addTileRule 173, 176, 5

#Diddy
ColorIt.setPalette 6, rgb(240,210,117), rgb(143,86,1), rgb(101,64,0), rgb(0,0,0)
ColorIt.addTileRule 24, 25, 6
ColorIt.addTileRule 36, 42, 6
ColorIt.addTileRule 57, 60, 6
ColorIt.addTileRule 75, 79, 6
ColorIt.addTileRule 94, 98, 6
ColorIt.addTileRule 113, 116, 6
ColorIt.addTileRule 131, 135, 6
ColorIt.addTileRule 150, 154, 6
ColorIt.addTileRule 169, 172, 6
ColorIt.addTileRule 187, 190, 6
End 


Comme vous pouvez le constater on peut mettre d'affiler plusieurs entêtes de section (CRC) ou plusieurs commandes ColorIt.addTileRule.

Bon, passons au résultat :

Waaaaa! C'est beau!

D - Coloration d'un Niveau

1 - Présentation du Niveau

Nous allons travailler sur le premier niveau de Donkey Kong Land. Ici, les niveaux sont vachement complexes comparé à Super Mario Land... Bref, Ce premier niveau, situé dans la Jungle, renferme pas mal de complexité.

Boudiou c'est tristounet tout ce gris...

Primo, les sprites sont animés sur plusieurs tiles. Certains sont sur des plages de tiles fixes comme les bananes ou le hero. D'autre sont sur des plages de tiles aléatoire comme 'est le cas pour les pièces DK, les tonneaux, Rambi ou encore les ennemis ce qui rend impossible leur coloration au cas par cas.

Secundo, le décor. Ce dernier est composé du sol, de la végétation et du ciel. Il faut aussi penser par exemple aux trons de cocotier et aux démarquations entre la végétation et le ciel.

Notons que le CRC de ce niveau est f73dcb8f.

2 - Coloration du Décor

Pour le décor, nous allons bien départager les différentes zones :
- une zone sol (dégradé de marron)
- une zone végétation (dégradé de vert)
- une zone végétation + ciel (dégradé de vert + bleu ciel)
- une zone tron de cocotier + ciel (dégradé de marron + bleu ciel)

Après moultes recherche à travers les GB Tiles Viewer et GB Map Viewer (plusieurs dizaines de minutes) voilà les différentes zones qu'occupent les Tiles :

Code PHP:

[f73dcb8f]:
#Niveau 1-1
#Zone Sol
ColorIt.setPalette 1, rgb(240,200,110), rgb(180,140,87), rgb(108,81,55), rgb(0,0,0)
ColorIt.addTileRule +0, +4, 1
ColorIt.addTileRule +11, +16, 1
ColorIt.addTileRule +23, +24, 1
ColorIt.addTileRule +26, +61, 1
ColorIt.addTileRule +64, +68, 1
ColorIt.addTileRule +70, +75, 1
ColorIt.addTileRule +76, +79, 1
ColorIt.addTileRule +80, +80, 1
ColorIt.addTileRule +87, +87, 1
ColorIt.addTileRule +89, +89, 1
ColorIt.addTileRule +83, +85, 1
ColorIt.addTileRule +90, +97, 1
ColorIt.addTileRule +129, +132, 1
ColorIt.addTileRule +135, +135, 1
ColorIt.addTileRule +137, +156, 1
ColorIt.addTileRule +172, +172, 1
ColorIt.addTileRule +189, +190, 1
ColorIt.addTileRule +193, +193, 1
ColorIt.addTileRule +210, +214, 1
ColorIt.addTileRule +164, +165, 1
ColorIt.addTileRule +188, +188, 1
ColorIt.addTileRule +209, +209, 1
ColorIt.addTileRule +223, +223, 1
ColorIt.addTileRule +225, +226, 1
ColorIt.addTileRule +231, +234, 1
ColorIt.addTileRule +241, +241, 1
ColorIt.addTileRule +244, +247, 1
ColorIt.addTileRule +254, +255, 1

#Zone Végétation
ColorIt.setPalette 2, rgb(0,200,0), rgb(0,140,0), rgb(0,81,0), rgb(0,0,0)
ColorIt.addTileRule +6, +10, 2
ColorIt.addTileRule +20, +22, 2
ColorIt.addTileRule +17, +17, 2
ColorIt.addTileRule +62, +63, 2
ColorIt.addTileRule +69, +69, 2
ColorIt.addTileRule +81, +82, 2
ColorIt.addTileRule +86, +86, 2
ColorIt.addTileRule +88, +88, 2
ColorIt.addTileRule +161, +163, 2
ColorIt.addTileRule +166, +171, 2
ColorIt.addTileRule +173, +174, 2
ColorIt.addTileRule +176, +181, 2
ColorIt.addTileRule +186, +187, 2
ColorIt.addTileRule +191, +192, 2
ColorIt.addTileRule +194, +199, 2
ColorIt.addTileRule +207, +208, 2
ColorIt.addTileRule +215, +216, 2
ColorIt.addTileRule +218, +218, 2
ColorIt.addTileRule +220, +222, 2
ColorIt.addTileRule +224, +224, 2
ColorIt.addTileRule +227, +230, 2
ColorIt.addTileRule +239, +240, 2
ColorIt.addTileRule +133, +134, 2
ColorIt.addTileRule +242, +243, 2
ColorIt.addTileRule +250, +253, 2

#Zone Végétation et Ciel
ColorIt.setPalette 3, rgb(198,255,252), rgb(0,140,0), rgb(0,81,0), rgb(0,0,0)
ColorIt.addTileRule +128, +128, 3
ColorIt.addTileRule +136, +136, 3
ColorIt.addTileRule +157, +160, 3
ColorIt.addTileRule +175, +175, 3
ColorIt.addTileRule +182, +185, 3
ColorIt.addTileRule +200, +206, 3
ColorIt.addTileRule +217, +217, 3
ColorIt.addTileRule +219, +219, 3
ColorIt.addTileRule +235, +238, 3

#Zone Tron et Ciel
ColorIt.setPalette 4, rgb(198,255,252), rgb(183,86,21), rgb(141,64,20), rgb(0,0,0)
ColorIt.addTileRule +248, +249, 4
ColorIt.addTileRule +5, +5, 4
ColorIt.addTileRule +18, +19, 4
ColorIt.addTileRule +25, +25, 4 


Petit aperçu. Sympa non?

Allons maintenant colorer les sprites!


3 - Coloration des Sprites et finitions

Malheureux nous sommes! En effet, Donkey Kong Land à de beaux graphismes, et pour nous afficher de belles animations pour les personnages et les items, les Tiles sont créés dans des zones aléatoires... Bref, certain sont colorables au cas par cas, et d'autres sont obligés de "subir" une coloration de groupe.

Nous allons procéder comme suit et colorer les tiles suivants :
- DK/Diddy (dégradé de marron)
- Banane (dégradé de jaune)
- Coeurs (dégradé de rose)
- Ennemis, Pieces DK, Tonneau et autres sprites (dégradé de marron)

Le dernier groupe est le cas spécial dont nous avons parlé plus haut.

Code PHP:

#DK-Diddy
ColorIt.setPalette 0, rgb(255,210,117), rgb(163,86,1), rgb(121,64,0), rgb(0,0,0)
ColorIt.addTileRule 0, 12, 0
ColorIt.addTileRule +104, +127, 0
ColorIt.addTileRule 96, 119, 0
ColorIt.addTileRule 24, 69, 0

#Sprites avec Tiles Mouvants
ColorIt.setPalette 8, rgb(240,200,100), rgb(150,70,0), rgb(110,50,0), rgb(0,0,0)
ColorIt.addTileRule 24, 119, 8
ColorIt.addTileRule 232, 255, 8

#Bananes
ColorIt.setPalette 5, rgb(254,227,60), rgb(0,0,0), rgb(228,194,2), rgb(220,187,1)
ColorIt.addTileRule 120, 127, 5
ColorIt.addTileRule +100, +103, 5

#Coeurs
ColorIt.setPalette 6, rgb(252,171,191), rgb(255,165,155), rgb(254,99,82), rgb(0,0,0)
ColorIt.addTileRule +98, +99, 6 


Voyez le résultat! Comparable à la NES. Voire plus.

Toutes ces couleurs ça donne envie de re-découvrir le jeu!


E - Coloration de Plusieurs Niveaux et Zones

1 - Coloration

Bon, je ne vais pas traiter la coloration du niveau suivant, mais nous allons colorer vite fait les deux niveaux bonus du niveau 1.

Le premier est un niveau bonus dans une grotte, le deuxième dans l'eau.
Vous n'aurez pas de problème pour les trouver je vous fait confiance!

Bref... nous allons vite les colorer et ajouter les sections respectives.

Pour la grotte bonus :

Code PHP:

[0020Da27]:
#Niveau 1-1 Bonus Grotte
#DK-Diddy
ColorIt.setPalette 0, rgb(255,210,117), rgb(163,86,1), rgb(121,64,0), rgb(0,0,0)
ColorIt.addTileRule 0, 17, 0

#Decor
ColorIt.setPalette 1, rgb(170,150,130), rgb(110,90,80), rgb(70,50,50), rgb(0,0,0)
ColorIt.addTileRule +0, +97, 1
ColorIt.addTileRule +128, +255, 1

#Sprites avec Tiles Mouvants
ColorIt.setPalette 5, rgb(240,200,100), rgb(150,70,0), rgb(110,50,0), rgb(0,0,0)
ColorIt.addTileRule 24, 119, 5
ColorIt.addTileRule 232, 255, 5

#Bananes
ColorIt.setPalette 6, rgb(254,227,60), rgb(0,0,0), rgb(228,194,2), rgb(220,187,1)
ColorIt.addTileRule 120, 127, 6
ColorIt.addTileRule +100, +103, 6

#Coeurs
ColorIt.setPalette 7, rgb(252,171,191), rgb(255,165,155), rgb(254,99,82), rgb(0,0,0)
ColorIt.addTileRule +98, +99, 7

End 


Pour la zone bonus dans l'eau :

Code PHP:

[f2260d72]:
#Niveau 1-2 Bonus Eau
#DK-Diddy
ColorIt.setPalette 0, rgb(255,210,117), rgb(163,86,1), rgb(121,64,0), rgb(0,0,0)
ColorIt.addTileRule 0, 17, 0

#Decor
ColorIt.setPalette 1, rgb(170,150,130), rgb(110,90,80), rgb(70,50,50), rgb(0,0,0)
ColorIt.addTileRule +0, +97, 1
ColorIt.addTileRule +128, +255, 1

#Sprites avec Tiles Mouvants
ColorIt.setPalette 5, rgb(240,200,100), rgb(150,70,0), rgb(110,50,0), rgb(0,0,0)
ColorIt.addTileRule 24, 119, 5
ColorIt.addTileRule 232, 255, 5

#Bananes
ColorIt.setPalette 6, rgb(254,227,60), rgb(0,0,0), rgb(228,194,2), rgb(220,187,1)
ColorIt.addTileRule 120, 127, 6
ColorIt.addTileRule +100, +103, 6

#Coeurs
ColorIt.setPalette 7, rgb(252,171,191), rgb(255,165,155), rgb(254,99,82), rgb(0,0,0)
ColorIt.addTileRule +98, +99, 7

End 


Voici les niveaux bonus
Ok je me suis pas foulé!

Vous venez donc d'ajouter deux nouvelles sections.
A quoi servent-elles dans cette partie du tuto? Attendez la suite!


2 - Choix du CRC

Le CRC qui s'affiche automatiquement avec VBA identifie un code de vérification d'un ensemble de tiles que vous déclarez dans le fichier .pal.ini.

Qu'est-ce qu'il me raconte lui?

Bon... Rapelez vous de cette comande que nous avons tapé dans le jour 1 :

Code PHP:

ColorIt.addTileCrc 0, 383 


Cette commande veut dire que vous allez faire calculer votre CRC du tile 0 au tile 383, bref, l'ensemble des tiles de la Gameboy. Malheureusement il se peut quelquefois qu'il y ai des problèmes comme pour la déclaration du skin d'intro ou nous avions deux CRC pour une même section :

Code PHP:

[3afea85d]:
[92a6b159]:
#Coloriage Screen Intro
#Logo DK
ColorIt.setPalette 0, rgb(255,255,0), rgb(225,33,4), rgb(184,26,3), rgb(0,0,0)
ColorIt.addTileRule +128, +208, 0
etc... 


Regardez ça se vérifie, voici les deux sections de tiles à deux moments différents du jeu :

Donc en regardant plusieurs partie du jeu nous allons choisir un nouveau CRC.

Code PHP:

ColorIt.addTileCrc 128, 207 


Cette section a été choisie car elle diffère entre les différents niveaux et permet aussi d'éviter les tiles des sprites qui sont animés et qui changent constemment le CRC quand celui-ci était calculé sur l'ensemble des tiles.

Qui dit changement de CRC, dit changement des CRC de toutes les sections.
C'est pour cela qu'il faut toujours étudier un minimum le jeu avant de choisir le CRC afin de ne pas perdre de temps a retrouver tous les CRC des différentes sections.

Vous devez donc fermer VBA et le réouvrir pour que celui ci prenne en compte les changements.

Grace au calcul de notre CRC et au coloriage des zone Jungle, Aquatique et Caverne nous avons, sans le savoir colorer des zones bonus a travers le jeu et d'autre niveaux... Voilà aussi à quoi sert de bien calculer son CRC!

Voici la zone Bonus 1 du niveau 1-2
coloré grace au calcul du CRC

Je vous joins le fichier .pal.ini en pièce jointe.

Dans le prochain, et dernier tuto, nous verrons la retouche des tiles et comment rendre encore plus beau les jeux (si si c'est possible), nous verrons aussi l'optimisation du fichier.pal.ini.

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 et fin : Jour 3 : Colorer un jeu Game Boy - Expert

[Brunni]

Kewl
Ils assurent tes tutos omg

[Bobby Sixkilla]

Allé hop, on se remet au boulot!

[Yodajr]

Clair que c'est super joli, franchement avec du boulot, la plupart des jeux GB peuvent être bien plus jolis que certains jeux NES, c'est assez impressionnant
Bon courage pour ce tuto, y'a du taff je vois...

[omg]

Voilà le tuto est (enfin) en ligne!
En espérant que ça vous apporte quelquechose!

[Quentin]

Haaa enfin !!!
Super merci omg !

[M@T]

Beau tuto!!
Mais moi ce que j'attendais c'était le tuto pour colorier un tile de différente couleur :x
Va falloir attendre le jour 3

[omg]

Le jour 3 viendra plus vite