Objectifs :
Maintenant que l’on a affiché un magnifique « Hello World », il est temps de s’attaquer à des trucs plus intéressants : le chargement et l’affichage d’images
Sommaire :
- Installation et découverte
- Hello World
- >>>>>Affichage d’images, de sprites, de backgrounds
- Déplacements, collisions, rotations
- Entrées / Sorties
XNA : Affichage d’images, de sprites, de backgrounds (Draw())
Sur la base d’un nouveau projet ou sur celui du Hello World (c’est pas pour ce qu’il y avait dedans…), vous allez pouvoir charger n’importe quelle image (ou presque) pour faire ce que vous voulez.
Chargement d’images
Si vous avez suivi la partie 2, vous vous doutez que l’on va utiliser le ContentManager pour faire cela. La première étape consiste donc en l’ajout d’un fichier image à votre dossier Content.
Pour faire plus propre vous pouvez créer des sous-dossiers. Créez par exemple un dossier « gfx » et ajoutez-y votre image. Si vous n’avez pas d’image à portée de main,je vous propose celle-ci :
Ajoutez donc cette image à votre projet :
Si votre image n’était pas dans le dossier Content/gfx de votre solution, le fichier y sera copié. Vous pouvez importer tous types d’images (PNG, JPG,GIF,…), de textures DirectX (jesaisplusleformat).
Attention à la taille : Ces images sont chargées dans la RAM de votre carte graphique. Celle-ci ne supporte pas forcément de trop grosses images, essayez de vous limiter à moins de 2048 * 2048 (XNA met une erreur de toute façon).
Mais alors comment je fais pour avoir un super long background ??? Eh bien il faut ruser ! Plutôt qu’une seule grande image, il faut gérer plusieurs « petites » images. Je vous invite à voir un lien (en anglais) sur le sujet : http://www.xnadevelopment.com/tutorials/scrollinga2dbackground/ScrollingA2DBackground.shtml
Votre image insérée au projet, passons au code.
Affichage
Pour un objet sur une « scène », ici le plan (x,y) affiché à l’écran, nous avons besoin :
- De la texture (de l’image)
- De l’emplacement dans la texture (facultatif)
- Des coordonnées où l’afficher sur l’écran
- De la taille de l’image à afficher (qui peut-être différente de l’image source, XNA fait le redimensionnement)
On peut y ajouter d’autres paramètres intéressants : rotation de l’image, « flip » (retournement ?), etc.
Il faut donc ajouter quelques attributs à notre classe :
//Rectangle de sélection dans le fichier du sprite (où est l'image)
Rectangle src;
//Objet texture qui sera chargé
Texture2D sprite;
//Rectangle de destination : où il sera afficher et sa taille
Rectangle dst;
//Si on veut faire tourner le sprite
float rotation;
Pour faire propre, on instanciera la texture dans LoadContent() et les autres attributs dans le constructeur ou dans Initialize().
protected override void Initialize()
{
src = new Rectangle(0, 0, 127, 147);
rotation = 0.0f;
dst = src;
dst.X = 300;
dst.Y = 300;
...
}
On change le x et y de dst après avoir copié les données de src pour changer là où sera placé le sprite à l’écran. Puis on charge l’image avec le ContentManager :
protected override void LoadContent()
{
...
sprite = Content.Load<Texture2D>(@"gfx/cactus");
...
}
Et on affiche, dans Draw() :
spriteBatch.Begin();
spriteBatch.Draw(sprite, dst, src, Color.White, rotation, Vector2.Zero, SpriteEffects.None, 1.0f);
spriteBatch.End();
Ce qui donne :
C’est beau, non ? Avouez qu’afficher une image est extrêmement simple… Si ça peut vous rassurer, tout est de la même difficulté 
Ces lignes sont équivalents à :
spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
spriteBatch.Draw(sprite, dst, Color.White);
spriteBatch.End();
En effet, on utilise tout le fichier donc pas besoin de spécifier l’image à choisir. Mais si vous avez une planche de sprites, alors il faut jouer avec le src pour avoir le bon sprite affiché.
La transparence est activée par défaut (AlphaBlendMode). Elle peut être désactivée (ce qui prouve que mon image est sale) :
spriteBatch.Begin(SpriteBlendMode.None);
Un autre SpriteBlendMode est disponible : Additive. Il permet d’additionner les couleurs quand plusieurs images sont superposées. Cela peut être utile pour les effets de particules. Mais pas ici :
Voyons les autres paramètres de la méthode Draw(). Celle-ci est tellement puissante qu’elle s’occupe à elle seule de tous les rendus sans problème. Affectez maintenant une valeur différente de 0 à la rotation. 1.7f par exemple (Pi/2, c’est en radians, soit un quart de tour). N’oubliez pas d’utiliser le prototype qui prend en compte la rotation. Vous obtenez :
Magnifique. Attention, détail qui peut provoquer des bugs : la rotation s’effectue sur le coin supérieur gauche (coordonnées (0,0)).
Il est possible de changer en donnant une valeur différente au paramètre origin. Ici j’ai mis Vector2.Zero mais vous pouvez mettre (en calculant les valeurs) new Vector2(milieux, milieuy) pour faire tourner le sprite sur lui-même par exemple.
Enfin, il est possible d’utiliser les SpriteEffects pour de la symétrie horizontale ou verticale (flip) :
SpriteEffect.None :
SpriteEffect.FlipHorizontally :
SpriteEffect.FlipVertically :
Nous avons fait le tour des possibilités d’affichage 2D avec XNA. Retenez que c’est simple, puissant et complet. Les images se superposent dans l’ordre où vous les affichez, donc on affiche un fond en premier, ensuite les éléments dans l’ordre de profondeur.
Prochain chapitre : tout ce qu’on peut mettre dans Update() =)
[...] Affichage d’images, de sprites, de backgrounds [...]