Du papier à l'écran, par l'Atelier Sentô

 Atelier Sentô
Rédigé par Atelier Sentô
Publié le 02/02/2017

Ce mois-ci, l'Atelier Sentô retourne sur Coral Cave pour vous présenter de nouvelles étapes dans la création de leur point'n click. Le sujet du jour concerne les décors et les imprécisions qui peuvent survenir lorsque leurs aquarelles passent du papier à l'écran.

Aujourd'hui, nous allons aborder un aspect crucial de la création des décors. Faire un joli dessin n'est pas suffisant, il faut faire attention à ce qu'il soit parfaitement adapté à son rôle dans le jeu. Il est donc nécessaire d'aller et venir entre papier et écran jusqu'à obtenir le bon équilibre. Nous allons prendre l'exemple d'une scène très simple pour illustrer ce processus : Mizuka se réveille dans une grande salle plongée dans l'obscurité. Face à elle, une porte.

Le premier croquis pose les bases du décor. C'est un tout petit dessin, très imprécis, pour chercher des idées de composition. Par exemple, on a eu l'idée de placer Mizuka dans un rayon de lumière qui trace un cercle au sol. On fait plusieurs versions jusqu'à trouver celle qui nous convient puis on esquisse le dessin final sur une grande feuille.

Quand c'est suffisamment précis (mais pas terminé pour autant), on scanne pour tester le dessin dans le jeu. Comme c'est une scène dans l'obscurité, on ajoute un aplat sombre pour mieux visualiser :

Souvent, les dessins ne produisent pas le même effet sur le papier et quand on les regarde sur l'écran. Ici, une fois le personnage ajouté, on se rend compte que l'impression de profondeur souhaitée à l'origine ne fonctionne pas vraiment. La porte ne semble pas au loin, face à l'héroïne, mais proche et sur sa droite.

Sur l'ordinateur, c'est facile de corriger une composition en déplaçant les éléments l'un par rapport à l'autre. On diminue la taille de la porte pour donner l'impression qu'elle est plus loin. Le résultat correspond déjà mieux à notre idée d'origine :

Mais en testant dans le jeu, on se rend compte d'un autre problème : quand le personnage marche jusqu'à la porte, il se déplace de profil et non de ¾ dos. Cela s'explique facilement : comme le jeu est en 2D, l'orientation du personnage est calculée en fonction de l'angle de sa trajectoire.

Si la trajectoire est proche de la verticale, le personnage est vu de dos. Si elle est proche de 45°, le personnage est vu de ¾. Si elle est proche de l'horizontale, comme c'est le cas ici, il est vu de profil.

Pour palier ce problème, une seule solution : il faut modifier notre décor. On déplace le cercle de lumière vers la droite et la porte vers la gauche. On rajoute quelques lianes dans les coins pour combler les vides de la composition et voilà le résultat :

On lance le jeu et, ouf, c'est bon, le personnage se déplace maintenant comme espéré : Mizuka, de ¾ dos, se dirige droit vers la porte. Maintenant, on va recopier les modifications sur une nouvelle feuille. Comme on n'a pas d'imprimante, on décalque directement sur l'écran de l'ordinateur. Pas sûr que ça, ce soit conseillé, par contre !

Puis avec une table lumineuse, on reporte le dessin définitif sur un papier Canson adapté à l'aquarelle, en utilisant un crayon 8B, très gras, qui restera bien visible sous la couleur.

On scanne le dessin avant de mettre la couleur :

Puis on colore le dessin. C'est l'étape la plus agréable : le dessin prend vie sous nos yeux.

Et on scanne le résultat :

Comme malgré tout le trait au crayon s'est un peu estompé, on superpose le scan du crayonné pour le rehausser. De même, on corrige les couleurs car elles ressortent toujours un peu ternes quand on scanne. Petit problème : l'aplat noir n'est pas très homogène. Il y a quelques tâches qui gênent la lisibilité. Le plus simple reste de lui substituer un bel aplat réalisé sur une feuille à part (on en a toujours quelques uns en stock, au cas où). Et voilà, la scène est terminée !

Même si on a l'habitude de dessiner des décors, il est nécessaire de s'assurer qu'ils s'intègrent bien dans le jeu. On se retrouve donc souvent à tâtonner avant d'obtenir un résultat correct. Bien entendu, il est préférable de faire ces vérifications à l'étape du croquis : cela évite de très mauvaises surprises une fois le dessin terminé, quand il est très difficile de le corriger.

vignette pour les réseaux
14 commentaires

Comments

 Tomlab
Tomlab 09 février 2017 à 17h08

Merci pour cet article ! C'est toujours intéressant de voir comment chaque développeur travaille.

Je suis remonté quelques articles plus haut pour voir avec quel moteur vous travaillez. Je ne le connaissais pas. Il a l'air assez puissant pour faire des jeux d'aventure Content Vous avez testé les exports sur Mac, iOS, etc. ? (pour éviter les mauvaises surprises)

J'ai une petite remarque sur le screenshot final (je me suis attardé dessus avant de lire l'article). J'ai pensé que c'était une fenêtre ^^' Peut-être faudrait-il ajouter de petits repères dans l'ombre pour montrer que c'est éloigné du perso ? Après ce n'est peut-être que moi qui ait cette impression (à tester sur d'autres personnes).

Chouette boulot sinon Content

(et votre BD donne envie d'aller au Japon)

(il y a plein de plats que j'aimerais goûter Joyeux )

 Atelier Sentô

Merci pour ton commentaire !
On n'a pas encore testé les exports Mac, iOS, etc. On n'est pas des vrais développeurs donc on navigue un peu à vue. On essaie de pas trop se mettre la pression : le jeu sortira sur les plateformes sur lesquelles on arrivera à l'exporter. Je suppose que c'est un sujet qu'on finira par aborder dans cette série d'articles.

Pour la fenêtre, on va un peu modifier l'image pour atténuer ça. Après, on se dit qu'à ce stade du jeu, les joueurs seront peut-être habitués aux portes et fenêtres japonaises... Et puis, ce n'est pas une image statique : le personnage va se déplacer dedans. Du coup, ça va recomposer l'espace qui était désorientant au premier abord.

Et merci pour notre BD. On est contents que ça t'ait plu !

 TeoM
TeoM 03 février 2017 à 22h19

C'est booooo !!! La beauté magique des rêves ! Joyeux
Comme j'ai hâte de m'y plonger !
Une petite remarque : la porte me semble un peu haute, comme si c'était une fenêtre. Est-ce une sorte d'illusion d'optique, ou est-ce parce que vous l'avez déplacé (la perspective dans le mur n'est plus la même) ? Mais en fait c'est bien aussi comme ça, car ça va dans le sens du rêve, de l'étrange.

 Atelier Sentô

C'est vrai qu'il y a un flottement un peu étrange.
Cette zone d'obscurité fait perdre tout repère.
On a dessiné la perspective à l’œil comme d'habitude mais je me dis que, si on avait tout tracé à la règle, avec point de fuite et tout le bazar, peut être que ça aurait fait la même sensation ? Mystère !

 Thorn
Thorn 06 février 2017 à 10h28

Je crois que le sol aurait dû être vu un peu plus de dessus pour casser cette impression (mais je peux me planter, j'ai toujours beaucoup de mal avec la perspective) Content

 Atelier Sentô

Je viens de faire un test avec les lignes de fuite et le point de fuite est quand même assez bas. Il y a assez peu de repères dans l'image donc c'est pas facile de s'y retrouver...
Comme ce sont des questions intéressantes, j'ai un peu développé sur le forum.
A lire ici : https://www.indiemag.fr/comment/37853#comment-37853

N'hésitez pas à donner votre avis !

 Thob
Thob 03 février 2017 à 10h59

Super intéressant comme à chaque fois Content
(moi aussi j'ai déjà dû décalquer à même mon écran, comme quoi x) )

 Atelier Sentô

Merci !
(après tout c'est pratique de décalquer à même l'écran. Je suis sûr que les pros font ça tout le temps, héhé !)

 Fir3fly03
Fir3fly03 03 février 2017 à 09h50

Hahaha, décalquer à même l'écran, je ne suis donc pas la seule à le faire (je ne suis pas convaincue que ce soit conseillé).

 Atelier Sentô

Ouf, on est soulagés d'apprendre qu'on n'est pas les seuls à faire ça.
Bon, pour l'instant notre écran tient le coup ! On croise les doigts.

Pages