• us version

Récemment, j'ai du utiliser les shaders ou effets Silverlight pour mes besoins personnels. En soit, cela est assez courant, leur utilisation peut toutefois se faire au détriment des performances de votre application. Cet article explique comment optimiser la mémoire et la charge processeur lorsque vous appliquez des effets aux instances d'UIElement.

Tout d'abord, chaque fois que vous appliquez l'un des shaders ou effets fournis par défaut, soit DropShadow et Blur, sur une instance d'UIElement, vous générez en réalité deux bitmaps en RAM à l'exécution. La première bitmap est un rendu simple des vecteurs, la seconde bitmap est l'image affichant l'effet finalisé. Celle-ci est calculée à partir de la première. En termes de performance, ce comportement, peut conduire à certains problèmes si vous ne prenez pas garde :

Il nous faut tout d'abord calculer la mémoire utilisée par un effet standard appliqué à un UIElement 200 * 200. Pour cela, nous prenons en compte que chaque pixel (40000 pour une telle image) est codé sur 4 octets en mode ARGB:

* la couche de transparence Alpha est codée sur 1 octet (appelé octet en français) et 8 bits, conduit à 256 valeurs possible de 0 à 255 ou 0x00 à 0xFF en hexadécimal. les autres couches sont sur le même modèle.
* Red | 1 octet | 8 bits | 0xFF | 0-255
* Green | 1 octet | 8 bits | 0xFF | 0-255
* Blue | 1 octet | 8 bits | 0xFF | 0-255

Les images étant générées à l'exécution, celle-ci sont stockées dans la mémoire vive. Comme elles ne sont pas compressées, il est facile de calculer leur poids via la formule ci-dessous :
PixelsWidth * PixelsHeight * 4 octets = poids total de la bitmap intermédiaire dans la mémoire RAM

Dans notre cas, le bitmap est d'environ 160 Ko, mais cela correspond uniquement au poids de l'image intermédiaire. La seconde image occupera au moins 160 k octets voir plus, pour le projeté d'ombre et le flou. Celle-ci déborde en effet de l'enveloppe afin d'afficher l'effet finalisé. le poids total est donc au minimum d'environ 400 kilo octets si l'on considère que ces effets ont un rendu de surface plus grand que l'enveloppe d'origine.

Concernant les effets personnalisés que vous créez par vous-même via des logiciels comme Shazam en utilisant le langage HLSL (High Level Shader Language), les comportements du lecteur sont assez différents car Silverlight ne génère pas d'image intermédiaire pour rendre l'effet. Ce comportement présente de grands avantages en termes d'occupation mémoire mais reste spécifique aux effets que vous développerez par vous-même. Attention toutefois au fait que ce comportement n'est plus valable lorsque vous appliquez de la 3D ou que vous mettez le vecteur en cache via la propriété CacheMode. Dans ces derniers cas, l'image intermédiaire est systématiquement créée...

Le filtre est souvent recalculé au cours du temps lors de certaines transformations du vecteur original. Seules exception, ce n'est pas le cas pour les transformations de type déplacement (TranslateTransform). Pour toutes les autres opérations, l'image intermédiaire est recréée de toute pièce, l'image finalisée l'est donc également. Par exemple, si vous décidez d'animer l'échelle, la rotation ou l'inclinaison d'un rectangle, le rendu de l'effet et les images en mémoire qui en découlent seront regénérées à chaque fois. Ce comportement permet de conserver un effet sans pixelisation ou crénelage. Par exemple, pour un raffraichissement de 60 image par seconde et une animation d'échelle, Silverlight génèrera environ 60 bitmaps intermédiaires et 60 bitmaps affichant l'effet final. Les designers et les développeurs doivent prendre garde à ce type de comportement. Dans le cas contraire, la charge mémoire et CPU utilisée pour afficher de simples effets, pourrait augmenter de manière drastique et diminuer ce faisant les performances de votre application... Pour éviter ou limiter ces ralentissements, l'équipe d'ingénieurs Silverlight a autorisé une taille maximum de 2048 pixels en largeur et en hauteur. Cette limitation n'est toutefois pas si simple à mettre en valeur car certains artefacts de rendu peuvent apparaître dans ces dimensions. Lorsqu'un effet est supprimé ou qu'un UIElement est détruit, la mémoire réservée pour rendre l'effet est automatiquement libérée.

Vous trouverez certaines des meilleures pratiques ci-dessous:

* Plus la surface sur laquelle vous appliquez un effet est petite, mieux c'est. Les effets ne doivent pas être appliqués de manière inconsidérée et sont susceptibles d'alourdir considérablement votre visuel.

* Evitez les effets sur les éléments qui subissent des animations. Mise à part dans le cas de déplacement, cela conduit à recalculer les images bitmaps et à les replacer en mémoire systématiquement selon la cadence de votre animation.

* L'effet Blur est très lent car multipasse. Conservez un faible rayon. Au delà de 10 pixels, vous commencerez à remarquer une dégradation flagrantes des performances.

Pour finir, sachez que depuis .NET 3.5, Silverlight 3 et WPF reposent tous deux sur le même langage HLSL ce qui permet d'utiliser les mêmes effets de filtre personnalisés sur les deux plateformes.

• us version

J'ai récemment eu besoin de contrôles personnalisables de type ColorPicker et ColorChooser, n'en trouvant pas, je les ai conçu from scratch, voici une démo.

Ceux-ci sont en version bêta mais je pense fournir une version finale d'ici le 15 novembre. En attendant, si vous souhaitez tester ces contrôles et télécharger la dll pour test dans SL3, c'est ici.

Ps : le plugin Silverlight pour WordPress fourni par Tim Heuer est vraiment performant et très utile, merci à lui, je n'utiliserai plus que cette solution

• us version

Voici une représentation visuelle des équations de Mr rober Penner en Silverlight, vous remarquerez quelle n'y sont pas toutes . Vous pouvez retrouver la classe TweenedEquations ici.

• us version

Je met aujourd'hui en ligne la version 2 de la librarie Tweened. Tweened est une librairie open-source en CSharp 3 permettant de générer des animations dynamiquement. Tweened est sous licence GNU General Public Licence v3.

Le principal objectif est d'animer n'importe quel objet visuel xaml de manière simple et efficace. Pour utiliser Tweened, il suffit juste de référencer la dll Tweened.dll au sein d'un projet Silverlight 2. Vous aurez alors la possibilité d'animer de manière simplifier, une couleur, une propriété simple comme l'opacité, et même les noeuds RenderTransform. Tweened fourni beaucoup d'avantages comme l'autoReverse d'une animation, le fait de pouvoir décaler une animation ou une séquence via la propriété BeginTime , la possibilité de modifier la vitesse à laquelle se déroule l'animation via SpeedRatio,etc... Pour simplifier, Tweened vous aide à animer des objets visuels via une ou deux lignes de code C# au lieu de créer les animations au sein de Blend. L'idée général d'une telle librairie est que les animations dynamiques générées par code sont plus faciles à crées et à maintenir. La syntaxe pour créer des tweens a été conçue afin de proposer la manière la plus simple de coder tout en proposant des fonctionnalités avancées comme la diffusion d'événements de fin de lecture ou encore la gestion de séquences au sein d'une animation. http://library.tweened.org/examples/menu/ En interne la classe Tween crée deux Storyboards, le premier gère toutes les séquences à l'aller, le second gère toutes les séquences au retour, afin de pouvoir proposer l'animation opposée. Chacun de ces Storyboards contient des séquences sous forme de DoubleAnimation ou de ColorAnimation. Chaque séquence peut cibler indifféremment un objet et une propriété, par exemple l'objet rectangle et sa propriété X ou Angle. Un seul tween peut donc animer plusieurs objets indépendants les uns des autres et constituer une animation complexe. Pour finir il faudra spécifier le type d'équation de mouvement et la durée dont vous aurez besoin pour chaque séquence, ainsi faire rebondir une balle ou créer des menus animés devient un jeu d'enfant. URL :: http://library.tweened.org/ Online Documentation :: http://library.tweened.org/doc/html/ Chm Documentation :: http://library.tweened.org/doc/Tweened.chm

Silverlight 2 ReleaseCandidate est officiellement disponible. Cette nouvelle version permet aux développeurs de mettre à jour leur contenu ou API existante pour la version finale. Celle-ci n'est pas destiné au grand public mais introduit plusieurs nouveautés qui font de Silverlight une solution compétitive :

• La première consiste au déploiement d'un service Pack pour Expression Studio. Blend 2 final se verra donc attribuer un nouveau type de projet Silverlight 2 application. Le temps des versions intermédiaires 2.5 de Blend est donc bien terminé pour ceux qui veulent créer du contenu en Silverlight 2 finalisé, c'est tout de même beaucoup plus logique tout ça . Par contre, je vous conseille fortement de désinstaller tous les outils présents en surcouche de Visual Studio 2008 puis d'installer le service pack 1 Visual Studio 2008 puis les Silverlight 2 tools rc0 disponible pour ce service pack.
• La seconde nouveauté attendues sont les nouveaux composants ComboBox, PasswordBox ainsi que la ProgressBar. Le calendrier et le Datagrid font également partie de la fête.
• Tous les composants ont un look par défaut amélioré par rapport aux précédentes versions, bien plus conviviale tout ça.
• Amélioration du moteur de rendu grâce à l'utilisation par défaut d'ancrage aux pixels (l'équivalent de ce que l'on a dans flash pour les trait simples), ainsi on évite les effets de bords sur les contours de composants (le flou par exemple).
• gestion du visualState manager améliorée plus performante et moins bogguée.

Je n'ai pas encore tout testé mais la première chose sera de vérifier si la création et l'invocation dynamique de DoubleAnimation est corrigée, de vérifier également que tout ce qui était prévu dans le chm de la bêta 2 est conforté je pense à certaines propriétés qui n'était pas disponibles. Pour finit de voir si les quelques fonctions accessibles sur la DLR sont bien portées, je pense au FullScreen par exemple.

An tout cas, la nouvelle librairie Tweened version C# sera pour sa part prête d'ici peu, sans doute 1 ou 2 semaines, avec la doc et un maximum d'exemples Concret, vous pouvez retrouver la documentation en ligne ici avec un exemple ici, quelques modifications sont en cours mais peu de chose devrait changer... Pour rappel, le projet google est quand à lui disponible ici, Tweened est totalement OpenSource...

Salut à tous,

je travaille en ce moment sur un certain nombre de tutoriaux videos concernant Silverlight 2. Celui-ci est le premier d'une série de 15, les autres tutoriaux seront également disponibles sur FlashXpress.net. Vous y apprendrez l'utilisation de la librairie Tweened, le modèle de document Visual Studio 2008 contenant une intégration Javascript ainsi qu'une méthode pour déclencher les tweens via c#.

Salut à tous,

En attendant la version c# pour Silverlight 2 de cette librairie, je mets à disposition la version Javascript qui est aussi bien valable pour les projets Silverlight 1 que pour les projets Silverlight 2. Je mets également à disposition un template pour Silverlight 2 intégrant Tweened. J'apporte tout de même une légère amélioration en ajoutant une classe statique donnant accès aux équations de Tweened. Dès que j'aurai le temps, je ferai de même concernant les propriétés Tweenable. En attendant ceux qui veulent tester la nouvelle librairie peuvent la télécharger sur cette page...

Salut à tous,

Voici l'exemple d'un diaporama que j'ai fais il y a quelques temps pour les besoins d'un mini Tutorial pour FlashXpress.net, vous pouvez retrouver ce tutorial ici. J'utilise la librairie Tweened pour faire les effets de fondu et c'est vraiment très simple à réaliser pour le coup

On m'a très souvent poser cette question : que faut-il pour développer une application Silverlight ?

    J'avoue que la réponse a évolué au cours du temps. Les pré-requis logiciels pour concevoir une telle application ont souvent changé, notamment avec la mise à jour des logiciels d'authoring ou la mise à jour des systèmes d'exploitation. Je crée une nouvelle page pour répondre à cette question. Celle-ci sera sans doute mise à jour dans l'avenir. Vous y trouverez les liens vers les softs et quelques petits conseils...