A travers Bavardica - Partie 2 : Evolution Du Projet

Maintenant que nous avons discuté les domaines relatifs à Bavardica, nous pouvons entrer dans le vif du sujet, avec les étapes de la réalisation du projet.

1. Envoi d'un message public sur le réseau TCP à partir d'un client Silverlight

Le modèle choisi pour ce projet est le modèle de prototypage. En commençant d'abord avec un prototype jetable, je pouvais d'abord envoyer de simples paquets TCP en utilisant Silverlight pour le client et une application console en tant que serveur. C'était un chat très basique qui permet à un utilisateur, disons A d'envoyer un message à un utilisateur B de telle sorte que personne d'autre ne puisse lire le message en dehors de A et B. Le serveur est une application console .NET et le client est une application Silverlight hébergé dans une page ASP.NET

2. Premiers contacts avec les animations Silverlight

Le second programme que j'ai écrit était une simple application Silverlight avec un personnage animé en 2D marchant autour d'un parc qui était en fait le fond de la page Web. Cette expérience avait pour seul objectif l'étude du mouvement d'un personnage sur une scène 2D.

Le premier point clé de ce prototype est la façon dont l'avatar est animé quand une touche de direction est pressée:

Le deuxième point important est que le modèle utilise des "sprite sheet", c'est à dire, une animation image par image. Il consiste à glisser horizontalement une séquence d'images adjacentes avec un fond transparent, affichant ainsi une image à la fois quand une touche directionnelle est pressée.

Cette approche utilisait des KeyAnimationUsingKeyFrames mais sera abandonnée plus tard dans le projet car elle n'impliquait pas d'interpolation et qu'elle aurait exigé beaucoup de temps à dessiner chaque caractère dans chaque position unique.

3. Placer le serveur silencieusement en arrière-plan (en tant que service web)

Il était prévu d'intégrer les deux prototypes de sorte que les utilisateurs puissent à la fois chatter et se déplacer sur la scène 2D. Il était également prévu que l'application serveur reste silencieusement dans un service Web de sorte que l'application console n'aies pas à rester ouverte pendant toute l'opération. Les deux objectifs ont été atteints dans le prototype suivant.

En fait, j'ai pensé à la construction d'une application serveur plus robuste sur lequel je pourrais construire un prototype de l'évolution qui allait progressivement grandir avec le projet. Ce serveur avait deux exigences principales:

- Il fallait se débarrasser de l'application console. Il faut juste être un processus silencieux dans le fond. Pour ça, j'ai juste utilisé les services Web.

- Le serveur devait "pousser" des données aux clients. C'est l'envoi régulier des données, même quand les clients ne le demandent explicitement chaque fois. Dans le modèle classique HTTP, le client fait d'abord une demande au serveur et ensuite seulement le serveur peut répondre. Une solution à ce problème était d'utiliser les services web Duplex WCF (Windows Communication Foundation), et c'est ce que j'ai fait. C'est un modèle de communication asynchrone à deux directions.

C'est intéressant d'observer comment les services Web duplex WCF fonctionnent.

4. Gros plan sur le chat privé

Alors que le chat public se produit dans une fenêtre commune, le chat en "face à face" implique une fenêtre pour chaque conversation. L'organisation de plusieurs conversations dans Bavardica revient à utiliser des onglets, c'est à dire le contrôle Silverlight TabControl.

L'onglet RoomTab est celui utilisé pour les conversations publiques. Pour démarrer une conversation privée, l'utilisateur doit juste cliquer sur le nom de la personne à laquelle il veut parler (Il y a une liste de noms d'utilisateurs disponible dans la salle publique)

5. Dessiner et animer les personnages

L'étape suivante fut la conception et l'animation d'avatars 2D. Il y avait déjà un avatar dans les prototypes précédents, mais ce n'est pas amusant si tout le monde a la même apparence dans un monde virtuel. De plus, cet avatar là avait été emprunté à un autre développeur Silverlight (Darren Mart). Et le modèle précédent a présenté beaucoup d'inconvénients. Outre le fait que d'une animation Sprite Sheet ne fournit pas d'interpolation entre les images, ce modèle implique aussi beaucoup de dessins. Chaque position individuelle devait être conçue manuellement. Mais le plus gros problème dans notre contexte est l'inexistence de personnalisation de ce modèle: l'un des premiers objectifs non-négociable de ce projet était la possibilité de mélanger et d'assortir des vêtements et des tenues d'autres ainsi que leurs couleurs. Cette tâche est assez simple dans un monde 3D, car il est facile de changer de mailles et de textures; mais dans un monde en 2D, c'est un peu délicat de changer une partie de l'équipement, sauf si nous choisissons de redessiner le personnage pour chaque combinaison imaginable de vêtements. La solution mise en oeuvre dans Bavardica a été plutôt de créer un ensemble d'images de référence qui, collectivement, forment un caractère. Donc j'ai fini par dessiner mes propres personnages.

Alors, même si ceci est principalement un projet de programmation, et non un projet graphique, il est utile de mentionner que beaucoup de temps et d'efforts ont été investis dans l'élaboration et l'animation des personnages originaux. La personnalisation est également une caractéristique importante d'un monde virtuel. Les utilisateurs devraient être en mesure de choisir à quoi ils ressemblent et comment ils sont habillés. Pour ce projet, j'ai choisi de tirer quatre personnages de base (2 garçons et 2 filles) et au moins deux costumes et deux coiffures pour chaque personnage. En raison de la contrainte de temps encore, je ne pouvais pas dessiner et animer plus que cela. L'opération implique de dessiner et colorier les corps, puis dessiner des vêtements par dessus ces corps. Trois couleurs de peau de base sont disponibles et les utilisateurs peuvent modifier les couleurs de leurs vêtements et les cheveux. Voici un aperçu de l'un des personnages:

Les personnages sont animés essentiellement de manière à pouvoir marcher, s'asseoir et se tenir debout. Le problème avec les animations, c'est qu'il fallait le faire à chaque fois sous les trois angles (avant, arrière, latéral). Il y a aussi des animations pour leur donner l'air vivant, même quand ils sont debout, au repos. Ces modèles ont utilisé le modèle de  DoubleAnimationUsingKeyFrames par opposition à la précédente qui a utilisé des KeyAnimationUsingKeyFrames. Microsoft Expression Blend a été utilisé pour traiter les animations.

Il y a deux principaux avantages pour le système d'animation qui a été utilisé:

- l'interpolation Silverlight rend les choses soyeuses

- Les personnages sont personnalisables. Ils peuvent simplement changer de bottes ou de style de cheveux (ou autre) à la guise des utilisateurs.

Malheureusement (ou heureusement), la manipulation des personnages dans un monde virtuel n'est pas seulement sur le design. Elle implique beaucoup de codage. Commençons par la création d'un personnage.

Quelques "Arrays" sont maintenus, en offrant une variété de tenues à l'utilisateur, ainsi que les formes et les genres:

Selon le choix de l'utilisateur, les éléments requis sont exposés et les pièces qui ne sont pas requises sont masquées. Cependant, les changements de couleur suivent une autre logique.

Ce qui se passe ici est que le fichier source pour chaque partie du corps est récupéré à partir d'un répertoire différent qui change en fonction du choix de l'utilisateur. Dans l'application, lorsque l'utilisateur peut changer les couleurs de toutes les parties de leur costume, la même logique est appliquée.

C'est à peu près tout pour ce qui est de la création du personnage. Une fois que le personnage est créé, des détails sur son apparence sont stockés dans la base de données. A partir de là, chaque fois que l'utilisateur est en ligne, le serveur peut envoyer tous ses détails à l'ensemble des autres clients. Dès qu'un client réalise la présence d'un autre utilisateur en ligne, il peut représenter ledit personnage dans sa scène en fonction des données qui avaient été soumis:

Le réglage les détails des autres personnages fonctionne comme dans la création du personnage. C'est surtout une question de cacher et montrer des images au bon moment.

Maintenant que nous avons vu comment le code relatif à l'apparence des personnages fonctionne, nous allons maintenant attaquer le code utilisé dans l'animation et les mouvements. Tout part d'une touche pressée par un utilisateur, un évènement géré par Silverlight. Dans notre exemple, nous allons considérer la touche droite: