Thursday, May 10, 2007

inside caverns ...


Tout a commencé par un visiteur venu du forum gba-dev (qui m'a conduit à retourner lire le post "ces jeux que vous voudriez voir implémenté sur DS"). Puis de fil en aiguille je suis tombé là dessus: doukutsu/csds-mushrooms.nds

Les décors m'ont immédiatement plu. Et cette histoire de champignon dans les caves m'a conduit à une investigation du phénomène "Cave Story".

Après une causette "digital painting / pixel art" avec Toad J'ai eu envie d'essayer de redessiner moi-même des rochers "à la cave story". Quand on y regarde bien, ça n'a pas l'air si dur ... Des formes bien géométriques, et le même genre d'éclairage que les blocs-à-pointe des forteresses de SMB3. Tenez, prenez n'importe quel programme de dessin (même MS paint fait l'affaire) et dessinez un carré gris moyen puis coupez le sur les diagonales. Ajoutez un triangle gris-clair sur le dessus et gris-foncé sur le dessous, vous obtiendrez qqch comme le premier bloc de l'image ci-dessous. Déjà une impression de 3D. Les rochers de Cave Story sont sur le même moule, mais le carré est mis "sur pointe" le plus souvent.

Backgrounds in Cave Story are somehow impressive in how they produce a nice effect with rather simple pixel art. If take the time to stop and watch them, they aren't so far away from SMB3's "spiky block" that appear in fortress. Pick any drawing program (including MS-paint), draw a grey square and its diagonals, then paint the upper triangle in light-grey and the bottom triangle in dark grey, and you're done with a 3D-like feeling. Rocks in Cave Story background work the same way except most of the time the square is "on an corner", making it consistent with the up-left lighting source.


Le résultat: du pur pixel art. 4 couleurs (#081800, #102400, #212c08, #293808), et presqu'exclusivement réalisé avec les outils "crayon", "ligne" et "remplissage" d'un 'paint' classique.


C'était l'occasion d'essayer the Gimp comme outil pour mes jeux vidéo. Une image 64x64, c'est encore difficile à gérer pour SEDS. Le truc pour construire des rocs 'qui s'assemblent' ? j'ouvre deux fenêtre, l'une de 64x64 (zoomée) pour le dessin et une de 128x128 armée d'une grille magnétique 16x16 pour recomposer l'image. Quand j'ai fini un élément et que je voudrais dessiner quelque-chose qui va passer "à travers" le bord de l'image, je recopie l'image en cours dans chaque coin de ma fenêtre 128x128 et je n'ai plus qu'à resélectionner une zone de 64x64 plus au centre de l'image résultante ^_^

So i gave The Gimp a try as a tool for video game graphics (my own editor on the DS cannot deal with 64x64 chunks very well atm.). And to make sure my blocks "tile" well, i just used two window, one with 64x64 for edition and a second one (128x128) with a 16x16 magnetic grid that can be used to rebuild the full image. The trick is to avoid drawing near the borders. If you need to do so, copy the 64x64 edited image back in the 128x128 and grab the center of that 128x128 image back for edition ^_^

Evidemment, des cailloux tous pointus, ce n'est pas très intéressant. Si vous regardez ceux de Cave Story, il y a:

  • des craquelures: commencez un triangle presque noir à la base d'un rocher et terminez par une ligne qui est "en biais" par rapport au triangle,
  • des irrégularités: choisissez un des "versants" et, partant de la base, ajoutez une ligne de la tonalité suivante. Si au lieux d'être plat, votre versant fait quelque-chose comme "----___", et s'il était clair, il y aura un endroit plus sombre au niveau de la transition "--_"
  • des replats: c'est à mon avis un des effets les plus intéressants et facile: imaginez un polygone qui entoure le "sommet" de votre rocher. Sur les versants clair, dessinez l'épaisseur de ce polygone avec la teinte intermédiaire. Sur les versants "intermédiaires", contournez le polygone avec du clair (il y a un emplacement sur le bord du replat qui prend plus la lumière). Gardez vous bien d'avoir quelque-chose qui ressemblerait à un passage en "négatif couleur
  • des ombres. Je n'en ai pas mis, mais on pourrait rendre plus sombre la base du côté "clair" d'un bloc très proche d'un autre.
Of course, just showing off bunch of spiky rocks doesn't impress anyone. So what do Cave Story rocks feature to be good-looking ? Cracks (draw a dark triangle from the rock's base and end up with an line that drift a little from the triangle's orientation), irregularities (start from the rock base, and add a lighter/darker line going towards the top, as if the rock was suddenly larger), "floors" (just draw a polygon around the rock's top with a lighter tone) -- which are imho one of the most interresting effects in the rocks, but that i may have overused.

1 comment:

Anonymous said...

Ca donne super bien, je trouve. Deux petites remarques toute fois... 1) Je trouve que tu abuses un peu des replats. 2) Je préférais la teinte bleutée de l'original à la teinte verdasse. Enfin soit, je dois bien avouer que c'est pas crucial... Faut croire que j'avais envie de m'exprimer ;-)