EDIT : Cet article a été mis à jour pour XNA 4.0

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
• Squelette générique d’un jeu 2D

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 projet 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 :

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 à afficher)
Rectangle src;
//Objet texture qui sera chargé
Texture2D sprite;
//Rectangle de destination : où l'image sera affichée sur l'écran 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 = new Rectangle();
dst.X = 300;
dst.Y = 300;
dst.Width = src.Width;
dst.Height= src.Height;
//dst.Width = 540; //On peut changer manuellement les dimensions du sprite affichée

...
}

On indique donc où se trouve notre image dans le fichier (dans le rectangle src) et où on va l’afficher sur l’écran avec  dst . Puis on charge l’image avec le ContentManager :

protected override void LoadContent()
{
...
sprite = Content.Load<Texture2D>(@"gfx/cactus");
...
}

Remarque : Content.Load est la méthode magique qui vous permettra de charger tous vos médias.

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(SpriteSortMode.Deferred,BlendState.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é.

Le SpriteSortMode permet d’indiquer quand et comment les images doivent être affichées. Avec Deferred vous vous assurez que les images ne seront affichées que quand End() sera appelé. Cela vous permet d’optimiser vos appels au spriteBatch et d’avoir de meilleures performances.

La transparence est activée par défaut (AlphaBlend). Elle peut être désactivée :

spriteBatch.Begin(SpriteSortMode.Deferred,BlendState.Opaque);

Un autre BlendState 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 :

Le dernier BlendState (NonPremultiplied) est à oublier. Avec XNA 4.0, toutes les fonctionnalités d’AlphaBlending (gestion de la transparence) ont été changées pour être plus performante et plus logique. Le NonPremultiplied permet d’avoir l’ancien AlphaBlending et sert donc simplement à la rétro-compatibilité.

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 la surcharge qui prend en compte la rotation. Vous obtenez :




rotation = (float)Math.PI/2;
...
spriteBatch.Draw(sprite, dst, src, Color.White, rotation, Vector2.Zeo, SpriteEffects.None, 1.0f);

Magnifique. Attention, détail qui peut provoquer des bugs : la rotation s’effectue ici sur le coin supérieur gauche (coordonnées (0,0)). C’est le 6e paramètre de notre appel à la fonction Draw().

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. Nous le ferons dans la prochaine partie.

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() =)