Share
Windows Phone 7 est le dernier système d'exploitation mobile de Microsoft. Dans un précédent tutoriel, j'avais présenté la plate-forme, les outils de développement et appris à créer une application à l'aide de Silverlight, l'une des deux méthodes disponibles pour créer des applications sur Windows Phone 7. Dans cet article, vous allez découvrir la deuxième méthode. pour créer des applications sur WP7, XNA.
XNA est un framework de développement créé par Microsoft qui encapsule les détails technologiques de bas niveau impliqués dans la création d'un jeu et vous permet de vous concentrer sur ce qui rend le jeu amusant. XNA Framework s’appuie sur le .NET Framework, la plate-forme de développement standard de Microsoft, et consiste en une bibliothèque d’outils et de codes permettant aux développeurs de créer rapidement des jeux pour Windows, XBox 360 et Windows Phone 7..
La structure XNA a évolué au fil des années et comprend désormais la prise en charge de la lecture audio et vidéo, les fonctionnalités multi-joueurs Xbox Live, les avatars Xbox 360, etc. Surtout pour vos besoins, il est facile de dessiner sur l'écran de l'appareil avec lequel vous travaillez.
Dans ce tutoriel, vous allez créer une application simple appelée Bouncing Balls. L'écran commencera à blanc. Lorsque vous touchez l'écran, une nouvelle balle avec une vitesse et une couleur aléatoires est ajoutée à la collection de balles rebondissantes. Si vous appuyez à nouveau sur l'écran, une autre balle sera ajoutée. 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 lien «Nouveau projet…» dans la barre latérale gauche. Dans la boîte de dialogue qui s'affiche, choisissez «XNA Game Studio 4» dans la colonne de gauche et assurez-vous que l'élément «Windows Phone Game (4.0)» est sélectionné. Ensuite, donnez un nom à votre projet. Pour ce tutoriel, je vous recommande d'appeler votre projet «BouncingBalls». Confirmez que la case «Créer un répertoire pour la solution» est cochée. Si vous avez fait tout cela, votre boîte de dialogue apparaîtra comme la mienne (avec moins d'options, très probablement):
Cliquez sur “OK” pour créer votre nouveau projet. Visual Studio créera tous les fichiers requis dans votre répertoire spécifié et ouvrira Game1.cs pour vous..
Pour ce projet, vous utiliserez des sprites pour dessiner les balles à l'écran. En tant que tel, vous devez importer une image dans le projet pour l'utiliser comme sprite boule. Téléchargez l'image suivante en faisant un clic droit et enregistrez-la dans un endroit pratique. C'est un simple cercle blanc d'un diamètre de 512 pixels que j'ai créé dans Photoshop. Le fichier se trouve également dans l'exemple de code de projet disponible dans ce tutoriel..
Dans Visual Studio, recherchez l'explorateur de solutions dans la barre latérale droite. Recherchez un élément de la liste appelé BouncingBallsContent (Content) et cliquez dessus avec le bouton droit de la souris. Dans le menu contextuel qui apparaît, passez la souris sur “Ajouter” et sélectionnez “Elément existant…” Recherchez le fichier Ball.png et ajoutez-le à votre projet. Votre explorateur de solutions devrait maintenant ressembler à ceci:
Lorsque vous utilisez le framework XNA, tous les jeux que vous créez ont le même flux de base. Tout d'abord, une instance de votre objet de jeu est construite. Par défaut, Visual Studio nomme votre fichier de jeu Game1.cs et votre classe de jeu Game1..
Une fois votre jeu construit, la méthode Initialize est appelée. Initialiser vous donne la possibilité de charger les services requis et tout contenu non graphique. Ensuite, la méthode LoadContent est appelée. LoadContent est l'endroit où vous chargez le contenu graphique dont vous avez besoin pour que votre jeu se dessine tout seul. Enfin, une boucle infinie commence lorsque les méthodes Update et Draw de votre jeu sont appelées successivement jusqu'à la fermeture du jeu..
Sur Windows Phone 7, vous avez la possibilité de configurer votre jeu pour qu'il s'exécute en mode plein écran. Cela masque l'affichage de l'état du téléphone et vous donne plus d'espace pour travailler. En tant que tel, il est conseillé de faire tourner la plupart des jeux en mode plein écran..
Pour activer le mode plein écran, recherchez le constructeur de votre classe de jeu et placez votre curseur à l'intérieur. Vous allez définir une propriété sur votre gestionnaire de périphérique graphique qui indique à votre jeu de fonctionner en mode plein écran. Modifiez le constructeur afin qu'il ressemble à ce qui suit:
public Game1 () graphics = new GraphicsDeviceManager (this); graphics.IsFullScreen = true; Content.RootDirectory = "Content"; // La cadence est de 30 images par seconde par défaut pour Windows Phone. TargetElapsedTime = TimeSpan.FromTicks (333333); // Paramètres pré-échelle. graphics.PreferredBackBufferWidth = 480; graphics.PreferredBackBufferHeight = 800;
La prochaine chose à faire est de charger la texture de la balle qui sera utilisée pour toutes les balles du jeu. Parce que nous ne voulons pas charger la texture encore et encore, nous allons la stocker comme un champ public dans notre jeu..
La première chose à faire est de créer un nouveau champ public dans la classe Game1. En haut de votre définition de classe, près des champs prégénérés, ajoutez une déclaration pour un objet Texture2D afin que votre section de champ ressemble à ce qui suit:
GraphicsDeviceManager graphiques; SpriteBatch spriteBatch; Texture2D ballTexture;
Maintenant, vous devez réellement charger la texture. Recherchez le LoadContent de votre classe Game1 et insérez la déclaration suivante:
ballTexture = Content.Load("Ballon");
Votre application va contenir un certain nombre de balles qui apparaissent et se déplacent à l'écran. En tant que tel, il est logique de créer une nouvelle classe contenant des informations sur une balle. Commencez par cliquer avec le bouton droit de la souris sur le nom de votre projet dans l'explorateur de solutions, passez la souris sur «Ajouter», puis cliquez sur «Classe…». Nommez la classe Ball.cs..
La classe de balle doit stocker les informations suivantes sur la balle:
En tant que tel, nous devrons créer des champs dans la classe Ball pour chacun de ces éléments. En haut de votre classe Ball, ajoutez le code suivant:
Jeu Game1; Couleur couleur; Texture2D texture; Vector2 topLeft; Vitesse du vecteur 2; rayon de flottement; échelle de flotteur;
Maintenant, vous devez vous assurer que chacun de ces éléments est initialisé lors de la création d'une balle. Vous devez créer un constructeur qui prend les paramètres appropriés. Le champ d'échelle est dérivé du rayon et de la taille de la texture, il n'est donc pas nécessaire de le transmettre au constructeur. Ajoutez ce qui suit à votre cours de balle:
balle publique (couleur, texture Texture2D, centre Vector2, vitesse Vector2, rayon de flottement) this.game = game; this.color = couleur; this.texture = texture; this.topLeft = new Vector2 (center.X - rayon, center.Y - rayon); this.velocity = vélocité; this.radius = rayon; CalculateScale ();
Vous remarquerez que chacun des paramètres est affecté à un champ d'instance. Ensuite, une nouvelle méthode appelée CalculateScale est appelée. Cette méthode calcule l’échelle entre le rayon souhaité et la taille réelle de l’image-objet pour un cas particulier de balle. Ajoutez ce qui suit à votre cours de balle:
void privé CalculateScale () float width = (float) texture.Bounds.Width; this.scale = (this.radius * 2) / width;
Il y a deux derniers points qui doivent arriver avec chaque balle. Une balle doit pouvoir se dessiner et se mettre à jour. Commençons par le dessin. Créez la méthode Draw dans votre classe Ball comme suit:
public void Draw (lot SpriteBatch) batch.Begin (); batch.Draw (texture, topLeft, null, couleur, 0f, Vector2.Zero, échelle, SpriteEffects.None, 0f); batch.End ();
Vous verrez dans le code ci-dessus que la méthode Draw reçoit un objet SpriteBatch. Ce SpriteBatch est utilisé pour dessiner le sprite pour le ballon. Vous commencez à dessiner avec SpriteBatch en appelant Begin et vous arrêtez de dessiner en appelant End. Au milieu, vous utilisez la méthode Draw sur l'objet SpriteBatch pour dessiner la balle..
La méthode SpriteBatch.Draw utilise un certain nombre de paramètres, mais les plus importants sont la texture, le topLeft, la couleur et l’échelle:
Maintenant, gérons les mises à jour. Ajoutez les deux méthodes suivantes à votre classe Ball:
public void Update () BounceBall (); topLeft + = vélocité; private void BounceBall () Vector2 newTopLeft = topLeft + vélocité; flotter à gauche, à droite, en haut, en bas; left = newTopLeft.X; right = newTopLeft.X + (rayon * 2); top = newTopLeft.Y; bottom = newTopLeft.Y + (rayon * 2); si (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 constater, la méthode Update est assez simple. Il délègue à la méthode BounceBall qui gère la mise à jour de la vélocité, puis met à jour la en haut à gauche variable en le combinant avec la vitesse de la balle. La méthode BounceBall semble un peu compliquée, mais elle est vraiment très simple. Tout d'abord, vous calculez les nouvelles limites supérieure, inférieure, droite et gauche de la balle après un pas de vitesse. Ensuite, vous vérifiez si ces nouvelles limites sont en dehors de la zone visible du téléphone. Si le haut ou le bas se trouvent en dehors de la zone visible, vous inversez la direction de la vitesse Y. Si la droite ou la gauche se trouvent en dehors de la zone visible, vous inversez la direction de la vitesse X. C'est ce qui fait rebondir la balle.
À ce stade, vous avez un cours complet de balle et nous pouvons commencer à les ajouter à la classe Game1..
Vous stockerez les balles de votre jeu dans votre classe Game1. Ouvrez Game1.cs et ajoutez un nouveau champ comme suit:
IListeballes = nouvelle liste ();
Cette instruction crée et instancie un conteneur pour les balles qui seront dessinées à l'écran.
La dernière partie de cette application consiste à permettre aux utilisateurs de créer des balles en appuyant sur l'écran. Cela doit se produire dans la boucle de mise à jour du jeu. Recherchez la méthode Update pour votre classe Game1 et insérez-y les instructions suivantes:
HandleTouches (); UpdateBalls ();
Sous la méthode Update, créez les deux nouvelles méthodes HandleTouches et UpdateBalls. UpdateBalls devrait ressembler à ceci:
UpdateBalls () foreach (ball ball en balles) ball.Update ();
Cette méthode est simple. Il parcourt chaque balle dans la liste des des balles et appelle sa méthode Update. Si vous vous en souvenez plus tôt, le Ball.Update () La méthode change simplement la position de la balle. La méthode suivante est légèrement plus complexe. Votre méthode HandleTouches devrait ressembler à ceci:
void privé HandleTouches () TouchCollection touches = TouchPanel.GetState (); if (! touching && touches.Count> 0) touching = true; Random random = new Random (DateTime.Now.Millisecond); Color ballColor = new Couleur (random.Next (255), random.Next (255), random.Next (255)); Vector2 vitesse = nouveau 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); rayon de flottement = 25f * (float) random.NextDouble () + 5f; balls.Add (nouvelle Ball (this, ballColor, ballTexture, centre, vitesse, rayon)); else if (touche.Count == 0) touching = false;
Voyez-vous cela émouvant variable à l'intérieur? Cela stocke si l'écran a été touché lors du dernier passage via Update. Cela garantit qu’un contact prolongé ne crée pas plusieurs balles. Vous devez créer cela en tant que champ dans la classe Game1, faites donc défiler jusqu'à vos champs et ajoutez-le comme suit:
bool touching = false;
Passons maintenant au reste de la méthode. Tout d'abord, vous récupérez la collection de contacts qui se produit actuellement sur le TouchPanel, en l'occurrence l'écran du téléphone. Si des contacts se produisent et que l'écran n'a pas été touché lors de la dernière passe, vous devez initialiser diverses variables relatives à la nouvelle balle. Les variables sont initialisées à l'aide d'une instance de la classe Random. Vous avez une couleur aléatoire, une vitesse aléatoire et un rayon aléatoire. La balle va toujours commencer centrée sur l'écran du téléphone.
La dernière chose à faire est de dire aux boules de se dessiner à l'écran. Vérifiez la méthode Draw de votre classe Game1 comme suit:
protégé annulation void Draw (GameTime gameTime) GraphicsDevice.Clear (Color.White); foreach (balle en boule) ball.Draw (spriteBatch); base.Draw (gameTime);
Ici, vous définissez simplement la couleur de l'écran en blanc, puis vous indiquez à chaque objet Ball de se dessiner à l'écran..
À ce stade, vous avez un jeu entièrement fonctionnel. La classe Ball encapsule des informations sur chaque balle qui rebondit sur l'écran. La classe Game1 gère les entrées et gère la collection d'objets Ball. Appuyez sur F5 pour créer et exécuter votre solution sur le simulateur Windows Phone 7. Vous verrez un écran blanc vierge. Tapez sur (ou cliquez) sur le simulateur Windows Phone 7 et une nouvelle balle apparaîtra. Continuez à cliquer jusqu'à ce que vous soyez satisfait du nombre de balles à l'écran. Vous pouvez fermer le simulateur à tout moment. Si tout fonctionne correctement, vous obtiendrez quelque chose comme ceci:
J'espère que vous avez apprécié le tutoriel. Cela n'a fait qu'effleurer la surface de l'écriture des jeux XNA pour Windows Phone 7. Si vous souhaitez en savoir plus, je vous recommande ce qui suit:
Accentsconagua