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)
        - Age of Empires
        - moonlighter
        - Night in the woods
        - Transistor
        - Starcraft II
    • abstrait (cf sims)
      • minimaliste (cf overland, mini metro, a short hike)
      • cartoon
      • motifs
      • style graphique non-figuratif précis (cf persona 5)
        - les sims 4
        - overland
        - minimetro
        - a short hike
        - persona 5
    • ou un mélange des deux (cf crusader kings 2)
      • motifs abstraits sur un fond qui évoque du parchemin (cf pyre)
        - crusader kings 2
        - pyre
  • strategie (cf wesnoth)
    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)
    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)
    ff7
  • 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)
    - Metroid Prime
    - Spelunky
    - Dead Space
  • pas de UI (cf alto’s adventure, journey)
    - 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
      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
    • son.
    • particules!!!
  • 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