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 :