KORU-HUB :: Koruldia Le jeu

Koruldia est un Adventure-RPG (Role Playing Game) qui privilégie la gestion des personnages dans une trame scénaristique fortement travaillée. En ce sens, la psychologie des protagonistes a été particulièrement soignée et le développement graphique de ces derniers est par conséquent délicat.
En témoigne les changements successifs de style de représentation détaillés ci-après :

A l’origine, les sprites des personnages étaient cantonnés à une mini dimension de 16x32 pixels ; le moteur du jeu étant trop limité pour gérer davantage. Il était bien difficile de donner une vraie personnalité à ce bout de tête surdimensionnée sur un petit tronc en guise de corps (style « chibi », en référence aux styles de manga). Néanmoins, pour palier à cette taille embarrassante, un effort avait été fait sur la colorisation détaillée du sprite.

Le déplacement était prévu à l’origine sur 4 directions (haut, bas, droite, gauche), puis a été augmenté à 8 directions (haut, haut-droite, droite, droite-bas, bas, bas-gauche, gauche, gauche-haut) pour le besoin des cinématiques dans un premier temps (meilleures animations des déplacements) et pour accentuer l’aspect exploration du jeu.
En effet, ce système à 8 directions permettait de représenter tous les déplacements sur une map ; fini les trajets limités par blocs !

Suite aux évolutions du moteur de jeu, le changement de dimension est devenu possible et inévitable pour prétendre donner une consistance sérieuse aux personnages. Une étape transitoire a donc été tentée et on aurait bien aimé ne pas la montrer... mais comme le but ici est de montrer le développement du jeu, voici à quoi aurait pu ressembler les personnages de Koruldia : à des bâtonnets style chibi (n’imaginez même pas l’animation de la marche) !
Il s’agit bien d’une tentative maladroite d’agrandir le sprite initial dans une plus grande résolution, sans exploiter les nouvelles possibilités offertes.

La 3ème version du sprite se rapproche un peu plus de l’esprit des protagonistes de Koruldia : les couleurs ont été désaturées – la peau moins orange et la posture est comme par magie devenue dynamique ! On voit un Kizashi fermement ancré sur le sol avec un regard présent et déterminé.

Enfin, suite à certaines critiques (bien fondées) de joueurs, le mode "chibi" a définitivement disparu : le projet évolue de cette manière, vous faites avancer le jeu grâce à vos critiques mais aussi grâce à vos idées.

Ce qui a été dit pour les personnages s’applique également aux Korumons développés par l’équipe plus récemment. Certains d’entre eux sont directement suggérés par les joueurs, même si les imaginer en pixel art n’est pas chose aisée.

Concernant la sélection des Korumons proposés par les visiteurs et les membres de la communauté, il faut d’abord sélectionner les dessins (ou projets de Korumons) les plus cohérents parce qu’il faudra, de notre coté, le penser sous 8 angles et les animer (certains de vos dessins sont aussi très inspirants, merci pour vos collaborations !).

Voici un exemple de créature proposée par un membre de la communauté. Le dessin de base est fait au crayon. Puis, en se basant sur les descriptions données par le créateur, la démarche du Korumon ainsi que son apparence (couleurs, textures) sont travaillées par pixel art sur des logiciels de graphisme (GraphicsGale en l’occurrence).

Etant donné la possibilité de déplacer les Korumons dans huit directions différentes dans le jeu (c.f. la section sur les personnages), les créatures doivent par conséquent être animées dans chaque direction. En réalité – et cela est également valable pour les sprites de personnages, il est possible d’appliquer un miroir horizontal à l’animation dans la direction gauche pour obtenir l’animation droite, et de même aux animations en diagonale. De ce fait, les animations (de marche) à faire pour chaque créature se réduisent au nombre de cinq. (hors combat)

Animation du Minubis avec les cinq directions de l’animation et illustration du miroir horizontal

Chaque animation est constituée de trois images 1, 2 et 3 aussi appelées "frames" (de l’anglais) qui seront animées dans l’ordre 1-2-1-3. Il est aussi possible de faire une animation avec quatre images. Elles sont alors animées dans l’ordre 1-2-3-4, technique utilisée pour la démarche de Korumons quadrupèdes par opposition à l’animation précédente qui est plus souvent utilisée pour les démarches bipèdes.

Illustration de décomposition en frames de la démarche d’un Korumon (1-2-1-3)

En d’autres termes, à l’exception de quelques Korumons (dont certaines créatures volantes), chacun d’entre eux se voit attribuer 5x3=15 frames ou 5x4=20 frames.

Dans un premier temps, la démarche du Korumon est façonnée par des esquisses (comme sur l’image ci-dessus). Une fois l’allure fixée, chaque frame est alors retravaillée au pixel art afin d’ajouter les couleurs, les ombres et les détails. Enfin, le sprite est finalisé puis intégré au jeu par l’intermédiaire de divers filtres de cohésion.

Chaque animation de Korumon est différente, certains auront parfois la même taille. Aussi, il est possible d’utiliser un même calque pour les animations, mais l’exigence fait que chaque espèce de Korumon aura une façon complètement différente d’avancer et c’est aussi le cas pour leur vitesse de marche (certains iront plus vite que d’autres).

Malgré l’augmentation de la résolution des sprites (ou l'utilisation de zoom avec caméra 3D mobile), il est parfois utile de représenter les personnages ou Korumons dans une illustration, ne serait-ce que pour les séances de dialogue. Ici encore, l’identité graphique a mis du temps à s’élaborer et on se met à nu pour vous montrer les ancêtres des avatars de Koruldia.

A l’origine, les avatars étaient dessinés sur papier à l’encre de chine (plus précisément au pinceau calligraphique), puis scannés et colorisés numériquement dans une dimension de 500 x 500 pixels sous Paint Shop Pro 7 puis Corel Painter 9. La technique aussi bien en matière d’anatomie que de colorisation laissait à désirer et la méthode a rapidement montré ses limites : difficulté à retoucher les proportions, impossibilité de décliner un avatar en plusieurs expressions, etc.

Heureusement, une rencontre a été déterminante pour le salut de ces avatars : le talentueux Teruchan, collaborateur d’un des livres de la fameuse série « How To Draw Manga » (Volume 37: Macromedia FLASH Techniques: Illustrating Bishoujo Characters), qui a accepté de partager un peu de son savoir avec nous.

Adobe Flash MX (puis CS3, CS4, etc.), logiciel de dessin et d’animation vectoriel, a ainsi permis de palier a tous ces problèmes et d’aboutir à des dessins plus propres et aux couleurs plus claires : la colorisation est devenue beaucoup plus intéressante et agréable à l’œil.
Au niveau du style, les traits sont dessinés à la tablette graphique, ce qui permet de reproduire les niveaux de pression du pinceau calligraphique et de privilégier des postures plus dynamiques. Au final, c’est un style plus mature, adapté aux différents changements de résolution (c’est là le grand avantage du vectoriel) et correspondant davantage aux caractéristiques du jeu !

2–Objets et environnement urbain

Koruldia a une empreinte graphique propre et chaque bâtiment ou objet (sans parler de sa florissante nature) doit avoir une homogénéité. Certaines scènes sont crées en 3D (voir « Décors » plus bas) puis stylisées en 2D. D’autres sont faites directement en 2D, c’est-à-dire en pixel art. (car ne nécessitent pas de scènes à caméra mobile ou ne sont pas le théâtre de combat, car je rappel que les arènes de combat sont en 3D)

Une ville classique d’un RPG se constitue d’une poignée de maisons ou de bâtiments ainsi que d’une poignée de personnages plus ou moins utiles au scénario (voire pas du tout). L’enjeu est donc de se démarquer et d’offrir au joueur un monde grouillant de vie.
Pour ce faire, nous utilisons parfois Google Map et plus particulièrement Google Street View (nous nous inspirons aussi de jeux fortement urbanisés comme Shenmue ou Jet Set Radio ou de nos propres photographies).

Une maison d’Osaka (source : Google Map)

Screenshot du légendaire Shenmue

Le captivant Jet Set Radio

Il faut donc étudier les différentes architectures, étudier les ombres pour donner du relief et de la profondeur aux bâtiments ainsi qu’élaborer différentes textures en pixel art tout en prenant en compte la perspective dominante dans Koruldia. Bien sûr, il en va de même pour différents objets comme les voitures, distributeurs, panneaux d’affichages, végétation…).

Le travail est collaboratif et chaque personne du groupe peut donner son avis ou corriger les dessins, pour finalement donner un rendu homogène et crédible.

Exemples d’architectures visibles dans le jeu

3–Environnements et univers

A / CAMERA

Pour commencer, quelques mots concernant le positionnement du jeu. Koruldia possède un scénario nécessitant des besoins importants en termes de mise en scène. Les moyens à disposition pour traduire une certaine dynamique de narration, ou la force d’un silence concernant la description d’une situation ont été longuement étudiés.

Dans la quête d’absence d’éléments intrusifs concernant l’aspect naturel d’une narration je donnerais cet exemple : un mouvement de caméra vers un objet-clef est bien plus subtil et riche qu’un personnage qui s’y trouve à plusieurs mètres en se disant mentalement : « ho, la clef se trouve au sommet du crâne de cette statue ».

Cet exemple un peu caricatural expliquera ce qui a été souhaité pour l’affranchissement principal.
On peut y ajouter une quantité d’autres raisons en plus de la narration caméra, en vrac : la dynamisation du rythme, un rendu de certains objets en gros plan sur l’écran (permettant un « rappel » identitaire de ce niveau de détail même une fois de nouveau en vue éloignée/explorative), la possibilité de montrer les ciels et les plafonds de façon naturelle, la suggestion par le cadrage, des scènes d’action survoltées ou tout simplement LES COMBATS, etc.

Comment se déroulent les basculements concrètement ?
A tout instant et souvent sans crier gare, le jeu peut passer d’une vue RPG classique aérienne (comme les anciens Final Fantasy du 1 au 6 par exemple) à une caméra mobile ayant une liberté de 360° (conservant une possibilité d'interaction éventuelle selon besoin), tout en ayant eu pourtant la seconde d’avant un rendu 2D pixel en déplacement sur 2 axes. (même si parfois le mode 2D aérien subit des zooms jouables, surtout dans les petits intérieurs, voir cette image)
Le passage à la caméra mobile utilise une sorte de rapide morphing afin de supprimer les quelques différences de rendu de façon imperceptible.

La caméra peut donc partir faire un gros plan vers un objet-clef de l’intrigue (permettant au(x) personnage(s) d’en parler rapidement) avant de se recaler au même endroit que de son point de départ.
Parfois le protagoniste est très loin de cet objet, mais alors comment peut-il donc en parler en détail uniquement sous prétexte que la caméra s’en est approchée ?

C'est là un point crucial du jeu : la caméra est une partie intégrante du scénario, tout comme le rendu stylisé à l’écran et la musique. Au commencement de cette partie, lorsqu’est évoquée une quête contre les éléments intrusifs, ce n’était pas des paroles en l’air. Des explications à ce sujet auront lieu à la fin du développement.

Ce qu’il faut également savoir, c’est qu’il y a parfois des maps en perspective à point de fuite ; c’est-à-dire lorsque les personnages ont leur échelle d’affichage qui change selon l’endroit où ils se déplacent par rapport à la caméra. Ces maps seront une occasion d’être davantage contemplatives, la vue aérienne étant plus éloignée sera dominante car elle concerne un contexte d’exploration, tandis que la caméra embarquée trouve sa raison d’être dans le côté spectacle et action, le positionnement en perspective quant à lui renvoi à un rendu tels que les Final Fantasy du 7 au 9, une sorte de compromis permettant de raffraichir un peu le rythme entre 2 maps en vue aérienne.

B / HYBRIDATION 2D-3D

Cette section fait directement écho à la précédente, mais aborder la caméra en premier était nécessaire afin de mieux saisir l’hybridation spécifique à Koruldia.

En effet cette hybridation est devenue obligatoire afin d’obtenir des basculements cohérents avec la caméra mobile. Il était impossible de passer d’un arbre sous forme de sprite dessiné à son équivalent polygonal sans une grosse différence de rendu flagrante.

La méthode a donc été inverse.
A savoir reprendre l’arbre en 3D et en faire un sprite en pixel art. Un exemple notable se trouve dans la section « programmation » dans la sous-section Jiritsu, il est question de Donkey Kong Country sur Super NES. C’est en effet le même procédé qui avait été utilisé dans ce jeu, bien qu’il n’eu pas de fortes retouches de rendu (le côté 3D qui en ressortait était sans nul doute voulu à cette époque, car il s’agissait d’une valeur ajoutée compte tenu de la mode et de la concurrence 32 bits qui était déjà dans le bain).

Pour Koruldia, vous avez sans doute remarqué qu’en vue aérienne, les décors ont l’air davantage "2D pixel". Et c’est bien le cas.
Il s’agit de Pixel Painting, autrement dit l’utilisation d’outils spécifique au pixel art, mais sous des techniques d’application moins restrictives (exemple : les points ne sont pas placés un à un, mais toutefois régulièrement pour les finitions). La palette de couleurs est illimitée sous le mode 32bits, ce qui implique la présence d’alpha (transparence d’intensité variable) et qui comporte donc une application directe sur les sprites afin d’obtenir un anti-aliasing ou des effets d’éclairages précis. Et globalement, c’est exécuté au stylet et non à la souris.

Pour en revenir à l’exemple de l’arbre, il s’agit donc d’en faire un sprite brut à partir d’un rendu 3D sous une caméra spécifique (isométrique avec un coefficient d’écrasement légèrement réadapté pour l’esthétique et la cohérence) puis de concevoir le Pixel Painting sur cette base.
En temps normal et en 2D native, on part d’une esquisse ou d’un dessin (tout comme les sprites de Street Fighter 2 avaient été scannés à partir de grands dessins).

Dessins préparatifs pour l'élaboration du sprite de Chun Li (Street Fighter)

Toutefois, l’hybridation ne s’arrête pas à cet aspect technique conceptuel.
Il arrive régulièrement que des éléments soient directement créés en 2D car ils ne s’appliquent pas lors d’un basculement de caméra. C’est également une occasion pour varier de façon très franche certains éléments : comme de la végétation par exemple, en utilisant la liberté créative bien plus directe de la 2D. Ceci permet par exemple de minimiser la redondance en créant directement sur la map de subtiles changements, que ce soit de l'usure aléatoire sur une structure humaine ou l'envahissement de la nature telle que la mousse ou les ronces sur une falaise, des choses qui ont tendance à ne jamais être 2 fois exactement similaire (plus une texture est complexe et détaillée, plus ce problème de redondance nécessite d'être considéré selon moi).

C / LEVEL DESIGN

Une fois tous ces éléments à disposition, il convient d’en faire une composition à la hauteur afin de ne pas gâcher le travail réalisé.
Le level design 2D est souvent intimement lié aux capacités des graphistes. Lorsque l’on a conçu soi-même ses ressources, on est assez bien placé pour savoir s’en servir correctement.

Ce n’est pas trop le cas pour un placement en 3D, mais dans une 2D (non old school), le level design est plus que jamais une extension du graphisme car la composition globale s’appréhende d’autant plus comme un tableau. S’il est précisé que cela ne concerne pas la 2D old school, c’est pour la simple raison que les ressources y sont bien plus schématiques et se disposent sous forme de chipset ; l’application de techniques au pied de la lettre permet d’obtenir des résultats corrects... mais sans renouveau.

Ces techniques sont valables également pour un level design utilisant un placement au pixel près des éléments, sous une quantité de couches plus imposantes et des graphismes plus complexes. Toutefois, elles ne suffisent plus à assurer le coté « contemplatif ».

Dans Koruldia, les niveaux sont régulièrement "pensés" en 3D et cela va parfois plus loin si on aborde le fait qu’il n’est pas rare que la caméra fasse "un parcours de reconnaissance" en ratissant de long en large une map avant de se recaler en vue aérienne 2D.
La disposition 3D doit donc être réadaptée en 2D afin de correspondre à cette richesse.

Les jeux old school évoqués juste avant, avaient régulièrement peu de mise en relief du level design (surtout durant l’époque 8bits), à savoir la possibilité de gravir une falaise sur plusieurs niveaux, traverser un pont par-dessous ou par-dessus sur une même carte, marcher derrière une cascade d’eau, etc. On touche à la fois une problématique tant esthétique qu’en matière de praticabilité et de collisions.

Pour conclure ce point, Koruldia prévoit donc un level design en accord avec la richesse de ses ressources graphiques.