Ce chapitre va être l’occasion structurer un peu notre code, la base étant toujours la classe Sprite. Nous allons créer une classe Ship et une classe Bullet qui héritent de Sprite.

Modifier la classe Sprite

Pour commencer, modifiez la classe Sprite en fonction des lignes suivantes :

class Sprite
{
//Position actuelle du sprite
public Vector2 Position = new Vector2(0,0);
 
//Texture utilisée lors de l'affichage dans la méthode Draw
private Texture2D _texture;
 
//Taille du Sprite
public Rectangle Size;
 
//Utilisé pour augmenter ou diminuer la taille du Sprite
private float _scale = 1.0f;
 
public float Scale
{
get { return _scale; }
set
{
_scale = value;
//Recalule la taille du Sprite avec la nouvelle echelle (scale)
Size = new Rectangle(0, 0, (int)(_texture.Width * Scale), (int)(_texture.Height * Scale));
}
}
 
//Nom de l'image en ressource
public string AssetName;
 
//Charge la texture du sprite en utilsant le ContentPipeLine
public void LoadContent(ContentManager monContentManager, string nomTexture)
{
_texture = monContentManager.Load<Texture2D>(nomTexture);
AssetName = nomTexture;
Size = new Rectangle(0, 0, (int)(_texture.Width * Scale), (int)(_texture.Height * Scale));
}
 
public void Update(GameTime theGameTime, Vector2 theSpeed, Vector2 theDirection)
{
Position += theDirection * theSpeed * (float)theGameTime.ElapsedGameTime.TotalSeconds;
}
 
//Affiche le sprite à l’écran
public virtual void Draw(SpriteBatch monSpriteBatch)
{
monSpriteBatch.Draw(_texture, Position, new Rectangle(0,0,_texture.Width,_texture.Height)
, Color.White,0.0f,Vector2.Zero,Scale,SpriteEffects.None,0);
}
}

Notez le mot-clé virtual de la méthode Draw. Cela permettra de réaliser un override de cette méthode dans les classes héritées.

Ajouter la classe Bullet

Maintenant ajoutez la classe Bullet, celle-ci hérite de la classe Sprite et va correspondre à un tir de vaisseau. Dans cette classe nous allons gérer la vitesse du tir ainsi que son affichage en fonction sa position. C’est-à-dire que si le tire sort de l’écran on ne l’affiche plus. Il serait dommage de perdre des ressources en affichant quelque chose que l’on ne voit pas!

class Bullet : Sprite
{
const int MAX_DISTANCE = 500;
public bool Visible = false;
Vector2 _startPosition;
Vector2 _speed;
Vector2 _direction;
 
public void LoadContent(ContentManager theContentManager)
{
base.LoadContent(theContentManager, "red_bullet");
Scale = 1.0f;
}
 
public void Update(GameTime theGameTime)
{
if (Vector2.Distance(_startPosition, Position) > MAX_DISTANCE)
{
Visible = false;
}
if (Visible == true)
{
base.Update(theGameTime, _speed, _direction);
}
}
 
public override void Draw(SpriteBatch theSpriteBatch)
{
if (Visible == true)
{
base.Draw(theSpriteBatch);
}
}
 
public void Fire(Vector2 theStartPosition, Vector2 theSpeed, Vector2 theDirection)
{
Position = theStartPosition;
_startPosition = theStartPosition;
_speed = theSpeed;
_direction = theDirection;
Visible = true;
}
}

Comme vous pouvez le constater, la méthode Draw  de notre classe Bullet remplace celle de la classe Sprite. On ne lance la méthode Draw de la classe Sprite uniquement si notre objet Bullet est visible ou du moins si la distance parcourue est inférieure à MAX_DISTANCE.

Ajouter la classe Ship

Nous allons maintenant ajouter la classe Ship qui elle aussi hérite de la classe Sprite. La classe Ship représente le vaisseau et possède dans ses propriétés une liste de Bullet, ainsi on peut savoir à qui appartiennent les tirs.

Commencez par ajouter ces quelques lignes en haut de la classe

class Ship :Sprite
{
const string SHIP_ASSETNAME = "logo_HD";
const int START_POSITION_X = 240;
const int START_POSITION_Y = 400;
const int SHIP_SPEED = 160;
const int MOVE_UP = -1;
const int MOVE_DOWN = 1;
const int MOVE_LEFT = -1;
const int MOVE_RIGHT = 1;
const int BackBufferWidth = Game1.BackBufferWidth;
const int BackBufferHeight = Game1.BackBufferHeight;
 
enum State
{
Moving
}
 
State _currentState = State.Moving;
Vector2 _direction = Vector2.Zero;
Vector2 _speed = Vector2.Zero;
TouchCollection _previousTouchCollection;
List _bullets = new List();
ContentManager _contentManager;

Les constantes (position de départ, vitesse max , etc) ainsi que l’état (State) serviront à définir le comportement du vaisseau. Le vaisseau possède également une liste de Bullet correspondant aux tirs.

Dans la méthode LoadContent, nous allons charger les textures, initialiser la position du vaisseau et récupérer l’état de l’écran (via TouchPanel). Ajoutez les lignes suivantes :

public void LoadContent(ContentManager theContentManager)
{
_contentManager = theContentManager;
foreach (Bullet aBullet in _bullets)
{
aBullet.LoadContent(theContentManager);
}
 
Position = new Vector2(START_POSITION_X, START_POSITION_Y);
base.LoadContent(theContentManager, SHIP_ASSETNAME);
_previousTouchCollection = TouchPanel.GetState();
}

Vous remarquerez cette ligne base.LoadContent(theContentManager, SHIP_ASSETNAME). Elle permet de faire appel à la méthode LoadContent de la classe mère autrement dit la classe Sprite.

Nous allons à présent ajouter la méthode Update.

public void Update(GameTime theGameTime)
{
TouchCollection _currentTouchCollection = TouchPanel.GetState();
UpdateMovement(_currentTouchCollection);
UpdateBullet(theGameTime, _currentTouchCollection);
_previousTouchCollection = _currentTouchCollection;
base.Update(theGameTime, _speed, _direction);
}

La première chose à faire est de mettre à jour l’état de l’écran pour pouvoir gérer les commandes (Déplacement). C’est ce que font les deux premières lignes. La méthode UpdateMovement sera détaillée dans quelques secondes suivie de la méthode UpdateBullet. La 4^e ligne  permettra de comparer au prochain tour de boucle, l’état actuel et l’état précédent.

Voilà la méthode UpdateMovement. Ajoutez la à votre code.

private void UpdateMovement(TouchCollection _currentTouchCollection)
{
bool buttonTouched = false;
//interprete le touch sur l'écran
foreach (TouchLocation location in _currentTouchCollection)
{
switch (location.State)
{
case TouchLocationState.Pressed:
buttonTouched = true;
break;
case TouchLocationState.Moved:
buttonTouched = true;
break;
case TouchLocationState.Released:
break;
}
}
 
if (_currentState == State.Moving)
{
_speed = Vector2.Zero;
_direction = Vector2.Zero;
if (buttonTouched)
{
if (_currentTouchCollection[0].Position.X < this.Position.X && this.Position.X > 0)
{
_speed.X = SHIP_SPEED;
_direction.X = MOVE_LEFT;
}
 
if (_currentTouchCollection[0].Position.X > this.Position.X && this.Position.X < BackBufferWidth - this.Size.Width)
{
_speed.X = SHIP_SPEED;
_direction.X = MOVE_RIGHT;
}
 
if (_currentTouchCollection[0].Position.Y < this.Position.Y && this.Position.Y > 0)
{
_speed.Y = SHIP_SPEED;
_direction.Y = MOVE_UP;
}
 
if (_currentTouchCollection[0].Position.Y > this.Position.Y && this.Position.Y < BackBufferHeight - this.Size.Height)
{
_speed.Y = SHIP_SPEED;
_direction.Y = MOVE_DOWN;
}
}
}
}

La première partie de la méthode détermine la nature des « touch » sur l’écran et la seconde partie permet de déplacer le vaisseau en fonction de la position du « touch » sur l’écran.

Nous allons maintenant passer à la méthode UpdateBullet qui va mettre à jour la liste de Bullet en fonction du TouchPanel. Ajoutez ces lignes :

private void UpdateBullet(GameTime theGameTime, TouchCollection aCurrentTouchCollection)
{
foreach (Bullet aBullet in _bullets)
{
aBullet.Update(theGameTime);
}
bool buttonTouched = false;
//interprete le touch sur l'écran
foreach (TouchLocation location in aCurrentTouchCollection)
{
switch (location.State)
{
case TouchLocationState.Pressed:
buttonTouched = true;
break;
case TouchLocationState.Moved:
buttonTouched = true;
break;
case TouchLocationState.Released:
break;
}
}
 
if (buttonTouched)
{
if (aCurrentTouchCollection[0].Position.X > this.Position.X && this.Position.X < BackBufferWidth - this.Size.Width)
{
ShootBullet();
}
}
}

Comme pour la méthode UpdateMovement, la première partie du code permet de déterminer la nature des « touch ». La seconde partie fait tirer le vaisseau (ShootBullet) si ce dernier se déplace vers l’avant.

Et voici le code la méthode ShootBullet :

private void ShootBullet()
{
if (_currentState == State.Moving)
{
bool aCreateNew = true;
foreach (Bullet aBullet in _bullets)
{
if (aBullet.Visible == false)
{
aCreateNew = false;
aBullet.Fire(Position + new Vector2(Size.Width / 2, Size.Height / 2),
new Vector2(200, 0), new Vector2(1, 0));
break;
}
}
 
if (aCreateNew == true)
{
Bullet aFireball = new Bullet();
aFireball.LoadContent(_contentManager);
aFireball.Fire(Position + new Vector2(Size.Width / 2, Size.Height / 2),
new Vector2(200, 200), new Vector2(1, 0));
_bullets.Add(aFireball);
}
}
}

Si un des Bullet se trouve en dehors de l’écran, plutôt que d’en créer un nouveau, on le déplace au niveau du vaisseau sans que le joueur ne s’en aperçoive. Ceci permet d’économiser de la ressource en évitant de créer infiniment de nouveaux objets à chaque tir. Dans le cas où aucun Bullet ne se trouve en dehors de l’écran, on crée un nouvel objet.

Enfin, il reste à ajouter la méthode Draw dans laquelle nous faire appel à la méthode Draw de chaque Bullet du vaisseau. Ajoutez ces lignes :

public override void Draw(SpriteBatch theSpriteBatch)
{
foreach (Bullet aBullet in _bullets)
{
aBullet.Draw(theSpriteBatch);
}
base.Draw(theSpriteBatch);
}

Voilà pour ce qui est de la classe Ship, le plus gros du travail est fait.

Modifier la classe Game1

Nous allons maintenant modifier la classe Game1 pour qu’elle s’occupe de coordonner tout le reste. Elle s’occupe toujours de faire défiler le Background. Modifiez la classe Game1 en fonction des lignes suivantes, il n’y a pas beaucoup de changements à faire :

public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Ship monVaisseau;
 
Sprite BackgroundOne;
Sprite BackgroundTwo;
Sprite BackgroundThree;
Sprite BackgroundFour;
Sprite BackgroundFive;
 
TouchCollection touchCollection;
 
public const int BackBufferWidth = 480;
public const int BackBufferHeight = 800;
 
public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
graphics.PreferredBackBufferWidth = BackBufferWidth;
graphics.PreferredBackBufferHeight = BackBufferHeight;
 
// Frame rate is 30 fps by default for Windows Phone.
TargetElapsedTime = TimeSpan.FromTicks(333333);
}
 
protected override void Initialize()
{
// TODO: Add your initialization logic here
touchCollection = new TouchCollection();
 
monVaisseau = new Ship();
BackgroundOne = new Sprite();
BackgroundTwo = new Sprite();
BackgroundThree = new Sprite();
BackgroundFour = new Sprite();
BackgroundFive = new Sprite();
base.Initialize();
}
 
protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
monVaisseau.LoadContent(this.Content);
monVaisseau.Scale = 2.0f;
 
BackgroundOne.LoadContent(this.Content, "BackgroundOne");
BackgroundOne.Position = new Vector2(0, 0);
 
BackgroundTwo.LoadContent(this.Content, "BackgroundTwo");
BackgroundTwo.Position = new Vector2(BackgroundOne.Position.X + BackgroundOne.Size.Width, 0);
 
BackgroundThree.LoadContent(this.Content, "BackgroundThree");
BackgroundThree.Position = new Vector2(BackgroundTwo.Position.X + BackgroundTwo.Size.Width, 0);
 
BackgroundFour.LoadContent(this.Content, "BackgroundFour");
BackgroundFour.Position = new Vector2(BackgroundThree.Position.X + BackgroundThree.Size.Width, 0);
 
BackgroundFive.LoadContent(this.Content, "BackgroundFive");
BackgroundFive.Position = new Vector2(BackgroundFour.Position.X + BackgroundFour.Size.Width, 0);
}
 
protected override void UnloadContent()
{
// TODO: Unload any non ContentManager content here
}
 
protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
 
monVaisseau.Update(gameTime);
if (BackgroundOne.Position.X < -BackgroundOne.Size.Width)
{
BackgroundOne.Position.X = BackgroundFive.Position.X + BackgroundFive.Size.Width;
}
 
if (BackgroundTwo.Position.X < -BackgroundTwo.Size.Width)
{
BackgroundTwo.Position.X = BackgroundOne.Position.X + BackgroundOne.Size.Width;
}
 
if (BackgroundThree.Position.X < -BackgroundThree.Size.Width)
{
BackgroundThree.Position.X = BackgroundTwo.Position.X + BackgroundTwo.Size.Width;
}
 
if (BackgroundFour.Position.X < -BackgroundFour.Size.Width)
{
BackgroundFour.Position.X = BackgroundThree.Position.X + BackgroundThree.Size.Width;
}
 
if (BackgroundFive.Position.X < -BackgroundFive.Size.Width)
{
BackgroundFive.Position.X = BackgroundFour.Position.X + BackgroundFour.Size.Width;
}
 
Vector2 aDirection = new Vector2(-1, 0);
Vector2 aSpeed = new Vector2(160, 0);
 
BackgroundOne.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
BackgroundTwo.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
BackgroundThree.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
BackgroundFour.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
BackgroundFive.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
base.Update(gameTime);
}
 
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
 
spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend);
BackgroundOne.Draw(this.spriteBatch);
BackgroundTwo.Draw(this.spriteBatch);
BackgroundThree.Draw(this.spriteBatch);
BackgroundFour.Draw(this.spriteBatch);
BackgroundFive.Draw(this.spriteBatch);
monVaisseau.Draw(this.spriteBatch);
spriteBatch.End();
 
base.Draw(gameTime);
}
}

Et voilà, c’est terminé. Lancez un Debug et lorsque vous vous déplacez d’arrière en avant vous devriez voir le vaisseau Tequila apparaître à l’écran tirant des boules de feu !

tequilashoot

Nous allons réutiliser la classe Sprite que nous avions créé dans la partie précédente en la modifiant un peu. Ouvrez la solution « MonPermierJeu ».

Ajouter les images

Maintenant ajoutons les images des backgrounds que nous allons utiliser. Vous pouvez télécharger les images du projet ici. Une fois les images téléchargées. Ajoutez-les au projet Content. Si vous ne vous souvenez plus comment faire, consultez la partie précédente pour rafraichir la mémoire : Mon premier jeu avec XNA 4.0 (Part 2).

Modifier la classe Sprite

Pour commencer nous allons faire quelques modifications sur la classe Sprite. Ces modifications vont rendre la classe un peu plus souple et  nous permettre d’ajouter plus simplement les backgrounds.

Ajoutez les lignes suivantes en haut de la classe Sprite.

//Taille du Sprite
public Rectangle Size;
 
//Utilisé pour augmenter ou diminuer la taille du Sprite
public float Scale = 1.0f;

L’objet Size nous permettra de connaitre la hauteur et la largeur de notre sprite et l’objet Scale permet d’augmenter ou diminuer proportionnellement la taille du sprite.

Ensuite nous allons modifier la méthode LoadContent pour calculer et initialiser la taille de notre sprite. Modifiez la méthode LoadContent comme suit.

//Charge la texture du sprite en utilsant le ContentPipeLine
public void LoadContent(ContentManager monContentManager, string nomTexture)
{
_texture = monContentManager.Load(nomTexture);
Size = new Rectangle(0, 0, (int)(_texture.Width * Scale), (int)(_texture.Height * Scale));
}

Supprimez la méthode Update de la classe Sprite car celle-ci n’est pas adaptée aux backgrounds. Nous coderons la logique de jeu dans la méthode Update de la classe Game1.

Ensuite nous voulons utiliser une des nombreuses méthodes d’override du SpriteBatch dans la méthode Draw. Appliquez les modifications.

//Affiche le sprite à l’écran
public void Draw(SpriteBatch monSpriteBatch)
{
monSpriteBatch.Draw(_texture, Position, new Rectangle(0,0,_texture.Width,_texture.Height)
, Color.White,0.0f,Vector2.Zero,Scale,SpriteEffects.None,0);
}

Faite un rapide Debug pour voir si tout compile bien.

Maintenant que tout le travail sur la classe Sprite a été fait, nous allons pouvoir ajouter les backgrounds défilants au projet.

Commençons par ajouter de nouveaux sprites à la classe Game1.cs. Ajoutez les objets suivants en haut de la classe.

Sprite BackgroundOne;
Sprite BackgroundTwo;
Sprite BackgroundThree;
Sprite BackgroundFour;
Sprite BackgroundFive;

Ces objets Sprite seront utilisés pour faire défiler les images de background sur l’écran.

A présent, initialisez  les nouveaux Sprite. La taille originale du logo étant un peu petite nous allons pouvoir l’augmenter à l’écran grâce à la propriété Scale.

Modifiez la méthode Initialize.

protected override void Initialize()
{
// TODO: Add your initialization logic here
touchCollection = new TouchCollection();
logo = new Sprite();
logo.Scale = 2.0f;
 
BackgroundOne = new Sprite();
BackgroundTwo = new Sprite();
BackgroundThree = new Sprite();
BackgroundFour = new Sprite();
BackgroundFive = new Sprite();
 
base.Initialize();
}

Maintenant que les sprites sont initialisés, nous devons nous occuper de la méthode LoadContent.

protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
 
logo.LoadContent(Content, "logo_HD");
logo.Position = new Vector2(240, 400);
 
BackgroundOne.LoadContent(this.Content, "BackgroundOne");
BackgroundOne.Position = new Vector2(0, 0);
 
BackgroundTwo.LoadContent(this.Content, "BackgroundTwo");
BackgroundTwo.Position = new Vector2(BackgroundOne.Position.X + BackgroundOne.Size.Width, 0);
 
BackgroundThree.LoadContent(this.Content, "BackgroundThree");
BackgroundThree.Position = new Vector2(BackgroundTwo.Position.X + BackgroundTwo.Size.Width, 0);
 
BackgroundFour.LoadContent(this.Content, "BackgroundFour");
BackgroundFour.Position = new Vector2(BackgroundThree.Position.X + BackgroundThree.Size.Width, 0);
 
BackgroundFive.LoadContent(this.Content, "BackgroundFive");
BackgroundFive.Position = new Vector2(BackgroundFour.Position.X + BackgroundFour.Size.Width, 0);
}

Vous pouvez voir que le contenu de chaque Sprite est chargé avec les images des Backgrounds. Chaque Sprite est positionné en fin de chaine. La première image est positionnée en (0,0), ce qui correspond au coin supérieur gauche de l’écran et les autres suivent sur la droite.

Faire défiler un Background correspond à déplacer les images de background à travers l’écran à la façon d’un train. Quand une image passe outre l’écran sur la gauche, elle est déplacée en fin de queue.

Pour créer cet effet nous allons modifier la méthode Update pour qu’elle vérifie la position de chaque background et la déplace en fin de queue si nécessaire et également effectuer un déplacement régulier vers la gauche des images pour donner cet effet de défilement.

protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
 
touchCollection = TouchPanel.GetState();
bool buttonTouched = false;
 
//interprete le touch sur l'écran
foreach (TouchLocation location in touchCollection)
{
switch (location.State)
{
case TouchLocationState.Pressed:
buttonTouched = true;
break;
case TouchLocationState.Moved:
buttonTouched = true;
break;
case TouchLocationState.Released:
break;
}
}
 
if (buttonTouched)
{
if (touchCollection[0].Position.X < logo.Position.X && logo.Position.X > 0)
{
logo.Position.X -= 10;
}
if (touchCollection[0].Position.X > logo.Position.X && logo.Position.X < BackBufferWidth - logo.Size.Width)
{
logo.Position.X += 10;
}
if (touchCollection[0].Position.Y < logo.Position.Y && logo.Position.Y > 0)
{
logo.Position.Y -= 10;
}
if (touchCollection[0].Position.Y > logo.Position.Y && logo.Position.Y < BackBufferHeight - logo.Size.Height)
{
logo.Position.Y += 10;
}
}
 
if (BackgroundOne.Position.X < -BackgroundOne.Size.Width)
{
BackgroundOne.Position.X = BackgroundFive.Position.X + BackgroundFive.Size.Width;
}
if (BackgroundTwo.Position.X < -BackgroundTwo.Size.Width)
{
BackgroundTwo.Position.X = BackgroundOne.Position.X + BackgroundOne.Size.Width;
}
if (BackgroundThree.Position.X < -BackgroundThree.Size.Width)
{
BackgroundThree.Position.X = BackgroundTwo.Position.X + BackgroundTwo.Size.Width;
}
if (BackgroundFour.Position.X < -BackgroundFour.Size.Width)
{
BackgroundFour.Position.X = BackgroundThree.Position.X + BackgroundThree.Size.Width;
}
if (BackgroundFive.Position.X < -BackgroundFive.Size.Width)
{
BackgroundFive.Position.X = BackgroundFour.Position.X + BackgroundFour.Size.Width;
}
 
Vector2 aDirection = new Vector2(-1, 0);
Vector2 aSpeed = new Vector2(160, 0);
BackgroundOne.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
BackgroundTwo.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
BackgroundThree.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
BackgroundFour.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
BackgroundFive.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
 
base.Update(gameTime);
}

Le code se décompose en trois sections. Commençons par la première section qui concerne le déplacement du joueur (notre logo).

touchCollection = TouchPanel.GetState();
bool buttonTouched = false;
 
//interprete le touch sur l'écran
foreach (TouchLocation location in touchCollection)
{
switch (location.State)
{
case TouchLocationState.Pressed:
buttonTouched = true;
break;
case TouchLocationState.Moved:
buttonTouched = true;
break;
case TouchLocationState.Released:
break;
}
}
 
if (buttonTouched)
{
if (touchCollection[0].Position.X < logo.Position.X && logo.Position.X > 0)
{
logo.Position.X -= 10;
}
if (touchCollection[0].Position.X > logo.Position.X && logo.Position.X < BackBufferWidth - logo.Size.Width)
{
logo.Position.X += 10;
}
if (touchCollection[0].Position.Y < logo.Position.Y && logo.Position.Y > 0)
{
logo.Position.Y -= 10;
}
if (touchCollection[0].Position.Y > logo.Position.Y && logo.Position.Y < BackBufferHeight - logo.Size.Height)
{
logo.Position.Y += 10;
}
}

Il s’agit en fait du même code que celui de méthode Update de la classe Sprite du chapitre précédent. Il permet de gérer le déplacement du logo.

Analysons la deuxième section maintenant. Celle-ci permet de garder la « chaine » d’image continue.

if (BackgroundOne.Position.X < -BackgroundOne.Size.Width)
{
BackgroundOne.Position.X = BackgroundFive.Position.X + BackgroundFive.Size.Width;
}
if (BackgroundTwo.Position.X < -BackgroundTwo.Size.Width)
{
BackgroundTwo.Position.X = BackgroundOne.Position.X + BackgroundOne.Size.Width;
}
if (BackgroundThree.Position.X < -BackgroundThree.Size.Width)
{
BackgroundThree.Position.X = BackgroundTwo.Position.X + BackgroundTwo.Size.Width;
}
if (BackgroundFour.Position.X < -BackgroundFour.Size.Width)
{
BackgroundFour.Position.X = BackgroundThree.Position.X + BackgroundThree.Size.Width;
}
if (BackgroundFive.Position.X < -BackgroundFive.Size.Width)
{
BackgroundFive.Position.X = BackgroundFour.Position.X + BackgroundFour.Size.Width;
}

On pourrait pût vouloir déplacer en premier lieu les backgrounds avant de vérifier leur position. Mais comme souvent dans le jeu vidéo, l’ordre d’exécution est très important. Si l’on avait développé sous cette logique, un décalage entre les images de background se serait formé.

Voyons maintenant la dernière partie de code de cette méthode.

Vector2 aDirection = new Vector2(-1, 0);
Vector2 aSpeed = new Vector2(160, 0);
 
BackgroundOne.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
BackgroundTwo.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
BackgroundThree.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
BackgroundFour.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
BackgroundFive.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
 
base.Update(gameTime);

Le vecteur aDirection détermine dans quel sens le défilement va s’effectuer en X et en Y avec -1 pour la gauche et 1 pour la droite. Ici (-1,0) signifie un déplacement uniquement horizontal vers la gauche.

Le vecteur aSpeed indique la vitesse de défilement du background en X et en Y. Ici on a une vitesse horizontale de 160 pixel/s et de 0 pixel/s verticalement.

Pour obtenir la nouvelle position il suffit donc de multiplier la direction par la vitesse et d’ajouter le tout à l’ancienne position.

Fin des explications pour cette méthode. Il ne reste plus qu’à nous occuper de la méthode Draw. Modifiez la méthode en fonction des lignes suivantes.

protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
 
spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend);
BackgroundOne.Draw(this.spriteBatch);
BackgroundTwo.Draw(this.spriteBatch);
BackgroundThree.Draw(this.spriteBatch);
BackgroundFour.Draw(this.spriteBatch);
BackgroundFive.Draw(this.spriteBatch);
logo.Draw(spriteBatch);
spriteBatch.End();
 
base.Draw(gameTime);
}

Lancez le Debug, l’émulateur charge le projet et vous devez maintenant voir apparaître le logo Tequila Rapido dans les nuages, volant tel superman à travers le ciel.

Vous pouvez voir ce que donne le résultat dans cette vidéo

Les sources du projet sont disponibles en téléchargement ici.

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     }

Dans la prochaine partie de cette série de tutos, nous découvrirons comment ajouter un background défilant à notre jeu. A très bientôt donc.

Cliquer ici pour voir la vidéo.

Cette première partie sera dédiée à la création du projet et son premier lancement.

Créer un nouveau projet de jeu

Pour créer un jeu avec le framework XNA, rien de plus simple, vous devez d’abord créer un nouveau Windows Phone Game (4.0). Comme c’est notre premier jeu, nous allons lui donner un nom original : « MonPremierJeu ». Il ne reste plus qu’à cliquer sur « OK ».

Découverte

Nous voilà devant une page de code bien mystérieuse :

public class Game1 : Microsoft.Xna.Framework.Game

{

GraphicsDeviceManager graphics;

SpriteBatch spriteBatch;

public Game1()

{

graphics = new GraphicsDeviceManager(this);

Content.RootDirectory = « Content »;

// Frame rate is 30 fps by default for Windows Phone.

TargetElapsedTime = TimeSpan.FromTicks(333333);

}

/// <summary>

/// Allows the game to perform any initialization it needs to before starting to run.

/// This is where it can query for any required services and load any non-graphic

/// related content.  Calling base.Initialize will enumerate through any components

/// and initialize them as well.

/// </summary>

protected override void Initialize()

{

// TODO: Add your initialization logic here

base.Initialize();

}

/// <summary>

/// LoadContent will be called once per game and is the place to load

/// all of your content.

/// </summary>

protected override void LoadContent()

{

// Create a new SpriteBatch, which can be used to draw textures.

spriteBatch = new SpriteBatch(GraphicsDevice);

// TODO: use this.Content to load your game content here

}

/// <summary>

/// UnloadContent will be called once per game and is the place to unload

/// all content.

/// </summary>

protected override void UnloadContent()

{

// TODO: Unload any non ContentManager content here

}

/// <summary>

/// Allows the game to run logic such as updating the world,

/// checking for collisions, gathering input, and playing audio.

/// </summary>

/// <param name= »gameTime »>Provides a snapshot of timing values.</param>

protected override void Update(GameTime gameTime)

{

// Allows the game to exit

if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)

this.Exit();

// TODO: Add your update logic here

base.Update(gameTime);

}

/// <summary>

/// This is called when the game should draw itself.

/// </summary>

/// <param name= »gameTime »>Provides a snapshot of timing values.</param>

protected override void Draw(GameTime gameTime)

{

GraphicsDevice.Clear(Color.CornflowerBlue);

// TODO: Add your drawing code here

base.Draw(gameTime);

}

}

Analysons un peu cette classe. La classe Game1 est la base de tout nouveau projet de jeu. Elle comporte différentes méthodes que nous allons voir et qui sont appelées automatiquement selon le modèle suivant

En premier lieu, le constructeur de la classe est appelé. Puis la méthode Initialize, dans laquelle toutes la variables vont être initialisées comme par exemple la taille d’affichage (480×800 sur WP7). En bref tout ce qui n’est du contenu à afficher sur l’écran.

Ensuite la méthode LoadContent est appelée, permettant d’initialiser toutes les textures qui seront affichées à l’écran, les sprites, les sons…

Nous arrivons maintenant au cœur du processus, la boucle Upload/Draw. A partir de maintenant on entre dans une boucle qui ne s’arrêtera qu’au moment de quitter le jeu.

Dans la méthode Update, on place la logique du jeu, c’est-à-dire comment réagit le jeu lorsque l’on appuie sur tel ou tel bouton ou que l’on touche à telle ou telle partie de l’écran.

La méthode Draw permet de gérer toute la logique d’affichage du jeu, c’est dans cette méthode que l’on affichera à l’écran les personnages ou le monde par exemple.

Lorsque l’on décide de quitter le jeu, en appuyant sur  la touche Back du téléphone par exemple, la boucle s’arrête et on entre dans la méthode UnloadContent. Cette dernière permet de « décharger » le contenu graphique.

Lancer le jeu

Trêve de blabla et place à l’action, lancez le Debug et découvrez enfin ce que donne votre premier jeu ! Un bel écran bleu par défaut, ce n’est pas fameux me direz vous, mais vous en avez déjà appris beaucoup sur la logique de création de jeu car tout va tourner autour de cette classe Game1 et de la boucle de jeu.

Dans le chapitre suivant, place au mouvement! Nous verrons comment afficher un Sprite à l’écran et le faire se déplacer grâce à l’écran tactile.

Tout ce que vous devez savoir avant de commencer la réalisation de votre jeu avec le framework XNA.

Vous avez entendu parler de ce génial truc machin chose à faire des jeux qu’est XNA et vous êtes surexcité à l’idée de créer le jeu de vos rêves, mais petit problème, vous n’êtes pas sur de ce qu’est exactement XNA, comment il fonctionne et par où commencer. Pas de problème cette série de tutos va vous prendre par la main et vous apprendre à faire vos premiers pas dans le domaine.

Pour ceux qui n’aiment pas lire, un petit résumé rapide de ce que vous devez savoir :

• Vous devez connaître la programmation C# pour développer sur XNA.
• Vous devez avoir un PC avec une carte graphique qui respecte les recommandations minimum pour le framework XNA.
• Vous devez installer les outils Microsoft (gratuits !) qui vous permettrons de créer vos jeux
• XNA, ce n’est pas du drag-and-drop, vous devez tout programmer, mais vous n’aurez aucune limite.
• Vous ne pourrez pas réaliser le jeu de vos rêves du premier coup, apprenez d’abord les bases.

Pour les autres on peut passer aux choses sérieuses

C’est quoi XNA ??

Vous avez entendu parler de XNA, vous avez vu des jeux réalisés avec XNA, mais vous n’êtes pas sur de ce que vous pouvez faire ou pas avec. « XNA » ce terme est bien ambigu,  il se rapporte à toutes les technologies Microsoft en rapport avec le développement de jeux. Cela inclus DirectX et le framework XNA. Ce dont vous avez certainement entendu parler, c’est le framework XNA, ça tombe bien.

Le framework XNA est une API. Ce qui veut dire que c’est un framework développé par Microsoft pour vous aider à développer vos jeux plus rapidement. Ce n’est pas un drag-and-drop maker et vous devrez apprendre à programmer avant de l’utiliser.

Le framework XNA n’est PAS un Game engine. Il n’inclut pas la physique, les collisions et d’autres choses que l’on retrouve généralement dans les Game engines. Si c’est un Game engine que vous recherchez, je vous conseille de lire cet autre post Jeux vidéo et XNA 4.0.

XNA Game Studio est un environnement de développement. XNA Game Studio est un plug-in installé sur l’une des versions supportées de Visual Studio. Typiquement, les jeux développés sous le framework XNA sont écris en C#, mais il existe d’autres langage .NET supportés. Toutefois, je vous conseille fortement d’utiliser le C# car vous trouverez beaucoup plus d’aides et d’exemples utilisant ce langage.

Que dois-je installer sur mon PC ?

Avant de pouvoir commencer à développer, il vous faut télécharger et installer quelques programmes. Si vous possédez déjà Visual Studio (2008 ou 2010), cherchez XNA Game Studio (3.1 ou 4.0 uniquement avec VS2010), sinon il existe un pack complet XNA 4.0 (version Beta actuellement) téléchargeable ici. C’est cette version qui sera utilisée dans la suite de cette série de tutoriels, puisque plus récente et permettant de développer pour Windows Phone 7 !

Ou chercher de l’aide ?

Cherchez sur les forums, la plupart du temps, la réponse à votre problème a déjà été trouvée sur le post d’un forum. Une chose à savoir, la plupart des forums XNA sont en anglais, alors sortez vos vieux bouquins d’anglais et mettez-y vous !

Une adresse à retenir : http://forums.xna.com le forum officiel de développement XNA.

Comment faire un jeu NextGen ?

Maintenant que vous avez les bases, vous êtes prêt à faire le jeu de vos rêves ? Faux ! Vous n’allez pas créer ce jeu au premier essai et probablement pas avant une 50aine d’autres tentatives. Mettez cette idée de côté, notez la sur le coin d’une feuille pour plus tard, une fois que vous aurez acquis assez d’expérience. Vous serez bientôt prêt, mais si vous vous lancez directement dans cette aventure vous vous casserez probablement les dents dessus et serez dégouté.

Rappelez vous, prudence est mère de sureté, allez-y progressivement, pas à pas, et vous serez capable de réaliser ce fameux jeu.

A tout de suite pour la partie suivante.

3 versions du bouton sont disponibles (110×20 / 55×20 / 55×63)  avec 5 possibilités de personnalisation.

Source : Mashable

MVVM est un pattern qui facilite les tests de code et les taches des développeurs et designers comme il n’y’a pas de « code behind » dans le vues.
Voici un schéma résumant le pattern :

Pour développer sur Windows Phone 7, vous devez télécharger le SDK qui est gratuit [ici]. La version en ligne maintenant est la Beta.
Pour commencer on va utiliser le template que nous avons mis à disposition sur Visual Studio Gallery qui nous permet de gagner du temps.

Vous remarquerez que :

Les répertoires «ViewModel » / « Views » / «Model » sont déjà crées   et  Les fichiers MainViewModel.cs / ViewModelBase.cs aussi  déjà crées.

Attaquons le Model et ajoutons une classe « Tweet »

Ajouter la référence : System.Xml.Linq qui va nous faciliter le parçage XML

Ajoutez aussi dans la classe «Tweet »  les 2 namespaces :

• System.Xml.Linq
• System.Linq

Ajoutez les propriétés dont on a besoin : Username, Message, ImageSource (tous de type string) et la méthode statique qui va parser le résultat xml.

Cliquer ici pour voir la vidéo.

]]> http://blog.tequilarapido.com/2010/08/09/iron-man-2-retour-sur-les-interfaces-holographiques/feed/ 0 http://blog.tequilarapido.com/2010/08/09/tq-wp7-starter-template-fr/ http://blog.tequilarapido.com/2010/08/09/tq-wp7-starter-template-fr/#comments Mon, 09 Aug 2010 09:21:19 +0000 rodrigue http://blog.tequilarapido.com/?p=3032 Parce que chaque début de projet WP7 peut être l’occasion d’une perte de temps  lors de sa préparation (énumérer les dlls dont on a besoin, les libraires de classes…) voici un template pour répartir les actions à mener de façon effective.

Comment s’y prend-on actuellement pour débuter une application WP7 ?

On cherche les contrôles panorama/pivot de codeplex, on ajoute les dlls au projet et/ou on ajoute le projet dans sa globalité pour faire des modifications.
Comme la plupart de notre développement suit le pattern MVVM : on doit ajouter les repertoires/classes pour l’organisation du projet comme «Views » « ViewModel», «Model », la classe ViewModelBase  etc..

Afin d’éviter cette procédure chronophage, nous avons crée un Template de projet qui est disponsible dans la galerie Visual Studio.

Pour l’installer il suffit de :

• Copier le zip téléchargé dans votre répertoire de Template de projet (la plus part du temps ceci ce trouve dans : %HOMEDRIVE%%HOMEPATH%\Documents\Visual Studio 2010\Templates\ProjectTemplates)
• Copier le zip téléchargé dans un autre répertoire  « Silverlight for Windows Phone» (S’il n’existe pas, créez-le.  Positionnez-le en dessous de ProjectTemplates) pour que le Template apparaisse dans la même catégorie de celles des projets Windows Phone.

Comment le Template nous rend-t-il service ?

• Un fichier de ressource est déjà crée et ajouté comme ressource statique dans App.xaml

• Les soutiens MVVM sont crées :

Le MainViewModel  est ajouté aussi comme ressource static dans App.xaml

La ressource de type  MainViewModel  est déjà lié au Data Context de la page « MainPage.xaml »

Ensuite tout dépend de votre usage  du modèle MVVM. Certains développeurs préfèrent ne pas mettre le MainViewModel comme ressource accessible depuis le App.xaml mais plutôt le déclarer dans la vue et puis le binder au DataContext. D’autres préfèrent créer un ViewModelLocator et déclarer les ViewModel de celui-ci (les possibilités sont multiples, à vous de voir celle qui vous convient le mieux !).

Afin de présenter les applications sous «metro design concept », les controls pivot/ panorama que vous pouvez récupérer de codeplex sont une nécessité (à moins de vouloir les refaire ou bien attendre que Microsoft nous délivrent les officiels).

Voilà à quoi ressemble le projet une fois que nous l’avons crée à travers le Template :

N.B : Pour faciliter le développement MVVM, une multitude de frameworks / toolkits existent.

On apprécie en particulier MVVM Light Toolkit.  Nous n’avons pas shouhaité faire figurer ce Toolkit dans notre Template car il dispose déjà d’un template dédié.