Enrichir les sprites textures, défilement, transformation, animation

Le nombre de FPS (Frames Per Second), c’est-à-dire la quantité d’images affichées par seconde, deviendra vite une de vos plus grandes obsessions. En effet, plus ce nombre est élevé, plus une animation semble fluide. Si vous effectuez un grand nombre de calculs qui ralentissent l’apparition de chaque image, votre jeu risque de donner une impression de saccades.Créez tout d’abord un nouveau projet baptisé « ChapitreSix », renommez la classe Game1 en ChapitreSix et importez la classe Sprite du chapitre 3. Pensez également à modifier l’espace de noms. Ajoutez ensuite une image au gestionnaire de contenu. Pour le début de ce chapitre, c’est l’image GameThumbnail.png, située à la racine de votre projet, qui sera utilisée. Créez alors un sprite qui utilise cette image et affichez-le. Votre projet devrait maintenant ressembler à celui visible sur la figure 6-1. Récapitulons ci-dessous le code de la classe ChapitreSix.

Rappelons, pour mémoire, que texture correspond à la texture à afficher, position à la position du coin supérieur gauche de l’image et Color.White à la teinte à appliquer à la texture, celle utilisée ici correspondant à une teinte nulle.La surcharge de la méthode Draw() que nous savons utiliser pour le moment est classée comme étant la deuxième par Visual Studio. À quoi correspond donc la première ? Faites simplement défiler l’ensemble des surcharges avec les flèches haut et bas de votre clavier. Les paramètres attendus par cette première surcharge sont visibles sur la figure 6-3.Seul le deuxième paramètre diffère de la surcharge que nous connaissons déjà. Là où la méthode attendait un Vector2 correspondant à la position du coin supérieur gauche de la texture, elle attend à présent un objet de type Rectangle nommé destinationRectangle.

fait une paire de coordonnées X et Y, ainsi qu’une largeur et une hauteur. Nous pouvons donc facilement déduire le rôle de ce rectangle dans cette surcharge : la texture le remplira, c’est-à-dire qu’elle occupera sa position et qu’elle s’adaptera à sa taille, en se redimensionnant si nécessaire.Comme vous pouvez le voir en anglais dans la description visible sur la figure 6-6, ce rectangle permet de sélectionner la portion de la texture qui devra être dessinée. Si vous décidez de passer null plutôt qu’un objet Rectangle, c’est toute la texture qui sera dessinée.Passons à la quatrième surcharge. Comme vous pouvez le constater sur la figure 6-8, elle est très similaire à la troisième surcharge, à la différence qu’elle prend un couple de coor- données (Vector2) comme position de la texture à l’écran plutôt qu’un objet de type Rectangle. Adaptez votre classe pour qu’elle utilise cette surcharge plutôt que la troisième. La fonc- tionnalité de redimensionnement de la texture n’est pas disponible avec cette surcharge, cependant vous la retrouverez dans la cinquième surcharge ou sous la forme de changement d’échelle.

Faire défiler le décor : le scrolling

Nous allons maintenant découvrir une première utilisation de la sélection d’une portion de texture. Il s’agit du scrolling. Derrière ce mot anglais se cache tout simplement la notion de défilement de l’écran dans un jeu vidéo en deux dimensions. Cette technique est utile lorsque l’intégralité du niveau ne peut être affichée sur un seul écran ; l’arrière-plan se déplace alors suivant les mouvements du joueur.1. Pour commencer, rendez-vous sur le site du développeur et MVP (Microsoft Most Valuable Professional) George Clingerman : http://www.xnadevelopment.com. Naviguez ensuite jusqu’à la catégorie sprites et récupérez l’une des images d’arrière-plan qu’il met gracieusement à la disposition des internautes. Vous pouvez aussi bien utiliser une image de votre cru si vous le désirez.L’arrière-plan que nous avons retenu pour illustrer le principe du défilement a une résolution de 400 par 300 pixels. Redimensionnez donc la fenêtre de manière à ce qu’elle n’affiche pas l’intégralité de l’image dans un seul écran. Utilisez par exempleune résolution de 200 par 300 pixels, il s’agira donc de faire un scrolling horizontal.Enfin, dans la méthode Update(), modifiez la coordonnée X de la position du rectan- gle source. Augmentez-la si l’utilisateur appuie sur la flèche droite, diminuez-la dans le cas contraire. Remarquez que cette coordonnée est en dehors de la taille réelle de la texture, son extrémité (gauche ou droite selon les cas) est répétée à l’infini. Dans le cas présent, il s’agit donc ici de la couleur bleu ciel, la même que l’arrière-plan.