|
Tutoriel : Programmation
de sprite à l'aide de
Visual C# Express 2010 et de XNA 4.0
Aaaahhh! Enfin! Les choses plus amusantes vont commencer, et même se compliquer peu à peu.
Avant de pouvoir dessiner quelque chose sur l'écran, il va falloir préparer le "terrain".
|
Premièrement, il faut dire au compilateur que vous allez utiliser une image. C'est donc maintenant que le deuxième projet créé automatiquement va vous servir.Pour que ce soit plus lisible par la suite, faites comme ci contre, ajoutez un répertoire Sprite,cela vous facilitera grandement la tâche par la suite. Cliquez avec le bouton de droite, dans l'explorateur de solution, sur "PCOTutoXNA2Content (Content)". Choisissez "Ajouter" -> "Elément existant" et ensuite allez sélectionner un fichier image au format .jpg .jpeg .gif .png Dans l'exemple, le dessin d'un ballon blanc translucide à été utilisé. Voici le lien. Pour des raisons plus qu'évidente, l'image ne sera pas affichée ici. Pour les gens dont l'évidence ne sauterait aux yeux, un ballon blanc sur fond transparent, elle même sur un fond blanc ne devrait pas vous montrer grand chose ;)
|
 |
|
La deuxième étape consiste créer et initialiser différentes variables afin que votre image soit prise en compte par votre programme. Pour ce faire, allez dans votre classe PCOTutoXNA, vous savez, celle qui hérite de la classe Game du Framework. Créez une première variable intitulée 'ballon' dont le type sera Texture2D :
Texture2D ballon;
Ensuite, un vecteur 'ballonPosition' qui sera préinitialisé à l'origine :
Vector2 ballon1Position = Vector2.Zero;
Si vous voulez créer un deuxième ballon, vous pouvez répéter cette deuxième commande, mais pas la première puisque la texture (le dessin) reste la même.
Dans la section LoadContent, vous allez maintenant charger le contenu de l'image du ballon en temps que texture. Attention pourtant, à ne pas oublier le nom du répertoire et aussi à volontairement omettre l'extension du fichier, comme ceci :

|
 |
Génial tout ça, mais toujours rien en place à l'écran. Biensur direz vous, il n'y a encore rien de nouveau dans la méthode Draw.
Ajoutez simplement la fonction suivante juste après le device.clear :
spriteBatch.Draw(ballon,ballon1Position, Color.White);
Pour résumer celle ci, la texture 'ballon' est placée à la position 'ballon1Position' avec une couleur blanche.
Hein! Quoi! Comment! Une couleur blanche... Est ce que le ballon n'était pas déjà blanc? Et bien oui, vous avez raison, le ballon est déjà blanc, mais la couleur donnée ici n'st pas, à proprement parlé, la couleur de l'objet. C'est en fait, une couleur de filtrage. Si vous aviez choisi 'Color.Blue', le ballon serait devenu bleu. Ceci parce que le dessin de base est blanc. Il en serait autrement si la couleur de base du ballon était autre, mais cela sort du cadre de ce tutoriel.
Si vous exécutez maintenant votre programme, vous aurez un joli ballon tout blanc dans le coin supérieur gauche de votre fenêtre. Vous pouvez vous amuser maintenant à changer la couleur, et même afficher un deuxième par dessus.
Le but d'un jeu n'étant pas d'afficher des objet dans un coin d'une fenêtre, il faudrait peut être savoir comment faire pour l'afficher ailleur.
Le plus simple reste encore de changer les valeurs du vecteur de position de votre ballon.
Allez dans la section Update et tapez ceci:
ballon1Position.X = 100;
ballon1Position.Y = 100;
Et voila, le tour est joué... Bon! Laissez les ballons de côté pour le moment et voyez ce qu'il en est du curseur de votre souris.
Par défaut, quand vous passez votre souris sur votre fenêtre, le curseur disparait. C'est plutôt gênant, quoique...
Les concepteurs de Xna ont décidé, à juste titre, que si vous faites un jeu, avec vos graphismes, voir le curseur de windows n'a aucun sens...
Vous allez donc créer votre propre curseur. C'est très facile, vous verrez!
| Donc, pour commencer, vous définissez une nouvelle texture dans l'explorateur de solution, par exemple, le viseur |
 |
Ensuite, vous créer la variable au début de votre classe, et après vous l'initialisez dans la partie LoadContent. Reste l'affichage à règler.
Créez donc la variable pour la position et initialisez la à zéro comme pour les ballons. Affichez votre viseur dans la partie Draw.
Pas trop d'explicaion jusque maintenant, c'est normal, il faut un peu d'exercice...
|
Si vous avez bien travaillé, voius devriez avoir un :
curseurPosition.X = quelque_chose;
curseurPosition.Y = quelque_chose;
C'est beau, mais ce n'est pas très dynamique....
Remplacez donc cela par ceci
|
 |
Ooohhh! Miracle, le viseur bouge avec la souris, c'est donc un curseur.... Mais pourquoi faire -32 à chacune des valeurs? Simple encore, l'image a une dimension de 64*64, le fait de retrancher 32 centrera l'image par rapport à la position de la souris. Et voila! Vous avez réalisé votre premier mouvement.
Bien d'autres fonctions sont disponible pour le traitement des sprites, mais cela dépasse le cadre de ce turoriel, qui, à ce niveau n'est qu'une introduction. Vous trouverez facilement dans le MSDN ces toutes ces fonctions qui font que le XNA est très facile d'utilisation.
Ci dessous, vous trouverez le listing complet du fichier PCOTutoXNA.cs avec les modifications ci dessus ainsu qu'une ligne de plus vous montrant comment agrandir et faire tourner l'image.
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 PCOTutoXNA2
{
public class PCOTutoXNA : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
GraphicsDevice device;
Texture2D curseur;
Vector2 curseurPosition = Vector2.Zero;
Texture2D ballon;
Vector2 ballon1Position = Vector2.Zero;
Vector2 ballon2Position = Vector2.Zero;
public PCOTutoXNA()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}
protected override void Initialize()
{
graphics.PreferredBackBufferWidth = 500;
graphics.PreferredBackBufferHeight = 500;
graphics.IsFullScreen = false;
graphics.ApplyChanges();
Window.Title = "Tutoriel PC-Overware XNA 4.0 - Série 2D";
base.Initialize();
}
protected override void LoadContent()
{
device = graphics.GraphicsDevice;
spriteBatch = new SpriteBatch(GraphicsDevice);
ballon = Content.Load("Sprite/ballon");
curseur = Content.Load("Sprite/viseur");
}
protected override void UnloadContent()
{
}
protected override void Update(GameTime gameTime)
{
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
ballon1Position.X = 100;
ballon1Position.Y = 100;
ballon2Position.X = 120;
ballon2Position.Y = 120;
MouseState ms = Mouse.GetState();
curseurPosition.X = ms.X - 32;
curseurPosition.Y = ms.Y - 32;
base.Update(gameTime);
}
protected override void Draw(GameTime gameTime)
{
device.Clear(Color.CornflowerBlue);
spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend);
spriteBatch.Draw(curseur, curseurPosition, Color.White);
spriteBatch.Draw(ballon, ballon2Position, Color.Red);
spriteBatch.Draw(ballon, ballon1Position, Color.White);
spriteBatch.Draw(ballon, new Rectangle(150,150,128,128), new Rectangle(0,0,64,64), Color.Blue, 1.0f, Vector2.Zero, SpriteEffects.None, 1.0f);
spriteBatch.End();
base.Draw(gameTime);
}
}
}
|
Merci d'avoir suivi ce tutoriel. Dans le prochain tutoriel, vous aurez le plaisir de créer des mouvements plus complexe.
|