Boîtes de dialogue et jeux vidéo
Informations sur l'article
- Auteur : Mod
- Créé : le 08 Déc 2007 à 20:43
- Modifié : le 05 Jan 2008 à 10:11
- Visualisations : 1618
Tutoriel original écrit par Fil_razorback
Je suppose que comme beaucoup avant vous, vous avez déjà eu à designer une boîte de dialogue pour votre jeu. C’est alors qu’un doute s’est emparé de vous et que vous vous êtes aperçus que vous n’aviez pas la moindre idée de comment procéder. Ce genre d’aventure finit souvent par un affreux dégradé ou du texte illisible.
Une boîte de dialogue a le chic pour ruiner toute l’esthétique d’un jeu (regardez Tales Of The World Narikiri Dungeon sur GBA si vous ne me croyez pas). Ce petit article est là pour vous montrer les points essentiels de la conception d’une boîte de dialogue, des exemples passés à la loupe et enfin les pièges à éviter !
Article de Fil_razorback.
Faisons un petit saut dans le passé, à l’époque où les jeux étaient simples et moches. A l’époque, les malheureux designers étaient obligés de ne garder que l’essentiel des graphismes ou d’en exagérer les points importants (la tête des personnages était souvent complètement hors proportion par exemple). En ce qui concerne nos boîtes, c’est l’occasion de réviser les bases !
Final Fantasy 4
Courage : cette vieillerie a beaucoup à vous apprendre. Il s’agit d’une boîte très simple : un fond, un contour et le texte et pourtant les trois sont intéressants :
Le fond et le texte contrastent (bleu foncé/blanc) pour que le texte soit particulièrement lisible. Ce sont deux éléments qui seront re-employés dans d’autres jeux comme vous le verrez bientôt.
Le contour (visible en zoom X4 au bas de l’image) est très subtil : de loin, il ressemble à un genre de « tuyau » qui entoure la boîte et pourtant de près, ce n’est qu’une ligne blanche entourée de gris. Il s’agit en fait d’un mini-dégradé qui créé cette impression. De même, cette idée de tuyau sera re-utilisée et modifiée des dizaines de fois comme vous le verrez. De nos jours, elle donne un effet old-school au jeu, j’en reparlerai plus tard.
Pour le moment retenez surtout qu’un fort contraste entre le texte est le fond est essentiel pour qu’il soit lisible.
Lufia 2
Petite variation de la boîte précédente : ici les coins sont plus arrondis (question de goûts) le tout est utilisé sous forme de bulle, comme dans une BD : l’effet est encore très utilisé aujourd’hui (Atelier Iris 2 par exemple).
Ce genre de boîte positionnable partout dans l’écran permet de donner plus de dynamisme à vos dialogues et alourdit moins l’écran de jeu qu’une boîte classique : les dialogues paraissent plus « dans le jeu ».
Secret Of Evermore
Voici une boîte un brin plus originale qui introduit plusieurs nouveautés : la plus évidente est bien sûre la bordure qui saute aux yeux…et bien à mon avis ce n’est pas une très bonne idée. En effet la boîte devient plus pesante et, si on ne zoom pas dessus (en bas de l’image : Zoom X4) ce type de bordures est assez illisible.
La seconde nouveauté c’est la transparence d’un pixel sur deux dans le fond de la boîte (les pixels transparents sont représentés en noir dans la version zoomée). Utiliser de la transparence dans les boîtes permet de mieux les intégrer à l’écran. Ce procédé sera davantage utilisé à l’ère PSOne.
Enfin LA chose à ne pas rater sur ce screenshot c’est la présence d’une petite ombre noire sous le texte blanc : cet effet de texte est extrêmement important, il est maintenant rare de voir un jeu dont les textes n’ont pas leur petite ombre. Cela facilite grandement la lisibilité même si le contraste avec le fond n’est pas très élevé…ce qui peut arriver quand on utilise de la transparence.
Seiken Densetsu 3
Quelques détails intéressants ici :
L’ombre de un pixel est de nouveau présente et comme vous pouvez le voir elle permet même de lire de textes sans fond qui seraient indéchiffrables sans.
Le fond est cette fois ci…vert, c’est une alternative tout à fait valable au bleu, au même titre que le beige qu’on retrouve dans des jeux plus récents.
Enfin, le dégradé est une belle nouveauté mais tombé en désuétude de nos jours, de même que le tuyau dont le relief est plus accentué (gris foncé à l’intérieur, gris clair à l’extérieur). Cette boîte a été copiée pour faire la boîte de dialogue par défaut de RPG Maker 2003, c’est pourquoi elle n’est plus très appréciée.
Final Fantasy 7
Rien de révolutionnaire ici :
Un effet « tuyau » dont on a déjà parlé, une petite ombre et un dégradé.
L’originalité vient du dégradé qui n’est pas vertical comme dans SD3 mais…en biais ! Si vous n’arrivez pas à bien le voir, regardez la version zoomée annotée « CTR+ » où le contraste a été augmenté.
Et oui, c’est sur PSOne et PS2 que l’on a vu les plus belles boîtes de dialogue ! Les grands classiques du RPG offrent tout un panel de splendeurs, mais de nos jours, ce sont les messieurs du Studio Gust qui font le meilleur travail…
Suikoden 5
De nos jours, ceci est le minimum attendu : les designers de Suikoden 5 se sont contentés de reprendre une boîte « de base » et de la mettre au goût du jour :
Le dégradé se fait avec une vraie transparence (à droite, là ou il y a moins de texte. En effet fond transparent = plus dur à lire, d’autant plus qu’il n’y a pas de petite ombre).
La boîte est coupée en trois pour une meilleur lisibilité, on peut se permettre ce genre de détails quand l’écran dépasse les 320x240 pixels. C’est aussi pour cela que la police est assez grande pour que l’on puisse se passer de l’ombre. Le détail intéressant est le petit bouton « valider » qui égaye la boîte, c’est un aspect à ne pas négliger (même si au fond, il ne sert à rien).
Legend Of Mana
Grand classique du RPG, grand classique de la boîte…logique.
Voici un nouveau type de boîtes, les boîtes « dessinées ». Cette boîte n’est pas le résultat de quelques coups de pots de peinture et de dégradés : une texture a été appliqué pour un rendu parchemin et les contours ont été délicatement assombris.
La boîte en elle-même introduit deux éléments intéressants : une ombre portée en bas à droite et un reflet sur le coin en haut à droite : tout ceci lui donne du volume, fini les boîtes plates !
A noter également, une nouveauté de la plus haute importance : le texte n’est ni blanc ni noir ! Et son ombre non plus ! C’est la magie du grand format : puisque les lettres sont plus grandes, on peut diminuer le contraste tout en restant lisible ; au final c’est bien plus joli, mieux intégré à la boîte et au jeu, et surtout, cela permet un peu de personnalisation !
Enfin, le petit détail final, le bouton « suivant » est très réussi, d’autant plus que dans le jeu la flèche clignote. Il est conseillé d’animer vos boîtes de dialogue, cela évite que le joueur se pose des questions du style « le jeu est planté ou ils attendent que j’appuie sur une touche ?».
Chrono Cross
En voilà une belle boîte « dessinée » ! Et pourtant il n’y a pas grand chose à observer : tout est dans le dessin, c’est un véritable travail d’artiste de reproduire du bois aussi bien et de façon à faire une boîte extensible.
Le seul détail à noter c’est la légère transparence (entre 10 et 20 %) de la boîte mais pas du contour. Un procédé à connaître…
Au final, pas de grand secret ici, juste du talent.
Ys: The Ark Of Napishtim
Si ma mémoire est bonne, ce jeu est nul...mais qu’importe, la boîte est jolie. Regardons chaque élément séparément :
Le fond est fait de teintes semi-transparentes, et les contours sont une version moderne de l’effet « tuyau ». Rien de neuf.
La forme de la boîte n’est pas rectangulaire, il s’agit d’une forme assez classique et agréable, rien ne vous empêche de l’utiliser. Ah et les jolis motifs…sont simplement des cercles et arcs de cercles auquel on applique un effet tuyau et un filtre jaune. Dernier détail, le petit orbe vert est très simple à réaliser : le net contient des dizaines de tutoriaux qui vous apprennent à en faire. C’est le genre de boîte qu’on peut espérer faire même sans dons artistiques.
Valkyrie Profile
Tiens, le retour du texte en noir avec ombre grise…
Comme quoi on peut faire beau en étant classique, le contour est en dégradé de jaune entouré d’une ligne foncée et le fond est faisable en trois coups de brosses. L’essentiel dans ce genre de boîte est de ne pas trop saturer les teintes du fond pour mettre le texte en valeur.
Atelier Iris
Voici une des boîtes les plus réussies du dossier : je vous avais bien dit qu’on reverrait des boîtes façon BD !
Ici la ruse principale est d’avoir fait le fond et le contour « tuyau » de la même teinte… Cela crée une unité chromique (là je me la joue critique d’art).
De plus, le texte est écrit marron lui aussi, et pourtant il est lisible…oui, mais il est GROS, je vous l’ai dit 100 fois.
Remarquez aussi le jeu de couleurs, le nom des personnages apparaît en bleu et le texte en marron.
Ar Tonelico
Y’a pas que les parchemins dans la vie, Ar Tonelico s’offre le luxe d’une charmante boîte futuriste au design compliqué, du moins à première vue. Du plus simple au plus compliqué :
- Le texte est simplement écrit en blanc et un fond semi-transparent permet d’assombrir la map derrière pour assurer un «contraste minimum ».
- Si l’on fait abstraction des effets de volume et de texture, le reste de la boîte est simplement fait de formes géométriques, faciles à dessiner (lignes droites, angles de 45°…). C’est leur multiplicité (y’en a plein) qui donne l’impression de complexité à la boîte. Après, tout ce qui reste à faire c’est quelques effets de calque (pour ceux d’entre vous qui utilisent Photoshop).
Ah, remarquez tout de même que la boîte est orientée façon BD, cela semble être devenu la marque de fabrique du studio Gust…
« Oh là là…Elles sont belles toutes ces boîtes mais c’est quand même drôlement compliqué tous ces effets là. Et puis je me sers pas de Photoshop moi…je suis foutu ? »
Et bien oui et non, si vous ne voulez pas vous fouler, vous n’aurez pas d’aussi beaux résultats mais néanmoins, il est possible de faire simple et efficace…C’est ce qui se fait souvent sur les consoles portables par exemple !
Castlevania
Alors là on peut pas faire plus simple ! Le top du top pour les paresseux ou ceux qui ont peur de rater leur boite !
Un fond foncé semi transparent et du texte blanc uni…c’est vraiment très simple. Mais efficace.
On vous avait prévenu…
La Pucelle Tactics
Une texture par-ci, et un effet tuyau par là, hop ! Je colore tout en marron et tadaaaaam !
Il se sont pas foulés les designers. Et pourtant, C’est terriblement old school et sympathique.
De nos jours l’effet tuyau produit cet effet là, regardez Golden Sun qui en use et abuse, tout le monde succombe à ce charme désuet.
Riviera – The Promised Land
Ici la boîte est taillée à la hache, et tout en noir qui plus est. Tout est dans le jeu de couleurs : le texte est blanc avec une ombre gris clair (très bonne astuce à retenir) et le nom du perso en jaune. Il n’y a vraiment rien de compliqué là dedans et pourtant…c’est beau !
Tales Of Rebirth
La palme d’or du designer fainéant revient à Tales Of Rebirth dont la boîte…est la même que dans le Castlevania GBA ci-dessus, à deux nuances près :
Ici les lettres ont un contour (pas une ombre) noir de quelques pixels et la boîte est affichée sous forme de bulle.
Faire de la console portable sur salon, c’est possible, c’est Namco, c’est Tales of, et c’est pas laid !
Conclusion
Pour finir, voici un petit récapitulatif des notions dégagées lors de cette étude :
- Il faut absolument maintenir un contraste entre le texte et ce qui l’entoure, que ce soit à l’aide d’un fond, d’une ombre ou d’un contour.
- Si l’on ne veut pas un trop gros contraste, il faut écrire gros.
- Utiliser des bulles façon BD rend les échanges plus dynamiques, surtout si les fenêtres sont positionnables dans tout l’écran.
- Entourer sa boîte d’un « tuyau » ou utiliser des dégradés de peu de couleurs donne un effet Old-school
- Il est important de différencier le nom du personnage qui parle de son texte, on peut utiliser des barres de séparations ou un code de couleurs.
- Il n’y a pas besoin d’être un super dessinateur pour faire une belle boîte.
Je suppose que comme beaucoup avant vous, vous avez déjà eu à designer une boîte de dialogue pour votre jeu. C’est alors qu’un doute s’est emparé de vous et que vous vous êtes aperçus que vous n’aviez pas la moindre idée de comment procéder. Ce genre d’aventure finit souvent par un affreux dégradé ou du texte illisible.
Une boîte de dialogue a le chic pour ruiner toute l’esthétique d’un jeu (regardez Tales Of The World Narikiri Dungeon sur GBA si vous ne me croyez pas). Ce petit article est là pour vous montrer les points essentiels de la conception d’une boîte de dialogue, des exemples passés à la loupe et enfin les pièges à éviter !
Article de Fil_razorback.
- La préhistoire -
Faisons un petit saut dans le passé, à l’époque où les jeux étaient simples et moches. A l’époque, les malheureux designers étaient obligés de ne garder que l’essentiel des graphismes ou d’en exagérer les points importants (la tête des personnages était souvent complètement hors proportion par exemple). En ce qui concerne nos boîtes, c’est l’occasion de réviser les bases !
Courage : cette vieillerie a beaucoup à vous apprendre. Il s’agit d’une boîte très simple : un fond, un contour et le texte et pourtant les trois sont intéressants :
Le fond et le texte contrastent (bleu foncé/blanc) pour que le texte soit particulièrement lisible. Ce sont deux éléments qui seront re-employés dans d’autres jeux comme vous le verrez bientôt.
Le contour (visible en zoom X4 au bas de l’image) est très subtil : de loin, il ressemble à un genre de « tuyau » qui entoure la boîte et pourtant de près, ce n’est qu’une ligne blanche entourée de gris. Il s’agit en fait d’un mini-dégradé qui créé cette impression. De même, cette idée de tuyau sera re-utilisée et modifiée des dizaines de fois comme vous le verrez. De nos jours, elle donne un effet old-school au jeu, j’en reparlerai plus tard.
Pour le moment retenez surtout qu’un fort contraste entre le texte est le fond est essentiel pour qu’il soit lisible.
Petite variation de la boîte précédente : ici les coins sont plus arrondis (question de goûts) le tout est utilisé sous forme de bulle, comme dans une BD : l’effet est encore très utilisé aujourd’hui (Atelier Iris 2 par exemple).
Ce genre de boîte positionnable partout dans l’écran permet de donner plus de dynamisme à vos dialogues et alourdit moins l’écran de jeu qu’une boîte classique : les dialogues paraissent plus « dans le jeu ».
Voici une boîte un brin plus originale qui introduit plusieurs nouveautés : la plus évidente est bien sûre la bordure qui saute aux yeux…et bien à mon avis ce n’est pas une très bonne idée. En effet la boîte devient plus pesante et, si on ne zoom pas dessus (en bas de l’image : Zoom X4) ce type de bordures est assez illisible.
La seconde nouveauté c’est la transparence d’un pixel sur deux dans le fond de la boîte (les pixels transparents sont représentés en noir dans la version zoomée). Utiliser de la transparence dans les boîtes permet de mieux les intégrer à l’écran. Ce procédé sera davantage utilisé à l’ère PSOne.
Enfin LA chose à ne pas rater sur ce screenshot c’est la présence d’une petite ombre noire sous le texte blanc : cet effet de texte est extrêmement important, il est maintenant rare de voir un jeu dont les textes n’ont pas leur petite ombre. Cela facilite grandement la lisibilité même si le contraste avec le fond n’est pas très élevé…ce qui peut arriver quand on utilise de la transparence.
Quelques détails intéressants ici :
L’ombre de un pixel est de nouveau présente et comme vous pouvez le voir elle permet même de lire de textes sans fond qui seraient indéchiffrables sans.
Le fond est cette fois ci…vert, c’est une alternative tout à fait valable au bleu, au même titre que le beige qu’on retrouve dans des jeux plus récents.
Enfin, le dégradé est une belle nouveauté mais tombé en désuétude de nos jours, de même que le tuyau dont le relief est plus accentué (gris foncé à l’intérieur, gris clair à l’extérieur). Cette boîte a été copiée pour faire la boîte de dialogue par défaut de RPG Maker 2003, c’est pourquoi elle n’est plus très appréciée.
Rien de révolutionnaire ici :
Un effet « tuyau » dont on a déjà parlé, une petite ombre et un dégradé.
L’originalité vient du dégradé qui n’est pas vertical comme dans SD3 mais…en biais ! Si vous n’arrivez pas à bien le voir, regardez la version zoomée annotée « CTR+ » où le contraste a été augmenté.
- La Grande Epoque -
Et oui, c’est sur PSOne et PS2 que l’on a vu les plus belles boîtes de dialogue ! Les grands classiques du RPG offrent tout un panel de splendeurs, mais de nos jours, ce sont les messieurs du Studio Gust qui font le meilleur travail…
De nos jours, ceci est le minimum attendu : les designers de Suikoden 5 se sont contentés de reprendre une boîte « de base » et de la mettre au goût du jour :
Le dégradé se fait avec une vraie transparence (à droite, là ou il y a moins de texte. En effet fond transparent = plus dur à lire, d’autant plus qu’il n’y a pas de petite ombre).
La boîte est coupée en trois pour une meilleur lisibilité, on peut se permettre ce genre de détails quand l’écran dépasse les 320x240 pixels. C’est aussi pour cela que la police est assez grande pour que l’on puisse se passer de l’ombre. Le détail intéressant est le petit bouton « valider » qui égaye la boîte, c’est un aspect à ne pas négliger (même si au fond, il ne sert à rien).
Grand classique du RPG, grand classique de la boîte…logique.
Voici un nouveau type de boîtes, les boîtes « dessinées ». Cette boîte n’est pas le résultat de quelques coups de pots de peinture et de dégradés : une texture a été appliqué pour un rendu parchemin et les contours ont été délicatement assombris.
La boîte en elle-même introduit deux éléments intéressants : une ombre portée en bas à droite et un reflet sur le coin en haut à droite : tout ceci lui donne du volume, fini les boîtes plates !
A noter également, une nouveauté de la plus haute importance : le texte n’est ni blanc ni noir ! Et son ombre non plus ! C’est la magie du grand format : puisque les lettres sont plus grandes, on peut diminuer le contraste tout en restant lisible ; au final c’est bien plus joli, mieux intégré à la boîte et au jeu, et surtout, cela permet un peu de personnalisation !
Enfin, le petit détail final, le bouton « suivant » est très réussi, d’autant plus que dans le jeu la flèche clignote. Il est conseillé d’animer vos boîtes de dialogue, cela évite que le joueur se pose des questions du style « le jeu est planté ou ils attendent que j’appuie sur une touche ?».
En voilà une belle boîte « dessinée » ! Et pourtant il n’y a pas grand chose à observer : tout est dans le dessin, c’est un véritable travail d’artiste de reproduire du bois aussi bien et de façon à faire une boîte extensible.
Le seul détail à noter c’est la légère transparence (entre 10 et 20 %) de la boîte mais pas du contour. Un procédé à connaître…
Au final, pas de grand secret ici, juste du talent.
Si ma mémoire est bonne, ce jeu est nul...mais qu’importe, la boîte est jolie. Regardons chaque élément séparément :
Le fond est fait de teintes semi-transparentes, et les contours sont une version moderne de l’effet « tuyau ». Rien de neuf.
La forme de la boîte n’est pas rectangulaire, il s’agit d’une forme assez classique et agréable, rien ne vous empêche de l’utiliser. Ah et les jolis motifs…sont simplement des cercles et arcs de cercles auquel on applique un effet tuyau et un filtre jaune. Dernier détail, le petit orbe vert est très simple à réaliser : le net contient des dizaines de tutoriaux qui vous apprennent à en faire. C’est le genre de boîte qu’on peut espérer faire même sans dons artistiques.
Tiens, le retour du texte en noir avec ombre grise…
Comme quoi on peut faire beau en étant classique, le contour est en dégradé de jaune entouré d’une ligne foncée et le fond est faisable en trois coups de brosses. L’essentiel dans ce genre de boîte est de ne pas trop saturer les teintes du fond pour mettre le texte en valeur.
Voici une des boîtes les plus réussies du dossier : je vous avais bien dit qu’on reverrait des boîtes façon BD !
Ici la ruse principale est d’avoir fait le fond et le contour « tuyau » de la même teinte… Cela crée une unité chromique (là je me la joue critique d’art).
De plus, le texte est écrit marron lui aussi, et pourtant il est lisible…oui, mais il est GROS, je vous l’ai dit 100 fois.
Remarquez aussi le jeu de couleurs, le nom des personnages apparaît en bleu et le texte en marron.
Ar Tonelico
Y’a pas que les parchemins dans la vie, Ar Tonelico s’offre le luxe d’une charmante boîte futuriste au design compliqué, du moins à première vue. Du plus simple au plus compliqué :
- Le texte est simplement écrit en blanc et un fond semi-transparent permet d’assombrir la map derrière pour assurer un «contraste minimum ».
- Si l’on fait abstraction des effets de volume et de texture, le reste de la boîte est simplement fait de formes géométriques, faciles à dessiner (lignes droites, angles de 45°…). C’est leur multiplicité (y’en a plein) qui donne l’impression de complexité à la boîte. Après, tout ce qui reste à faire c’est quelques effets de calque (pour ceux d’entre vous qui utilisent Photoshop).
Ah, remarquez tout de même que la boîte est orientée façon BD, cela semble être devenu la marque de fabrique du studio Gust…
- Simple et Efficace -
« Oh là là…Elles sont belles toutes ces boîtes mais c’est quand même drôlement compliqué tous ces effets là. Et puis je me sers pas de Photoshop moi…je suis foutu ? »
Et bien oui et non, si vous ne voulez pas vous fouler, vous n’aurez pas d’aussi beaux résultats mais néanmoins, il est possible de faire simple et efficace…C’est ce qui se fait souvent sur les consoles portables par exemple !
Alors là on peut pas faire plus simple ! Le top du top pour les paresseux ou ceux qui ont peur de rater leur boite !
Un fond foncé semi transparent et du texte blanc uni…c’est vraiment très simple. Mais efficace.
On vous avait prévenu…
Une texture par-ci, et un effet tuyau par là, hop ! Je colore tout en marron et tadaaaaam !
Il se sont pas foulés les designers. Et pourtant, C’est terriblement old school et sympathique.
De nos jours l’effet tuyau produit cet effet là, regardez Golden Sun qui en use et abuse, tout le monde succombe à ce charme désuet.
Ici la boîte est taillée à la hache, et tout en noir qui plus est. Tout est dans le jeu de couleurs : le texte est blanc avec une ombre gris clair (très bonne astuce à retenir) et le nom du perso en jaune. Il n’y a vraiment rien de compliqué là dedans et pourtant…c’est beau !
La palme d’or du designer fainéant revient à Tales Of Rebirth dont la boîte…est la même que dans le Castlevania GBA ci-dessus, à deux nuances près :
Ici les lettres ont un contour (pas une ombre) noir de quelques pixels et la boîte est affichée sous forme de bulle.
Faire de la console portable sur salon, c’est possible, c’est Namco, c’est Tales of, et c’est pas laid !
Conclusion
Pour finir, voici un petit récapitulatif des notions dégagées lors de cette étude :
- Il faut absolument maintenir un contraste entre le texte et ce qui l’entoure, que ce soit à l’aide d’un fond, d’une ombre ou d’un contour.
- Si l’on ne veut pas un trop gros contraste, il faut écrire gros.
- Utiliser des bulles façon BD rend les échanges plus dynamiques, surtout si les fenêtres sont positionnables dans tout l’écran.
- Entourer sa boîte d’un « tuyau » ou utiliser des dégradés de peu de couleurs donne un effet Old-school
- Il est important de différencier le nom du personnage qui parle de son texte, on peut utiliser des barres de séparations ou un code de couleurs.
- Il n’y a pas besoin d’être un super dessinateur pour faire une belle boîte.