Schizo Fusion - Étape 01

Introduction

     La première année a l'ENJMIN se termine par la réalisation d'un projet étudiant. Nous devons produire un jeu vidéo créant une expérience d'au moins 10 minutes et ce en 3 mois. Ce jeu ne doit pas avoir l'apparence d'un prototype, mais doit être finalisé.

     Le projet sur lequel j'ai travaillé se nomme Schizo Fusion. C'est un jeu iPad dont le but est d'amener un personnage d'un point A à un point B. Pour se faire nous devons simplement mettre notre doigt sur lui et déplacer notre doigt. On ne doit pas relever le doigt avant la fin du parcours et on ne peut pas l'éloigner trop loin du personnage. Jusque là, rien de bien compliqué, mais durant 90% du jeu, le héros se scinde en deux personnages dirigés chacun par un doigt différent et ce en passant à l'intérieur d'une machine nommée "clôneur". Évidemment le level design est fait pour que nous soyons obligés de croiser nos doigts et de nous contorsionner. A cela vous ajoutez un système de boutons qui activent les portes chez le second personnage et vous avez Schizo Fusion.

     Je me suis occupé de tout l'aspect visuel de ce projet et ce qui est intéressant à savoir c'est que le jeu est en vu de dessus, en 2D et que l'action se passe dans un laboratoire abandonné et caché dans une montagne. La principale difficulté est la vue de dessus et le style visuel pas encore défini. J'ai donc commencé mon travail par des recherches d'apparence et de représentation de l'espace :

Recherches Graphiques

Le premier essai est une représentation que j'ai faite spontanément et librement :

Les trois suivants sont basés sur l'idée d'un plan technique (blueprint) :

L'essai suivant recherchait un style à motif, plus pictural, fait de formes géométriques et le tout coupé au cutter :

Ensuite, j'ai recherché un style plus coloré, plus bonbon acidulé, un peu papier-peint :

Finalement, j'ai essayé un style très sobre, simple, efficace et allant droit au but :

Choix Final

     L'équipe voulant une ambiance originale avec un univers détaillé, nous avons opté pour la toute première proposition qui est un style très personnel :

     Vous verrez que ce style va légèrement évoluer durant le projet tout en restant dans la même veine.

Schizo Fusion - Étape 02

L'Environnement

     J'ai du dessiné le décor qui est fait de tunnels ou de couloirs dans lesquels les personnages se déplacent. Pour rappel, le décor est en 2D vu de dessus, ce qui a été la première difficulté pour la conception visuelle de ce dernier. En effet, les objets vu strictement du dessus ne sont pas très intéressants, or l'un des vœux exprimés par notre équipe était d'avoir un décor contemplatif et agréable voire même intéressant à regarder. J'ai donc opté pour une déformation de la perspective académique afin d'avoir une "ligne de fuite" qui suit les chemins et non un unique point de fuite.

Schéma :

Il est donc normal de tomber sur un décor comme celui-ci (marquages rouges et verts exclus évidemment) :

     Cela permet également de voir le décor dans n'importe quel sens, or le jeu incite le joueur à tourner autour de l'iPad voire à tourner la machine elle-même.



Deux Décors

     Dans le jeu vous découvrez deux décors différents. Le premier est l'entrée de la grotte suivi de galeries dans la terre et la roche. C'est un lieu éclairé de temps en temps par un dispositif un peu primitif (des ampoules reliées par un fil, des spots de chantier, etc.) et produisant un rayonnement jaune-orangé. Le second est un laboratoire abandonné et ancien. Il est complètement délabré et sale. Il faut représenter la vie passée. Ici, la lumière est plus éclatante et blanche. Dans les deux environnement nous ressentons que nous ne sommes pas la bienvenu et que nous sommes seul.

     Pour chaque environnement, je crée une liste d'objets que je place ensuite dans le décor. Il y a différents type d'objets :
- ceux faisant parti du gameplay (bouton, porte, clôneur, position de départ/d'arrivée, etc.),
- les luminaires (ampoule, lampe murale, néon, etc.),
- les objets placés sur le sol (armoire, pierre, carrelage, table, chaise, etc.),
- les objets placés sur les murs (panneau, ventilateur, tuyau, etc.)
- et finalement les objets en dehors du chemin des personnages (squelette et gros rocher).


Les Galeries

Voici les objets du premier décor :

Et voici quelques images des galeries :
L'entrée de la grotte :

Le premier passage en double-personnages (en ligne droite) :

Deuxième niveau avec des chemins plus sinueux (sur un plan faisant 3 écrans iPad sur 3) :

Le Laboratoire

Voici les objets du second décor :

Et voici quelques images du laboratoire :
Le premier niveau (sur un plan de 2 écrans iPad sur 2) :

Le deuxième niveau en laboratoire et le dernier du jeu (sur un plan de 2 écrans iPad de large sur 4 de haut) :

Schizo Fusion - Étape 03

Le(s) Personnage(s)

     Comme dit précédemment, Il n'y a qu'un seul personnage dans le jeu, le héros, mais celui-ci se scinde en deux autres personnages qui sont en réalité deux parties distincts du même individu. La représentation de ce héros pose les mêmes problèmes que celle du décor, mais ils ne peuvent pas être résolus de la même manière. Nous avons une perspective très étrange pour le décor et comme le personnage doit se déplacer sur ce décor, on ne peut lui appliquer la même perspective ou alors il faudrait une animation beaucoup trop complexe. En effet, selon s'il est à droite, à gauche ou au centre du chemin, on ne le verrait pas sous le même angle. Pour rester dans un univers totalement 2D, le mieux était donc de le dessiner du dessus. Ceci dit, comme pour le décor, un personnage vu du dessus, n'est pas très intéressant. Dans ce cas, pourquoi créer des personnages très complexes et détaillés ? Le héros est donc devenu une espèce d'"homme bâton" stylisé. Quand il n'est qu'un, il est blanc avec un œil bleu et un œil rouge, comme s'il portait des lunettes anaglyphes pour voir une image en relief. Quand il est scindé en deux, l'un est rouge aux yeux blancs et l'autre est bleu aux yeux blancs également.
     Pour que nous puissions avoir une meilleure compréhension de la forme générale des personnages, ceux-ci ont une longue ombre portée derrière eux. Ainsi a travers leur ombre on devine leur forme générale. Ceci dit, il était hors de question de faire une ombre dynamique selon l'emplacement des lumières, c'était trop coûteux en puissance de calcul et trop long à faire pour finalement pas grand chose. Donc l'ombre tourne avec le personnage et, même si cela peut surprendre au premier abord, en réalité ça aide le feedback. Étant donné que nous avons le doigt sur le personnage, on ne voit pas toujours si le personnage se tourne comme on le souhaite. Avec l'ombre, on voit mieux l'orientation du héros.

Schizo Fusion - Étape 04

L'Animation

     On ne peut pas créer l'apparence d'un jeu vidéo sans passer par un minimum d'animation. Le décor étant vide d'êtres vivants, il faut le rendre un peu moins statique. Premièrement, il y a les éléments de gameplay qui sont animés comme les portes, les boutons et les clôneurs. A la base, il y avait différent types de porte : porte simple et deux portes timer dont une de 7 sec et l'autre de 12 sec. Malheureusement, l'animation des clôneurs et les portes timer n'ont pas pu être incrémentés dans le jeu pour cause de manque de temps. Ensuite, il y a un élément décoratif : le ventilateur. A lui seul, il rend le décor un peu plus vivant.
       Il y a évidemment les personnages qui sont animés.
     Finalement, le jeu se voulant accessible pour tous, les règles du jeu sont expliquées lorsqu'on rate une action. Ainsi, une animation nous montre ce qu'a été notre erreur afin de ne plus la refaire. Ceci n'est pas gênant, puisque la mort n'est pas punitive dans ce jeu.

Éléments de décor Animés

     Je vais vous montrer tout ce que j'ai animé, même si tout n'est pas incrémenté. Commençons par les éléments de gameplay et plus particulièrement par les Portes :

     Pour donner l'impression qu'il y a beaucoup d'images dans l'animation de la porte, j'ai utilisé la technique du flou sur certaines images. Le flou représente une multitude d'images différentes, mais comme si elles étaient les unes sur les autres. Du coup, c'est un flou orienté dans le sens du mouvement, c'est-à-dire verticalement dans cet exemple. Plus l'action est rapide plus c'est flou.

Les Boutons :

Les Clôneurs :

Finalement il n'y a qu'un seul élément animé dans le décor qui ne fasse pas parti du gameplay, c'est un Ventilateur :

     Il y a une astuce d'animation pour le ventilateur. Pas besoin d'animer une rotation entière de toute l'hélice, le but est de faire en sorte que la première pâle se confonde, après quelques images, avec la seconde. Ainsi cela donne l'impression que la pâle numéro 1 fait tout le tour, alors qu'elle ne fait qu'un tier de tour. L’œil ne le perçoit pas. Cela permet d'économiser de la mémoire.

Personnages Animés

     Les personnages n'ont que trois animations : une lorsqu'ils attendent d'être touché par notre doigt (au début d'un niveau), une quand ils marchent et une quand ils sont à l'arrêt. Je fais une animation à l'arrêt car si je mettais une image fixe on pourrait croire qu'il est figé voire buggé. Cette animation est donc produite avec 5 dessins quasiment identiques. Vu de dessus, il est dur de représenter la marche, l'animation de l'ombre est donc très importante. C'est pourquoi je suis passé par une étape brouillon de l'animation de marche (fait sous Pencil).

     Le piège a été que l'ombre ne peut pas être animée comme si on voyait un homme marcher de devant. C'est difficile de s'imaginer la projection du personnage à plat, sur le sol. J'ai du observer mon ombre plusieurs fois pour bien comprendre que les "jambes" s'allongeaient lorsqu'on met le pied en direction de la source de lumière. J'ai bien compris aussi que tant que le pied touche le sol, l'ombre est attachée à celui-ci, alors que lorsqu'on le lève, l'ombre de la jambe se détache.

Et voici toutes les animations finales des personnages :

Explication de l’Échec

     Comme dit plus haut, le jeu est basé sur un apprentissage par l'échec. Rien est expliqué, vous essayez et vous vous raté. Ensuite il y a une animation qui vous explique pourquoi vous avez échoué. Il y a deux explications possible : soit vous avez relevé le doigt, soit votre doigt était trop loin du personnage qu'il dirigeait. C'est ainsi que vous apprenez les règles. Il est très difficile de créer ce genre d'animation surtout qu'il m'a été demandé de mettre aucun texte. On m'a également demandé de faire des animations courtes, mais stylisées. Ma première tentative se tournait vers les pictogrammes comme on peut en trouver sur les bouteilles contenant des produits chimiques dangereux : 

A partir de cette recherche, voila ce que j'ai fait pour exprimer "Ne pas relever le doigt" :

     Ce n'était pas très beau et ça n'a pas plu à l'équipe. Du coup j'ai décidé de ne plus chercher dans cette direction et j'ai dessiné dans le même style que le reste du jeu :

     Le résultat n'est toujours pas très clair et les gens ne comprennent malheureusement pas toujours pourquoi il y a cet écran qui apparait et qu'est-ce qu'il tente d'exprimer. Ce qui a le plus troubler les joueurs c'est l'utilisation des couleurs déjà utilisées pour les personnages bleu et rouge. Ils pensaient que le personnage rouge n'avait peut-être pas le droit de faire quelque chose alors que le bleu oui, etc.
     De ce fait, j'ai créé une dernière version plus simple, plus clair, plus courte et sans utiliser la couleur rouge ou bleu des personnages pour les mettre sur les flèches indiquant notre erreur. Nous sommes enfin arrivé à quelque chose qui communique bien, même si ce n'est pas parfait :

Schizo Fusion - Étape 05

Les Oubliés

     Lorsqu'on se lance dans la création visuelle d'un jeu vidéo, on pense tout de suite au décor, aux personnages, aux animations, mais on oublie complètement de devoir aussi créer les visuels qui permettront de faire le menu, le logo, les boutons, etc. C'est vers la fin du projet, quand le jeu commence à bien fonctionner et que le système est bien huilé, qu'on se rappelle qu'il serait bien d'avoir un menu titre et de quoi naviguer dans les différents niveaux.

Titre et Logo

     Le Logo est peut-être la chose la plus sympa à produire. C'est l'image qui résume tout le jeu, c'est le symbole qui nous fait dire de suite "ah ! ça c'est Schizo Fusion !". Pour le faire, il faut remettre en question le projet, savoir ce qui est le plus important et savoir le simplifier. Il faut épurer l'idée du jeu afin d'en extraire la perle parfaite. Je ne pense pas avoir fait le meilleur logo possible pour notre jeu, mais je le trouve déjà pas si mal. Il exprime l'être vivant qui se fait découper en deux, tout en restant liés ensemble. Soit on voit les deux personnages, soit on voit l'ensemble.

Pour le Titre, j'ai simplement choisi une typographie sur dafont.com, je n'avais pas le temps de faire mieux :

Illustrations de chargement et Boutons

     Chaque niveau demande quelques secondes de chargement. Pour ne pas laisser le joueur face à un écran noir, on m'a demandé de faire des illustrations représentant chaque niveau. Une illustration peut vite devenir un gouffre dans lequel on passe beaucoup de temps. Pour me forcer à éviter trop de détails, j'ai dessiné des petites images et j'en ai choisi certaines pour les agrandir et les transformer en illustrations. Voici les petites images :

Voici deux des mes illustrations terminées :

     L'autre chose à faire et qui apparait lorsqu'on joue, c'est les boutons comme celui servant à sortir du jeu et à revenir au menu titre. Le deuxième bouton est celui qui, lorsque le niveau est chargé, permet de passer l'illustration de chargement et d'atteindre le niveau.

Le Menu

     L'ergonome de notre équipe m'a donné la structure qu'allait prendre notre menu et j'ai du faire chaque image de celui-ci. Le menu se scinde en trois : Le menu titre qui permet d'accéder aux deux autres menus et de lancer le jeu ; le menu du choix de niveau, car en jouant vous allez les débloquer et vous pourrez en choisir un en particulier ; et finalement le menu des crédits où on présente toute l'équipe.
     Le menu titre a donc trois boutons : un pour accéder au choix de niveau (le violet), un pour les crédits (l'ordinateur) et un dernier pour lancer le jeu (le vert). Voilà à quoi il ressemble :

Le choix de niveau lorsque certains d'entre-eux sont débloqués et pas d'autres :

     Finalement le menu des crédits nous présente la photo et un logo représentant la spécialité de chaque membre de l'équipe. Si on clique une première fois dessus, le menu change pour mettre les coordonnées des membres et si on clique une nouvelle fois on revient au menu titre :

Schizo Fusion - Étape 06

Le Jeu Fini

     J'ai présenté tout mon travail en montrant mes recherches et mes techniques. Nous avons vu tous les morceaux qui créent l'apparence du jeu. Il est temps, maintenant, de voir le jeu tel que nous l'avons présenté devant le jury de fin d'année scolaire et ce à travers deux vidéos.

     La première est une sorte de bande-annonce, mais pas commerciale. C'est une vidéo qui présente les mécanismes et qui nous montre quelqu'un en train de jouer :

     Et finalement une vidéo où nous parcourons absolument tout le jeu du début jusqu'à la fin. Cette fois on ne voit pas le joueur, mais uniquement ce qui apparait dans l'écran de l'iPad. Les points blancs représentent l'emplacement des doigts du joueur. Je vous invite également à découvrir les sons qui ont été très bien travaillés par mon collègue concepteur sonore. Bonne vidéo ! :

     Le jury nous a donné la note de 15/20.
     Ce qui a été intéressant c'est de lire leurs avis. La plus part aiment beaucoup le gameplay et surtout le fait que nous devons nous tordre pour finir certains niveaux. Pour ce qui est des graphismes c'est un peu plus mitigé. Plusieurs ont eu l'air d'aimer l'ambiance visuelle. L'un d'entre eux a même bien apprécier la qualité de mes animations. Ceci dit, le style un peu rough, un peu brut de mes dessins n'a pas toujours plu et certains auraient voulu un style un peu plus clean. Ceci dit, cela aurait gâché le style original désiré par l'équipe. Finalement c'est surtout l'ombre des personnages qui a divisé. Certains reconnaissent là une astuce très maline pour mieux indiquer le sens du personnage au joueur ; alors que d'autres restent bloqués au fait que les ombres ne bougent pas selon les luminaires de la scène. Pour moi, les jeux vidéos ne doivent pas, à tout prix, rechercher la vraisemblance dans absolument tous les aspects graphiques. J'ai senti le besoin de créer une ombre qui indique plus sur la forme du personnage que le personnage lui-même et il se trouve que cela aide le joueur. Pour moi c'est un choix que je ne regrette pas et j'aime bien savoir que cela divise, car ça prouve que c'est original sans être inintéressant.

Originaux Papier

     Avant de faire tout ce travail, j'ai évidemment dessiné un peu sur papier. En bonus, je souhaite donc présenter certains de mes dessins :

     Il y en aura surement d'autres prochainement (le temps de les scanner).


Post-Mortem

      Ce projet est ma première expérience de création de jeu vidéo. J'ai essayé de faire ce que j'ai pu pour en produire les images, sans viser trop compliqué. Par exemple, je ne pense pas être doué en animation, surtout pour les personnages, du coup il y a peu d'animation et les personnages sont très simples. J'ai eu la chance d'être dans un groupe qui m'a laissé très libre dans ma production. Heureusement mon style leur a plu, ce qui m'a permis d'avoir une première expérience plus facile. Je sais que dans l'industrie du jeu vidéo on ne fait pas toujours ce qu'on aime, mais pour un premier essai cela m'a bien aidé. Je me suis confronté à plusieurs problèmes et là où ça bloque encore c'est la pré-production ainsi que la recherche graphique. J'ai tenté différentes choses, mais j'ai mis le temps avant de savoir par où commencer.
     Ce que je retiens le plus, c'est l'importance d'une bonne communication entre les spécialités. Notre projet en a fait les frais. Par exemple, vous l'avez peut-être pas remarqué, mais le décor dans le deuxième univers est plus petit que dans le premier alors que les personnages et les clôneurs gardent la même taille. Cela est du au fait que le game designer, faisant le level design, et moi-même ne nous sommes pas assez concerté pour se mettre d'accord sur une échelle. Autre exemple, si le concepteur sonore et moi-même avions plus discuté, nous aurions surement eu plus de bonnes idées. Je sais que je lui ai proposé des choses qu'il a aimé et inversement. Peut-être aurions-nous inventé un univers plus riche. Je pense que notre manque de bonne communication nous a également fait perdre du temps. Ceci dit, les études sont faites pour apprendre et nous sommes finalement retombé sur nos pieds. Le jeu en soi n'est peut-être pas aussi bien qu'un jeu commercial, mais en 3 mois nous avons quand même créer un bon projet étudiant, je pense.

     Un grand merci à l'équipe de Schizo Fusion, avec qui j'ai vraiment vécu une bonne première expérience dans le domaine. L'ambiance a été à la fois détendue et sérieuse dans le travail. Chacun a fait son bout de chemin et a appris de ses erreurs.

      Merci à vous, d'avoir lu toutes ces étapes de la production graphique de notre projet étudiant 2012.

Rob'Omelette

     Durant la première année à l'ENJMIN, nous avions un exercice de narration interactive. Nous avions trois mots avec lequel on devait écrire une histoire linéaire. A partir de cette base, nous devions créer des embranchements narratifs supplémentaires pour finalement produire une maquette interactive de cette narration interactive. Vous pouvez découvrir cette maquette juste en-dessous :


Voici quelques originaux papier :

Nous étions deux étudiants pour écrire l'histoire et je me suis occupé de tout l'aspect réalisation de la maquette sous flash : illustrations, mise en page et programmation.
[09 janvier 2012]

Détectives

Travail personnel de recherche de concept pour un détective. Une excuse pour l'entrainement au dessin numérique. [18 mars 2012]

Paris, le 8 octobre 1995 - Animation 2D

Ce poste est la suite de celui-ci :
http://xab-conceptart.blogspot.ch/2012/01/paris-le-8-octobre-1995.html

Un étudiant en sound design a fait la bande son de l'animation juste en-dessous. Moi je me suis occupé de toute la partie visuel. J'ai donc fait les illustrations, mais également le montage vidéo.

Description :

Cette animation introduit un univers où les sons ont disparus petit à petit. Un homme a vécu cette disparition durant toute sa vie. Il a cherché la raison de ce manque, mais voila qu'il est trop vieux pour continuer. Il sait pourtant qu'il existe un objet qui pourra ramener les sons, un objet qui a gardé une empreinte sonore de cette vie passée. Il espère que quelqu'un d'autre poursuivra ses recherches.




Voici quelques illustrations de l'animation :

M.Couture

J'ai décidé de reprendre un character design que j'avais commencé l'année dernière. L'idée est un personnage sur le thème du chiffon, du textile et de la couture. Il serait rafistolé de plein de morceaux de divers tissus. Il se bat avec une grosse paire de ciseaux, donc sa main droite à un pouce et un index surdéveloppés. Sa main gauche produit des fils et a une forme de pattes d'araignée.

Voici les croquis et dessins faits l'année dernière :




Et voila ma recherche actuelle :