Comment fais-tu pour retranscrire ta vision du mobi en pixel art… par où commences-tu ?
(question posée par Unposted)

Encore une très bonne question, merci Unposted! Tu devrais recevoir un an de chamallow pour avoir posé cette question… hein? Oh, on ne donne pas ce genre de lot? Pour revenir à nos moutons, c’est une très bonne question. En fait, chaque pixel-artiste peut avoir une idée initiale qui varie d’un autre pixel-artiste, mais on donne cinq étoile à celui qui colle au principe du « certifié mobi élaboré en deux étapes™ ». Ok, ce n’est pas vraiment son nom, mais le processus d’élaboration se déroule bien en deux étapes. Et il est certifié… ok, il n’est pas certifié! Bon, je vous dit comment ça marche, non ?

PREMIÈRE ÉTAPE : UN CRAYON DE BOIS, UN BROUILLON ET… LET’S DRAW!

Les pixel-artistes paniquent déjà à la première étape… non, je plaisante. La première étape commence par esquisser l’idée que l’on se fait du mobi. Nous commençons toujours par des croquis parce qu’ils sont généralement plus rapides à produire qu’un ensemble complet de mobi en pixel-art, mais cela nous donne encore la possibilité de regarder ce à quoi la gamme de mobi pourrait ressembler pour prendre des décisions relatives à la conception des mobis, et ce dès le début. Cette étape peut être effectuée soit sur ​​papier, soit numériquement. C’est vraiment à l’artiste de décider sur quoi il est le plus à l’aise. Les croquis sont faits de sorte qu’ils sont produits à l’échelle x2-x4 et peuvent donc être facilement utilisés plus tard dans le processus de création. Cet exemple de mobi de la gamme « Mystics » est à l’échelle x2. 

Après, les croquis sont complétés et tous les artistes se réunissent et discutent sur ​​les mobis et ce qu’ils vont faire. A ce stade, le pixel-artiste propose un ou deux des choix de couleurs et/ou des décorations sont choisies pour mener à bien l’ensemble de la gamme. L’ensemble de la première étape pose de la fondation et le travail de préparation pour la seconde étape. 

DEUXIÈME ÉTAPE : LE DESSIN PIXEL

La « partie pixel » ci-dessus peut être complété de plusieurs manières différentes, mais je vais d’abord passer par la façon que je préfère et celle que nos pixel-artistes utilisent pour ensuite parler brièvement des autres méthodes. Il n’y a pas de mauvaise façon ici, juste une qui je crois fonctionne mieux pour les mobis. De plus, nos artistes utilisent la même méthode que j’utilise. Parce que MOI, quoi.

Bon, avec le croquis à la main (ok, sur l’ordinateur), le pixel-artiste peut commencer les grandes lignes qui sont comme la colonne vertébrale du mobi. Ouaip! Le mobi a un exosquelette. Les contours aident à donner une sorte de support structurel rigide pour le mobi de sorte que la chair à l’intérieur soit confortablement installée… J’entends Hannibal Lecter se lécher les babines… :o, passons. Le croquis est souvent adapté à la taille du mobi qui est soit à 50%, soit à 25% si l’esquisse était à l’échelle x2 ou x4. Une fois qu’il a été mis à l’échelle de l’esquisse, il peut être réglé sur une opacité faible et l’on trace les contours sur un nouveau calque (nous utilisons tous Photoshop).

L’esquisse peut-être réglée sur le côté et utilisée uniquement comme référence des contours qui sont dessinés. Vous pourriez être devant votre écran à hurler: «Eh bien, notMiceElf, tu te fous de nous là?! La phase de l’esquisse est inutile si vous redessinez juste! », Mais je vous le dis pour les très fort sceptiques, « nàh ». Le croquis est surtout un guide et il nous donne une base très propre à travailler plus tard. Il donne également à l’artiste la possibilité de fixer les erreurs que présente l’esquisse, de sorte que le dessin ou le modèle soit raccord avec le « look Habbo », et fonctionne mieux dans le jeu. Le résultat final a une similitude avec le dessin, mais peut aussi varier considérablement en raison du processus de correction. Le mobi qui a beaucoup de choses difformes et de bibelots (comme un crâne, un livre, et une potion par exemple) a les avantages d’être redessiné de cette façon parce que chaque partie peut être établie séparément et, ensuite, combinée plus tard pour un meilleur contrôle de la forme du mobi. Imaginez si vous avez dessiné une table avec plein de choses dessus et puis vous vous rendez compte que vous aviez besoin de faire plus. Et là, vous vous dites « Oh, bobba! ».

Mais si vous avez tout ce que je viens de vous dire, c’est-à-dire des parties distinctes qui fixe la partie de la table sous-jacente de façon à l’améliorer, c’est simple comme bonjour. Euh, non, simple comme une lettre à la Poste. Bon, on en reste au simple comme bonjour

Le rendu interne du mobi, là où le volume et la couleur sont ajoutées, permet d’étoffer et donner plus de substance. Les pixel-artistes sélectionnent un petit nombre de couleurs allant du noir au clair qui sont utilisés pour faire ressortir chaque élément au sein d’un mobi. Cet ensemble de couleurs est appelé « une rampe de couleur » et toutes ces rampes forment ensemble la palette globale. Les piel-artistes utilisent souvent une technique appelée « dithering » (tramage) pour combler plusieurs couleurs dans leur rampe quand ils traitent avec une palette restreinte (quantité limitée de couleurs). Essentiellement, le tramage est une sorte de modèle qui fait qu’une œuvre d’art semble avoir plus de couleurs qu’elle n’en a réellement. Beaucoup de mobis sur Habbo sont tramés pour aider à faire ressortir le volume grâce aux éléments nouveaux : nous avons tendance à utiliser plus de tramage pour la texture plutôt que pour combler les couleurs. Cela ne veut pas dire que nous utilisons des millions de couleurs par mobilier, hein. Le mobi est toujours rendu avec une petite palette de couleur, car il est plus facile de garder une trace de quelles ont été les couleurs utilisées sur une ligne si c’est un petit nombre. Mais vous remarquerez peut-être que nous allons opter pour l’ajout d’une couleur ou deux au lieu de tramer.

Nous jetons un coup d’oeil final sur les mobis et de petites modifications sont apportées avant qu’ils ne soient coupés en tranches (un sujet pour une prochaine fois!) pour une utilisation dans le jeu. Nous avons atteint la fin de cet incroyable processus en deux étapes. Ouf! Comme je l’ai mentionné plus tôt cependant, la deuxième étape peut être effectuée de plusieurs manières différentes, donc je vais brièvement en parler. Par ailleurs, il y a des mobis dans le jeu qui ont été réalisés à l’aide de ces deux méthodes alternatives. Pouvez-vous deviner lesquels?

PREMIÈRE VARIATION
La première variation commence de la même manière que précédemment avec une mise à l’échelle de l’art esquissé à la même taille. De là, l’artiste prend le croquis à l’échelle et l’utilise comme tel. Les volumes sont « nettoyés » jusqu’à ce que le mobi soit lisible et tous les bords sont fixés avec les contours noirs. Cette méthode a tendance à faire apparaitre des demi pixels transparents aléatoirement et prend souvent autant de temps. En outre, le patron doit être à peu près parfait pour que cette méthode fonctionne bien quand elle est utilisé ; elle est souvent utilisé sur de très simples éléments non-animés. Vous pouvez le voir dans mon exemple : il y aura beaucoup de nettoyage pour atteindre le même niveau de propreté que les exemples qui ont été utilisé pour illustrer la méthode préférée. 

Fait intéressant, cette méthode est la façon dont nous faisons les mobis de petite taille. Fondamentalement, une taille à grande échelle, des modifications et c’est fait!

SECONDE VARIATION

La deuxième variante est un peu plus extrême et est à peine utilisée dans Habbo (mais vous verrez qu’elle est utilisée dans certains jeux Nintendo DS ainsi que quelques autres titres de la console). Il s’agit de faire le point en 3D avec l’exportation d’un rendu à la taille, et de le nettoyer *frisonne*. L’exemple sur l’image est assez brut, mais vous voyez l’idée. Il faut certainement plus de travail que nécessaire pour la plupart des mobis que nous faisons, mais c’est un processus très soigné!

Il y a un article très intéressant (et court) de SNK sur le processus 3D vers 2D utilisé pour les lutins dans KOF XII que je recommande pleinement si vous êtes intéressé par ce genre de chose: kofaniv.snkplaymore.co.jp/english/info/15th_anniv/2d_dot/creation/index.php

Rendez-vous la semaine prochaine pour un nouveau billet traduit depuis le blog des développeurs!