Attention

Description

Inspiré de la scène d'introduction du film Valérian et la Cité des mille planètes de Luc Besson, "La fin" est un très court métrage d'animation de science-fiction réalisé lors de mes études en multimédia.

Moodboard et comparables​​​​​​​

Je voulais une histoire sérieuse qui parle de la guerre, mais qui n'était pas violent et avait une résolution donnant de l'espoir. C'est pourquoi je me suis inspiré de la scène de poigné de main du film Valérian et de la cinématique de fin de Halo 3. Je voulais aussi une scène boueuse, sale, emprunte d'une histoire pour n'en raconté que la fin.

Synopsis de départ

Des soldats morts jonchent un champ de bataille boueux et en ruine. Deux généraux ennemis désabusés regardent autour d’eux. S’approchent lentement l’un de l’autre, se regardent et se serrent la main. Le soleil se lève lentement.

Storyb​​​​​​​oard

Recherche d'assets

Étant un grand fan de la série Halo, je souhaitais utiliser le Sergent Johnson et l'Arbitrer. Cependant, bien que des modèles soient disponibles, ils n'avaient pas de squelette pour l'animation. J'ai donc opté pour d'autres assets qui en possédaient et qui correspondaient au même thème. J'ai également recherché une scène intéressante pour gagner du temps sur la modélisation.

Modélisation

Ayant trouvé des modèles de personnages et de décors, je me suis concentré sur la pluie et la fumée du feu de détresse.

Animation

C'était ma première expérience d'animation complexe de personnages humanoïdes. J'ai réalisé que la subtilité du mouvement, comme par exemple la respiration du soldat en armure, est essentielle pour une animation réaliste.

Médias

Persona et scénario interactif

Les informations clés sur les contextes de production ont été fournies au début du projet. L'objectif était d' interpréter et de créer une expérience aussi pertinente qu’unique.

Moodboard

Le seul persona du projet étant un garçon de dix ans avec un faible niveau d'attention, je savais qu'il me fallait des couleurs vives très contrastées, je ne pouvais pas rester dans le noir et blanc du web. 

Je voulais également me lancer un défi en choisissant un mot-clé. J’ai opté pour "bitcoin", car je voulais mélanger les univers enfant et adulte. L’idée d’une application crypto-propagandiste m’a paru intéressante.

L'esthétique crypto est très tape-à-l'œil, beaucoup de couleurs, de mouvements et d'emphase, similaire à celle des casinos. J'ai combiné tout cela avec des éléments de Roblox, un jeu très populaire chez les enfants.

Guide de styles

En terme de styles, j'ai opté pour des dégradés pour rajouter du mouvement et de l'action, du doré pour refléter l'aspect "monnaie" et mettre l'emphase sur la richesse, donc l'élévation sociale, et un bleu assez passe-partout qui fait enfant sans faire bébé.

Quant à la typographie, j'ai utilisé la police Sobiscuit.

Design System

Les éléments répétitifs nécessitant de l'interactivité ou de l'animation se retrouvent ici.

Wireframe et Conception

Je voulais simplifier la disposition, donc chaque section et carte d'information sont grandes et occupent l'écran. Avec peu d'éléments ajoutés à chaque nouvel écran, le design reste agréable à naviguer et l'utilisateur ne se sent jamais perdu.

Tests et assurance qualité

Pour les dernières étapes, je dois tester le projet pour m'assurer qu'il fonctionne bien. Comme c'est une application mobile, j'ai pu la tester directement sur mon téléphone avec Figma.

Recherche d'assets

Au lieu de créer un tableau d'inspiration ou un moodboard, j'ai choisi de définir le style esthétique du jeu en utilisant les packs d'assets disponibles sur le magasin Unity. Cela m'a permis de me concentrer davantage sur la création du jeu plutôt que sur les modèles et décors.

Level design

Après avoir trouvé l'idée de base, qui était un parc thématique nippon, le défi a été de construire l'aire de jeu. J'ai commencé par diviser la carte en quadrillage pour créer des chemins, puis j'ai rempli la grille étape par étape : nivellement, temples, maisons, végétation, roches, et enfin, objets décoratifs et éclairage.

Interface

Pour centrer l'expérience sur l'exploration et la beauté visuelle, j'ai opté pour une interface simple laissant beaucoup d'espace pour le visuel.

Création des systèmes du jeu

Bien que le jeu soit court, sa conception est complexe. Après avoir créé le niveau et l'interface, il faut élaborer les menus, ajouter la sonorisation, programmer les PNJ, les mouvements du joueur, le chronomètre, le comptage des points et configurer les interactions utilisateur. Il est également essentiel de bien hiérarchiser tous ces éléments et de les tester plusieurs fois pour garantir un fonctionnement fluide.

On peut voir l'ensemble des systèmes comme les organes du jeu, on ne les voit pas, mais sans eux, rien ne fonctionnerait.

Programmation

La programmation dans Unity se fait en C# et utilise sa propre bibliothèque de variables, méthodes et fonctions. La photo ci-dessous montre une partie du code pour les PNJ, ces personnages non joueurs qui nous poursuivent dans le parc pour nous faire perdre du temps. Comme il y a peu de code, j'ai regroupé tout dans un seul fichier, incluant les sons, mouvements, animations, détection du joueur et interactions.

J'aime bien commenter mon code, je trouve cela très utile pour se repérer.

Galerie

Moodboard

Pour ce projet, un client fictif nous a fourni deux moodboards. J'ai choisi d'aller avec celui-ci :

Comparables

D'abord, j'ai exploré les sites d'autres municipalités ou la nature est prédominante. J'ai remarqué que les couleurs froides, comme le bleu et le vert, étaient souvent utilisées. De plus, il y avait beaucoup d'espace consacré aux images, sans doute pour mettre en valeur la région.

Wireframes

C’est dans cet esprit d’espacement et de grandes images que j’ai conçu le wireframe. On peut constater que le visuel de la région prime sur le contenu textuel, tout en maintenant une attention sur la fonctionnalité.

Couleurs

J'ai choisi de conserver les couleurs du site. Le bleu reste le même, tandis que le vert est plus foncé pour apporter une touche de maturité et de professionnalisme au design. J'ai ajouté un rouge plus clair pour créer un contraste avec les deux autres couleurs.

Refonte du logo

Au-delà de la palette de couleurs, j'ai choisi de mettre en avant l'image de la baleine, qui est l'attraction phare de la région. La forêt conserve son importance en restant en arrière-plan. Enfin, je maintiens l'aspect religieux en simplifiant l'église en croix.

Intégration

Par la suite, j'ai fait l'intégration web de mon design en utilisant HTML, SASS et Javascript

Tableau des tops

Après avoir trouver l'extrait voulu, il est important de d'évaluer et de catégoriser tous les sons qui pourrait y avoir. C'est ici que le tableau des tops prend son importance, puisqu'on y met, en ordre d'apparition, les gestes, mouvements et interactions visibles à l'écran avec leur minutage précis.

Enregistrement des sons

Bien que la série se veut d’un caractère humoristique, elle n’en reste pas moins réaliste, puisque ancrée dans un univers concrètement réel, tant dans sa mise en scène que dans sa direction artistique (Mister Bean, tant fanfaron soit-il, reste habillé avec des couleurs assez ternes : le brun, le gris, le blanc et le noir. La même chose peut être dit de son appartement). C’est pour cela que j'ai choisi d’opter pour une direction sonore plus réaliste, ayant des aspects mornes et ternes.

Les éléments visuels les plus importants de l’extrait sont bien évidemment toutes les manipulations de cartons (je parle ici de l’ensemble des éléments qui interagissent avec les boîtes, que ce soit Mister Bean qui essaye de les ouvrir ou qui les déplace, les cordes frottant et tombant sur le carton ou tout simplement le pantalon de Mister Bean qui frotte sur le carton). En deuxième place, il y a l’antenne et la télévision. Tous deux sont placés sur une table en bois et ont une caractéristique propre (la poignée de la télévision et l’ondulation de l’antenne quand celle-ci bouge).

Il y a ensuite plusieurs autres éléments visuels tout aussi importants, mais bien moins mémorables. À commencer par les vêtements et les pas sur le tapis. Il y a aussi le livret d’instruction vers la fin de l’extrait qui s’accompagne d’un emballage en plastique, les cordons d’alimentation de la télévision et de l’antenne qui tombent sur le sol et qui frotte le carton, le morceau de styromousse, la caméra qui glisse et qui tombe, la petite table basse qui, même si elle ne bouge pas, résonne et les morceaux de ruban adhésif collés sur les boîtes.