UI Design

Copycat #1 – Persona 5 Start Title Remake

La chose la plus frustrante quand on est designer, c’est de ne pas pouvoir aller au bout de son idée. Depuis quelques mois, je me suis donc lancé dans le développement de prototype dans les moteurs de jeu.

Les fonctionnalités que je souhaitais reproduire était : navigation avec un input (et non au clic), gérer des animations d’UI avec l’animator, ajouter un mouvement de caméra au changement de l’UI (paramètre de l’animator).

Pendant le prototypage, j’ai aussi découvert que les animations de l’animator retournait à l’état initial si le gameObject est désactivé. Un aléas que l’on ne rencontre pas avec des animations statiques. Afin de palier à ça, j’ai commencé à imaginer un animator général qui resterait actif en permanence et lancerait les animations en fonction des paramètres.

D’ailleurs au niveau des paramètres, je m’étais inspirée d’un tutoriel utilisant des booléens. Erreur ! En tout cas, pas pour ce type de menu. Après réflexion, j’aurais mieux fait d’utiliser des entiers, voir des Enumerations (que j’ai découvert ce matin). J’ai aussi crée ma première “couroutine”.

J’ai également trouvé des solutions pour le reste de l’interface (notamment le scroll animé étant donné que le menu Config est assez classique) mais je préférerais les intégrer dans quelques mois pour travailler sur d’autres prototypes et m’améliorer.

En plus du grossissement de titre, une forme rectangulaire animé se place sur le bouton. Bien qu’il ne soit pas sur la démo, je l’ai reproduit avec un sprite classique animé avec un shader. Malheureusement, je n’ai pas encore trouvé comment appliqué le changement de couleur du titre ainsi que la transparence.

Pour la partie la plus agréable, reproduire l’UI avec Affinity Designer était un plaisir du début à la fin. L’animation sur Animator également, ainsi que la gestion des courbes, import Mixamo… Habituée d’After Effect, rien de choquant 😀
Vraiment, le code, c’est ce qui me fait le plus peur en tant que designer.

Pour le moment, je m’arrête là. J’ai beaucoup appris et je recommencerais sûrement en plus de projets originaux.

/!\ English /!\

The project I’ve been working on for several days is inspired by Mix and Jam youtube channel (@andre_mc). The goal was to reproduce mechanics that could helps me to become a better game and UI designer.
So I decided to redo part of the Persona 5 startup menu.

The most frustrating thing about being a designer is not being able to go through with your idea. So for the past few months, I’ve been developing prototypes for game engines.

The features I wanted to reproduce were: navigation with an input (and not with a click), manage UI animations with the animator, add a camera movement to the UI change (animator setting).

During prototyping, I also discovered that the animator animations would return to the initial state if the gameObject is disabled. A hazard that you don’t encounter with static animations. In order to overcome this, I started to imagine a general animator that would remain active all the time and would launch animations according to the parameters.

For parameters , I was inspired by a tutorial using booleans. Error! Anyway, not for this type of menu. After thinking about it, I would have been better to use integers, see Enumerations (which I discovered this morning). I also created my first “couroutine”.

I also found solutions for the rest of the interface (especially the animated scroll, since the Config menu is quite classical) but I’d rather integrate them in a few months to work on other prototypes and improve.

In addition to the title magnification, an animated rectangular shape is placed on the button. Although it’s not on the demo, I reproduced it with a classic sprite animated with a shader. Unfortunately, I still haven’t found out how to apply the title color change and transparency.

For the fun part, reproducing the UI with Affinity Designer was a pleasure from start to finish. The animation on Animator too, as well as the curve management, import Mixamo… Accustomed to After Effect, nothing shocking 😀
Really, the code is what scares me the most as a designer.

For the moment, I stop there. I’ve learned a lot and I’d probably start again with more original projects.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s