Share
XNA est une infrastructure de création de jeux de haut niveau pour les appareils Microsoft, notamment les ordinateurs Windows, la Xbox 360 et le tout nouveau système d’exploitation Windows Phone 7. Dans un précédent tutoriel, nous avions abordé les bases du framework XNA, notamment la gestion des entrées et l'affichage des sprites. Dans cet article, vous apprendrez à combiner ces compétences avec une idée de jeu de votre cru pour créer quelque chose d'amusant à jouer et facile à comprendre..
Dans ce tutoriel, vous allez créer un simple jeu de Tic-Tac-Toe jouable avec des amis. Tic-Tac-Toe est un jeu simple dans lequel deux joueurs jouent tour à tour en plaçant les personnages sur une grille de trois par trois. Le premier joueur utilise un O et le second utilise un X. Pour gagner la partie, un joueur doit disposer trois de ses personnages dans une rangée, une colonne ou une diagonale..
Bien que ce jeu soit simple, il nécessite quelques compétences différentes à développer. Premièrement, vous utiliserez XNA et ses capacités graphiques pour créer votre jeu. En tant que tel, vous devez être familiarisé avec l'affichage des sprites. Deuxièmement, vous devez savoir gérer les contacts sur l’écran tactile du téléphone. Heureusement, XNA fournit une API de haut niveau pour accéder à ces informations. Enfin, vous devez appliquer un peu de savoir-faire en matière de programmation et de logique afin de choisir le gagnant. Pour ce tutoriel, une grande partie de cela vous sera donnée. Lorsque vous construirez des jeux dans le futur, vous devrez proposer vos propres idées et logique..
Pour commencer, assurez-vous d’avoir installé les derniers outils de développement Windows Phone 7. Si vous n'avez pas mis à jour vos outils depuis le dernier tutoriel WP7 sur MobileTuts, visitez le Centre de téléchargement Microsoft et obtenez la version RTW. Cette dernière version est livrée avec l'émulateur final qui montre comment vos applications fonctionneront avec le matériel du jour de la publication..
Après vous être assuré que vos outils sont à jour, ouvrez Visual Studio 2010 et cliquez sur le lien "Nouveau projet ..." 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 modèle «Windows Phone Game (4.0)» est sélectionné à droite. Attribuez à votre projet un nom approprié tel que «TicTacToe» et confirmez que la case «Créer un répertoire pour la solution» est cochée. Si vous avez tout fait correctement, votre boîte de dialogue devrait correspondre à l'image suivante:
Cliquez sur “OK” pour créer votre nouveau projet. Visual Studio 2010 générera les fichiers nécessaires dans le répertoire spécifié et s’ouvrira. Game1.cs pour l'édition.
Dans la mesure où vous utiliserez des images-objets pour tous les graphiques de jeu de ce projet, vous devez importer les éléments requis dans votre projet. Dans le téléchargement accompagnant ce didacticiel, vous trouverez une Médias répertoire contenant une variété d'images. Dans l'explorateur de solutions situé à droite de l'écran, localisez le projet Content (appelé TicTacToeContent) et cliquez dessus avec le bouton droit de la souris. Dans le menu contextuel, sélectionnez «Ajouter> Élément existant…». Lorsque la boîte de dialogue s'ouvre, naviguez jusqu'à la Médias dossier que vous avez décompressé du téléchargement du didacticiel et sélectionnez toutes les images qu’il contient. Vous devriez être capable de dire à partir des noms d’image exactement ce que chaque élément contient.
Après avoir importé votre média, votre explorateur de solution devrait ressembler à ceci:
Maintenant que votre média a été importé dans le projet de contenu attaché à votre solution, vous devez charger chaque image en tant que texture distincte. Comme vous utiliserez ces textures tout au long de votre jeu, vous les stockerez dans des champs situés à l'intérieur de votre classe de jeu. Ouvrez le fichier Game1.cs et ajoutez les champs suivants en haut de votre déclaration de classe:
Texture2D gridTexture; Rectangle gridRectangle; Texture2D resetButton; Rectangle resetButtonPosition; Texture2D oPiece; Texture2D xPiece; Texture2D oWinner; Texture2D xWinner; Texture2D noWinner; Texture2D oTurn; Texture2D xTurn;
Vous voyez que chacune des images que vous avez importées possède un champ pour la sauvegarder. De plus, la grille de jeu principale et la texture du bouton de réinitialisation ont des champs de type Rectangle qui sera utilisé pour positionner ces éléments. Ceux-ci sont stockés sous forme de champs car ils ne changeront pas au cours de la partie..
Maintenant que vous avez créé les champs appropriés, il est temps d'instancier le Texture2D et Rectangle objets assignés aux champs. Faites défiler jusqu'à votre Game1.cs déposer jusqu'à ce que vous atteigniez le LoadContent méthode. À l'intérieur de cette méthode, insérez le code suivant après la ligne qui lit spriteBatch = new SpriteBatch (GraphicsDevice);:
gridTexture = Content.Load("TicTacToe_Grid"); gridRectangle = new Rectangle (0, 0, spriteBatch.GraphicsDevice.Viewport.Width, spriteBatch.GraphicsDevice.Viewport.Height); oPiece = Content.Load ("TicTacToe_O"); xPiece = Content.Load ("TicTacToe_X"); resetButton = Content.Load ("TicTacToe_Reset"); resetButtonPosition = new Rectangle (spriteBatch.GraphicsDevice.Viewport.Width / 2 - (resetButton.Width / 2), spriteBatch.GraphicsDevice.Viewport.Height - 95, resetButton.Width, resetButton.Height); oWinner = Content.Load ("TicTacToe_O_Winner"); xWinner = Content.Load ("TicTacToe_X_Winner"); noWinner = Content.Load ("TicTacToe_Draw"); oTurn = Content.Load ("TicTacToe_O_Turn"); xTurn = Content.Load ("TicTacToe_X_Turn");
Après avoir chargé les sprites qui seront utilisés par le jeu, vous devez définir le flux de travail sur lequel le jeu sera exécuté. Pour les besoins de Tic-Tac-Toe, cela est assez simple et ressemble à ce qui suit:
Comme vous pouvez probablement le constater, ces étapes entrent dans l’une des deux catégories de base, Draw ou Update. Numérisation à travers le Game1.cs le fichier, vous verrez que vous avez deux méthodes, Dessiner et Mettre à jour qui sont les conteneurs parfaits pour le code requis pour décrire le flux de travail.
En regardant le flux de travail, vous pouvez voir qu'il y a quatre éléments différents à suivre pour gérer l'état du jeu. Tout d'abord, vous devez suivre l'état de chaque point de la grille sur le terrain. Pour ce faire, vous utiliserez une énumération personnalisée et un tableau multidimensionnel. Ensuite, vous devez savoir si le jeu a été gagné et par qui. Troisièmement, vous devez suivre le virage de qui. Enfin, vous devez déterminer si le jeu est gagnable. Cet article est initialisé comme vrai et est recalculé après que chaque joueur ait son tour. Lorsque tous les points de la grille sont remplis, cela change en faux.
Vous commencerez par définir l'énumération personnalisée décrivant un joueur pour votre jeu. En haut de votre fichier de classe, au-dessus de votre déclaration de classe, ajoutez le code suivant:
enum public TicTacToePlayer Aucun, PlayerO, PlayerX
Cette énumération définit trois joueurs (Aucun, PlayerO et PlayerX) et sera utilisée pour suivre l'état de la grille et le gagnant du jeu. Ajoutez maintenant les variables d’instance qui vous aideront à suivre l’état du jeu. Ces éléments doivent être ajoutés en haut de votre déclaration de classe:
bool gagnable; Gagnant de TicTacToePlayer; TicTacToePlayer current; TicTacToePlayer [,] grille;
Vous stockez quatre choses ici. Tout d’abord, vous déterminez si le jeu est toujours gagnable. Deuxièmement, vous déclarez le gagnant. Si le gagnant est Aucun, alors le jeu continue. Après cela, vous stockez le lecteur actuel. Enfin, vous stockez l'état de la grille. À ce stade, vous devez toujours initialiser chacune de ces variables. En pensant à l’avenir, vous savez que vous devrez les réinitialiser chaque fois que quelqu'un cliquera sur le bouton Réinitialiser. Nous pourrons ainsi créer une nouvelle méthode qui gérera cette initialisation. Ajoutez la nouvelle méthode à votre classe sous le Initialiser méthode comme suit:
privé void Reset () winnable = true; gagnant = TicTacToePlayer.None; grid = new TicTacToePlayer [3, 3]; pour (int i = 0; i < 3; i++) for (int j = 0; j < 3; j++) grid[i, j] = TicTacToePlayer.None;
Maintenant, appelez cette nouvelle méthode à partir du Initialiser méthode en l’ajustant comme suit:
protection prioritaire void Initialize () Reset (); base.Initialize ();
À ce stade, vous stockez toutes les données dont vous avez besoin. Commencez donc par dessiner l'interface..
Avant de commencer à dessiner quoi que ce soit, vous devez définir la largeur et la hauteur que vous préférez pour votre appareil. Vous ferez cela à l'intérieur du Game1 constructeur. Changez-le pour lire comme suit:
public Game1 () graphics = new GraphicsDeviceManager (this); Content.RootDirectory = "Content"; graphics.PreferredBackBufferWidth = 480; graphics.PreferredBackBufferHeight = 800; // La cadence est de 30 images par seconde par défaut pour Windows Phone. TargetElapsedTime = TimeSpan.FromTicks (333333);
Vous avez ajouté des instructions indiquant que vous souhaitez que la largeur de la mémoire tampon de retour soit de 480 pixels et que la hauteur soit de 800 pixels. Cela simplifie grandement le dessin du reste des composants pour le jeu..
Pour que les choses restent simples, vous allez effectuer chaque étape du dessin dans une méthode distincte. Ces méthodes seront ensuite appelées à partir de la base Dessiner méthode qui existe déjà. Commençons par penser à de bons noms pour chacune des étapes du processus de jeu, en créant des méthodes portant ce nom et en ajoutant des appels à ces méthodes à partir de Dessiner. À mon avis, les noms de méthode suivants décrivent de manière adéquate à la fois ce qu’ils vont faire et les étapes du flux de travail couvertes:
Créez ces méthodes maintenant en insérant le code suivant sous votre Dessiner méthode:
void privé DrawGrid () void privé DrawPieces () void privé DrawStatus () void privé DrawResetButton ()
Vous écrirez le code pour ces méthodes dans un moment, mais pour le moment vous devez les ajouter à votre Dessiner méthode en l’ajustant comme suit:
protégé annuler void Draw (GameTime gameTime) GraphicsDevice.Clear (Color.Black); spriteBatch.Begin (); DrawGrid (); DrawPieces (); DrawStatus (); DrawResetButton (); spriteBatch.End (); base.Draw (gameTime);
Vous remarquerez que vous avez entouré les appels à vos méthodes d'assistance par des appels à la spriteBatch objets Commencer et Fin méthodes. Vous le faites parce que vos méthodes d’aide dessineront toutes des sprites et qu’il est beaucoup plus efficace d’appeler le Commencer et Fin paire une fois à l'intérieur de Dessiner plutôt qu'à l'intérieur de chaque méthode d'assistance.
Maintenant, travaillons pour que la grille de jeu apparaisse. La grille de lecture est une image de 480 pixels de largeur sur 800 pixels de hauteur avec un arrière-plan transparent et une grille blanche de 150 pixels de largeur située au centre. Vous l'avez importé plus tôt. L'afficher à l'écran du téléphone ne pourrait être plus simple. Vous prenez la texture que vous avez chargée et stockée dans le gridTexture variable et dessinez-la en la positionnant en utilisant le précédent instancié grilleRectangle variable, en passant les deux éléments à la spriteBatch objets Dessiner méthode. Change ton DrawGrid méthode à lire comme suit:
private void DrawGrid () spriteBatch.Draw (gridTexture, gridRectangle, Color.White);
Enregistrez le fichier dans lequel vous travaillez et appuyez sur F5 pour compiler et exécuter votre projet. L'émulateur Windows Phone 7 doit apparaître et afficher votre grille Tic-Tac-Toe sur un fond noir, à l'image de l'image suivante:
Maintenant que la grille est en place, dessinons les pièces à jouer. À ce stade, nous pouvons appliquer une logique simple pour afficher les éléments, mais rien ne s'affiche tant que nous n'avons pas ajouté le code permettant de gérer les éléments tactiles et de jouer au jeu. Modifier votre DrawPieces méthode comme suit:
DrawPieces void privé () pour (int i = 0; i < 3; i++) for (int j = 0; j < 3; j++) if (grid[i, j] != TicTacToePlayer.None) Texture2D texture = grid[i, j] == TicTacToePlayer.PlayerO ? oPiece : xPiece; Rectangle position = GetGridSpace(i, j, texture.Width, texture.Height); spriteBatch.Draw(texture, position, Color.White);
Si vous avez l'œil vif (ou plus probablement, Visual Studio vous montre des lignes ondulées rouges), vous verrez que le GetGridSpace méthode est manquant. GetGridSpace est une méthode pratique qui permet de garder un peu de code sur le DrawPieces méthode et sera également utile lorsque vous essayez de gérer les touches plus tard. Ajoutez-le au bas de votre déclaration de classe comme suit:
Rectangle privé GetGridSpace (int colonne, int ligne, int largeur, int hauteur) int centerX = spriteBatch.GraphicsDevice.Viewport.Width / 2; int centerY = spriteBatch.GraphicsDevice.Viewport.Height / 2; int x = centreX + ((colonne - 1) * 150) - (largeur / 2); int y = centreY + ((rangée - 1) * 150) - (hauteur / 2); retourne un nouveau rectangle (x, y, largeur, hauteur);
Maintenant, regardons le reste de DrawPieces. Cette méthode est un peu plus compliquée que la DrawGrid mais cela devrait quand même être assez facile à comprendre. Vous parcourez chaque ligne et colonne du terrain de jeu, stockées dans le la grille variable, et vérifiez pour voir l'état de cet espace de grille. Si la grille contient un lecteur autre que «Aucun», dessinez la texture appropriée. Vous utilisez l'opérateur ternaire pour saisir la texture correcte en fonction de l'état de l'espace de la grille, puis la dessiner à l'aide du rectangle obtenu à partir de GetGridSpace.
Le prochain problème à traiter est de dessiner le statut actuel. Le statut indique à qui appartient le tour, qui a remporté le match ou si le match est nul. Remplissez la méthode comme suit:
private void DrawStatus () Texture2D texture; if (gagnant! = TicTacToePlayer.None) texture = gagnant == TicTacToePlayer.PlayerO? oWinner: xWinner; else if (! winnable) texture = noWinner; else texture = current == TicTacToePlayer.PlayerO? oTurn: xTurn; Position du rectangle = new Rectangle (spriteBatch.GraphicsDevice.Viewport.Width / 2 - (texture.Width / 2), 15, texture.Width, texture.Height); spriteBatch.Draw (texture, position, Color.White);
Cette méthode ne diffère pas beaucoup des autres méthodes de dessin que vous avez créées jusqu'à présent. Vous avez une texture et une position et vous devez dessiner la texture à l'écran. La partie intéressante de cette méthode consiste à déterminer quelle texture dessiner. Vous commencez par vérifier s'il y a un gagnant. Si c'est le cas, vous choisissez la texture gagnante correcte et vous la dessinez. Ensuite, vous vérifiez si tous les espaces de la grille ont été occupés et que le jeu ne peut plus être gagné. Si tel est le cas, choisissez la texture sans gagnant et dessinez celle-ci. Si aucune de ces conditions n'est vraie, alors vous vérifiez le tour de votre joueur, choisissez la texture de tour correcte et dessinez celle-ci. Si vous compilez et exécutez votre projet à ce stade (en appuyant sur F5), vous verrez que l'interface indique que c'est au tour de O:
Enfin, vous allez créer le code qui dessine le bouton de réinitialisation. C'est assez simple. S'il y a un gagnant ou si le jeu n'est plus disponible, vous dessinez la texture du bouton de réinitialisation. Modifier le DrawResetButton méthode de sorte qu'il se lit comme suit:
void privé DrawResetButton () if (gagnant! = TicTacToePlayer.None ||! winnable) spriteBatch.Draw (resetButton, resetButtonPosition, Color.White);
À ce stade, vous avez créé tout le code nécessaire au dessin de votre interface et de tous ses composants. Maintenant, il vous suffit de gérer la mise à jour de votre jeu en fonction des contacts des joueurs..
Si vous avez suivi le dernier tutoriel sur XNA, une grande partie du code suivant vous semblera familier. La manipulation des touches à l'écran est quelque chose d'assez standard et ce n'est que dans le code de manipulation tactile que vous aurez votre logique de jeu. Pour commencer, mettons le code de manipulation tactile de base dans le Mettre à jour méthode. Trouver Mettre à jour dans ton Game1 class et le modifier comme suit:
protégé annulation void Update (GameTime gameTime) if (GamePad.GetState (PlayerIndex.One) .Buttons.Back == ButtonState.Pressed) this.Exit (); TouchCollection touches = TouchPanel.GetState (); if (! touching && touches.Count> 0) touching = true; TouchLocation touch = touch.First (); HandleBoardTouch (tactile); HandleResetTouch (tactile); else if (touche.Count == 0) touching = false; base.Update (gameTime);
Il y a quelques choses dans cette méthode à faire attention. Tout d'abord, vous remarquerez un nouveau émouvant variable qui n'existe pas. Cette variable stocke si le joueur touchait ou non le tableau de la précédente Mettre à jour d’appeler et empêche un doigt en attente de jouer plusieurs fois sans se dégager de l’écran. Ajouter émouvant comme variable d'instance en haut de votre déclaration de classe.
bool toucher;
Vous remarquerez également que vous effectuez deux appels de méthode dans le Mettre à jour méthode à des méthodes qui n'existent pas encore. Ajoutez ces méthodes à votre déclaration de classe directement sous la Mettre à jour méthode:
privé void HandleBoardTouch (TouchLocation touch) privé void HandleResetTouch (TouchLocation touch)
Maintenant, en parcourant le Mettre à jour méthode que vous voyez que vous vérifiez les contacts actuels sur l'écran. S'il y a des contacts et que le joueur n'a pas encore touché l'écran, vous saisissez le premier contact et transmettez-le aux méthodes qui gèrent les contacts du tableau et réinitialisent les contacts. Si le joueur ne touche pas l'écran et qu'ils étaient auparavant, vous mettez à jour le émouvant variable à false.
À ce stade, remplissons le PoignéeBoardTouch et HandleResetTouch méthodes. Celles-ci correspondent aux étapes 5 et 6 du flux de travail..
Lorsqu'un utilisateur touche l'écran, le jeu doit faire plusieurs choses:
Mettre à jour le PoignéeBoardTouch à lire comme suit, en effectuant toutes les étapes ci-dessus:
Void privé HandleBoardTouch (TouchLocation touch) if (gagnant == TicTacToePlayer.None) pour (int i = 0; i < 3; i++) for (int j = 0; j < 3; j++) Rectangle box = GetGridSpace(i, j, 150, 150); if (grid[i, j] == TicTacToePlayer.None && box.Contains((int)touch.Position.X, (int)touch.Position.Y)) grid[i, j] = current; CheckForWin(current); CheckForWinnable(); current = current == TicTacToePlayer.PlayerO ? TicTacToePlayer.PlayerX : TicTacToePlayer.PlayerO;
Comme vous pouvez le constater, cette méthode suit le schéma de base ci-dessus. S'il n'y a pas de gagnant, il parcourt chaque espace de la grille, vérifie si le contact est dans cet espace, vérifie si l'espace est ouvert, puis place un morceau à cet endroit. Rechercher un gagnant et s'assurer que le jeu est toujours gagnable sont gérés par d'autres méthodes. Éliminons ces méthodes maintenant. Sous le PoignéeBoardTouch méthode, ajoutez le code suivant:
CheckForWin (lecteur TicTacToePlayer) privé voilé CheckForWinnable () void privé
Pour l'instant, laissez ces méthodes en blanc, compilez et exécutez votre partie. Essayez de toucher le tableau en cliquant sur l'émulateur et regardez le message d'état changer et l'affichage des pièces à jouer. Vous êtes maintenant sur la voie d'un jeu complet!
À ce stade, vous arrivez à la vraie viande du jeu, la logique gagnante. Comme indiqué précédemment, un état gagnant se produit lorsque les pièces d'un joueur occupent l'une des rangées, l'une des colonnes ou l'une des deux diagonales. Le jeu devient impossible à gagner lorsqu'il n'y a pas de gagnant déclaré et qu'il ne reste plus de places inoccupées. Pour ce jeu, nous utilisons un tableau multidimensionnel pour stocker l'état de la grille et C # ne fournit pas de méthode pour vérifier les lignes, les colonnes ou les diagonales. Heureusement, le langage supporte une fonctionnalité géniale appelée méthodes d'extension que vous utiliserez ici pour rendre votre code un peu plus propre.
Pour créer les méthodes d'extension, vous devez d'abord créer une nouvelle classe. Cliquez sur le nom de votre projet dans l'explorateur de solutions, puis cliquez sur «Ajouter> Classe…». Nommez votre classe MultiDimensionalArrayExtensions et cliquez sur «Ajouter». Lorsque votre nouveau fichier s'ouvre pour modification, modifiez-le afin que votre déclaration de classe se présente comme suit:
classe statique publique MultiDimensionalArrayExtensions
Vous verrez que vous avez ajouté les modificateurs Publique et statique à la déclaration de classe. Ceci est nécessaire pour créer des méthodes d'extension. Maintenant, nous allons créer quelques méthodes dont nous aurons besoin, chacune d’elles renvoyant un IEnumerable pour interroger facilement:
Modifiez à nouveau votre classe en ajoutant les méthodes comme suit:
classe statique publique MultiDimensionalArrayExtensions public static IEnumerableRangée (ce tableau T [,], int ligne) var columnLower = array.GetLowerBound (1); var columnUpper = array.GetUpperBound (1); pour (int i = columnLower; i <= columnUpper; i++) yield return array[row, i]; public static IEnumerable Colonne (ce tableau T [,], colonne int) var rowLower = array.GetLowerBound (0); var rowUpper = array.GetUpperBound (0); pour (int i = rowLower; i <= rowUpper; i++) yield return array[i, column]; public static IEnumerable Diagonale (ce tableau T [,], direction DiagonalDirection) var rowLower = array.GetLowerBound (0); var rowUpper = array.GetUpperBound (0); var columnLower = array.GetLowerBound (1); var columnUpper = array.GetUpperBound (1); pour (int row = rowLower, column = columnLower; row <= rowUpper && column <= columnUpper; row++, column++) int realColumn = column; if (direction == DiagonalDirection.DownLeft) realColumn = columnUpper - columnLower - column; yield return array[row, realColumn]; public enum DiagonalDirection DownRight, DownLeft public static IEnumerable Tout (ce tableau T [,]) var rowLower = array.GetLowerBound (0); var rowUpper = array.GetUpperBound (0); var columnLower = array.GetLowerBound (1); var columnUpper = array.GetUpperBound (1); pour (int row = rowLower; row <= rowUpper; row++) for (int column = columnLower; column <= columnUpper; column++) yield return array[row, column];
Vous pouvez voir qu'il n'y a pas beaucoup à ces méthodes. Pour chacun d'entre eux, une partie particulière du tableau multidimensionnel est itérée et cette partie du tableau est renvoyée dans le cadre d'un IEnumerable. La seule partie vraiment délicate peut être l'utilisation de la rendement mot-clé. Une explication du comportement de ce mot clé n'entre pas dans le cadre de cet article, mais la référence C # sur MSDN pour le mot clé Rendement peut être utile si vous souhaitez en savoir plus. En passant, une grande partie du travail effectué sur ces méthodes d'extension provient d'une contribution de l'utilisateur sur StackOverflow que vous pouvez trouver ici.
Maintenant que les méthodes d'extension nécessaires sont implémentées, il devrait être assez facile d'implémenter la logique de gain. Revenons à la CheckForWin méthode et le mettre en œuvre. Mettez à jour la méthode pour lire comme suit:
Accentsconagua
