Blog de Samuel Blanchard

Vous avez besoin de jouer une mélodie en boucle ou des bruits de lasers pour votre jeu ou votre application orientée son ? Vous ne savez pas comment faire en UWP ? Cet article est fait pour vous !

Pour commencer, il est possible de jouer des sons avec MediaPlayerElement mais ce n’est pas vraiment la solution idéale car il faudra stocker autant d’instance de MediaPlayerElement que de sons. De plus il y a souvent un petit délai lorsque l’on lance le son avec ce contrôle. On préférera donc une solution plus professionnelle.

Au début d’UWP, la manipulation du son, s’effectuait via une librairie en C++ pas toujours très simple d’accès : XAudio2. Heureusement, Microsoft, a penser aux développeurs C# en ajoutant AudioGraph dans sa boite à outils.

Cette classe permet d’ouvrir des fichiers audio au format mp3, wav, wma et m4a.

AudioGraph permet de créer des noeuds d’entrée (en général par le biais de fichier audio) que l’on peut associer à des noeuds de sortie (carte son ou fichier audio de sortie). Il est également possible de mixer différents noeuds d’entrées. Ce n’est pas très compliqué mais c’est assez verbeux en terme d’écriture.

Pour simplifier l’accès à cette classe je viens d’écrire une petite librairie permettant de faire le travail pour vous (hourra !) : AudioPlayer

Les bases

Avant tout de chose on va créer une instance de de la class AudioPlayer. AudioPlayer permet d’associer un fichier audio à une clé pour faciliter son stockage. Comme AudioPlayer est très souple d’utilisation, vous pouvez lui fournir le type de clé que vous souhaitez (entier, string, …) . Par exemple j’aime bien utiliser des enums comme clé représentant mes sons (AudioKeys), AudioPlayer sera donc déclaré ainsi :

// key for the sound dictionnary of the AudioPlayer
enum MyAudioKeys
{
   Loop,
   Connected,
   Connected10Channels
}

AudioPlayer<MyAudioKeys> audioPlayer = new AudioPlayer<MyAudioKeys>();

On pourra ensuite l’initialiser :

await audioPlayer.InitializeAsync();

Et enfin ajouter des sons associé à nos clés :

await audioPlayer.AddSoundFromApplicationAsync(MyAudioKeys.Loop, "ms-appx:///Assets/Sounds/Loop.wav");

await audioPlayer.AddSoundFromApplicationAsync(MyAudioKeys.Connected, "ms-appx:///Assets/Sounds/Connected.wav");

Il est possible d’ajouter des son à partir d’un StorageFile (méthode AddSoundAsync) ou, comme dans l’exemple, d’une uri absolue pointant vers un fichier dont l’action de génération est “Content” (méthode AddSoundFromApplicationAsync).

Un son peut être retiré d’AudioPlayer avec la méthode RemoveSound associé à sa clé. RemoveSound peut être appelé également sans clé si vous désirez retirer l’ensemble des sons de la librairies. Si vous n’avez plus besoin de son dans votre application, c’est une bonne pratique d’appeler RemoveSound qui disposera correctement les noeuds d’entrée utilisées dans AudioPlayer.

Let’s play !

Pour jouer les sons que vous avez préalablement stockés à l’aide de la clé vous avez le choix entre trois méthodes :

• PlayLoop : vous permet de jouer un son en boucle.
• PlaySound : Vous permet de jouer un son immédiatement, sans attendre sa fin.
• PlaySoundAsync : Vous permet également de jouer un son mais en attendant sa fin.

audioPlayer.PlayLoop(MyAudioKeys.Loop);
audioPlayer.PlaySound(MyAudioKeys.Connected);
await audioPlayer.PlaySoundAsync(MyAudioKeys.Connected);

Si vous testez la démo fournit avec la librairie vous constaterez que lorsque vous lancer le son ‘Connected’, par exemple, puis relancer quelques secondes après ce même son, alors qu’il continue toujours de jouer, il sera stoppé pour être joué de nouveau. Malheureusement, ce n’est pas toujours le comportement souhaité. C’est particulièrement le cas dans les jeux de tir ou chaque coup de feu nécessite un nouveau canal sonore. Normalement ce comportement n’est pas supporté par AudioGraph mais AudioPlayer le simule en ajoutant un noeud d’entrée par canal sonore désiré.

await audioPlayer.AddSoundFromApplicationAsync(MyAudioKeys.Connected10Channels, "ms-appx:///Assets/Sounds/Connected.wav", 10); // 10 canaux de rajoutés

audioPlayer.Play(MyAudioKeys.Connected10Channels); // le son peut être simultanément joué 10 fois sans être interrompu.

Pump up the volume !

Il est possible de fixer individuellement le volume du son à jouer en rajoutant un paramètre volume sur les méthodes Play. La valeur du volume est normalisée de 0 à 1 (un volume de 50% sera exprimé par 0.5).

// Play with a 50% volume 
audioPlayer.PlaySound(MyAudioKeys.Connected, 0.5);

Le volume peut être également ajusté via la méthode SetVolume

audioPlayer.SetVolume(MyAudioKeys.Loop, 0.25);

Un volume global peut être également fixé via la propriété Volume de AudioPlayer

audioPlayer.Volume = 0.75;

Il est parfois pratique de pouvoir coupez globalement le son de l’application en conservant le volume d’origine. C’est possible par le biais de la propriété IsMute et de la méthode SwitchMute qui passe d’un état à un autre.

// passe le volume général à 75%
audioPlayer.Volume = 0.75;
// coupe le volume
audioPlayer.IsMute = true;
// remet le volume à 75%
audioPlayer.SwitchMute();

Stop !

pour stopper un son en train d’être joué, il suffit d’appeler la méthode Stop avec la clé du son qui doit être stoppé.

audioPlayer.Stop(MyAudioKets.Loop); // Arrête la mélodie joué en boucle

Il également possible d’arrêter tous les sons en train d’être joués.

audioPlayer.Stop();

Conclusion

Vous avez maintenant toutes les clés en main pour gérer parfaitement l’environnement sonore de vos applications et de vos jeux.

Vous pouvez trouver le code de la librairie AudioPlayer et un exemple de fonctionnement sur GitHub :

https://github.com/samoteph/AudioPlayer

Slateview est un contrôle UWP qui permet d’afficher une image Bitmap et éventuellement un fond qui reprend l’image en la floutant.

On l’instancie en XAML de cette manière.

<Page 
    ...
    xmlns:my="using:SamuelBlanchard.Xaml.Controls.BlurPixelView" 
>
    <my:SlateView x:Name="slateView"/>
</Page>

Chargement d’une image

Pour charger une image par exemple en provenance d’une URI ou d’un StorageFile, on peut utiliser les méthodes suivantes :

await slateView.LoadImage(new Uri("ms-appx:///Assets/Images/House.jpg")); // par Uri
await slatView.LoadImage(myStorageFile); // avec un storageFile

Le chargement par Uri ne permet que l’utilisation des schemes ms-appx: et ms-data:

Il est possible également de charger une image par Uri en XAML (avec les mêmes contraintes que plus haut)

<my:SlateView 
  x:Name="slateView" 
  SourceUri="ms-appx:///Assets/Images/House.jpg"
/>

Affectation d’un bloc de pixels

Lorsque SlateView charge une image il écrit dans ces propriétés :

• Pixels : Les data bruts de l’image au format BGRA8
• PixelWidth : La longueur en pixel de l’image
• PixelHeight : La hauteur en pixel de l’image

Ces propriétés seront ensuite utilisées pour afficher l’image à l’aide de Win2D.

Il est possible d’utiliser d’autres méthodes que le chargement d’image pour affecter ces propriétés. Elles permettent de prendre en charge des paramètres comme un tableaux de byte, WriteableBitmap, SofwareBitmap en passant par la VideoFrame. Il est ainsi facile de connecté SlateView à une caméra ou à une vidéo.

// Affectation par tableau de byte BGRA8 et taille
public void SetPixels(byte[] pixels, int pixelWidth, int pixelHeight)
// Affectation par WriteableBitmap
public void SetPixels(WriteableBitmap bitmap)
// Affectation par VideoFrame
public void SetPixels(VideoFrame frame)
// Affectation par SoftwareBitmap
public void SetPixels(SoftwareBitmap bitmap)

La méthode SetPixels permet d’afficher une image à partir d’un tableau de pixels. Elle n’effectue pas de copie interne du tableau mais passe sa référence à un CanvasBitmap. C’est une méthode d’affichage très rapide sur lesquelles se repose toutes les autres méthodes d’affectation.

Créer un bloc de pixels vide

Si vous ne désirez pas charger une image il est possible de créer une image vide de taille quelconque en Code-Behind.

public void CreatePixels(int pixelWidth, int pixelHeight)
public void CreatePixels(int pixelWidth, int pixelHeight, Pixel clearPixel) // avec une couleur

Dessiner dans le tableau de pixels

SlateView est capable de lire ou d’écrire certaines pixels de l’image :

public bool SetPixel(int x, int y, byte r, byte g, byte b, byte a = 0xFF) // Ecriture d'une pixel en position x,y
public bool SetPixel(int x, int y, Pixel pixel) // Ecriture d'une pixel en position x,y
public Pixel GetPixel(int x, int y) // Lit une pixel composée des valeurs r,g,b,a à la position x,y.

Il est également possible de nettoyer l’image :

public void ClearPixels(byte r = 0x00, byte g = 0x00, byte b = 0x00, byte a = 0xFF) // nettoyage de l'image avec la couleur r,g,b,a
public void ClearPixels(Pixel pixel)

Convertir les pixels

SlateView autorise la convertion des Pixels en WriteableBitmap, SoftwareBitmap et SoftwareBitmapSource.

public WriteableBitmap GetWriteableBitmap()
public SoftwareBitmap GetSoftwareBitmap()
public async Task<SoftwareBitmapSource> GetSoftwareBitmapSourceAsync()

Fond et gestion du flou

Lorsque vous chargez une image ou affectez la propriété Pixels, une image de fond est automatiquement affiché sous l’image. L’image de premier plan est affiché en mode Uniform alors que celle du fond l’est en mode UniformToFill. Bien que l’image de fond soit allongé elle n’est pas pour autant affichée complètement. Les performances sont donc conservées.

Comme on le voit sur l’image ci-dessus, l’image de fond est floutée. Il est possible de faire varier le blur de l’image grâce ces paramètres :

<my:SlateView             
    AllowBlur="True"
    BlurEffectAmount="12"
    BlurEffectBorderMode="Hard"
    BlurEffectOptimization="Speed"
    />

Vous pouvez également faire varier la couleur de fond et l’opacité de l’image de fond pour encore plus de précision dans l’affichage.

<my:SlateView          
    BackgroundImageOpacity="0.5"
    Background="Black"
    />

Interpolation et marge

Il est possible également de gérer une marge pour l’image de premier plan (ImageMargin) et de changer l’interpolation des images (fond et premier plan) grâce à la propriété ImageInterpolation. Si l’image est zoomé, en utilisant la valeur NearestNeighbor pour ImageInterpolation vous obtiendrez un affichage pixelisé. Les autres permettront un affichage plus doux.

<my:SlateView 
    ImageInterpolation="NearestNeighbor"
    ImageMargin="30"
    />

Selection des elements à afficher

Vous pouvez sélectionner facilement les éléments de SlateView que vous désirez afficher grâce à la propriété ElementShown. Les valeurs possibles sont :

• None : Aucun element n’est affiché (à part la couleur de fond)
• FrontAndBack : L’image de premier plan et de fond sont affichées (valeur par défaut)
• FrontOnly : Seule l’image de premier plan est affichée
• BackOnly : Seule l’image de fond est affichée.

Evenements

SlateView repose sur Win2D et dispose des mêmes événements qu’un CanvasAnimatedControl classique. Une exception en revanche, l’événement Draw n’existe pas mais est remplacé par plusieurs événement permettant de prendre la main entre les phases de dessin des images pour un meilleur contrôle.

• CreateResources : Même que Win2D. Initialisation des ressources
• Update : Même que Win2D. On peut calculer les pixels de l’image si besoin. Si vous désirez affecter des pixels c’est l’événement à privilégier.
• DrawStart : Début du dessin
• DrawBack : L’image de fond vient d’être dessiné (avec le blur)
• DrawFront : L’image de premier plan est dessiné
• DrawStop : Fin de l’evenement Draw

Enjoy !

Grâce à SlateView, vous avez toutes les clés en main pour afficher des pixels rapidement et avec élégance !

Vous pouvez retrouver le code source de SlateView sur mon GitHub

https://github.com/samoteph/SlateView

Vous venez de créer un superbe contrôle et désirez que le monde entier puisse l’utiliser dans un package Nuget ou directement dans un autre projet UWP ?

Pour le partager vous avez pris soin de le construire à l’intérieur d’une librairie (DLL). Si vous pensez qu’il suffit simplement d’ajouter la DLL dans un projet pour que le contôle fonctionne, vous tomberez surement sur cette exception :

Impossible de copier le fichier “C:\Users\Sam.nuget\packages\pixelcontainer\1.1.1\lib\uap10.0\SamuelBlanchard.UI.Panels\SamuelBlanchard.UI.Panels.xr.xml”, car il est introuvable. App10

ou en anglais :

Could not copy the file “C:\Users\Sam.nuget\packages\pixelcontainer\1.1.1\lib\uap10.0\SamuelBlanchard.UI.Panels\SamuelBlanchard.UI.Panels.xr.xml” because it was not found. App10

Cette exception, pas très agréable, vous indique qu’il manque des fichiers à votre librairie. Il faut donc les générer en cochant “Generate library layout” dans l’onglet “Build”

Notez en Français, le petit problème d’affichage :

En buildant de nouveau la librairie avec cette option, de nouveaux fichiers et dossiers seront générés.

Il suffit maintenant d’ajouter le fichier “.dll“,” .pri” ainsi que le dossier qui correspond au namespace du contrôle (ici SamuelBlanchard.UI.Panels) dans le nouveau projet ou le packet Nuget pour que tout fonctionne normalement !

PS : En WPF vous pouvez juste mettre la DLL et cela fonctionnera directement 😉