cazh-CNendeeliwhiiditjakoptrues

     

 

Programmation graphique

Chapitre 1: Découvrons et installons XNA de Microsoft !

 

 

Tutoriel présenté par : Jérémie Bellanger (Jay)
Dernière mise à jour : 25 janvier 2014

 

   I- XNA, qu'est-ce que c'est ?


    Il s'agit d'un framework créé par Microsoft et qui permet de programmer spécifiquement des jeux vidéos en C# (un croisement entre du C et du Java à la sauce Microsoft) pour PC, Xbox 360 et Windows Phone 7.
    Eh oui ! Vous ne rêvez pas, il permet bien de programmer des jeux compatibles sur ces 3 plateformes et partageant le MEME CODE à plus de 95%, tout ça regroupé dans un même projet. Alors forcément, vous n'irez pas chercher d'accéléromètre sur PC ni de manette Xbox 360 sur Windows Phone, mais pour le reste, ça sera globalement le même code !
Mais combien ça coûte, me direz-vous ?
    Eh, bien, tout dépend de la plateforme que vous allez cibler. Si vous voulez programmer, distribuer, vendre vos jeux sur PC, ce sera GRATUIT ! Un exemple célèbre et récent de jeu développé avec XNA pour PC exclusivement, c'est Terraria bien sûr, mais il y en a d'autres !

    Pour la Xbox 360 et la plateforme Windows Phone 7, par contre, vous devrez souscrire un abonnement Premium auprès de Microsoft au tarif de 99 Euros par an TTC (maintenant, ils indiquent 75 Euros HT). Et, bien entendu, il vous faudra une Xbox 360 ou un téléphone pour tester !

    Mais bon, c'est quand même une chose formidable que nous offre Microsoft : publier son jeu sur une des meilleures consoles du moment ! Il est d'ailleurs le seul à le faire pour l'instant.

 

    Mise à jour : Microsoft laisse malheureusement tomber XNA. Cependant, cela reste encore un formidable framework si vous souhaitez créer un jeu sur PC qui exploite toute la puissance de DirectX 9, et cela de manière simple et intuitive ! 


   II- Allez, on se lance !


    Commençons désormais ce tuto !

    Mise à jour : Comme vous le savez peut-être, si vous êtes un habitué du site, j'ai démarré ce Big tuto il y a un moment déjà, mais je n'ai jamais eu le temps de le compléter, tant j'étais occupé par la création des jeux Meruvia, du développement du site ou de l'écriture du Big Tuto SDL. C'est pourquoi, je relance aujourd'hui ce big Tuto avec l'aide de Gondulzak qui a eu la gentillesse d'écrire plusieurs chapitres concernant XNA 4 et qui forment une suite tout à fait logique à ce premier chapitre resté trop longtemps en plan.

     A-travers les différents chapitres de ce Big tuto, vous allez découvrir l'essentiel de XNA grâce à des exemples précis et ludiques, directement réadaptables pour vos projets. Et d'ailleurs, si vous aussi, vous souhaitez vous joindre à l'écriture de ce Big tuto, ou d'un autre, pour partager vos connaissances, nous serons très heureux de vous lire, et de vous publier ici aussi !  

    Bon, maintenant, il ne reste plus qu'à y aller ! Téléchargeons et installons XNA !


   III- App Hub : le site de XNA de Microsoft


    Alors, tout va se passer ici (il existe bien sûr beaucoup d'autres sites ressources avec des tutos, j'essaierai de les ajouter dans les liens au fur et à mesure) :

 


    Si vous n'avez pas encore de compte live (le même que celui de MSN, Hotmail, Live, Xbox, etc...), je vous conseille d'en créer un. Vous aurez ainsi accès à davantage de ressources du site.

    Ce site contient énormément de ressources. En effet, on va y télécharger XNA bien sûr, mais le site propose aussi de nombreux exemples et tutoriels, des forums indispensables, et c'est aussi ici que vous gèrerez votre compte de développeur (si vous avez souscrit à l'abonnement annuel), que vous pourrez tester les jeux en peer review ou en test qui attendent d'être validés pour aller sur le MarketPlace, et que vous pourrez proposer vos jeux ou applications!

    Juste un détail, le site est exclusivement en anglais (ou maintenant en chinois, japonais ou coréen, mais ça va pas vous aider... ). Autrefois, de grosses parties étaient traduites en français, mais elles ont disparu. Peut-être aussi parce que la communauté francophone sur le site n'est pas assez développée... Donc, on n'attend plus que vous !

    Si vous voulez discuter sur les forums du site, il vous faudra aussi utiliser exclusivement l'anglais (parce que les modérateurs ne parlent qu'elle... je sais, ça peut être embêtant pour certains, mais bon, si vous voulez devenir un développeur de jeux vidéo international, il va falloir vous y mettre ! ). Autre détail plus gênant : même s'il est possible de localiser vos jeux dans plusieurs langues, c'est fortement déconseillé. Pourquoi, me direz-vous ? Eh bien premièrement, parce que, pour être validé, votre jeu doit être approuvé par 8-10 autres développeurs. Or, il en faudra plus, si votre jeu est traduit en plein de langues (au moins 2 par langue, je crois). Et, comme la communauté francophone est réduite, votre jeu risque de ne jamais être approuvé...

    Il existe aussi une autre raison : si vous publiez un jeu, vous remarquerez non sans peine que 80% de vos ventes seront faites aux Etats-Unis (ou en Angleterre). En France, par exemple, le téléchargement de jeux par ce biais reste encore assez marginal, même s'il se développe de plus en plus. Donc, si vous publiez un jeu sur le Xbox Live, vous visez en fait prioritairement le marché américain. C'est toujours bon à savoir d'entrée de jeu.
 


   IV- Installons XNA


    A l'heure où j'écris ces lignes, XNA en est à sa version 4.0. Bien sûr, XNA évolue rapidement en fonction des nouveaux besoins des développeurs et on peut dire, que pour ça, ils restent bien à l'écoute de la communauté. Depuis que je me suis lancé dans l'aventure, j'ai connu XNA 3.0, XNA 3.1 et XNA 4.0. Il est donc fort possible que d'ici quelques temps, une nouvelle version apparaisse. Chaque nouvelle version ne change pas du tout au tout, mais certaines fonctions peuvent ne plus fonctionner ou ne plus requérir les mêmes arguments et demanderont alors une mise à jour du code source. Mais on verra ça en temps et en heures !

    Alors pour installer XNA et tout ce dont vous aurez besoin (.Net, Visual Studio 2010 Express, Silverlight, etc.), il suffit de cliquer sur : Download the free tool sur la page d'accueil (rarement vu plus simple ! ). Sur la page suivante : cliquez sur download the SDK. Ne vous inquiétez pas, si on vous parle tout le temps du Windows Phone. Microsoft essaye de mettre en avant son téléphone car il manque de développeurs pour rattraper Apple (Iphone) et Google (Androïd) et sollicite donc votre aide . Le SDK permet cependant aussi bien de faire des jeux pour PC et Xbox 360.

    Sur la page suivante, on vous indiquera tout ce que ça va installer (une vraie batterie d'outils de développements pros ! ) et la config minimum que vous devrez avoir. Si c'est bon (je vois pas pourquoi ), cliquez sur Change Language : French (à moins que vous ne préféreriez tout laisser en anglais pour vous entraîner ) et ensuite Télécharger en face d'un fichier qui s'appelle vm_web2.exe (mais qui peut changer de nom si la version de XNA évolue - mais de toute façon, seuls 2 fichiers sont proposés et l'un d'eux, ce sont des notes de release ).

    Donc voilà, ce client devrait télécharger tout ce qu'il faut sur votre PC et l'installer au bon endroit (ça peut prendre un moment, donc vous pouvez aller prendre un café !)
 


   V- Premier contact


    Alors, ce petit café du Brésil, il était comment ? Quoi, il venait du Pérou ?!! Oh, désolé...
Enfin, revenons à nos moutons ! Si vous êtes rendus là, c'est que normalement tout est installé (ou alors vous attendez que ça s'installe et vous essayez de prendre de l'avance !). Il va être temps de lancer la bête !

    Mais il est où mon XNA ?
    Pas de panique ! XNA est un framework, on ne le lance donc pas comme ça. En fait, il est déjà intégré et configuré automatiquement dans Visual Studio Express 2010 ! Pour ceux qui ont galéré à configurer Code::Blocks avec la SDL, vous allez sentir la différence, croyez-moi ! Visual Studio est aussi un IDE vraiment génial : il vous pointe les erreurs en direct au fur et à mesure que vous tapez le code, il vous aide à appeler les fonction en vous rappelant leurs arguments, il met en page automatiquement vos fonction bien comme il faut et son débugueur est génial : il vous pointe directement la ligne fautive ! Que de temps gagné ! Après, vous aurez du mal à revenir en arrière, croyez-moi !

    Donc, c'est bon, on peut lancer Visual Studio (soit avec une icône sur le bureau, si vous l'avez demandé, soit dans : Tous les programmes : Microsoft Visual Studio 2010). Voilà ce que vous devriez obtenir (à moins que vous ne soyez un visiteur du futur et que tout ait encore changé - Visual Studio 2008 était bien vert - mais je trouve que le bleu profond est vraiment classe !) :




    Là, vous avez la page d'accueil avec des infos, des liens vers la doc et d'autres tutos que le mien (eh, attendez, vous barrez pas ! Vous les lirez après !).
Mais, bon, nous ce qui nous intéresse, c'est de créer notre premier projet que nous intitulerons : shooter !

    Pour ça, rien de plus simple, il suffit de cliquer sur Nouveau Projet !
    Vous verrez que XNA est déjà installé, donc choisissez bien XNA Game Studio dans la colonne de gauche de la nouvelle fenêtre puis Windows Game comme type de projet (on va d'abord faire notre projet pour Windows et pour le passer sur une autre plateforme, il suffira ensuite de choisir : Créer une copie pour une autre plateforme dans le projet en cours. Notez aussi que le code des différentes plateformes sera ainsi mutualisé : si vous changez le code de la version PC, celui de la Xbox 360 changera en même temps pour rester à jour. Génial, non ?!).

    Pour le nom, mettez Shooter. Cela mettra à jour le nom de la solution en même temps. Choisissez ensuite où vous allez enregistrer le projet et c'est parti !
Le nouveau projet s'ouvre et vous devriez obtenir ceci :



    Pour faire rapidement le tour du proprio : au milieu vous avez votre fenêtre d'édition du code C#, avec des onglets pour passer rapidement d'un fichier à un autre (notez que l'IDE sauvegarde les fichiers ouverts et le dernier emplacement de travail d'une fois sur l'autre, pour s'y retrouver plus rapidement ).

    A droite, vous avez l'explorateur de solution, qui vous indique tout ce qu'elle contient. Vous remarquerez qu'elle n'est pas vide, car XNA vient déjà de créer la boucle principale de votre jeu (qui tourne à 60fps) et cela à votre place !

    Alors, pour rajouter des fichiers (classes) par la suite, il vous suffira de faire un clic droit sur le nom de votre projet (ici Shooter) puis ajouter -> Classe.. Et tous vos assets (c'est un mot anglais qui désigne tous les éléments nécessaires à un jeu mais qui ne sont pas de la prog : graphismes, tiles, sprites, musiques, sounds Fx, fichiers divers, etc...) atteriront dans le projet ShooterContent (Content). Là, vous pourrez créer des dossiers puis y copier vos assets en les triant. Notez que le contenu (Content) est maintenant un projet à part, alors que dans la version 3.1 de XNA, il faisait partie intégrante du projet. Peut-être pour pouvoir partager plus facilement ce contenu entre diverses applications ou l'importer plus facilement dans un autre projet.

    Tout en bas, vous avez, par défaut, une boîte d'informations qui va vous avertir en temps réels des erreurs/avertissements que génére votre code (et cela sans avoir besoin de compiler comme dans Code::Blocks !). Vous pouvez la tester en tapant n'importe quoi, quelque part dans le fichier ouvert (normalement Game1.cs) . Automatiquement, des erreurs vont surgir ! Mais bon, on se calme et on efface ses bêtises, hein ?

    Voilà, sinon tout en haut, se trouve la barre d'outils classiques. Visualisez bien la sauvegarde quand même et la flèche verte qui vous permettra de lancer votre programme et de le débuguer !
 


   VI- La boucle principale du jeu


    Si le fichier Game1.cs n'est pas déjà ouvert, ouvrez-le en cliquant dessus dans l'explorateur de solution.
    Et vous pourrez alors découvrir le code C# de la boucle principale de votre futur best-seller !
 

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace Shooter
{

    /// Type principal pour votre jeu

    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        
        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

		
        /// Permet au jeu de s’initialiser avant le démarrage.
        /// Emplacement pour la demande de services nécessaires et le chargement de contenu
        /// non graphique. Calling base.Initialize passe en revue les composants
        /// et les initialise.
        protected override void Initialize()
        {
            // TODO : ajouter la logique d’initialisation ici

            base.Initialize();
        }

		
        /// LoadContent est appelé une fois par partie. Emplacement de chargement
        /// de tout votre contenu.
        protected override void LoadContent()
        {
            // Créer un SpriteBatch, qui peut être utilisé pour dessiner des textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // TODO : utiliser this.Content pour charger le contenu de jeu ici
        }

        /// UnloadContent est appelé une fois par partie. Emplacement de déchargement
        /// de tout votre contenu.
        protected override void UnloadContent()
        {
            // TODO : décharger tout le contenu non-ContentManager ici
        }

		
        /// Permet au jeu d’exécuter la logique de mise à jour du monde,
        /// de vérifier les collisions, de gérer les entrées et de lire l’audio.
        /// < param name="gameTime">Fournit un aperçu des valeurs de temps.
        protected override void Update(GameTime gameTime)
        {
            // Permet au jeu de se fermer
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

            // TODO : ajouter la logique de mise à jour ici

            base.Update(gameTime);
        }

        /// Appelé quand le jeu doit se dessiner.
        /// < param name="gameTime">Fournit un aperçu des valeurs de temps.
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // TODO : ajouter le code de dessin ici

            base.Draw(gameTime);
        }
    }
}



 
    Voilà, tout y est, mais détaillons maintenant un peu les différentes parties de cette boucle, même si les commentaires automatiques sont déjà assez explicites (N.B.: J'ai été obligé de simplifier quelques commentaires à cause des balises, que mon highlighter (GeShi) n'aime pas... ).

    On est donc dans la classe Game1 qui sera la classe principale de votre jeu. Et comme au début de chaque classe, on commence par définir les variables dont on aura besoin et les déclarer. C'est le cas ici :

        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        
        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }


    On utilisera donc par défaut une variable graphics pour prendre en charge l'affichage (un peu utile, n'est-ce pas ? ) et un spriteBatch, qui comme son nom le suggère permettra de dessiner des sprites à l'écran. C'est vraiment le minimum vital.

    Ensuite, on a la fonction Initialize(), qui sert à initialiser ce dont on aura besoin. Mais comme XNA n'a pas besoin de s'initialiser (comme on le faisait avec la SDL), on ne mettra pas grand chose ici, en fait. On reviendra là-dessus plus tard.

        /// Permet au jeu de s’initialiser avant le démarrage.
        /// Emplacement pour la demande de services nécessaires et le chargement de contenu
        /// non graphique. Calling base.Initialize passe en revue les composants
        /// et les initialise.
        protected override void Initialize()
        {
            // TODO : ajouter la logique d’initialisation ici

            base.Initialize();
        }
		



    La fonction LoadContent() sert à charger ce dont on a besoin pour faire tourner le jeu. Mais, bonne nouvelle, il est inutile de charger tout ce qu'on a déjà inclus dans le ContentManager (là où on va mettre nos assets). Du coup, comme on n'utilisera pas de ressources externes, on ne mettra pas grand chose ici non plus. Le jeu crée par défaut notre SpriteBatch déclaré plus haut.

        /// LoadContent est appelé une fois par partie. Emplacement de chargement
        /// de tout votre contenu.
        protected override void LoadContent()
        {
            // Créer un SpriteBatch, qui peut être utilisé pour dessiner des textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // TODO : utiliser this.Content pour charger le contenu de jeu ici
        }




    Bon, bah, UnloadContent() fait le contraire de LoadContent(). Comme on n'aura pas mis grand chose dans la première fonction, ce sera pareil pour celle-ci.

        /// UnloadContent est appelé une fois par partie. Emplacement de déchargement
        /// de tout votre contenu.
        protected override void UnloadContent()
        {
            // TODO : décharger tout le contenu non-ContentManager ici
        }


    Voilà maintenant une fonction essentielle du jeu : la fonction Update(). C'est ici qu'on va écrire toute la logique du jeu : le calcul des déplacements des sprites, la gestion des collisions, l'IA, etc...

        /// Permet au jeu d’exécuter la logique de mise à jour du monde,
        /// de vérifier les collisions, de gérer les entrées et de lire l’audio.
        /// < param name="gameTime">Fournit un aperçu des valeurs de temps.
        protected override void Update(GameTime gameTime)
        {
            // Permet au jeu de se fermer
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

            // TODO : ajouter la logique de mise à jour ici

            base.Update(gameTime);
        }


    Pour l'instant, cette fonction ne gère qu'une chose : fermer le programme si on appuie sur la touche "Back" de la manette Xbox 360 N°1.

    La fonction suivante et la dernière est la fonction Draw(). C'est là qu'on va dessiner nos sprites, tiles, etc... dans notre spriteBatch pour ensuite l'afficher. Notez bien qu'elle gère les 60fps de base.

        /// Appelé quand le jeu doit se dessiner.
        /// < param name="gameTime">Fournit un aperçu des valeurs de temps.
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // TODO : ajouter le code de dessin ici

            base.Draw(gameTime);
        }
    }
}


    Pour l'instant, tout ce qu'elle fait, c'est effacer l'écran en le remplissant en bleu (CornflowerBlue). D'ailleurs, vous pouvez vous amuser à changer cette couleur en en mettant une autre. Pour obtenir la liste des couleurs, effecez CornflowerBlue et le point, puis retapez le point, la liste devrait s'afficher. Vous allez voir, y'a l'embarras du choix !  

    Voilà pour la boucle principale. Maintenant, si vous lancez le programme en appuyant sur la flèche verte du menu du haut, vous devriez obtenir : un écran bleu ! C'est pas terrible, mais c'est déjà pas mal, sachant qu'on n'a rien fait, et qu'il nous fallait déjà pas mal bosser pour parvenir au même résultat en SDL !




    Eh voilà pour ce premier chapitre ! Je vais maintenant laisser la main à Gondulzak pour les chapitres suivants ! wink

 


 



 

Connexion