[Devblog] Refonte des Interfaces 2.0

Répondre
 
Partager Rechercher
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.
Lire la suite


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.
exchange1-mini.jpg
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.
exchange2-mini.jpg


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 :
exchange3-mini.jpg


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.
exchange4-mini.jpg
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.
exchange5-mini.jpg
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.
Lien direct vers le message - Vieux 19/02/2010, 15h56
Télécharger les pièces jointes
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...
Lien direct vers le message - Vieux 19/02/2010, 15h58
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.
Lien direct vers le message - Vieux 19/02/2010, 16h08
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.
Lien direct vers le message - Vieux 19/02/2010, 16h10
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.
Lien direct vers le message - Vieux 19/02/2010, 16h14
Message supprimé par son auteur.
Lien direct vers le message - Vieux 19/02/2010, 16h17


Excellent! Vivement le patch, le noir ça fait trop emo.
Lien direct vers le message - Vieux 19/02/2010, 16h26
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é.
Lien direct vers le message - Vieux 19/02/2010, 16h28
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
Lien direct vers le message - Vieux 19/02/2010, 16h34
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.
Lien direct vers le message - Vieux 19/02/2010, 16h40
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. :}
Lien direct vers le message - Vieux 19/02/2010, 16h43
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
Lien direct vers le message - Vieux 19/02/2010, 17h41
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.
Lien direct vers le message - Vieux 19/02/2010, 17h55
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
Lien direct vers le message - Vieux 19/02/2010, 18h11
Répondre

Connectés sur ce fil

 
2 connectés (0 membre et 2 invités) Afficher la liste détaillée des connectés
Thème visuel : Fuseau horaire GMT +1. Il est actuellement 00h22.
^^ Haut de page ^^