VI. Finitions
1) UI
- on a (sur ordinateur) quatre états états de boutons:
- désactivé
- le bouton n’est pas disponible, il est impossible de cliquer dessus
- au repos
- le bouton est disponible mais personne n’est en train d’interagir avec
- sélectionné
- le bouton est sélectionné, soit avec la souris qui est au-dessus (“hover”), soit avec le clavier ou la manette; il est prêt à être actionné
- en général, n’existe pas pour les jeux mobiles où on passe directement de repos à cliqué
- cliqué
- le bouton est en train d’être activé (à l’instant où on clique avec la souris, ou appuie sur la touche du clavier ou de la manette)
- UI cohérent avec l’univers graphique
- figuratif
- moyen-âge: bois et parchemin (cf Age of Empires)
- antiquité grecque: pierre taillée, motifs géométriques
- nature: terre, arbres et feuilles
- moderne-ish: posters, cahiers, etc. (cf Moonlighter, Night in the Wood)
- futur: néons, hologrammes, effet écran (glitches, lignes cathodiques), semi-transparence (cf Transistor, cf Starcraft II)
-
-
-
-
-
- abstrait (cf sims)
- minimaliste (cf overland, mini metro, a short hike)
- cartoon
- motifs
- style graphique non-figuratif précis (cf persona 5)
-
-
-
-
-
- ou un mélange des deux (cf crusader kings 2)
- motifs abstraits sur un fond qui évoque du parchemin (cf pyre)
-
-
- strategie (cf wesnoth)
- grille?
- couleurs des équipes?
- déplacements disponibles?
- cône de visibilité (jeux furtifs) et radius du son?
- astuce pour créer du volume rapidement sur un élément de UI (cf minecraft)
- prendre en compte la taille de l’écran (le texte sera-t-il lisible? les boutons seront-ils cliquables?)
- les jeux mobiles ont des boutons plus grands
- des boutons trop grands sur un jeu pc ça fait cheap
- comparaison ff7 vieux/remake (plus petits écrans)
- utiliser l’anticipation et le squash and stretch dans la UI pour un effet cartoon
- cohérence visuelle
- limiter le nombre de polices de caractère différentes
- ne pas avoir non plus quinze type de boutons différents
- flot intuitif
- que “commencer à jouer” soit le premier bouton (ou celui qui ressort le plus), et qu’il soit au premier plan du menu
- que tous les “back” soient alignés et ne mènent pas au “quit”; supposer que le joueur va bouriner et cliquer quinze fois sur le bouton
- que les menus et sous-menus soient logiques et aient des noms clairs
- préférer une organisation en grille, pour pouvoir naviguer facilement avec les flèches clavier
- hiérarchiser les informations
- le HUD ne devrait pas déconcentrer par rapport à ce qu’il se passe dans l’écran principal
- sauf si c’est des infos urgentes, importantes, et qui arrivent rarement
- si fonds de texte semi-transparents, attention à ce qu’il y a derrière, que ça reste lisible
- diégétique / extradiégétique (cf metroid prime, spelunky, dead space)
-
-
-
- pas de UI (cf alto’s adventure, journey)
-
-
- nine patch rect (documentation officielle godot, tuto vidéo (en))
2) “Juice”
- Jan (Vlambeer), conférence “the art of screenshake” (vidéo): https://www.youtube.com/watch?v=AJdEqssNZ-U
- “the main way you interact with the world”
- “give the player a reason not to hold the button”
- flux d’informations
- permanence, si pertinent; effets spéciaux; fumée d’une explosion, corps, objets cassés, etc.
- des ralentis!
- vidéo “juice it or lose it”: https://www.youtube.com/watch?v=Fy0aCDmgnxg
- Night In The Woods sauter sur les poubelles
- est-ce marrant? En ajouter? Pas marrant? L’enlever.
97) exemples
99) plus de ressources (principalement en anglais)
100) ressources en français