Préambule


Bien le bonjour, chers Zarokiens. Aujourd'hui est un jour un peu spécial car je me suis enfin décidé à rédiger la première partie d'une suite d'articles qui portera sur la création de l'interface graphique d'un jeu.
Avant de commencer, il est préférable de signaler plusieurs choses :

1. Il est probable que je ne détienne pas la vérité absolue et les conseils/trucs que j'aborderai ne sont, au final, que mon propre ressenti.
   
2. Je n'aborderai que l'aspect "graphique" et pas la manière de les mettre en place (nous sommes dans l'atelier graphique, c'est donc normal).
   
3. Comme dans tout tutoriel, il n'est pas conseillé de "copier" le résultat final mais bien de se l'approprier pour l'adapter à toute situation.
   

Nous sommes donc prêts à débuter notre série en s'interrogeant sur ce qu'est (ou ce que j'entends par) l' Interface.


Une interface ? Kesako

En faisant abstraction de la partie "Graphique", une interface est une couche qui fait office de relais. Donc, une interface graphique sera le relais entre le joueur et le jeu.
Votre windowskin mis en place dans une boîte de dialogue où dans les menus de base est une interface.
Le jeu sera de créer des interfaces, soit des mises en formes, de qualité et originales.
Car sachez que même si l'interface graphique est sensiblement reliée au Game Design et à la mécanique de jeu, ce n'est pas celle ci qui définit la qualité du jeu en lui même. Cependant une interface de mauvais goût peut être catastrophique pour un jeu.
Donc, mes cours porteront sur la réalisation des éléments graphiques qui requièrent une structure et un remplissage (par exemple, système de dialogues, de choix, menus, boutiques, cartographies, compétences etc.)


Première analyse

Avant toute chose, il est important de savoir que la structure de votre interface est primordiale ! Des éléments disposés sans logique sont catastrophiques pour la logique et le relais de l'information que l'interface se doit de remplir.
Je vais commencer en vous montrant un exemple que je vais développer :

Spoiler:

Cette image est issue du jeu L'exploration de Raho, la structure de la boîte en elle-même est extrêmement sobre, et sa position est relative à l'élément du jeu qui l'active.
Un bon point pour ce makeur.
A ce stade ci, il est important de se demander comment positionner correctement nos données et nous allons donc entamer la première partie de l'atelier : Un système de choix personnalisé.


Choses à ne pas faire

Pour éviter de vous lancer dans la création d'une interface sans vous avoir mis en garde contre certaines choses, nous allons établir une not-to-do list (donc ce qu'il faut à tout prix éviter !)


Les positionnements absurdes !

Positionner son interface n'importe où est stupide, exemples :
(la map est mal mappée, je le sais, mais je n'ai fait que remplir rapidement celle-ci)

Spoiler:

Spoiler:

Ces deux positionnements approximatifs ne sont pas, au final, catastrophiques, mais ne sont pas judicieux.
La bonne chose à faire serait soit de l'afficher par dessus l'événement, mais dans ce cas, il faudrait diminuer un peu l'opacité de la fenêtre, soit de la placer dans des endroits constants, comme en haut, en bas, au milieu. Preuve est que le système de choix par défaut relié à la commande "afficher message" est rarement problématique.


Les effets à gogo qui détruisent la lisibilité

Spoiler:

L'accumulation des effets est à proscrire ! La sobriété sera votre meilleur amie dans la conception d'interfaces graphiques.
Et pour reprendre ce contre-exemple, évitez à tout pris le Biseautage-Estampage ! Bien qu'il s'agisse d'une manière rapide de faire du volume, cet effet est beaucoup trop approximatif pour être correctement contrôlé !
Alors qu'au moyen des ombres internes ou même la construction manuelle de son volume (en pensant correctement à la lumière), il est possible d'avoir un meilleur contrôle sur le volume.


Les dégradés pluri-chromiques

Un dégradé du rouge au vert est souvent atroce

Spoiler:

Spoiler:

En temps normal, je conseille de faire des dégradés d'une couleur vers la même couleurs en plus claire ou foncée. Il existe des exceptions, par exemple orange à jaune soit quand la teinte ne varie que très peu. Mais pour le plus souvent taper dans le mille, je vous invite à rester dans la sobriété.


Équilibrer les couleurs

Le choix des couleurs se fait au feeling, cependant, évitez d'en assembler trop sinon votre screen ressemblera à un arc-en ciel et c'est pas cool.


Quelques exemples

J'ai composé quelques exemples qui me semblent bons pour clôturer cette première partie théorique :

Spoiler:

Spoiler:

Spoiler:

Ces trois petits exemples sont certes, rapidement faits, mais ils me semblent corrects et permettent de visualiser que, même en restant dans les normes, il est possible de mettre en place plusieurs manières et plusieurs styles !



A vous de jouer !

Il est temps de montrer ce que vous avez appris, pour ce faire vous allez me réaliser une screenshot d'un dialogue requérant un choix de 3 sélections possibles au minimum.
Veillez à soigner votre rendu graphique et à réfléchir à la manière la plus propre de le mettre en place.
Vous ne devez pas programmer le choix, un simple montage (comme ceux que j'ai présentés ci-dessus) est suffisant.
Bonne chance.

Nuki

Edit:
Mersi a Ulis ki a fé la corexion de mé photes d'orteaugraffe é a refé la miz en pache.

Intéressant. Et puis il y a une partie pratique pour la suite.

Personnellement, je serais du genre à faire ces "positionnement absurdes", je les trouve lisibles, sobres, informatifs et ils ne couvrent pas ce qu'on veut justement voir.

Au contraire, dans l'avant dernier exemple, je me demande "mais pourquoi elle parle orange ?" est ce que ça a un sens particulier ? Est ce que ça veut dire qu'elle est paniquée ? Par contre j'aime beaucoup la petite pointe vers la bouche, comme pour les BD. Dans le dernier exemple, c'est flou et je ne suis pas d'accord... pour un peu, on ne reconnaitrait plus qui nous parle (en général, on regarde la personne qui nous parle ou à qui on parle ...) et on pourrait bien aider la pimbêche du village et envoyer sur les roses le courageux héros : S

Hum, merci pour ton commentaire.
Concernant le "parler Orange", c'est un choix qui peut varier en fonction du makeur.
Les 2 positionnements absurdes le seraient moins s'ils étaient positionnés à des lieux stratégiques de l'écran, pas de manière aléatoire.
Le dernier exemple avec le flou prendrait du sens si tous les autres systèmes usant d'une interface faisaient cet espèce de Focus.

Très bonne première partie, j'attends la suite avec beaucoup d'attention.

Moi je veux la suite.
ET !!! si possible.. une explication à 2 balles pour dire comment les exemples ici et là ont été réalisés.