Explications sur la mise à jour des interfaces de Dofus 2.0

Lors de la dernière interview communautaire de lichen sur Dofus 2.0, une des raisons exprimées par lichen concernant le retard de la migration des serveurs de Dofus 1.29 vers Dofus 2.0 était la nécessité de retravailler la version des interfaces actuellement disponibles sur Dofus 2.0.

Plusieurs personnes travaillent actuellement sur ces modifications, et c’est Sili (que nous avions vu lors de l’émission pilote Inside Ankama) qui vient nous expliquer un peu plus en détail comment se passe actuellement cette « Refonte » sur le Devblog de Dofus.

Ces explications seront j’en suis sûr, pour le moins fort appréciées des joueurs, car il est vrai que l’interface actuelle n’est malheureusement pas utilisable sur des ordinateurs à faible résolution car les textes n’étaient pas forcément lisibles.

Les développeurs de Dofus n’auront donc pas fait la sourde oreilles aux demandes fondées des joueurs, et au menu donc pour la prochaine version du client de Dofus 2.0, qui devrait sortir bientôt: des textes plus lisibles, certaines interfaces modifiées et une couleur plus dans le style de l’ancienne version Dofus.

Espérons aussi que les quelques modifications ergonomiques nécessaires aux joueurs pour retrouver leur repaires dans l’interface seront aussi de la partie, car actuellement, comme a pu l’indiquer Grenouille sur le Blog de Cadavre Exquis,  cela rend les anciens joueurs malheureusement un peu « perdus ».

Voici donc les explications de Sili:

Bonjour !

Dans quelques jours sort une importante mise à jour pour DOFUS 2.0. Elle contiendra, entre autres, les nouvelles interfaces. C’est donc de ça que je vais vous parler aujourd’hui : la refonte des interfaces de DOFUS 2.0.

Mais avant d’expliquer en images comment nous avons procédé et comment vous pourrez modifier vous-même votre version de DOFUS, il y a quelques questions que j’ai croisées sur les forums qui méritent une réponse claire.

Pourquoi refaire les interfaces ?

Au cours de la phase de test interne puis du bêta-test en ligne, nous avons reçu de nombreux retours signalant d’importants problèmes de lisibilité avec certaines résolutions basses d’écran (800×600 par exemple). La majorité des textes étaient illisibles, rendant les interfaces inutilisables.

Nous avons donc pris la décision d’agrandir la taille des polices du jeu, ce qui impliquait de retravailler l’ensemble des interfaces pour pouvoir accueillir ces nouveaux textes, plus imposants.

Pourquoi ne pas avoir optimisé les interfaces pour les basses résolutions dès le départ ?

Nous avons commencé à travailler sur les interfaces de DOFUS 2.0 il y a plus de 2 ans. Cette version allait être plus belle, plus détaillée, et tout comme les cartes du jeu et les personnages, il fallait que les interfaces profitent de ces changements.

C’est pourquoi, alors que DOFUS 1.x était pensé pour se jouer en mode fenêtré, DOFUS 2.0 a été optimisé pour une utilisation en plein écran, afin de profiter au mieux de sa nouvelle qualité graphique.

De plus, le matériel informatique évolue très rapidement et les résolutions des écrans vendus ne cessent d’être améliorées. Il nous semblait donc logique de compter sur une naturelle évolution du matériel informatique des joueurs. Nous pensions que lorsque DOFUS 2.0 serait terminé et prêt à sortir, une très grosse partie de la communauté jouerait sur des écrans de 17 ou 19 pouces, avec une résolution de 1280×1024 au minimum, et que nous pouvions donc proposer une version adaptée à ces configurations.

Malheureusement, nous avons eu tort et nous travaillons aujourd’hui à corriger cette erreur afin que tout le monde puisse jouer à DOFUS 2.0 dans les meilleures conditions possibles, y compris sur le marché émergeant des Netbooks et ultraportables à petits écrans.

Pourquoi c’est aussi long ? Il suffit juste de changer la police !

Et bien, en fait, non. Ca n’est pas aussi simple. Mais je vais plutôt vous laissez voir ça vous-même dans la partie suivante.

A présent, je vais vous présenter la façon dont ont été conçues ces interfaces en me basant sur un exemple concret : l’interface d’échanges.

0 – Interface de base

Dans un souci de rapidité, puisque l’ergonomie des interfaces telle qu’elle avait été retravaillée pour DOFUS 2.0 était satisfaisante et qu’il ne s’agissait « que » d’améliorer la lisibilité, nous avons décidé de repartir des interfaces déjà existantes. Il n’était pas question de recommencer à zéro à chaque fois.

Toutefois, même si le but premier était l’amélioration de la lisibilité, nous avons profité de cette refonte pour uniformiser les interfaces et certaines ont donc dû être profondément modifiées.

Ici, par exemple, nous regrettions un peu d’avoir créé une grille avec une apparence différente des autres grilles qui sont juste une alternance de lignes colorées.

Nous voulions que toutes les listes aient le même aspect, que tous les boutons pour fermer une interface soient les mêmes, que tous les titres aient la même police, etc. Ces modifications offrent tout d’abord une meilleure cohérence au jeu mais permettent aussi une modification plus facile et rapide de tous les éléments graphiques pour créer de nouveaux skins : si toutes les interfaces ont le même fond, il suffit de colorier cette image en rose et toutes les interfaces deviennent roses.

1 – Modification des polices

Avant de modifier les interfaces, nous avons commencé par modifier les polices du jeu.

Pour régler la façon dont le texte apparaîtra, nous utilisons des fichiers CSS (Cascading Style Sheets – des Feuilles de Style), comme pour un site internet. Il est donc relativement simple de modifier la taille de tous les textes en jeu, en changeant juste quelques lignes.

Voilà, en exemple, une partie d’un CSS utilisé en jeu :

center {

 font-family: Tahoma;

 font-size: 18px;

 color: #312D24;

 text-align: center;

}

Les textes normaux sont donc passés de 12 à 18 pixels de haut, les sous-titres de 16 à 20 et les titres de 19 à 25 pixels.

C’est là qu’on peut réellement constater qu’il ne suffit pas d’agrandir les textes et qu’il est nécessaire de pousser plus loin les modifications.

2 – Nouvelle maquette si nécessaire

Pour la plupart des interfaces, il est possible de se contenter d’agrandir et de replacer les champs textes mais parfois ça ne suffit pas et il y a des modifications plus lourdes à appliquer.

Dans ces cas-là, l’interface doit être reconstruite par Etienne le graphiste, le responsable de la conception des interfaces. Il s’occupe de replacer tous les éléments nécessaires à l’interface, de façon ergonomique et esthétique, tout en suivant nos contraintes techniques.

On obtient à peu près ça :

3 – XML et nouvelle interface

Une fois qu’Etienne a fini, c’est à moi de modifier l’interface existante pour correspondre à sa maquette.

Chaque interface est divisée en 2 parties :

- le fichier XML qui définit la composition de l’interface. Il liste tous ses éléments, avec leur taille, leur position et les autres propriétés nécessaires comme l’adresse d’une image ou le contenu d’un champ texte.

- le script, classe ActionScript permettant de faire fonctionner l’interface. Elle contient par exemple les actions que le client effectuera lorsque le joueur cliquera sur un bouton ou, dans notre exemple, la façon dont l’interface sera modifiée lorsque le client recevra un message indiquant que l’autre personne a validé l’échange.

Dans cette refonte, c’est donc surtout les fichiers XML des interfaces qui ont dû être retravaillés. J’ai enlevé, ajouté, replacé et modifié pratiquement tous les éléments pour arriver à une version adaptée aux nouvelles tailles de police.

Nous voilà donc avec une interface beaucoup plus lisible. Mais ça n’est pas tout.

Pendant que je retravaillais les fichiers XML de toutes les interfaces, et parfois aussi leur fonctionnement, Etienne a repris tous les éléments graphiques utilisés dans les interfaces, un par un, il y en a très exactement 610, pour les recoloriser, les redessiner et pouvoir vous offrir un skin beige, reprenant les couleurs de DOFUS 1.x.

Cette refonte nous aura donc pris un mois et demi, pour repasser sur les 110 interfaces principales (dont 36 entièrement reconçues) et une cinquantaine de petites interfaces annexes (par exemple, la liste des Zaaps est une interface et les lignes de cette liste sont des interfaces annexes répétées plusieurs fois).

Voilà pour cette refonte des interfaces, et rendez-vous très bientôt en jeu pour voir le résultat !

Source: Devblog de Dofus

Tags :

le plus riche de dofus, fond décran dofus 2 0, photo de dofus, dofus 1, image dofus 2 0, comment mettre dofus 2 0 en plein ecran, mise a jour dofus avril 2011, coloriage dofus 2 0, de dofus, cra dofus 2 0, logo dofus 2 0, mettre dofus en plein ecran, dofus 2 0 drop, fond dofus, comment mettre dofus en plein ecran, fond ecran dofus 2 0, tous les dofus, fond ecran dofus, dofus mise a jour avril 2011, compte dofus 2 0, Dofus X, dofus 2 0 cra, dofus en plein ecran, coloriage dofus cra, le plus riche de dofus 2 0, tout les dofus, les dofus 2 0, dofus 2 5, riche dofus 2 0, dofus les dofus et leurs pouvoirs

A voir aussi sur Dofus Astuce:

1. Dofus 2.0 > Amélioration d’interface de la « Liste des combats »
2. Modifications et améliorations du client de Dofus 2.0
3. Mise à jour et modifications de Dofus 2.0 le 23 mars 2010
4. Changement et refonte du skin de la sram sur Dofus 2.0
5. Interview communautaire de Lichen #2 : Compte rendu et avis.