Labo Dotnet Archive 2009 - 2010

Introduction

Dans ce nouveau chapitre, nous allons apprendre à afficher une image en 2D, étape indispensable à toute réalisation de jeux-vidéo.

Charger une image avec XNA 3.1

Pour afficher une image, nous avons besoin de deux classes différentes : SpriteBatch et Texture2D. Si vous vous souvenez bien, dans le chapitre précédent, nous avons pu apercevoir un objet de type SpriteBatch dans le code par défaut fournit par le Framework XNA 3.1. Il va servir à afficher une image à l’écran, en spécifiant la position, la partie de l’image à afficher, la taille, etc... Notre deuxième objet de type Texture2D va nous servir, lui, à charger notre image et pouvoir la garder en mémoire.

Pour commencer, déclarez au niveau de votre classe un objet de type Texture2D comme suit :

Pour charger l’image, tout se passe dans la méthode LoadContent de votre classe Game. Mais avant de pouvoir la mettre en mémoire à l’aide de votre Texture2D, il faut ajouter l’image au projet. Dans l’explorateur de solutions de VS 2008, faites un clic droit sur Content, puis Add -> Exisiting Item :

Sélectionnez ensuite une image que vous possédez dans l’explorateur Windows, puis cliquez sur Add. Retournons dans la méthode LoadContent. Pour charger votre image, c’est très simple. Il faut se servir du ContentManager. Celui-ci est déjà instancié dans votre classe Game. Pour l’appeler, il suffit d’accéder à la propriété Content de votre classe Game. Une fois ceci fait, nous allons utiliser la méthode Load de notre ContentManager, spécifier à la place du type générique (entre les chevrons) le type que l’on veut charger, puis passer en paramètre le nom de l’image que nous voulons charger (sans l’extension). Ce qui nous donne ceci :

Bien sûr, à la place de « xna_logo » vous écrirez le nom de votre image.

Voilà pour cette première partie, vous avez chargez votre image ! Prochaine étape : l’affichage.

Afficher une image

Voyons d’abord le système de coordonnées pour placer nos images à l’écran. En mathématiques au lycée, quand nous faisions un graphique, notre axe y était dirigé vers le haut, et notre axe x vers la droite. En XNA, l’axe y est dirigé vers le BAS, non vers le haut, et l’axe x vers la droite. Le centre de notre repère (c'est-à-dire le point de coordonnées 0 ;0) est le coin en haut à gauche de la fenêtre. La position d’une image correspond à la position de son coin supérieur gauche. Par exemple, si on veut placer une image à 100 pixels du haut de la fenêtre, et 100 pixels de la gauche de la fenêtre, on placera en fait le coin supérieur gauche de l’image à +100 pixels sur y (et non -100 pixels) et +100 pixels sur x.

Pour afficher une image, c’est très simple. Nous allons utiliser notre objet de type SpriteBatch. Celui-ci est instancié par défaut dans votre code par le Framework, vous n’avez donc pas à le faire vous-même. Pour dessiner à l’écran, tout se passe dans la méthode Draw de la classe Game. Pour dessiner, il faut d’abord effacer tout ce qu’il y a à l’écran, puis dire à la carte graphique que vous voulez afficher telle image à tel endroit sur l’écran, etc… Voici l’exemple sur lequel nous allons travailler :

La première ligne permet d’effacer note écran. L’objet GraphicsDevice utilisé ici est une propriété de la classe Game, qui contient diverses informations sur notre périphérique graphique. On appelle sa méthode Clear pour effacer l’écran avec la couleur passée en paramètre. Ensuite, on veut dire à la carte graphique qu’on veut afficher une image en 2D. Pour cela, on utilise notre objet spriteBatch. On indique à la carte graphique que nous voulons commencer à dessiner à l’aide de sa méthode Begin. Ensuite, on dessine notre image avec le spriteBatch et sa méthode Draw. Le premier paramètre de cette méthode est l’image que l’on veut afficher, le deuxième sa position, spécifiée à l’aide d’un objet de type Vector2, qui représente des coordonnées en 2 dimensions, et le dernier la couleur avec laquelle dessiner notre image. Une couleur blanche dessinera notre image telle qu’elle est, une autre couleur appliquera un filtre par-dessus. Enfin, nous indiquons que nous avons fini de dessiner avec la méthode End du spriteBatch. Voici ce que nous devons obtenir (vous aurez surement une image différente de la mienne) :

Maintenant, je vais changer la couleur de filtre de la méthode Draw. Je vais mettre une couleur rouge.

Comme vous le voyez, notre image est colorée en rouge cette fois ci.

Surcharges de la méthode SpriteBatch.Draw()

La méthode SpriteBatch.Draw que nous avons utilisé ci-dessus est présentée dans sa forme la plus basique. Il existe de nombreuses surcharges, qui permettent de pousser plus loin l’affichage de notre image. Voici un exemple :

On passe toujours en premier paramètre notre image à dessiner, et la position en deuxième paramètre. Le troisième représente la zone de notre image que l’on veut dessiner. Laisser à null pour dessiner l’image entière, ou alors spécifiez à l’aide d’un objet de type Rectangle la zone à dessiner. Ici, je dessine à partir du point de coordonnées de l’image 0 ;0 sur une largeur de 120 pixels, et une hauteur de 120 pixels. Le quatrième paramètre est le filtre de couleur de notre image. Le cinquième paramètre permet de spécifier la rotation de notre image, en radians. Ici, la méthode statique ToRadians de la classe MathHelper est utilisée pour convertir facilement des degrés en radians. Nous tournons donc notre image de 10 degrés dans cet exemple. Le sixième paramètre représente à partir de quel point de l’image nous plaçons l’objet. Ici, nous spécifions 0 ;0, ce qui veut dire que nous dessinerons notre image en prenant comme référence son coin supérieur gauche. Le septième paramètre permet de spécifier l’échelle à laquelle on dessine l’image. Ici, nous dessinons l’image à l’échelle 1, c'est-à-dire en taille réelle. Une échelle de 0.5 aurait réduit la taille de l’image par deux. Le huitième paramètre permet de faire un flip à notre image (la retourner horizontalement ou verticalement, ou pas). Ici, nous la retournons verticalement. Le dernier et neuvième paramètre (ouf !) permet de spécifier dans quel ordre nous affichons les images, mais nous étudierons cela plus tard. Voici ce que me donne cette méthode :

Nous avons bien une image tournée de 10 degrés, de laquelle on affiche seulement un rectangle de 120 pixels par 120 pixels à partir du pixel en haut à gauche de l’image, flippé verticalement.

Conclusion

Vous venez de découvrir la base de tout jeu vidéo, aussi bien en 2D, qu’en 3D (et oui, le menu et le HUD, c’est que de la 2D !!). Dans le prochain chapitre, nous allons apprendre à gérer le clavier et la souris pour pourvoir interagir avec notre jeu!

XNA