Programmation XNA : Introduction

Si vous compilez les codes (F6 pour compiler et Ctrl-F5 pour lancer le programme), vous devriez obtenir une fenêtre vide. Bien sûr, nous voulons faire plus ! Le premier endroit pour chercher des informations se trouve dans l'aide associée avec l'EDI. En appuyant sur F1, vous allez obtenir quelque chose de similaire à ceci :

Dans la partie de gauche, vous avez une partie XNA, la suite (y compris le code) de ce tutoriel puise ses informations de cette aide très bien faite. Pour avoir plus de détails, je vous invite à étudier cette aide (bien qu'elle soit en anglais, c'est abordable). Je ne peux que vous encourager d'y faire un tour !

En suivant donc cette première aide de la MSDN, nous allons ajouter une texture de balle pour le jeu et la faire rebondir sur les bords de la fenêtre. Il va donc falloir commencer par créer l'image de balle.

En utilisant votre programme de dessin préféré, vous pouvez créer une image qui ressemblera à ceci :

C'est une image blanche ! Bien sûr, nous voulons voir une balle, mais nous voulons que, lors du rendu, seul un rond apparaisse. Ceci se fait facilement en ajoutant un canal supplémentaire nommé Alpha. En effet, toute image possède des pixels de 3 couleurs (rouge, vert et bleu) et on ajoute généralement un dernier canal alpha pour la transparence. Puisque nous voulons que la balle soit opaque, mais que le reste soit transparent, il suffira de dessiner un cercle noir sur fond noir :

En utilisant un outil de la SDK DirectX nommé Texture Tool, nous allons créer une texture DirectX. Cet outil possède une simple fenêtre et lorsque nous voulons créer une texture (option New Texture), nous obtenons cette sous-fenêtre :

La seule chose à changer ici est la taille de l'image si vous souhaitez une image plus petite. Mais vous pouvez aussi le laisser tel quel en appuyant directement sur OK.

Enfin, il vous suffit d'ajouter l'image de la balle en utilisant Open Onto this Surface, et en utilisant Open Onto Alpha Channel Of This Surface pour l'image du canal alpha.

Remarquons que Texture Tool redimensionne les images pour qu'elles soient entièrement dans la texture. Bien sûr, il vaut mieux avoir la même taille que les images créées précédemment, mais cela n'est pas nécessaire.

Ceci terminé, nous pouvons sauvegarder la texture (l'extension du fichier sera .dds) dans le répertoire du projet, la suite de l'article supposera que le fichier de la texture est balle.dds.

Pour ajouter un fichier image à un projet, il suffit de demander d'inclure un objet existant au projet, comme le montre l'image suivant :

Cela permettra lors de la création du programme de copier le fichier de la balle en même temps que le programme. Pour dire à Visual C# Express de copier la texture lors de la compilation du projet, il faut aller dans les propriétés de la texture :

Ceci ouvre une fenêtre dans laquelle on peut spécifier la copie du fichier lors de la compilation (mettre l'option à Copy always) :

On termine donc la partie sur la création d'une texture et son ajout dans le projet. Nous allons maintenant modifier le code pour qu'il prenne en compte l'objet et qu'il le dessine à l'écran.

Pour terminer ce premier petit programme, nous devons tout d'abord compléter la classe principale du programme. En effet, nous avons besoin d'un objet pour contenir la texture de la balle, deux champs pour sa position et un objet qui s'occupera du rendu de la balle.

Il faut donc ajouter dans la classe ceci :

            //Ceci contient la texture de la balle
            Texture2D m_textureBalle;
            
               //Position de la balle
            int m_balleX = 0;
            int m_balleY = 0;
            //La vitesse de la balle
            int m_vx = 3;
            int m_vy = 3;
            
            //L'objet qui dessinera la balle
            SpriteBatch m_spriteBatch;

La seule chose différente de ce qu'on a l'habitude de voir est l'objet de type SpriteBatch. Cette classe permet de gérer le rendu des objets de votre jeu. Sinon nous avons un objet pour contenir la texture de la balle et quatre entiers pour la position et la vitesse courante de la balle.

Nous devons maintenant charger la texture en mémoire et ceci peut se faire au démarrage du programme. Comme beaucoup d'API graphiques, il est possible qu'à un moment de la vie du programme, il faille recharger cette texture (par exemple, lors d'un changement de résolution). Nous allons donc créer une fonction LoadRessources qui sera appelée lors de la création du programme et lorsque le composant graphique doit être réinitialisé. Ceci se fait en écrivant deux fonctions supplémentaires : OnStarting et GraphicsDevice_DeviceReset.

protected override void OnStarting()
        {
            base.OnStarting();
            graphics.GraphicsDevice.DeviceReset += new EventHandler(GraphicsDevice_DeviceReset);
            LoadResources();

        }

        void GraphicsDevice_DeviceReset(object sender, EventArgs e)
        {
            LoadResources();
        }

        void LoadResources()
        {
            myTexture = Texture2D.FromFile(graphics.GraphicsDevice, "balle.dds");
            spriteBatch = new SpriteBatch(graphics.GraphicsDevice);
        }

La fonction OnStarting démarre la base du programme et met en place la gestion d'une réinitialisation du composant graphique en demandant qu'on appelle la fonction GraphicsDevice_DeviceReset, puis la fonction LoadRessources.

La fonction GraphicsDevice_DeviceReset demande simplement le chargement des ressources graphique. Enfin, la fonction LoadRessources charge la texture balle.dds. Ensuite on crée une instance de la classe SpriteBatch qui je le rappelle gérera le rendu de la balle.

La dernière nouvelle fonction est appelée BougeBalle. Elle permet de déplacer la balle et de vérifier si on sort de la fenêtre. Si c'est le cas, on la repositionne et on inverse sa direction. Son code ressemble donc à :

        void BougeBalle()
        {
            //Bouger la balle par rapport a la vitesse
            m_balleX += m_vx;
            m_balleY += m_vy;

            int MaxX = Window.ClientWidth - m_textureBalle.Width;
            int MinX = 0;
            int MaxY = Window.ClientHeight - m_textureBalle.Height;
            int MinY = 0;

            //On regarde si on sort de la fenetre
            if (m_balleX > MaxX)
            {
                m_vx *= -1;
                m_balleX = MaxX;
            }
            else if (m_balleX < MinX)
            {
                m_vx *= -1;
                m_balleX = MinX;
            }

            if (m_balleY > MaxY)
            {
                m_vy *= -1;
                m_balleY = MaxY;
            }
            else if (m_balleY < MinY)
            {
                m_vy *= -1;
                m_balleY = MinY;
            }
         }

Si on regarde ce code attentivement, on remarque que l'objet Window permet d'avoir la taille de la fenêtre et l'objet m_textureBalle permet d'avoir les dimensions de l'objet. Avec la position et la vitesse de la balle, la fonction est donc capable de mettre à jour la position de l'objet et de vérifier si la balle sort de la fenêtre.

Cette petite partie présente les modifications de code pour gérer et afficher la balle dans la fenêtre. La fonction Update appelle la fonction BougeBalle pour mettre à jour la position de la balle.

        protected override void Update()
        {
            // The time since Update was called last
            float elapsed = (float)ElapsedTime.TotalSeconds;

            //Bouger la balle
            BougeBalle();

            // Let the GameComponents update
            UpdateComponents();
        }

La fonction Draw a un peu plus de modifications. Nous avons déjà dit que c'est l'objet m_spriteBatch qui gère l'affichage des objets. Comme pour le rendu de beaucoup d'API graphiques, nous englobons le code de rendu par une fonction Begin et une fonction End.

La fonction Begin de la classe SpriteBatch prend le style de rendu que nous voulons faire. Dans le cas présent, nous voulons avoir un affichage qui tient en compte le canal Alpha de la texture. Ceci implique donc que nous allons passer SpriteBlendMode.AlphaBlend à la fonction Begin.

Ensuite, pour dessiner la balle, nous utilisons la fonction Draw de l'objet m_spriteBatch en lui passant la texture à dessiner, un rectangle contenant la position de la balle, une taille et une couleur qui sera multiplié sur chaque pixel. En mettant Red, nous allons donc obtenir une image dont tous les pixels sont multipliés par une couleur rouge.

        protected override void Draw()
        {
            if (!graphics.EnsureDevice())
            {
                return;
            }

            graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
            graphics.GraphicsDevice.BeginScene();

            //Dessiner la balle
            m_spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
            m_spriteBatch.Draw(m_textureBalle, 
                    new Rectangle(m_balleX, m_balleY, m_textureBalle.Width, m_textureBalle.Height), 
                    Color.Red);
            m_spriteBatch.End();

            // Let the GameComponents draw
            DrawComponents();

            graphics.GraphicsDevice.EndScene();
            graphics.GraphicsDevice.Present();
        }

Enfin, voici une image du petit programme que nous venons de créer :