Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Quels outils et quelle chaîne graphique pour WPF et Silverlight ?

WPF, Silverlight, 2D, 3D, le monde des nouvelles interfaces desktop et Web réclame désormais de fortes compétences en infographie. S'il semble évident que la présence d'un graphiste soit devenue indispensable en phase de conception des interfaces, savoir quels outils utiliser est en soi déjà un parcours du combattant !

Pour e-naxos je forme une infographiste afin d'offrir très prochainement un service de design pour les applications WPF et Silverlight. Avant de former, il faut savoir de quoi on parle, c'est toute la difficulté pour un bon formateur : avoir la connaissance "livresque" mais surtout la connaissance pratique.

Cela fait donc de long mois que je m'entraîne. je n'ai pas forcément beaucoup évolué niveau dessin, je ne serai jamais Dali ni Da Vinci, je m'y suis fait depuis mes premiers essais en maternelle, et même si les courbes de bézier et autres splines n'ont plus beaucoup de secret, l'investigation en monde 3D n'a pas été un chemin de santé !

Bref, pour produire une application "graphisée" c'est beaucoup plus simple à dire qu'à faire, je peux vous l'assurer ! Gérer un ou plusieurs graphistes, leur faire comprendre ce qu'est une application, la différence entre une listbox et un combobox n'est pas forcément non plus la chose la plus simple. Et pourtant, c'est essentiel. Depuis des mois j'engrange donc une expérience à la fois nouvelle et exitante, car ce qui se profile est l'avènement de nouveaux logiciels conçus autrement. Et j'aime le changement.

Je ne vais pas ici vous détailler l'ensemble du processus de création d'une application WPF ou Silverlight, mais vous proposer un petit tour dans les outils qui peuvent (et doivent) être utilisés pour produire une logiciel designé.

Tour d'horizon des outils

Un dessin valant mieux qu'un long discours, regardons d'abord ce "petit" diagramme que j'ai fait rapidement sur la base de mon expérience :

 

Pour voir l'image en 100% téléchargez-la : 2D3DProduction.png (43,20 kb)

J'ai testé tous les chemins dessinés et tous les softs présentés et même bien plus... Ce qui reste sur ce diagramme sont les principaux chemins que peut prendre un objet graphique et les principaux softs qu'il faut connaître et maîtriser pour produire une solution professionnelle. Certaines personne se limiteront à des portions du diagramme, ce qui reste possible, mais seule la connaissance de la totalité des logiciels et chemins de celui-ci permet de "tout" faire.

Partons de la fin

A l'arrivée nous désirons obtenir une application WPF ou Silverlight. Sous WPF nous avons besoin de composants templatés, d'image PNG ou Jpeg et d'objets visuels en 2D ou 3D. Pour Silverlight nous avons les mêmes besoins sauf en ce qui concerne la 3D qui ne sera supportée que dans Silverlight 3 en 2009.

Chaque éléments graphique impose certains chemins incontournables:

Par exemple, Silverlight gère très bien les objets 2D créé par Expression Design, mais les effets de Expression Design ne sont pas gérés, comme le Drop Shadow. Moralité, un objet 2D créé en Xaml avec E.Design ne peut être utilisé tel quel sous Silverlight, il faudra le transformer en PNG. Sous WPF il est possible d'ajouter des effets comme le Drop Shadow et il sera donc possible d'exploiter directement l'objet 2D Xaml. Objet Xaml ou PNG on voit tout de suite que les chemins de production diffèrent légèrement et que les possibilités pour le développeurs seront très différentes...

Pour produire des objets 3D il y a un goulot d'étranglement : aucun outil Microsoft ne produit d'objets 3D. Le seul logiciel qui permet de faire cela est Zam 3D d'Electric Rain. Il est plutôt agréable à utiliser et pas très cher (environ 200 euros avec le change actuel du dollar). Seulement voilà, parfois vous avez envie d'utiliser un objet 3D un peu compliqué ou mis en scène. Et chez Electric Rain ils sont malins, ou un peu mesquin au choix, et Zam 3D ne possède pas de moteur de rendu ! Il est juste capable de sortir du code Xaml. Et si vous voulez créer un PNG d'un objet 3D ? Pas de solution sauf à acquérir en plus Swift 3D du même éditeur qui dispose d'un moteur de rendu (EMO) qui ne peut pas concurrencer les gros moteurs de ray tracing comme on en trouve sur 3DS Max ou Blender, mais on peut produire des images de belle qualité malgré tout.

On le voit le chemin se complique.. J'ai un objet 3D, pour une application WPF je vais le réutilisé directement, pour une application Silverlight je vais le "prendre en photo" en faisant un PNG, du coup j'ai besoin de Xam 3D pour créer l'objet 3D Xaml et de Swift 3D pour réimporter mon projet Xam 3D et utiliser le moteur de rendu pour créer le PNG ! Vous allez me dire autant acheter tout de suite Swift 3D ! Et bien non... Ce dernier a bien un mode d'export en Xaml mais c'est plutôt pour les animations comme en Flash, par exemple une animation de 20 images créera 20 fois l'objet Xaml sur 20 couches différentes dont l'opacité est à 0% et il y aura 20 timelime générée chacune s'activant à la suite de la précédente pour passer l'opacité de l'image numéro x à 100%. C'est un peu le principe d'animation des petits livres qu'on doit feuilleter à toute vitesse pour avoir l'impression d'un dessin animé.

Bien entendu en bout de course il faut avoir Expression Blend, c'est obligatoire. Et puis ensuite viennent Visual Studio ou Expression Web.

Produire des modèles 2D avec Expression Design c'est sympa, le soft est agréable. Mais il n'a pas le niveau d'un Illustrator CS. Si on veut créer une image 2D un peu "léchée" il faut donc posséder Illustrator CS. On exporte en Xaml directement grâce à un petit plugin gratuit, ou bien on importe le fichier AI dans Expression Design (le copier coller entre Illustrator et E.Design fonctionne aussi et c'est très pratique).

Pour produire de la 3D c'est un peu pareil... Swift 3D ou Xaml 3D sont bien sympathiques, mais le mesh editor est un peu limité, et dès qu'on entre dans l'animation on voit bien que ces logiciels sont parfaits pour produire des banners de pub à la Flash mais pas pour créer des séquences animées à la Maya !

Bref, pour de beaux objets 3D, le mieux est d'utiliser Blender (gratuit mais une vraie usine à gaz) ou 3DS Max, le meilleur que je connaisse et le plus agréable à utiliser. Un peu cher c'est tout. Surtout si on ajoute cela au budget de la quinzaine de logiciels présents sur mon diagramme !

Avec 3DS Max vous allez créer des objets 3D que vous sauvegarderez en format 3DS, pas au format Max ni Dxf ! Et oui.. Swift 3D et Xaml 3D ne savent importer que le format 3DS... Au passage vous perdrez certains éléments ou certaines textures. Rien ne sert donc de trop compliquer. Il faut finir le travail sous Xaml 3D pour être sûr que ce qui est fait est supporté par l'export 3D en Xaml.

Si vous voulez faire des animations, cela se corse ! On a vu que les animations Xaml produites par Swift 3D ne sont pas du Xaml 3D mais des séries de plans 2D en couche, en revanche Swift 3D sait produire des AVI, comme 3DS Max. Un petit AVI peut souvent être bien plus joli qu'une animation d'objets 3D faites à la main dans Expression Blend. Dans certain cas c'est donc une alternative intéressante.

Reste que l'AVI devra être encodé correctement. C'est là qu'intervient Expression Media Encoder. Il peut même produire une page Web avec lecteur Silverlight intégré. Cela est intéressant pour une longue séquence présentée comme un petit film.

Bien entendu qui dit petit film dit montage... Le montage peut être réalisé avec Windows Movie Maker, simple et gratuit. Mais simple... Il faudra certainement passer à Adobe Première pour produire un vrai petit film bien monté.

Qui dit film dit son. vous pouvez facilement prendre un MP3 et le coller dans le projet Movie Maker. Mais, droits de diffusion mis à part, cela va rester très sommaire.

Pour produire une bande son synchronisée avec les images je travaille personnellement avec Cubase. Les synthés et la musique c'est mon "vrai truc" c'est donc la partie que je préfère :-) Créer l'image puis créer le son pour cette dernière est une expérience vraiment intéressante. Si vous êtes musicien vous vous éclaterez dans cette phase ! Sinon, pensez à engager un compositeur (tarifs sur demande !).

Etc !

Je vais m'arrêter là, car il est impossible de décrire ici tous les chemins du diagrammes, toutes les justifications de prendre tel ou tel chemin pour tel ou tel résultat. Et puis c'est aussi la valeur ajoutée que je suis en train de créer pour E-naxos, j'aime partager, la preuve ce billet, mais je ne vais pas vous livrer plus d'un an d'expérimentation et d'expérience comme ça non plus :-)

J'espère en tout cas que ce petit tour d'horizon et le diagramme vous aideront à vous faire une idée du cycle de production d'interfaces professionnelles "graphisées". Si vous êtes développeur cela vous aidera à envisager votre collaboration avec des infographistes, et si vous êtes clients cela vous aidera à mieux comprendre le prix qui vous sera demandé ;-)

Dans tous les cas, bon voyage au pays des logiciels de la prochaine génération !

..Et Stay Tuned !

blog comments powered by Disqus