Exporter (0) Imprimer
Développer tout

Votre premier jeu - XNA Game Studio en 2D

XNA Game Studio 4.0

Suivez ces étapes pour créer un jeu simple exploitant des sprites, en utilisant XNA Game Studio. Cet exemple de code fonctionne sur toutes les plateformes, y compris sur Windows Phone.

Bb203893.note(fr-FR,XNAGameStudio.40).gifRemarque
Un sprite représente un graphique simple en 2D (tel qu'une image bitmap) qui s'affiche à l'écran par le biais d'un appel à la méthode SpriteBatch.Draw.

Exemple complet

Le code utilisé dans ce didacticiel illustre la technique décrite dans le texte. Un exemple de code complet pour ce didacticiel est disponible en téléchargement, notamment le code source complet et tous les fichiers de prise en charge requis par l'exemple.

Étape 1 : Installez vos logiciels

Avant de commencer, assurez-vous d'avoir installé tous les logiciels nécessaires, notamment une version prise en charge des outils Microsoft Visual Studio et de XNA Game Studio. Pour obtenir la liste des programmes requis, voir Exigences d'installation du logiciel.

Étape 2 : Créez un projet

  1. Depuis le menu Démarrer, cliquez sur Tous les programmes, sur le dossier XNA Game Studio 4.0, puis sur votre version prise en charge des outils Microsoft Visual Studio.

  2. Lorsque la Page de démarrage apparaît, cliquez sur le menu Fichier, puis sur Nouveau projet.

    Une boîte de dialogue reprend alors une arborescence sur le volet de gauche, intitulée Types de projets.

  3. Sélectionnez le nœud d'arbre XNA Game Studio 4.0 situé sous le nœud Visual C#.

    Un ensemble de projets disponibles s'affiche alors sur le volet de droite.

  4. Sur le volet droit de la boîte de dialogue qui apparaît, cliquez sur Jeu Windows (4.0), puis attribuez dans le champ Nom un titre à votre projet (par exemple, « MonPremierJeu »).

  5. Tapez, dans le champ Emplacement, le chemin où vous voulez enregistrer votre projet, puis cliquez sur OK.

    Après avoir créé un projet, le mode Code de votre jeu s'active.

Étape 3 : Affichez le code

Une partie du travail fastidieux est réalisée automatiquement à ce stade. Dès lors, si vous créez et exécutez votre jeu, GraphicsDeviceManager configure la taille de votre écran et renvoie à un écran vierge. Votre jeu s'exécute et s'actualise automatiquement. Vous devez adapter vous-même le code de votre jeu de sorte à rendre ce dernier plus intéressant.

La plupart du code de départ permettant d'exécuter votre jeu est pré-écrit. Vous pouvez dès lors insérer votre code.

  • La méthode Initialize constitue l'endroit où vous initialisez les ressources de votre choix qui ne nécessitent pas l'initialisation d'un GraphicsDevice.
  • La méthode LoadContent représente le point où vous chargez toutes les ressources nécessaires au jeu, tels que les modèles et les textures.
  • La méthode UnloadContent est l'emplacement de libération des ressources du jeu. D'ordinaire, aucun code supplémentaire n'est nécessaire dans cette méthode car les ressources sont libérées automatiquement lorsqu'elles ne sont plus requises.
  • La boucle Update constitue le point le plus adapté à l'actualisation de la logique de votre jeu : déplacement d'objets, saisie des joueurs, gestion des collisions d'objets, etc.
  • La boucle Draw permet d'effectuer le rendu de tous vos objets et arrière-plans à l'écran.

Étape 4 : Ajoutez un sprite

L'étape suivante consiste à ajouter un graphique pouvant être dessiné à l'écran. Faites appel à un petit fichier graphique, tel qu'un fichier .bmp or .jpg occupant un faible espace disque. Soyez créatif — vous pouvez en élaborer un vous-même. Vous pouvez en outre aller plus en avant et créer un sprite qui « masque » des parties à ne pas montrer (tels que des bords ou des coins) afin de peaufiner l'apparence.

Après avoir choisi un graphisme tiré de votre ordinateur, suivez les étapes ci-dessous.

  1. Assurez-vous que l'Explorateur de solutions s'affiche pour votre projet, à droite de la fenêtre. Dans le cas contraire, cliquez sur le menu Affichage, puis sur Explorateur de solutions.

    À son affichage, les fichiers associés à votre projet sont repris sous forme d'arborescence. Dans celle-ci, un nœud s'intitule Contenu.

  2. Cliquez avec le bouton droit sur ce nœud Contenu, cliquez ensuite sur Ajouter, sur Élément existant, puis accédez à votre graphisme.

    Si aucun fichier n'apparaît, assurez-vous que la zone de sélection Types de fichiers indique bien Fichiers de texture.

  3. Cliquez sur le fichier graphique, puis sur Ajouter.

    Une entrée correspondant au fichier apparaît alors dans l'Explorateur de solutions.

  4. Cliquez sur cette entrée dans l'Explorateur de solutions. Si cette entrée ne s'affiche pas, assurez-vous que le nœud Contenu est développé en cliquant sur le petit signe plus (+) à gauche du nœud, puis cliquez sur l'entrée apparaissant sous le nœud Contenu.

    En ajoutant un fichier de graphisme, celui-ci est automatiquement ajouté au contenu à venir du XNA Framework. Ceci vous permet de charger en toute simplicité le graphique dans votre jeu.

    Sous l'Explorateur de solutions, dans la fenêtre Propriétés, recherchez la propriété « Nom de la ressource ». Notez le nom choisi ; vous le réutiliserez ultérieurement dans votre code pour charger le graphique à afficher dans votre jeu.

  5. Si la fenêtre Propriétés n'est pas visible, appuyez sur F4, ou cliquez sur le menu Affichage puis sur Fenêtre Propriétés.

    Vous devez à présent écrire le code chargeant et affichant le sprite à l'écran.

  6. De retour dans le mode Code de votre jeu, recherchez la méthode LoadContent, puis ajoutez les lignes suivantes dans et au-dessus de la méthode :

    // This is a texture we can render.
    Texture2D myTexture;
    
    // Set the coordinates to draw the sprite at.
    Vector2 spritePosition = Vector2.Zero;
    
    protected override void LoadContent()
    {
        // Create a new SpriteBatch, which can be used to draw textures.
        spriteBatch = new SpriteBatch(GraphicsDevice);
        myTexture = Content.Load<Texture2D>("mytexture");
    }
    

    La propriété Content de la classe parente Game offre l'accès à la classe ContentManager permettant aux ressources de votre jeu de se charger.

    Assurez-vous que l'appel à la méthode Content.Load utilise le « Nom de la ressource » mentionné dans la fenêtre Propriétés à l'étape précédente. Ce code charge et prépare le traçage de votre graphique, et recharge votre graphique si le périphérique graphique est redéfini (c'est notamment le cas si la fenêtre du jeu vient à être redimensionnée).

  7. Ajoutez à présent le code à la boucle Draw, comme suit :

    protected override void Draw(GameTime gameTime)
    {
        graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
    
        // Draw the sprite.
        spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend);
        spriteBatch.Draw(myTexture, spritePosition, Color.White);
        spriteBatch.End();
    
        base.Draw(gameTime);
    }
    

    Ce code dessine à l'écran le sprite pour chaque frame.

    Le paramètre passé par la méthode Begin, BlendState.AlphaBlend s'illustre ici particulièrement. Il indique à la méthode Draw d'utiliser le canal alpha de la couleur d'origine dans le but de créer un effet de transparence, de sorte que la couleur d'origine laisse filtrer celle de destination.

  8. Créez et exécutez votre jeu.

    Le sprite apparaît alors.

Il convient alors de lui apporter de l'animation.

Étape 5 : Faites déplacer et rebondir le sprite

  • Adaptez ainsi les lignes de code de la méthode Update :

    void UpdateSprite(GameTime gameTime)
    {
        // Move the sprite by speed, scaled by elapsed time.
        spritePosition +=
            spriteSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
    
        int MaxX =
            graphics.GraphicsDevice.Viewport.Width - myTexture.Width;
        int MinX = 0;
        int MaxY =
            graphics.GraphicsDevice.Viewport.Height - myTexture.Height;
        int MinY = 0;
    
        // Check for bounce.
        if (spritePosition.X > MaxX)
        {
            spriteSpeed.X *= -1;
            spritePosition.X = MaxX;
        }
    
        else if (spritePosition.X < MinX)
        {
            spriteSpeed.X *= -1;
            spritePosition.X = MinX;
        }
    
        if (spritePosition.Y > MaxY)
        {
            spriteSpeed.Y *= -1;
            spritePosition.Y = MaxY;
        }
    
        else if (spritePosition.Y < MinY)
        {
            spriteSpeed.Y *= -1;
            spritePosition.Y = MinY;
        }
    }
    

Ceci permet d'ajouter la logique nécessaire pour faire bouger le sprite à chaque frame et le faire changer de direction dès lors qu'il rencontre les bords de la fenêtre du jeu.

  • Créez et exécutez votre jeu.

Le sprite se déplace sur l'écran et change de direction lorsqu'il rencontre les bords de la fenêtre du jeu.

Étape 6 : Étudiez les possibilités

Dès lors, il vous est possible d'adapter le jeu pratiquement comme bon vous semble.

Voici quelques idées pour vous permettre d'étendre le présent exemple :

Ajouts de la communauté

AJOUTER
Afficher:
© 2014 Microsoft