[Tuto] Jour 3 : Colorer un Jeu Gameboy - Expert

[omg]

Jour 3 : Colorer un Jeu Gameboy - Expert

A - Introduction

Voilà enfin le dernier tutoriel de coloration qui fait suite et fin à la trilogie. Après avoir appris les bases de la coloration, àprès avoir appris à colorer des niveaux entiers, aujourd'hui nous allons voir de quoi sont vraiment capables les émulateurs "Made in" Brunni. Nous verrons comment rendre encore plus beau un jeu (faut quand même s'armer de patience pour cette partie) et nous verrons aussi comment optimiser votre fichier .pal.ini.

Pour suivre ce cours sans s'arracher les cheuveux, il est fortement conseillé d'avoir suivi les deux premiers tuto, ou d'avoir lu la doc de Masterboy de 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, oui même toi!


B - Les outils

On refait encore la liste de ce dont vous aurez besoin pour pouvoir laisser libre court à vos créations :
- 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 dernier 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 experte d'une Image

1 - Présentation de l'image

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

Analysons encore une fois cette image afin de la colorer.


2 - Colorisation basique

Nous avions dans le dernier cours colorié entièrement cette image. Mais, franchement ça pourrait être quand même plus beau...

Cette image n'a pas d'âme...

En effet, la casquette de Diddy n'est pas rouge... Bref, ce macaque ressemble a une statue d'argile et ça ne le fait pas.

En suivant le tuto jour 2 nous aurions coloré Diddy de cette manière suivante:

Code PHP:

#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, 37, 6
ColorIt.addTileRule 60, 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

#Casquette de Diddy
ColorIt.setPalette 7, rgb(240,210,117), rgb(255,10,10), rgb(196,10,10), rgb(0,0,0)
ColorIt.addTileRule 38, 42, 7
ColorIt.addTileRule 57, 59, 7 


Malheureusement, ces couleurs débordent sur le reste du personage et un morceau de sa queue et de ses yeux se retrouvent rouge.

Pas vraiment génial...

Bref, on pourrait s'arrêter là et se jeter par la fenêtre... Mais voyons plutôt ce que Dr Brunni nous a concocté (hé oui il pense à tout!).


3 - Colorisation experte

Il est possible de redéfinir des tiles afin de mieux cibler les couleurs voire, dans certain cas, de redessiner des décors, des sprites, etc...
Ici, ce qui nous interresse, c'est de ne colorier en rouge que la casquette, sans toucher au reste.

Penchons nous sur les tiles qui posent problème :

A gauche c'est un agrandissement de la zone "sinistrée". A droite, l'équivalent en noir et blanc.
Il y a donc 6 tiles qui posent problème : 38, 39, 40, 57, 58 et 59.

Regardons de plus pret ces tiles :

Je vous rappelle le principe de la coloration. En gros, on attribue à un ou plusieurs tiles une nouvelle palette de 4 couleurs qui vient remplacer la palette de base qui est monochrome. Le problème avec ces 6 tiles c'est qu'une couleur (gris clair par exemple) va servir a deux endroit dans le même tile. Une fois pour l'oeil puis pour la casquette. Si on colore ce gris clair, en rouge, l'oeil et la casquette seront rouge.

Le but des nouvelles commandes que nous allons apprendre est de redéfinir un tile. En effet, nous allons modifier les pixels du tile afin de pouvoir mieux cibler notre coloration.

Vous n'avez pas compris ma phrase? C'est normal! Et c'est pour cela que nous allons mettre en application. Commençons par la tile 38. Cette dernière chevauche sur deux parties : la casquette et la queue de Diddy. Nous allons réorganier la palette de 4 couleurs monochrome afin de "séparer" les deux éléments. On garde le noir pour le fond, le gris foncé pour la queue et les deux autres couleurs pour la casquette :

Maintenant faisons le pour les autres tiles :

Nous allons retranscrire dans le .pal.ini notre nouveau tile 38. Pour cela, nous allons ré-écrire les 64 données (8x8pixels) du tile. Notons que :
- Blanc = 0
- Gris clair = 1
- Gris foncé = 2
- Noir = 3

C'est parti :

Nous avons donc une suite de 64 informations sur notre nouveau tile. Faisons de même pour les cinq autres.

Maintenant nous allons les colorer puis les intégrer au fichier .pal.ini grace aux commandes ColorIt.setTilesetData (pour définir un tile 8x8) et ColorIt.setTile (pour intégré le tile que nous avons confectionné dans une section) :

Code PHP:

#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, 37, 6
ColorIt.addTileRule 60, 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

#Casquette de Diddy
ColorIt.setTilesetData 0, L "22333333 22333333 22233333 22233330 22233301 22223011 22230110 22301100"
ColorIt.setTilesetData 1, L "33333333 33332222 32222111 21111122 11122222 12222222 22222222 22222222"
ColorIt.setTilesetData 2, L "33333333 22233333 21223333 22222333 22222333 22222233 22222223 22222212"
ColorIt.setTilesetData 3, L "22311111 32311111 33333111 33333333 32333330 32223300 32222300 32022300"
ColorIt.setTilesetData 4, L "22222222 22222222 22222222 33333333 11111111 00111111 00001110 00010000"
ColorIt.setTilesetData 5, L "22222222 22222233 33333333 31111133 11111113 11110003 00000003 01000003"
ColorIt.SetTile 38, 0
ColorIt.SetTile 39, 1
ColorIt.SetTile 40, 2
ColorIt.SetTile 57, 3
ColorIt.SetTile 58, 4
ColorIt.SetTile 59, 5
ColorIt.setPalette 7, rgb(240,210,117), rgb(255,10,10), rgb(196,10,10), rgb(0,0,0)
ColorIt.addTileRule 41, 42, 7
ColorIt.setPalette 8, rgb(0,0,0), rgb(143,86,1), rgb(196,10,10), rgb(255,10,10)
ColorIt.addTileRule 38, 38, 8
ColorIt.setPalette 9, rgb(0,0,0), rgb(196,10,10), rgb(0,0,0), rgb(255,10,10)
ColorIt.addTileRule 39, 40, 9
ColorIt.setPalette 10, rgb(0,0,0), rgb(101,64,0), rgb(240,210,117), rgb(196,10,10)
ColorIt.addTileRule 57, 57, 10
ColorIt.setPalette 11, rgb(0,0,0), rgb(196,10,10), rgb(240,210,117), rgb(101,64,0)
ColorIt.addTileRule 58, 59, 11 


Bon, passons au résultat :

Diddy, avec ta casquette,
t'es beau comme un camion!

D - Remodeler les graphismes

1 - Analyse

Après avoir vu comment on pouvait retoucher un tile, nous allons maintenant carrément en redessiner un. Pour cela prenons le premier niveau de Donkey Kong Land (que nous avons coloré la dernière fois) :

Vous voyez en bas le coeur? Hé bien le nombre de coeur représente le nombre de vies qu'il reste. Dans Donkey Kong Country sur SNES, les vies étaient symbolisées par des ballons rouges, vert ou bleu.

Hé bien changeons ces coeurs par des ballons!


2 - redessiner des Tiles

Tout d'abord, il faut regarder de plus près ces coeurs. Ils sont formés de deux tiles : +98 et +99
Agrandissons les et dessinons à coté ce que nous voulons.

Découpons les deux nouveaux tiles afin de les retranscrire dans le fichier .pal.ini :

Intégrons nos ballons dans le .pal.ini :

Code PHP:

#Coeurs/Ballons
ColorIt.setTilesetData 0, L "33333333 33222233 32011123 20111112 21111112 21111112 21111112 21111112"
ColorIt.setTilesetData 1, L "32111123 33211233 33322333 33222233 33333333 33333333 33333333 33333333"
ColorIt.SetTile +98, 0
ColorIt.SetTile +99, 1
ColorIt.setPalette 7, rgb(252,171,191), rgb(255,165,155), rgb(254,99,82), rgb(0,0,0)
ColorIt.addTileRule +98, +99, 7 


Comme ceci, ça fait plus esprit DKC!

E - Optimisation du fichier .pal.ini

1 - A quoi ça sert d'optimiser?

Vous avez enfin fini votre colorisation, ou coloration (en fait je trouve pas le bon terme pour décrire ce travail )... Bref, vous avez fini mais votre fichier fait 3Km de long et vous voudriez qu'il soit plus petit, plus clair... Je vais donc vous filer des tuyaux pour que votre fichier .pal.ini soit plus petit et mieux rangé


2 - Choisir son CRC.

Pour bien colorer il faut analyser avant de se jeter sur la coloration. Comme nous l'avons vu dans le précédent cours, il est très important de choisir un bon CRC afin de ne pas se retrouver avec plusieurs entêtes de section du style :

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
... 


Un CRC bien choisi permet d'éviter ce genre de structure.


3 - Concaténer les données.

Si vous faites de la modification de tiles, sachez qu'il est possible de renseigner plusieurs tiles sur une seule ligne si ces tiles se suivent. Voici l'exemple de tout à l'heure sur la casquette de Diddy :

Code PHP:

#Casquette de Diddy
ColorIt.setTilesetData 0, L "22333333 22333333 22233333 22233330 22233301 22223011 22230110 22301100"
ColorIt.setTilesetData 1, L "33333333 33332222 32222111 21111122 11122222 12222222 22222222 22222222"
ColorIt.setTilesetData 2, L "33333333 22233333 21223333 22222333 22222333 22222233 22222223 22222212"
ColorIt.setTilesetData 3, L "22311111 32311111 33333111 33333333 32333330 32223300 32222300 32022300"
ColorIt.setTilesetData 4, L "22222222 22222222 22222222 33333333 11111111 00111111 00001110 00010000"
ColorIt.setTilesetData 5, L "22222222 22222233 33333333 31111133 11111113 11110003 00000003 01000003"
ColorIt.SetTile 38, 0
ColorIt.SetTile 39, 1
ColorIt.SetTile 40, 2
ColorIt.SetTile 57, 3
ColorIt.SetTile 58, 4
ColorIt.SetTile 59, 5 


On peut écrire ça à la place :

Code PHP:

#Casquette de Diddy
ColorIt.setTilesetData 0, L "22333333 22333333 22233333 22233330 22233301 22223011 22230110 22301100"
ColorIt.setTilesetData 1, L "33333333 33332222 32222111 21111122 11122222 12222222 22222222 22222222"
ColorIt.setTilesetData 2, L "33333333 22233333 21223333 22222333 22222333 22222233 22222223 22222212"
ColorIt.setTilesetData 3, L "22311111 32311111 33333111 33333333 32333330 32223300 32222300 32022300"
ColorIt.setTilesetData 4, L "22222222 22222222 22222222 33333333 11111111 00111111 00001110 00010000"
ColorIt.setTilesetData 5, L "22222222 22222233 33333333 31111133 11111113 11110003 00000003 01000003"
ColorIt.SetTile 38, 40, 0
ColorIt.SetTile 57, 59, 3 


Hop on gagne 4 lignes!

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

Voilà c'était le dernier tuto de la trilogie. Brunni mettra surement des améliorations dans son procédé de coloration avec de nouvelles fonctions... Dès que je suis au courant je mettrai a jour les topics. Ces améliorations toucheront les jeux comme Metroid II dont la détection de section a des problèmes (fading sur palettes noires et non blanches comme 99% des jeux Gameboy). 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é.

[omg]

Voilà le tuto jour 3 est là!

[Tembargo]

Wahouuuu... Un travail de pro ça !

[omg]

Expert mon ami! Expert!
En tout cas MERCI BRUNNI!

[Quentin]

Bon ben maintenant j'ai plus qua me relancer dans mon projet avec ces tuto (en tout cas ca me donne vraiment envie de colorier Magaman) mais j'ai trop pas de temps libre...

Merci beaucoup omg

[omg]

de rien.
Si tu as un soucis sur une coloration hésite pas à poster!

[Alekmaul]

Oui, très beau boulot omg, merci de tous ces détails sur la modifs des tiles, cela m'aidera aussi pour mon projet de coloration

[omg]

Purée! J'ai aidé le grand Alekmaul!
Sinon, encore une fois, le mérite revient à Brunni et sa super doc de Masterboy sur lesquels je me suis basé!

[Yodajr]

Jolis tutos, c'est vraiment du bon boulot, bravo

[M@cZér0]

Trop trop fort l'omg...

[omg]

Sérieux les gars, merci!
Mais je vous assure, c'est à la portée de tous!

[MooX]

Beaucoup de choses sont à la portée de tous, mais seul l'artiste saura donner de la valeur à ces choses.

Bravo pour ton tuto, ça donne envie de coloriser tout ça! Faut vraiment que je m'y mette... Aller, demain je test tes tutos!

Merci pour ce bien beau travail

[Arialia]

Vraiment bien ton tuto OMG ça me donne envie tiens
Moi j'ai pensé à un "homebrew" enfin je sais pas si c'est est vraiment un
"Ant soldiers" http://pdroms.org/files/251/

sympa ce clone des lemmings

ton tuto va peut-être me permettre de mettre un peu de relief à ces pauvres fourmis

[omg]

Chère Arialia, je suis navré de t'annoncer que pour les homebrew c'est pas toujours facile la coloration...
En effet, au départ, je voulais faire les trois tutos sur des homebrew, et, manque de bol, les trois que j'ai essayé m'ont posé problème...
Bref, bonne chance, et j'espère que je ce hombrew sera compatible avec les outils de Brunni.

[Ayla]

Super tuto !!
Néanmoins j'ai quelques remarques :
- preums, chez moi le "0" c'est gris clair et non blanc : le blanc c'est "1"
- deuz, pourrais-tu expliquer comment utiliser ColorIt.setTilesetData en héxadécimal stp? J'ai jamais réussi
Sinon rien à dire, c'est du très bon travail

[omg]

J'avoue que tu me poses une colle!
Mais je vais te donner la réponse.
D'abord je vais commencer par une citation de Brunni :

ColorIt.setTileData tileNo, "hextiledata"
ColorIt.setTileData tileNo, L "humantiledata"

Si il a utilisé humantiledata c'est pas pour rien

Bref, pour retranscrire en hexa des données en binaire tu dois travailler sur deux plans. Je vais faire vite fait la demo :

ColorIt.setTilesetData 0, L "22333333 22333333 22233333 22233330 22233301 22223011 22230110 22301100"

le 0 equivaut au blanc et donne 1 0
le 1 equivaut au gris c et donne 0 0
le 2 equivaut au gris f et donne 0 1
le 3 equivaut au noir et donne 1 1

Bref ça donne :

00111111 00111111 00011111 00011111 00011110 00001100 00011001 00110011

et

11111111 11111111 11111111 11111110 11111100 11111000 11110000 11100000

On convertit en hexa :

3F 3F 1F 1F 1E 0C 19 33

et

FF FF FF FE FC F8 F0 E0

Au final:

ColorIt.setTilesetData 0, "3FFF3FFF1FFF1FFE1EFC0CF819F033E0"

Tu vois, human c'était pas pour rien

PS: en plus ça merde, me suis gouré dans mes calculs... je verrai ça demain

RE-PS : Ariala j'ai regardé et testé ta rom. C'est bon y'a pas de problème pour une coloration. Elle est compatible

RE-RE-PS : Ayla tu utilise quoi comme jeu? car pour DKL j'ai eu aussi quelques probleme car les palettes sont inversées.

[Arialia]

Merci beaucoup OMG allez à fond les petites fourmis

Et merci pour les explications

[Brunni]

C'est normal que parfois les palettes soient inversées, malheureusement il faut en tenir compte et donc inverser soi-même les 1 avec les 2 par exemple (d'où l'intérêt du humantiledata, bien que ce soit plus gros).
La raison est écrite dans le tout dernier paragraphe de la doc

[omg]

OUep! C'est dans la doc de Masterboy :

Q : J’ai utilisé la redéfinition des tiles pour ajuster une tile qui me gênait, mais dans certaines scènes, elle apparaît différemment (le gris clair devient blanc et inversement par exemple).
R : Ceci est normal. Le processeur graphique de la Game Boy a un registre spécial appelé « palette », qui permet de redéfinir l’usage des quatre « couleurs ». Il est par exemple utilisé lors des fades (transitions d’un écran à l’autre par le blanc) : le noir devient gris foncé, le gris foncé devient clair, et ainsi de suite, donnant l’effet d’un éclaircissement global de l’écran.
Si le registre de palette est modifié, votre tile personnelle sera également affectée, et la signification des couleurs peut s’en trouver modifiée. A vous de tenir cela en compte lorsque vous dessinez votre tile personnelle ou lorsque vous la colorez.

Quelle classe!

[Ayla]

Salut !!
Sympa ton explication, même si je pense que je vais me limiter à l'utilisation du "humantiledata"
Pour info, le jeu que j'ai colorié c'est Super Pika Land.

[omg]

Je croyais que c'était un autre dont tu me parlais!