Introduction à XNA Framework sur Windows Phone 7

Nous voici sur un article avec la plus fun des technologies Microsoft le XNA Framework sur WP7.

Vous apprendrez au sujet de la seconde méthode pour créer des applications sur le WP7, XNA.

Qu’est-ce que XNA?

XNA est un framework de développement créé par Microsoft qui encapsule des détails de bas niveau technologique impliqués dans la création d’un jeu et permet de vous concentrer sur ce qui rend le jeu amusant. Le XNA Framework fonctionne sur le dessus du cadre. NET , la plate-forme de développement standard de Microsoft, et se compose d’une bibliothèque d’outils et de code qui permet aux développeurs de créer rapidement des jeux pour Windows, Xbox 360 et Windows Mobile 7.

Le XNA Framework a évolué au fil des années et comprend maintenant un soutien audio et vidéo, le Xbox Live fonctionnalités multi-joueurs, Xbox 360 avatars, et plus encore. Le plus important pour vos fins, il le rend facile à dessiner sur l’écran de l’appareil que vous travaillez avec.

Créez votre projet

Dans ce tutoriel, vous allez créer une application simple appelé Bouncing Balls. L’écran commence vierge.Lorsque vous touchez l’écran, une nouvelle balle avec une vitesse aléatoire et la couleur est ajoutée à la collection de balles rebondissantes. Si vous appuyez sur l’écran à nouveau une autre balle sera ajouté.Cette application devrait prendre moins de 30 minutes pour créer.

Pour commencer, ouvrez Microsoft Visual Studio 2010 Express pour Windows Phone. Une fois ouvert, cliquez sur le « New Project … » dans la barre latérale gauche. Dans la boîte de dialogue qui apparaît, choisissez « XNA Game Studio 4 » dans la colonne de gauche et assurez-vous que le «jeu Windows Phone (4,0)» est sélectionné. Ensuite, donner à votre projet un nom. Pour ce tutoriel, je vous conseille d’appeler votre projet « BouncingBalls. » Confirmez que l’option « Créer répertoire pour la solution » est cochée. Si vous avez fait tout cela, votre boîte de dialogue apparaîtra similaire à la mienne (avec moins d’options, le plus probable):

Cliquez sur « OK » pour créer votre nouveau projet. Visual Studio va créer tous les fichiers nécessaires dans votre répertoire spécifié et Game1.cs ouverte pour vous.
Importation des ressources requises
Pour ce projet, vous serez en utilisant des sprites de tirer les boules à l’écran. En tant que tel, vous avez besoin d’importer une image dans le projet pour l’utiliser comme le sprite balle. Télécharger l’image suivante en cliquant droit et enregistrer quelque part commode. C’est un cercle de diamètre simples 512px blanche que j’ai créé dans Expresion Design.


Dans Visual Studio, l’Explorateur de solutions à trouver dans la barre de droite. Cherchez un élément de la liste appelée BouncingBallsContent (contenu) et faites un clic droit sur elle. Dans le menu contextuel qui apparaît, survolez « Ajouter » et sélectionnez « élément existant … » Recherchez le fichier Ball.png et l’ajouter à votre projet. Votre explorateur de solution devrait maintenant ressembler à ceci:

Comprendre le flux du jeu

Lorsque vous utilisez le XNA Framework, tous les jeux que vous créez ont le même débit de base. Tout d’abord, une instance de votre objet de jeu est construit. Par défaut, Visual Studio noms de vos fichiers Game1.cs jeu et votre classe GAME1 match.

Une fois que votre jeu est construit, la méthode Initialize est appelée. Initialiser vous donne une chance de charger les services requis et tout autre contenu non graphiques liés. Ensuite, la méthode est appelée LoadContent. LoadContent là où vous chargez le contenu graphique dont vous avez besoin pour votre jeu de se dessiner. Enfin, une boucle infinie est démarré, où Mettez à jour votre jeu et tirage méthodes sont appelées successivement jusqu’à ce que votre jeu s’arrête.

Régler le jeu en mode plein écran

Sur Windows Mobile 7, vous avez la possibilité de définir votre jeu afin de fonctionner en mode plein écran.Cela masque l’affichage d’état du téléphone et vous donne plus d’espace pour travailler. En tant que tel, il est souhaitable que la plupart des jeux être exécuté en mode plein écran.

Pour activer en plein écran, trouvez constructeur de votre classe de jeu et placez votre curseur à l’intérieur de celui-ci. Vous allez définir une propriété sur votre gestionnaire de périphérique graphique qui raconte votre jeu afin de fonctionner en mode plein écran. Modifier le constructeur afin qu’il ressemble à ceci:

  1. publique  GAME1 ()
  2. {
  3.     graphiques =  nouvelle  GraphicsDeviceManager ( présent );
  4.     graphics.IsFullScreen =  vrai ;
  5.     Content.RootDirectory =  « Contenu » ;
  6.     / Taux / Frame est de 30 fps par défaut pour Windows Phone.
  7.     TargetElapsedTime = TimeSpan.FromTicks (333 333);
  8.     / /Paramètres Pré-autoscale .
  9.     graphics.PreferredBackBufferWidth = 480;
  10.     graphics.PreferredBackBufferHeight = 800;
  11. }

Chargez la texture de votre Sprite

La prochaine chose que nous devons faire est de charger la texture balle qui sera utilisée pour toutes les boules dans le match. Parce que nous ne voulons pas être de chargement de la texture, encore et encore, nous allons l’enregistrer comme un champ public dans nos jeux.

La première chose que vous devez faire est de créer un nouveau champ public dans la classe GAME1. Au sommet de votre définition de classe, à proximité des champs prégénérés, ajoutez une déclaration pour un objet Texture2D donc votre section de terrain ressemble à ceci:

  1. GraphicsDeviceManager graphiques;
  2. SpriteBatch SpriteBatch;
  3. BallTexture Texture2D;

Maintenant, vous avez besoin pour réellement obtenir la texture chargée. Trouvez votre classe LoadContent GAME1 et insérer la déclaration suivante:

  1. ballTexture = Content.Load <Texture2D> ( « Ball » );

Création de la classe Balle

Votre demande va contenir un certain nombre de boules qui apparaissent et se déplacer autour de l’écran.En tant que tel, il est logique de créer une nouvelle classe qui contient des informations sur une bille. Tout d’abord, faites un clic droit sur le nom de votre projet dans l’Explorateur de solutions, pointez sur « Ajouter » et cliquez sur «classe … » Nom de la classe Ball.cs.

La classe ball a besoin de stocker les informations suivantes sur la balle:

  • Le but du jeu contenant
  • couleurs
  • la texture
  • Top emplacement de gauche
  • la vitesse
  • Rayon
  • échelle entre la taille et le rayon réel sprite

En tant que tel, nous aurons besoin pour créer des champs dans la classe de Ball pour chacun de ces éléments. Au sommet de votre classe Ball, ajoutez le code suivant:

  • Game1 game;
  • Color color;
  • Texture2D texture;
  • Vector2 topLeft;
  • Vector2 velocity;
  • float radius;
  • float scale;

Maintenant, vous devez vous assurer que chacun de ces éléments est initialisé quand une balle est créé.Vous devez créer un constructeur qui prend les paramètres appropriés. Le terrain à grande échelle est dérivée de la taille du rayon et de la texture, de sorte que n’a pas besoin d’être passé au constructeur.Ajoutez les lignes suivantes à votre classe de Ball:

  • public Ball(Color color, Texture2D texture, Vector2 center, Vector2 velocity, float radius)
  • {
  •     this.game = game;
  •     this.color = color;
  •     this.texture = texture;
  •     this.topLeft = new Vector2(center.X – radius, center.Y – radius);
  •     this.velocity = velocity;
  •     this.radius = radius;
  •     CalculateScale();
  • }

Vous remarquerez que chacun des paramètres est affecté à un champ d’instance. Puis, une nouvelle méthode appelée CalculateScale est appelée. Cette méthode calcule l’échelle entre le rayon désiré et la taille réelle sprite pour une instance particulière d’une balle. Ajoutez les lignes suivantes à votre classe de Ball:

  • private void CalculateScale()
  • {
  •     float width = (float)texture.Bounds.Width;
  •     this.scale = (this.radius * 2) / largeur;
  • }

Il ya deux derniers éléments qui doivent se produire avec chaque balle. Une balle doit être capable de se dessiner et se mettre à jour. Commençons par le dessin. Créer la méthode Draw dans votre classe Ballon comme suit:

  • public void Draw(SpriteBatch batch)
  • {
  •     batch.Begin();
  •     batch.Draw(texture, topLeft, null, color, 0f, Vector2.Zero, scale, SpriteEffects.None, 0f);
  •     batch.End();
  • }

Vous verrez dans le code ci-dessus que la méthode Draw est passé d’un objet SpriteBatch. Cette SpriteBatch est utilisé pour dessiner le sprite de la balle. Vous commencez à dessiner avec la SpriteBatch en appelant Begin et End cesser de dessiner par callind. Au milieu, vous utilisez la méthode de dessin sur l’objet à la réalité SpriteBatch tirer la boule.

La méthode SpriteBatch.Draw prend un certain nombre de paramètres, mais les plus importants sont la texture, topLeft, la couleur, et l’échelle:

  • la texture est la Texture2D qui sera tiré à cet appel
  • topLeft est la position du sprite dans le périphérique graphique
  • couleur est la couleur pour teinter le sprite
  • échelle est le facteur par lequel le sprite à l’échelle

Maintenant, nous allons gérer les mises à jour. Ajoutez les deux méthodes suivantes pour votre classe Ball:

  • public void Update()
  • {
  •     BounceBall();
  •     topLeft += velocity;
  • }
  • private void BounceBall()
  • {
  •     Vector2 newTopLeft = topLeft + velocity;
  •     float left, right, top, bottom;
  •     left = newTopLeft.X;
  •     right = newTopLeft.X + (radius * 2);
  •     top = newTopLeft.Y;
  •     bottom = newTopLeft.Y + (radius * 2);
  •     if (top < 0 || bottom > game.GraphicsDevice.Viewport.Height)
  •     {
  •         velocity.Y *= -1;
  •     }
  •     if (left < 0 || right > game.GraphicsDevice.Viewport.Width)
  •     {
  •                 velocity.X *= -1;
  •     }
  • }

Comme vous pouvez le voir, la méthode Update est assez simple. Il délègue à la méthode qui gère la mise à jour BounceBall la vitesse, puis met à jour le topLeft variables en les combinant avec la vitesse de la balle.La méthode BounceBall ressemble un peu compliqué, mais il est vraiment très simple. Tout d’abord, vous calculez ce que le nouveau haut, bas, droite et gauche des bornes de la balle après une étape de vitesse.Ensuite, vous vérifiez pour voir si ces nouvelles bornes sont en dehors de la zone visible du téléphone. Si le dessus ou le seront en dehors de la zone visible, vous inversez la direction de la vitesse Y. Si à droite ou à gauche sera en dehors de la zone visible, vous inversez la direction de la vitesse X. C’est ce qui rend la balle fait rebondir.

À ce stade, vous avez une classe Ballon complet et nous pouvons commencer à les addding à la classe GAME1.

Stockage des balles

Vous allez stocker les balles de votre jeu à l’intérieur de votre classe GAME1. Ouvrez Game1.cs et ajouter un nouveau champ comme suit:

  • IList<Ball>
  • balls = new List<Ball>();

Gestion des événements tactile et Création de Boules

La dernière partie de cette application est de permettre aux utilisateurs de créer des boules en touchant l’écran. Cela doit se faire en boucle jour du match. Trouver la méthode Update pour votre classe GAME1 et insérer les énoncés suivants à l’intérieur:

    HandleTouches();
    UpdateBalls();

Selon la méthode de mise à jour, créer les deux nouvelles méthodes, et HandleTouches UpdateBalls.UpdateBalls devrait ressembler à ceci:

  1. private void UpdateBalls()
  2. {
  3.     foreach (Ball ball in balls)
  4.     {
  5.         ball.Update();
  6.     }
  7. }

Cette méthode est simple. Il parcourt chaque boule dans la liste de la classe GAME1 de boules et appelle sa méthode Update. Si vous vous souvenez de plus haut, le Ball.Update () méthode change tout simplement la position de la balle. La méthode suivante est légèrement plus complexe. Votre méthode HandleTouches devrait ressembler à ceci:

  • private void HandleTouches()
  • {
  •     TouchCollection touches = TouchPanel.GetState();
  •     if (!touching && touches.Count > 0)
  •     {
  •         touching = true;
  •         Random random = new Random(DateTime.Now.Millisecond);
  •         Color ballColor = new Color(random.Next(255), random.Next(255), random.Next(255));
  •         Vector2 velocity = new Vector2((random.NextDouble() > .5 ? -1 : 1) * random.Next(9), (random.NextDouble() > .5 ? -1 : 1) * random.Next(9)) + Vector2.UnitX + Vector2.UnitY;
  •         Vector2 center = new Vector2((float)graphics.GraphicsDevice.Viewport.Width / 2, (float)graphics.GraphicsDevice.Viewport.Height / 2);
  •         float radius = 25f * (float)random.NextDouble() + 5f;
  •         balls.Add(new Ball(this, ballColor, ballTexture, center, velocity, radius));
  •     }
  •     else if(touches.Count == 0)
  •     {
  •         touching = false;
  •     }
  • }

Croyez-vous que toucher la variable à l’intérieur? Que les magasins si l’écran était abordé le dernier passage dans Update. Cela garantit que une touche prolongée ne crée pas de plusieurs balles. Vous devez créer un champ que dans la classe GAME1, alors défiler vers le haut de vos champs et l’ajouter comme suit:

bool touching = false;

Maintenant, nous allons passer par le reste de la méthode. D’abord, vous récupérer la collection de touches qui sont actuellement passe sur le TouchPanel, dans ce cas l’écran du téléphone. Si il ya des touches et l’écran se produisent pas être touché sur la dernière passe, puis vous initialisez une variété de variables relatives à la nouvelle balle. Les variables sont initialisées avec l’aide de l’d’une instance de la classe Random. Vous avez une couleur au hasard, la vélocité aléatoire et un rayon aléatoire. La balle sera toujours commencer centrée sur l’écran du téléphone.

Tire des boules

La dernière chose que vous devez faire est de dire les boules de se dessiner sur l’écran. Vérifiez la méthode de dessin dans votre GAME1 classe à la suivante:

  • protected override void Draw(GameTime gameTime)
  • {
  •     GraphicsDevice.Clear(Color.White);
  •     foreach (Ball ball in balls)
  •     {
  •         ball.Draw(spriteBatch);
  •     }
  •     base.Draw(gameTime);
  • }

Ici, vous êtes juste de définir la couleur de l’écran pour Blanc et ensuite l’instruction de chaque objet à billes à se dessiner sur l’écran.

Finition

À ce stade, vous avez un jeu entièrement fonctionnelle. La classe Ballon encapsule des informations sur chaque ballon qui rebondit sur l’écran et la classe GAME1 poignées d’entrée et gère les collecton d’objets Ball. Appuyez sur F5 pour générer et exécuter votre solution sur le Windows Phone 7 simulateur. Vous verrez un écran blanc. Tapez (ou clic) sur le téléphone Windows 7 simulateur et un nouveau ballon va apparaître. Continuez à cliquer jusqu’à ce que vous êtes satisfait avec le nombre de boules à l’écran. Vous pouvez fermer le simulateur à tout moment. Si tout fonctionne correctement, vous finirez avec quelque chose comme ce qui suit:

 Ouf Fatigué!

À propos Ibrahim Khalil
.NET Framework Developer & Microsoft Student Partner

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :