Monday, April 23, 2007

Amazing Tiles

I think the tileset of Kirby's Amazing Mirror is worth a couple of comments. I tried to pick the most interesting tiles on a set of screenshot i gathered a few weeks ago. One interesting thing in KAM is that tiles can be of two kind: "block" tiles, that almost don't use the transparent color, and "edge" tiles that merely contain a few pixels for "ending" the blocks. The advantage is that you don't get the feeling of an "squared" world like in Bilou/quickbas or even Super Mario Bros., but sometimes, it looks like they just missed the right tiles (e.g. there are less 'edges' than blocks, and not all blocks can lay gracefully as the border of a larger patch. Since i now have a "color composer" in SEDS, but still no "color mixer" nor a proper "color editor", i fear you'll have another "palette saving" post on my blog like the one i did for fury or Indigo Art :P 

 Il y a quelques tiles que j'aime particulièrement bien dans Kirby Amazing Mirror (GBA), que j'ai essayé de récupérer sur les captures d'écran que j'avais sous la main. Comme je l'ai fait jadis avec Fury of the Furries, j'ai donc envie de les analyser un peu pour voir ce qu'il y a de bon et de moins bon dedans. Comme j'ai (enfin) un "encodeur de couleurs" sur mon sprite editor (mais pas encore d'éditeur de couleurs proprement dit), j'en profite pour leur chiper leur codes RGB comme je l'avais fait dans un de mes premiers post sur les dessins de Dan/IndigoArt. Gardez en tête que je n'ai choisi que les tiles du type "block", c'est à dire le milieu des murs. Les graphismes dans KAM ont ceci de particulier que la plupart des "bords" de murs sont réalisés par des tiles séparés (et non-bloquants) contenant d'habitude juste quelques pixels. Une bonne idée à retenir ;) Pourquoi cette obstination pour l'étude des palettes ? parce que les couleurs que vous utilisez vont conditionner les matériaux de vos sprites. Et qu'un dégradé parfait du noir au jaune (par exemple) ne donne rien d'autre qu'une espèce de plastique caoutchouteux.  

(i shall name the columns A,B,C ... and the rows 1,2,3 ... as in Excell) mudwall : b36a26 - 874721 - 763e26 - 622f14, notice how they have two main tiles for mud (F2:G2), one with extra shadow that you can virtually place anywhere. At the 'bottom' of the wall, we have grass and almost only the middle tint of mud-brown (K2,K5). Note also that the lightest shade of brown is only used at the top of the wall. Molewall : aba375, 756f31, 372e0d, 362f12, 2f240e. Here too, there are two main styles (J3, I4) that you can combine the way you want. 

 Premier point intéressant, les "murs" de fond (K2,K5,J3,I4) qui vont tapisser l'ensemble des caves, quand la superbe (si, si) toile de fond n'est pas visible. N'utilisant généralement que très peu de couleurs, ils se déclinent en plusieurs intensités (clairs, moyen, sombre), et évidemment, le plus sombre n'utilisera que les deux teintes les plus sombres (avec peut-être l'un ou l'autre pixel plus clair, mais pas trop), une technique révélée notamment dans le tutoriel que Cyril avait déniché. Dans la construction du niveau, on gardera évidemment les tiles les plus sombres pour que les éléments plus larges puisse y faire "de l'ombre". Le tile intermédiaire servira plus aléatoirement pour rompre la monotonie d'un mur tout identique. rocks (L1:M2,H1,J1,C2,H2,J2): fbf0b2 - eac986 - e9aa7e - c88c56 - b46928 - 743e22. Notice the general "angular" look with sharp transitions, the scratches and dithering on darker area only. The bottom of the pillars is typically given a round shape on 2 blocks (H2,L5:M5 giving you an overview of what it does on a 16x16 block). It is accompanied by a rather straightforward green shade for the "veggetation" around: c5e7d6, 52b84a, 009a4e, 00572d. coldrocks : 68f8f8, 4ea7f7, 3888cf, 3b629d, 354a83, 3d4971, 2d3858, 212030. The have a general round look, and only some of them feature the lightest shade (A1,C1,E2). Note the strong horizontal scratches. Mixing blocks of various "average shade" is what will give your block wall an interesting look. Bluerocks : b0f2ff, 81afbf, 5a7f91, 223754, 030119. These are the ones where 32x32 patterns are the easiest to identify (A3:B4, D3:E4 and G3:H4), but the designer sometimes also put E3 and E4 nexto the G3:G4 block to get a 48x32 chunk. They also sometimes allow to reuse tiles of e.g. A3:B4 to form new blocks such as in L3. One thing i'm not quite fond of int this tileset is its borders. They seems to have to few blocks, especially in the corners, which result in arbitrary square 'cuts' in the background with no apparent reason. 

 Je vais m'arrêter un peu plus sur les "Blue rocks", dont on peut identifier quelques patterns "32x32" qui reviennent assez souvent. En réalité, Il s'agit d'un pattern de 48x32 "tilable" (le gros bloc de droite et la colonne la plus à droite du gros bloc au centre) qui a ensuite été décliné en une version avec un trou, et une version avec de l'herbe (et en diagonale, en plus. j'adore). Notez qu'ici aussi, la palette est très restreintes ... trop à mon goût, en fait. Je l'ai réencodée, essayé de faire des rochers mais sans résultat très convaincant au départ, puis j'ai re-pixelisé ceux qui sont ci-dessous, sans être convaincu par le résultat ... Certaines teintes bleues (dans les ombres) étaient décidément trop voyante. J'ai rejoué un coup au jeu pour me rendre compte qu'en effet, c'était bien comme-ça là aussi (bof). Dans la série "brisons la monotonie", on notera aussi par exemple le petit coquillage ou les fleurettes de l'ensemble "sand" pour les îles paradisiaques d'Olive Ocean.  

You can see here a good rule to follow when doing rocks-style tiles. Most of your rocks do not use the lightest shade (or only for small dots) and mainly use shade 3 with shade 2 as highlight. You then add a couple of rocks (2 per 32x32 pattern is nice) that use shade 2 as main shade and shade 1 as highlight, and a few rocks that use m4:h3 shades. do not hestitate to have shadow area that are larger than half a medium-sized rock.  

Bluerocks' grass: a7f444, 5bc813, 1b9608, 0d5513. That was for the small patch of grass (i like its diagonal look) on A3:B4. Grass on the ground (C4) add the d1f764 shade and has rather thick look (4-5 pixels wide). It also nicely tiles ^_^. You may opt for C3, F3 or I3 for the top.  

Sand: f8bf7c, d9a35d, c68243, 955112, 934e0b (A5) with a more "messed pixel" look to give the granularity. Corner blocks (add tints 6c250f and 53271c (with more red) for the shadows. Note that here too, the 'grass' (B5, F5, H5, I5) have its own tint (90f599, 69d275, 379346, 2f9541, 0b5c0f) that gives a 'pastel' look to the level. Note too, how they have alternate 'grass with flowers' or 'seashell-in-sand' to break the monotony.

1 comment:

Anonymous said...

ca va docteur ! la discéction est bonne ? enfin ne t'inquiète pas.. c'est tjs un plaisir de lire tout ca !