Space shooter : Aron & The Aliens
Chapitre 11 : Construisons notre background
Tutoriel présenté par : Robert Gillard (Gondulzak)
Publication : 15 juin 2014
Dernière mise à jour : 22 novembre 2015
Préliminaires
Faisant suite à notre série de tutoriels Xna, nous allons nous pencher maintenant sur un projet beaucoup plus important. 
En effet, comme je l'avais déjà indiqué dans les forums, nous commencerons aujourd'hui l'étude d'un jeu complet de spaceshoot que nous allons réaliser en une quinzaine de chapitres et qui va propulser notre ami Aron et son astronef dans l'espace, à la rencontre de dangereux aliens. 
Nous ferons un projet par chapitre, et vous pourrez ainsi à la fin de chacun d'entre-eux, voir vous-mêmes le résultat de ce que vous aurez appris au cours de ceux-ci.
J'ai essayé la plateforme MONOGAME sous Visual Studio 2013 mais certains fichiers du content pipeline ne sont pas encore implémentés sous cette plateforme et nous ne pourrons donc pas actuellement compiler ce jeu avec Visual Studio 2013. Il nous faut donc continuer nos compilations avec Visual C# 2010.
Pour terminer ces préliminaires, je vous demanderais de bien vouloir utiliser le forum Remarques sur les tutoriels / Big tuto de space shoot sous Xna : Aron et les aliens pour toute question relative au projet, critique ou idée d'amélioration éventuelle du jeu. Vos réactions et retours seront profitables à la Communauté. Merci ! 
Bien, assez de blabla maintenant et rendons-nous de ce pas vers la « Rampe de lancement » !
Le projet « AronAndTheAliens01 »
Créez un nouveau projet et nommez-le « AronAndTheAliens01 ». Dans la fenêtre de l'explorateur de solutions, à droite, faites un clic droit sur Game1.cs et renommez ce fichier en AronAndTheAliens01.cs
Une nouvelle fenêtre va s'ouvrir et vous demander si vous voulez renommer dans ce projet toutes les références à l'élément de code Game1. Cliquez sur Oui.
Pendant que nous sommes dans la fenêtre de l'explorateur, faites un clic droit sur AronAndTheAliens01Content(Content) et ensuite cliquez sur « Ajouter nouveau dossier » et nommez celui-ci « Backgrounds ». Il s'agit du dossier où nous allons placer nos deux images de background.
Nous allons maintenant créer notre première classe. Faites alors un clic droit sur le nom du projet que vous voyez en gras en haut de la fenêtre de l'explorateur de solutions et cliquez sur «Ajouter Classe...».
Dans la nouvelle fenêtre qui apparaît, au bas de celle-ci, remplacez Class1.cs par Background.cs
Cliquez sur Ajouter. Supprimez ensuite le code se trouvant à l'intérieur de la fenêtre et remplacez-le par le code ci-dessous. Comme d'habitude, suivront les explications nécessaires.
Remarque : A partir du prochain tutoriel, je considèrerais comme acquis tous ces détails de manipulation dans les fenêtres de l' IDE et ils ne seront donc plus reproduits dans un souci de concision. Ceux d'entre-vous qui auraient encore des hésitations avec certaines manipulations dans l' IDE pourront se reporter à ce tutoriel et aux tutoriels précédents.
1 – Classe Background : Le code
|
//Background.cs
//Mise en place des backgrounds en parallaxe
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Content;
namespace AronAndTheAliens01
{
class Background
{
#region Déclaration et initialisation des variables de la classe Background
// Les textures qui contiendront les images de nos backgrounds
Texture2D background, parallax;
//Dimensions du viewport
int viewportWidth = 1280;
int viewportHeight = 720;
//Dimensions de l'image background
int backgroundWidth = 1920;
int backgroundHeight = 720;
//Dimensions de l'image parallaxe
int parallaxWidth = 1680;
int parallaxHeight = 480;
//Offsets
int backgroundOffset;
int parallaxOffset;
#endregion
#region accesseurs
//Accesseur de modification de positionnement de l'image background et retour de son offset
public int BackgroundOffset
{
get { return backgroundOffset; }
set
{
backgroundOffset = value;
if (backgroundOffset < 0)
{
backgroundOffset += backgroundWidth;
}
if (backgroundOffset > backgroundWidth)
{
backgroundOffset -= backgroundWidth;
}
}
}
//Accesseur de modification de positionnement de l'image parallaxe et retour de son offset
public int ParallaxOffset
{
get { return parallaxOffset; }
set
{
parallaxOffset = value;
if (parallaxOffset < 0)
{
parallaxOffset += parallaxWidth;
}
if (parallaxOffset > parallaxWidth)
{
parallaxOffset -= parallaxWidth;
}
}
}
#endregion
#region Constructeur
// Constructeur avec passage du ContentManager
public Background(ContentManager content)
{
background = content.Load<Texture2D>("Backgrounds/PrimaryBackground");
backgroundWidth = background.Width;
backgroundHeight = background.Height;
parallax = content.Load<Texture2D>("Backgrounds/ParallaxStars");
parallaxWidth = parallax.Width;
parallaxHeight = parallax.Height;
}
#endregion
public void UpdateBackground()
{
//Défilement en continu du background
BackgroundOffset -= 6;
ParallaxOffset -= 9;
}
#region Fonction de dessin
public void Draw(SpriteBatch spriteBatch)
{
// Dessine le background
spriteBatch.Draw(
background,
new Rectangle(-1 * backgroundOffset,
0, backgroundWidth,
viewportHeight),
Color.White);
// Si le côté droit du background réintègre l'écran défini ici par viewportWidth
// on dessine une seconde copie du background à cet endroit
if (backgroundOffset > backgroundWidth - viewportWidth)
{
spriteBatch.Draw(
background,
new Rectangle(
(-1 * backgroundOffset) + backgroundWidth,
0,
backgroundWidth,
viewportHeight),
Color.White);
}
// Dessine le champ d'étoiles en parallaxe
spriteBatch.Draw(
parallax,
new Rectangle(-1 * parallaxOffset,
0, parallaxWidth,
viewportHeight),
Color.SlateGray);
// Si le joueur dépasse le point où se termine le champ d'étoiles sur l'écran actif
// on dessine une seconde copie de l'image parallaxe
if (parallaxOffset > parallaxWidth - viewportWidth)
{
spriteBatch.Draw(
parallax,
new Rectangle(
(-1 * parallaxOffset) + parallaxWidth,
0,
parallaxWidth,
viewportHeight),
Color.SlateGray);
}
}
#endregion
}
}
|
Nous avions parlé du background dans le sens où nous voulions avoir un effet de défilement en parallaxe, à l'arrière-plan. Nous avons donc deux images étoilées qui vont défiler vers la droite, mais à des vitesses différentes.
La première image, dénommée «PrimaryBackground» possède des dimensions de 1920 x 720 pixels. Un second champ d'étoiles, dénommé «ParallaxStars», de 1620 x 480 pixels, défilera donc par dessus, également vers la droite mais à une vitesse un peu plus rapide que la première image (les images sont incluses dans le projet téléchargeable ci-dessus ).
Bien, voyons notre code :
Vous voyez en premier lieu que nous introduisons pour la première fois le concept de « Régions ». Celles-ci débutent toutes avec une expression #region et se terminent obligatoirement par une expression #endregion. Ces régions sont très importantes dès que l'on aborde des projets conséquents car elles rassemblent, à l'intérieur de ces expressions, des données, groupes de données, ou fonctions se rapportant à un même domaine.
Vous verrez en installant le projet sur votre IDE que ces régions sont soit précédées d'un petit + soit précédées d'un petit – selon que vous voulez ou non faire apparaître ou cacher une région quelconque. Vous comprendrez très vite que pour se retrouver facilement dans un projet conséquent, ce concept de régions rend bien plus aisé la recherche d'éléments ou d'erreurs dans un bout de code.
Ceci étant acquis, observons maintenant le reste de notre code. 
Déclarations et initialisations des variables de la classe
Nous déclarons en premier les textures que nous allons utiliser dans la classe, soit :
Texture2D background, parallax;
Les variables viewportWidth et viewportHeight déterminent ensuite les dimensions maxi acceptables par notre jeu mais nous verrons plus tard que nous allons ramener les dimensions de notre fenêtre de jeu à 800 x 480 pixels avec la possibilité de faire un plein écran si nous le désirons.
Les quatre entiers suivants déterminent la largeur et la hauteur de nos images. Nous aurons ensuite besoin de deux nouvelles valeurs désignées par backgroundOffset et parallaxOffset, qui détermineront quant à elles, la distance à partir de laquelle nous pourrons commencer à dessiner nos images. Ces variables contiendrons les positions les plus à gauche à partir desquelles nos textures vont commencer à se dessiner.
Une autre manière de vous expliquer ce concept est de vous dire que nous allons commencer à dessiner notre background à une distance égale à «backgroundOffset» pixels AVANT le début de notre écran de jeu.
Propriétés
Bien, on continue l'analyse de notre code. Suivent ensuite deux Propriétés publiques, dénommées BackgroundOffset et ParallaxOffset qui vont nous permettre de les initialiser en dehors de la classe.
Nous avions vu lors d'un précédent chapitre qu'une propriété est une manière simple de créer des méthodes get et set qui permettent d'accéder à des données d'une classe en dehors de celle-ci.
Nos méthodes publiques vont donc nous permettre d'accéder aux valeurs des variables backgroundOffset et parallaxOffset afin de modifier le positionnement de nos images background et
parallaxe, et d'en retourner celui-ci.
Constructeur
Vient ensuite notre constructeur dans lequel nous devons passer le ContentManager en paramètre car c'est lui qui va charger nos textures à partir de la classe Background ainsi que procéder à l'initialisation des dimensions de nos images.
Fonction UpdateBackground()
La fonction UpdateBackground(), quant à elle, assure le défilement de nos images en continu. Vous voyez que les valeurs données à BackgroundOffset et ParallaxOffset sont différentes, ce qui permet de faire défiler nos images à une vitesse différente. Vous pouvez bien entendu changer ces vitesses de défilement afin de voir d'autres possibilités de rapidité de défilement mais je vous conseille quand-même de remettre ensuite les valeurs initiales du projet (6 et 9) afin de garder un effet visuel en harmonie avec tous les défilements d'images et de sprites que nous allons introduire dans les futurs tutoriels.
Fonction Draw()
Notre fonction Draw() dessine nos deux backgrounds représentés par les images «PrimaryBackground» et «ParallaxStars».
La première partie de la fonction dessine la première image background en créant un rectangle de destination où la position de départ est initialisée par l'expression -1 * BackgroundOffset. En effet, ceci va placer notre image à gauche de l'écran de jeu et la situer à un offset équivalent à BackgroundOffset.
Nous n'oublions pas que l'image va défiler vers la droite. Nous faisons donc ensuite un test sur BackgroundOffset pour voir si cette valeur est supérieure à la largeur de notre background moins la largeur du viewport. Dans ce cas, nous dessinons une nouvelle copie de l'image à cet endroit de telle sorte que la seconde copie de l'image démarre juste à l'endroit où se termine la première copie.
Dans la seconde partie de la fonction, nous faisons exactement la même chose avec l'image ParallaxStars. Nous pouvons donc maintenant compléter notre fichier AronAndTheAliens01.cs et notamment y ajouter une instance de notre classe.
2 – Fichier « AronAndTheAliens01.cs »
Retournons dans notre fichier «AronAndTheAliens01.cs».
Dans la classe AronAndTheAliens01, nous devons faire référence à notre classe Background donc juste en dessous de SpriteBatch spriteBatch, ajoutez la ligne suivante :
Background background;
Dans la fonction Initialize(), au dessus de l'instruction base.Initialize(), entrez les lignes suivantes, notre jeu se déroulera dans un écran de 800 x 480 pixels :
Dans la fonction LoadContent(), nous créons une instance de notre classe Background en passant une copie du ContentManager en paramètre :
Dans la fonction Update(), nous devons faire une mise à jour de notre background :
Et dans la fonction Draw(), nous faisons appel à la fonction Draw() de la classe Background :
Remarque : Je vais vous donner le code du fichier AronAndTheAliens01.cs pour cette fois. En effet, ce code étant appelé à s'étendre très rapidement au fur et à mesure de l'avancement des tutoriels, il ne serait pas possible d'écrire à chaque fois ce fichier. A partir du prochain tutoriel, seuls les ajouts à faire dans AronAndTheAliens.cs vous seront donnés. Les codes des fichiers des différentes classes seront, quant à eux, écrits en entier. Quoi qu'il en soit, un projet complet pourra être téléchargé lors de l'écriture de chaque tutoriel.
|
#region Description
//MERUVIA XNA TUTORIALS
//AronAndTheAliens01
//Game : Aron and the aliens
//Mise en place des backgrounds avec parallaxe
//AronAndTheAliens01.cs
//Last update : 05/06/2014
#endregion
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
namespace AronAndTheAliens01
{
public class AronAndTheAliens01 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Background background;
public AronAndTheAliens01()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}
protected override void Initialize()
{
graphics.PreferredBackBufferWidth = 800;
graphics.PreferredBackBufferHeight = 480;
//graphics.IsFullScreen = true;
//graphics.ApplyChanges();
base.Initialize();
}
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
//Textures backgrounds
background = new Background(Content);
}
protected override void UnloadContent()
{
// TODO: Unload any non ContentManager content here
}
protected override void Update(GameTime gameTime)
{
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
background.UpdateBackground();
//base.Update(gameTime);
}
protected override void Draw(GameTime gameTime)
{
//GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
background.Draw(spriteBatch);
spriteBatch.End();
base.Draw(gameTime);
}
}
}
|
Et c'est tout pour notre premier tutoriel de «Aron and the aliens». Je vous souhaite une bonne lecture et vous dis à bientôt pour le second tutoriel de notre jeu dans lequel nous allons encore remplir notre scène en faisant défiler des planètes !
En attendant, compilez ce premier projet et admirez le défilement à des vitesses différentes de deux backgrounds étoilés que vous ne pouvez voir ici mais dont je vous donne néanmoins un screenshot. 
@ bientôt !
Gondulzak.
