Tutoriel de développement XNA / Partie II : Mon premier jeu avec XNA 4.0 (Part 2)

Article

écrit par Yann Gilliot
il y a 0 commentaire

Dans la partie précédente nous avons créé un nouveau projet XNA. Nous allons maintenant ajouter à l’écran un sprite. Pour l’exemple nous utiliserons le logo de l’agence (logo_HD.png ) mais rien ne vous empêche de choisir autre chose. Dans le même temps, nous ajouterons une gestion des contrôles pour pouvoir déplacer notre sprite.

Ouvrez votre solution « MonPremierJeu ». Dans l’explorateur faites un clic droit sur le projet « MonPremierJeuContent » et choisissez Add > Existing Item puis choisissez votre sprite et enfin OK.

Affichez maintenant la classe Game1.cs. Dans le haut de la classe ajoutez les lignes suivantes :

1 public class Game1 : Microsoft.Xna.Framework.Game
2 {
3   GraphicsDeviceManager graphics;
4   SpriteBatch spriteBatch;
5   Texture2D logo;
6   Vector2 position;
7   TouchCollection touchCollection;
8   public const int BackBufferWidth = 480;
9   public const int BackBufferHeight = 800;

…

Nous venons d’ajouter une Texture2D qui contiendra l’image logo_HD.png qui vient d’être ajoutée. C’est cette texture qui sera affichée dans la méthode Draw().

“Vector2 position” représente la position du sprite sur l’écran.

“TouchCollection touchCollection” représente la collection de « touch » sur l’écran.

BackBufferWidth et BackBufferHeight représentent la résolution de l’écran. Par défaut sur le Windows Phone elle est de 480 par 800.

Dans le constructeur on va appliquer notre résolution au Windows Phone via le graphicsDeviceManager.

1 public Game1()
2 {
3 graphics = new GraphicsDeviceManager(this);
4 Content.RootDirectory = "Content";
5 graphics.PreferredBackBufferWidth = BackBufferWidth;
6 graphics.PreferredBackBufferHeight = BackBufferHeight;
7 
8 // Frame rate is 30 fps by default for Windows Phone.
9 TargetElapsedTime = TimeSpan.FromTicks(333333);
10 }

Dans la méthode Initialize(), on initialize la TouchCollection et la position de notre sprite au centre de l’écran.

1 protected override void Initialize()
2 {
3 touchCollection = new TouchCollection();
4 position = new Vector2(240, 400);
5 base.Initialize();
6 }

A présent dans le LoadContent dédié au chargement des Contents, ajoutez les lignes suivantes :

1 protected override void LoadContent()
2 {
3   // Create a new SpriteBatch, which can be used to draw textures.
4   spriteBatch = new SpriteBatch(GraphicsDevice);
5   logo = this.Content.Load<Texture2D>("logo_HD");
6 }

“logo = this.Content.Load<Texture2D>(« logo_HD« )” charge la resource “logo_HD” sous forme de Texture2D dans notre variable logo.

Arrivé à cette étape, tout est chargé et prêt à être utilisé dans la boucle Update/Draw. Modifiez la méthode Update en y ajoutant les lignes suivantes :

 1 protected override void Update(GameTime gameTime)
 2 {
 3   // Allows the game to exit
 4   if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
 5   this.Exit();
 6 
 7   touchCollection = TouchPanel.GetState();
 8   bool buttonTouched = false;
 9 
10   //interprete le touch sur l’écran
11   foreach (TouchLocation location in touchCollection)
12   {
13      switch (location.State)
14      {
15         case TouchLocationState.Pressed:
16         buttonTouched = true;
17         break;
18         case TouchLocationState.Moved:
19         buttonTouched = true;
20         break;
21         case TouchLocationState.Released:
22         break;
23      }
24   }
25   if (buttonTouched)
26   {
27     if (touchCollection[0].Position.X < position.X && position.X >0)
28     {
29        position.X -= 10;
30     }
31     if (touchCollection[0].Position.X > position.X && position.X <BackBufferWidth-logo.Width)
32     {
33         position.X += 10;
34     }
35     if (touchCollection[0].Position.Y < position.Y && position.Y > 0)
36     {
37        position.Y -= 10;
38     }
39     if (touchCollection[0].Position.Y > position.Y && position.Y < BackBufferHeight-logo.Height)
40    {
41       position.Y += 10;
42    }
43  }
44 
45  base.Update(gameTime);
46 }

Cette partie de code permet de modifier la position de l’image en fonction de l’endroit où l’on appuie sur l’écran par rapport à la position actuelle de notre sprite.

Il ne reste plus qu’à nous occuper de la méthode Draw(), celle-là même, qui gère le rendu graphique de notre jeu. C’est le SpriteBatch qui va appliquer le rendu graphique n’oubliez pas de l’ouvrir en début de méthode et de le refermer à la fin de la méthode.

 1 protected override void Draw(GameTime gameTime)
 2 {
 3   GraphicsDevice.Clear(Color.CornflowerBlue);
 4 
 5   spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend);
 6   spriteBatch.Draw(logo, position, Color.White);
 7   spriteBatch.End();
 8 
 9   base.Draw(gameTime);
10 }

Voilà, lancez le debug et vous devriez voir apparaitre ceci et en bougeant votre doigt sur l’écran le sprite se déplace !

Créer une Classe Sprite

Ok on a réussi à faire se déplacer un sprite sur l’écran, et c’est un bon début, mais ce n’est pas très « Objet » comme comportement. Je vous propose donc de créer un composant Sprite réutilisable, ainsi vous pourrez travailler en multi-sprite plus facilement.

Commencez par créer une nouvelle classe intitulée « Sprite ».

Dans le haut de la classe nous allons maintenant ajouter deux propriétés : la position et la texture de notre sprite

1     class Sprite
2     {
3         //Position actuelle du sprite
4         public Vector2 Position = new Vector2(0,0);
5 
6         //Texture utilisée lors de l'affichage dans la méthode Draw
7         private Texture2D _texture;

Nous allons légèrement copier le fonctionnement de la classe Game1.cs et créer notre propre méthode « LoadContent ». Ajoutez cette méthode à la classe Sprite.

1         //Charge la texture du sprite en utilsant le ContentPipeLine
2         public void LoadContent(ContentManager monContentManager, string nomTexture)
3         {
4             _texture = monContentManager.Load<Texture2D>(nomTexture);
5         }

Vous pouvez voir que la méthode prend quelques paramètres dont un ContentManager qui sera celui de la classe Game1.

Nous devons maintenant nous occuper de la gestion du déplacement de notre sprite (cette méthode est à utiliser uniquement pour sprite contrôlable). Ajoutez la méthode suivante :

 1         public void Update(TouchCollection touchCollection, int BackBufferWidth, int BackBufferHeight)
 2         {
 3             bool buttonTouched = false;
 4 
 5             //interprete le touch sur l'écran
 6             foreach (TouchLocation location in touchCollection)
 7             {
 8                 switch (location.State)
 9                 {
10                     case TouchLocationState.Pressed:
11                         buttonTouched = true;
12                         break;
13                     case TouchLocationState.Moved:
14                         buttonTouched = true;
15                         break;
16                     case TouchLocationState.Released:
17                         break;
18                 }
19             }
20             if (buttonTouched)
21             {
22                 if (touchCollection[0].Position.X < Position.X && Position.X > 0)
23                 {
24                     Position.X -= 10;
25                 }
26                 if (touchCollection[0].Position.X > Position.X && Position.X < BackBufferWidth - _texture.Width)
27                 {
28                     Position.X += 10;
29                 }
30                 if (touchCollection[0].Position.Y < Position.Y && Position.Y > 0)
31                 {
32                     Position.Y -= 10;
33                 }
34                 if (touchCollection[0].Position.Y > Position.Y && Position.Y < BackBufferHeight - _texture.Height)
35                 {
36                     Position.Y += 10;
37                 }
38             }
39         }

Il ne reste plus qu’à afficher notre sprite grâce à une méthode Draw qui prendra en paramètre un SpriteBatch. Il est important de rappeler qu’il faut toujours limiter le nombre d’instance de SpriteBatch. C’est pour cette raison que nous passons celui de la classe Game1 en paramètre. Ajoutez la méthode Draw.

1         //Affiche le sprite à l’écran
2         public void Draw(SpriteBatch monSpriteBatch)
3         {
4             monSpriteBatch.Draw(_texture, Position, Color.White);
5         }

Utiliser la classe Sprite

Et voilà, la classe Sprite.cs est terminée. N’oubliez pas de modifier la classe Game1.cs pour utiliser notre nouvelle classe Sprite. Voici un exemple :

 1 public class Game1 : Microsoft.Xna.Framework.Game
 2     {
 3         GraphicsDeviceManager graphics;
 4         SpriteBatch spriteBatch;
 5         Sprite logo;
 6         TouchCollection touchCollection;
 7         public const int BackBufferWidth = 480;
 8         public const int BackBufferHeight = 800;
 9 
10         public Game1()
11         {
12             graphics = new GraphicsDeviceManager(this);
13             Content.RootDirectory = "Content";
14             graphics.PreferredBackBufferWidth = BackBufferWidth;
15             graphics.PreferredBackBufferHeight = BackBufferHeight;
16 
17             // Frame rate is 30 fps by default for Windows Phone.
18             TargetElapsedTime = TimeSpan.FromTicks(333333);
19         }
20 
21         protected override void Initialize()
22         {
23             // TODO: Add your initialization logic here
24             touchCollection = new TouchCollection();
25             logo = new Sprite();
26             base.Initialize();
27         }
28 
29         protected override void LoadContent()
30         {
31             // Create a new SpriteBatch, which can be used to draw textures.
32             spriteBatch = new SpriteBatch(GraphicsDevice);
33             logo.LoadContent(Content, "logo_HD");
34             logo.Position = new Vector2(240, 400);
35         }
36 
37         protected override void UnloadContent()
38         {
39             // TODO: Unload any non ContentManager content here
40         }
41 
42         protected override void Update(GameTime gameTime)
43         {
44             // Allows the game to exit
45             if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
46                 this.Exit();
47 
48             touchCollection = TouchPanel.GetState();
49             logo.Update(touchCollection, BackBufferWidth, BackBufferHeight);
50 
51             base.Update(gameTime);
52         }
53 
54         protected override void Draw(GameTime gameTime)
55         {
56             GraphicsDevice.Clear(Color.CornflowerBlue);
57 
58             spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend);
59             logo.Draw(spriteBatch);
60             spriteBatch.End();
61             base.Draw(gameTime);
62         }
63     }