Dot.Blog

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

Silverlight / WPF : Masques d’opacité (OpacityMask)

[new:6/6/2010]Les masques d’opacité sont des outils très puissants que l’on retrouve dans de nombreux logiciels gérant de l’image (ou même de la vidéo). Silverlight et WPF offre, via Xaml, un support de cette fonction qui peut rendre bien des services…

[silverlight:source=/SLSamples/SLMask/SLMask.xap;width=480;height=500]

Une scène de jeu

Imaginons la scène de jeu ci-dessus. Grâce à Swift 3D j’ai créé un fichier Xaml de deux objets 3D, le célèbre ATP de Star Wars et un décor de fond (un lac et de la verdure). Ces fichiers Xaml (un canvas généré automatiquement par Swift) ont été placés dans des UserControl séparés permettant de les manipuler facilement ensuite. Mais là n’est pas vraiment la question. Ces images étant déjà en Xaml, on s’aperçoit que les transparences sont gérées “de fait”. Par exemple on voit le décors entre les “pattes” de l’ATP. Mais pour le tir laser j’ai récupéré un Jpeg… et là les choses se compliquent.

Créer des transparences

Comment, à partir d’un Jpeg (en bas à gauche dans l’exemple) obtenir le tir laser de la scène finale ?

Deux approches : Utiliser un programme de dessin (Paint Shop Pro par exemple) pour créer un PNG ayant les bonnes transparences. C’est certainement la meilleure méthode pour créer un sprite par exemple. Mais d’une part c’est un travail d’infographiste (hors sujet ici) et cela ne répondrait pas à tous les besoins que la seconde solution permet de couvrir.

Soit on créé un masque d’opacité qui sera utilisé dans la scène finale.

La première méthode ne nous intéresse pas trop ici, laissons les infographistes à leur métier. C’est la seconde voie qui est la plus intéressante car elle ouvre la porte à de nombreuses astuces de présentation.

Pas seulement pour les jeux !

Bien entendu dès qu’on parle d’images, de transparences, de décors, etc, on pense “jeu”. C’est bien entendu un domaine où le travail de l’image est une obligation incontournable. Mais sous WPF et Silverlight, créer des interfaces graphiques de qualité passe aussi par la manipulation d’images et de vecteurs !

Fondre une image dans une autre, créer une bordure un peu originale, fabriqué un titrage comme une trouée sur une image de fond, etc, tous ces effets réclament de gérer… des masques d’opacité. Et même un logiciel gestion peut tirer partie de toutes ces possibilités graphiques, grâce à Xaml.

OpacityMask

Le masque d’opacité est une propriété qu’on retrouve notamment dans les UserControl. Il s’agit de fournir un dessin (image PGN ou vectorielle) dont l’opacité (le canal Alpha) sera utilisé pour gérer la transparence de l’objet auquel il sera accroché. Le dessin en lui-même n’a guère d’importance, c’est l’opacité de la couleur qui compte (son canal Alpha donc).

Dans notre exemple je suis parti d’un Jpeg d’une flamme sur fond noir. J’ai transformé le Jpeg en PNG parce que j’aime mieux ce format, mais ce n’était pas nécessaire. Ensuite, en utilisant un logiciel de dessin, j’ai “bricolé” l’image originale pour obtenir la seconde (en bas à droite dans l’exemple) qui elle, par force (pour gérer la transparence), est un PNG. Le but du jeu étant de retrouver la silhouette de la flamme (opaque) et de rendre tout le reste transparent.

Une fois cette opération terminée les deux images sont importées dans le projet.

On place l’image originale puis on applique la seconde image comme masque d’opacité, c’est aussi simple que ça…

Sous Expression Blend on clique sur la propriété OpacityMask de l’image puis on utilise l’onglet “Tile Brush”, puis on sélectionne l’image gérant le masque comme s’il s’agissait d’une brosse à appliquer. C’est tout.

En Xaml cela donne :

   1: <Image Source="images/flare008.png" >
   2:    <Image.OpacityMask>
   3:        <ImageBrush ImageSource="images/flare008b.png"/>         
   4:    </Image.OpacityMask>
   5: </Image>

Quelques astuces

L’utilisation de Swift 3D est une “grosse” astuce ! Il s’agit d’un logiciel très complet permettant de créer des objets et des animations 3D de façon “abordable”. Les logiciels de type Maya, LightWave (ou Blender si on préfère le gratuit), sont des monstres à maîtriser et il ne faut faire que ça tous les jours pour les comprendre. Swift est certes assez limité mais il est assez puissant pour faire des choses utilisables. Il possède deux énormes avantages sur tous les autres logiciels de 3D : d’une part il est assez facile à comprendre (et à se souvenir quand on ne fait pas que ça tous les jours) et d’autre part il sait générer des Canvas Silverlight, voire des animations 3D (en trichant sur les opacités de plusieurs images fixes superposées).

Grâce à Swift 3D il est possible de créer des éléments d’interface avec un look 3D et de les intégrer à ses applications.

L’autre astuce consiste à utiliser des bibliothèques d’images faites pour les softs de 3D. Chaque image est généralement, et au minimum, accompagnée de son Bump (une technique permettant de créer du relief sur des textures). La création du masque d’opacité est généralement plus rapide si on part d’un Bump qui a déjà été traité et simplifié que de l’image originale en couleur…

The sky is the limit !

La technique est simple, savoir bien l’utiliser et quand l’utiliser pour élargir son champ de vision et créer des interfaces encore plus sexy est une autre question … La seule limite est votre imagination !

Le projet exemple (Blend 4, Silverlight 4, Visual Studio 2010) :

Et Stay Tuned !

blog comments powered by Disqus