[Devblog] Refonte des Interfaces 2.0

phoenix_stealer · 19/02/2010, 15h56

Cette actualité a été publiée le 19 février 2010 à 16:09 par Accipiens sur notre site Dofus :

Citation :

Sili nous expliquait lors de l'émission pilote Inside Ankama qu'une facette principale du délai de lancement de Dofus 2.0 était dû à la difficulté de reconstruction de l'interface. Certains se sont étonnés de cette affirmation : c'est donc sur le blog des développeurs qu'en cette journée de Flovor, elle viendra nous faire un topo explicatif sur la conception des interfaces de Dofus 2.0.

Un petit article de Sili, présentant le travail effectué sur les interfaces de dofus 2.0.

Citation :

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 (800x600 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 1280x1024 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 meilleurs 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 comment 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é, puisquel’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à existante. 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 apparaitra, 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.
Voila, 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 du être retravaillés. J'ai enlevé, rajouté, 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).
Voila pour cette refonte des interfaces, et rendez-vous très bientôt en jeu pour voir le résultat !

Source.

DK · 19/02/2010, 15h58

Phoenix il ferme le topic des autres pour garder le sien bouuuh.
Bonne une grosse partie du boulot de faite...
Une excuse de moins pour retarder toujours une 2.0...

Stiglitz · 19/02/2010, 16h01

Met des espaces entre les paragraphes

Edit : ok, c'est bon.

Kril · 19/02/2010, 16h06

Vivement Mardi

Gawel · 19/02/2010, 16h08

Sympa cet article, il y a juste quelque chose qui me vient en tête :

Citation :

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.

Je pensais qu'on pourrait, via un module, avoir la possibilité de changer de thème graphique (grossièrement les couleurs uniquement), mais si tout doit être redessiné pour ça, ça risque de ne pas être possible. J'espère plutôt que j'ai mal compris ce passage.

phoenix_stealer · 19/02/2010, 16h10

Citation :

Publié par Stiglitz

Met des espaces entre les paragraphes

C'est fait.
Encore désolé de cette fermeture, mais on est tyrannique, ou on est pas.

Sinon, je préfère la nouvelle couleur d'interface, je retrouve mon dofus 1.29, et ce n'est pas pour me déplaire. Je trouvais l'autre un peu trop sombre, même si ça présentait des avantages.

Plus qu'à tester en condition d'utilisation réelle

Quoi qu'il en soit, félicitation pour le travail.

µBe · 19/02/2010, 16h11

La ca va être agréable a utiliser et les couleurs sont mieux choisit.

LordYu · 19/02/2010, 16h14

Ha enfin! Le principal reproche que je faisais à cette 2.0 était le coté "sombre qui fait mal aux yeux". C'est cool si on retrouve nos couleurs parce que le texte blanc sur du noir c'était vraiment très mal choisi (pas moche, mais pour un jeu sur lequel on peut passer des heures c'est inconfortable...), vivement mardi que je teste.

19/02/2010, 16h17

Message supprimé par son auteur.

19/02/2010, 16h26

Excellent! Vivement le patch, le noir ça fait trop emo.

Drùinwen · 19/02/2010, 16h28

Ouf ! Merci à eux

LordYu · 19/02/2010, 16h28

Citation :

Publié par Eckhaert

Et on va pouvoir configurer nos propres interfaces ou c'est moi qui comprends mal ?

Sinon merci aux devs pour ce boulot !

Ben si on suit bien la logique, en modifiant le fichier XML (dofus 2.0 étant entièrement composé de modules) pour changer les tailles des éléments, les textes et en les faisant pointer vers nos propres dessins d'interface, alors oui on pourra. Ca c'est de la théorie, rien ne dit que ça sera autorisé/pas bridé.

Fecorce · 19/02/2010, 16h30

Vivement mardi, cette interface à l'air mieux et plus proche de 1.29.

Waren · 19/02/2010, 16h31

Pfouaah ce beige me manquait. Content aussi, et hâte de voir ça.

-Yu- · 19/02/2010, 16h31

Pareil que LordMoi, les couleurs des interfaces était une des principales choses qui me rebutait quant à cette version de Dofus.

-Shango- · 19/02/2010, 16h34

Je .. eurglh... bah... mrflpert.... arglheu... RMMMMMBRGHLKLK.... ArtGLOubLOP....; XsZSZZmP..... jelikopebaaaappe...

*Respire un coup*

bon boulot AG

Désolé mais ça a été dur à sortir, pour une fois qu'il font quelque chose de cohérent sur leur jeu

Evide · 19/02/2010, 16h37

De l'excellent travail de part d'Ankama

Arthur Pendragon · 19/02/2010, 16h37

Magnifique, grâce à cette refonte, Ankama a peut être réussi à faire revenir certains Dofusiens 1.29 vers la 2.0 lorsqu'elle sortira. Et j'en fais partie.

Good job, Ankama !

Beji · 19/02/2010, 16h40

Citation :

Publié par godblastyoo

bon boulot AG

Histoire que tu sois sûre de l'avoir bien dit

C'est pas mal ce qu'ils ont fait, ça va permettre aux gens de mieux se retrouver sur cette 2.0. L'interface étant l'une des principales réticences des joueurs, je pense que ça ne sera bientôt plus qu'un mauvais souvenir.

Yaourt* · 19/02/2010, 16h43

Citation :

Publié par Waren

Pfouaah ce beige me manquait. Content aussi, et hâte de voir ça.

Idem. Il se pourrait même que je m'abonne à nouveau pour la release. :}

hoochie · 19/02/2010, 16h47

On va voir ce que cela va donner
J'espère avant tout que cela sera plaisant à l'oeil

Serifas · 19/02/2010, 17h41

je suis peut être le seul, mais je préférais le style moderne et propre de la nouvelle.

M'enfin , pas de soucis.

Quand je vois des gens dirent "wow ils changent interface, alors je rejoue!" ça me choque quand même "j'arrête de jouer à dofus car l'interface change de couleur"

/fear

Edit pour le bas: Ah ! Autant pour moi , roxx alors, boulot de pgm

Aasimar · 19/02/2010, 17h52

Le choix reste possible entre l'interface noire typée DOFUS 2.0 et celle qui est beige, typée DOFUS 1.x.

Bon week-end,

Aasimar

Sili · 19/02/2010, 17h55

Citation :

Publié par LordYu

Ben si on suit bien la logique, en modifiant le fichier XML (dofus 2.0 étant entièrement composé de modules) pour changer les tailles des éléments, les textes et en les faisant pointer vers nos propres dessins d'interface, alors oui on pourra. Ca c'est de la théorie, rien ne dit que ça sera autorisé/pas bridé.

Il n'y aura aucun besoin de toucher aux fichiers XML des modules pour remplacer les textures utilisées actuellement par les votres. Il suffira juste d'ouvrir les éléments graphiques, présents dans les dossiers de thème de votre client DOFUS, pour les modifier selon votre goût.
De même, vous aurez accès aux fichiers CSS définissant les polices du jeu, vous pourrez donc changer couleurs et tailles.

Zafiro · 19/02/2010, 18h11

OUF , merci beaucoup , nous travaillions comme des forçats depuis la 2.0 , nous vous remerçions de toute notre humeur aqueuse . C'est vrai quoi , à force rictus occulis avec des courbatures après 1 seule petite heure de travaille ^^ .
Donc merci encore .

Signé : les pitits n'oeil de Zafiro

DK Alpha & Oméga	Phoenix il ferme le topic des autres pour garder le sien bouuuh. Bonne une grosse partie du boulot de faite... Une excuse de moins pour retarder toujours une 2.0...
19/02/2010, 15h58

Stiglitz Alpha & Oméga	Met des espaces entre les paragraphes Edit : ok, c'est bon.
19/02/2010, 16h01

µBe Alpha & Oméga	La ca va être agréable a utiliser et les couleurs sont mieux choisit.
19/02/2010, 16h11

LordYu [DISCO] Alpha & Oméga	Ha enfin! Le principal reproche que je faisais à cette 2.0 était le coté "sombre qui fait mal aux yeux". C'est cool si on retrouve nos couleurs parce que le texte blanc sur du noir c'était vraiment très mal choisi (pas moche, mais pour un jeu sur lequel on peut passer des heures c'est inconfortable...), vivement mardi que je teste.
19/02/2010, 16h14

#337929 Invité	Message supprimé par son auteur.
19/02/2010, 16h17

#82709 Invité	Excellent! Vivement le patch, le noir ça fait trop emo.
19/02/2010, 16h26

Fecorce Empereur	Vivement mardi, cette interface à l'air mieux et plus proche de 1.29.
19/02/2010, 16h30

Waren Alpha & Oméga	Pfouaah ce beige me manquait. Content aussi, et hâte de voir ça.
19/02/2010, 16h31

-Yu- Alpha & Oméga	Pareil que LordMoi, les couleurs des interfaces était une des principales choses qui me rebutait quant à cette version de Dofus.
19/02/2010, 16h31

-Shango- [-ASF-] Alpha & Oméga	Je .. eurglh... bah... mrflpert.... arglheu... RMMMMMBRGHLKLK.... ArtGLOubLOP....; XsZSZZmP..... jelikopebaaaappe... Respire un coup bon boulot AG Désolé mais ça a été dur à sortir, pour une fois qu'il font quelque chose de cohérent sur leur jeu
19/02/2010, 16h34

Evide Alpha & Oméga	De l'excellent travail de part d'Ankama
19/02/2010, 16h37

Arthur Pendragon Empereur	Magnifique, grâce à cette refonte, Ankama a peut être réussi à faire revenir certains Dofusiens 1.29 vers la 2.0 lorsqu'elle sortira. Et j'en fais partie. Good job, Ankama !
19/02/2010, 16h37

Beji Alpha & Oméga	Citation : Publié par godblastyoo bon boulot AG Histoire que tu sois sûre de l'avoir bien dit C'est pas mal ce qu'ils ont fait, ça va permettre aux gens de mieux se retrouver sur cette 2.0. L'interface étant l'une des principales réticences des joueurs, je pense que ça ne sera bientôt plus qu'un mauvais souvenir.
19/02/2010, 16h40

Yaourt* Alpha & Oméga	Citation : Publié par Waren Pfouaah ce beige me manquait. Content aussi, et hâte de voir ça. Idem. Il se pourrait même que je m'abonne à nouveau pour la release. :}
19/02/2010, 16h43

hoochie Alpha & Oméga	On va voir ce que cela va donner J'espère avant tout que cela sera plaisant à l'oeil
19/02/2010, 16h47

Serifas Alpha & Oméga	je suis peut être le seul, mais je préférais le style moderne et propre de la nouvelle. M'enfin , pas de soucis. Quand je vois des gens dirent "wow ils changent interface, alors je rejoue!" ça me choque quand même "j'arrête de jouer à dofus car l'interface change de couleur" /fear Edit pour le bas: Ah ! Autant pour moi , roxx alors, boulot de pgm
19/02/2010, 17h41

Aasimar Légende	Le choix reste possible entre l'interface noire typée DOFUS 2.0 et celle qui est beige, typée DOFUS 1.x. Bon week-end, Aasimar
19/02/2010, 17h52

Zafiro Alpha & Oméga	OUF , merci beaucoup , nous travaillions comme des forçats depuis la 2.0 , nous vous remerçions de toute notre humeur aqueuse . C'est vrai quoi , à force rictus occulis avec des courbatures après 1 seule petite heure de travaille ^^ . Donc merci encore . Signé : les pitits n'oeil de Zafiro
19/02/2010, 18h11

[Devblog] Refonte des Interfaces 2.0

Connectés sur ce fil