Les collisions par Rectangle

18 juil. 2008 sousTuto, creator's club, jeu, tutoriel

Introduction

Quand vous créez un jeu, il est souvent essentiel de gérer les collisions, entre votre héros et son environnement.

Ce tutoriel est destiné à vous apprendre à gérer les collisions, en utilisant la classe Rectangle fournie par XNA.

Cet article est une traduction d’un tuto du Creator’s club, vous pourrez trouver l’original ici : http://creators.xna.com/en-us/tutorial/collision2drectangle

Pour ce tutoriel, nous allons créer un jeu simpliste, qui consistera à faire éviter des triangles tombés du ciel à notre héros.

Ici, le héros évite les triangles.

Safe

Ici, le héros est en collision avec un triangle.

Blocked

Quand vous aurez fini ce tutoriel, vous aurez toutes les connaissances nécessaires pour gérer vos collisions.

Step 1: Créer un nouveau projet, et inclure les artworks

La première chose dont vous aurez besoin avant de commencer à coder cotre jeu, est les textures pour votre héros et les blocs. Ces textures peuvent être de la taille que vous souhaitez et vous devriez utiliser la couleur magenta (100% de rouge, 0% de vert et 100% de bleu) pour toutes les parties devant être transparentes. Sauvez vos images en tant que .bmp ou .png, et non pas .gif ou .jpg, pour éviter tous problèmes liés à la compression de votre image.

Voici les textures utilisées dans cet exemple:

Note

La couleur magenta est utilisée, pour que le processeur de texture par défaut, convertisse la couleur magenta en transparent. En effet, dans sa logique des couleurs, magenta correspond à la transparence. Je vous déconseille donc d’essayer d’habiller votre héros ou votre environnement de cette couleur (si vraiment vous avez besoin de magenta, diminuez de 1% en rouge ou en bleu, devrait suffire).

Vous pouvez ensuite créer votre nouveau projet, que nous appellerons ici RectangleCollisionWindows, et y inclure les textures vues précédemment.

Je vous invite à relire le tutorial Mon Premier Jeu Part 1, de raptorpg si vous ne savez plus comment faire.

Step 2: Initialisation

.Nous allons maintenant initialiser et dessiner notre héros, ainsi que les blocs. Ce jeu étant réellement très simple, nous ne créerons pas de nouvelles classes pour le héros et les blocs.

Je passerais rapidement sur cette étape, celle-ci étant déjà abordée par raptorpg dans le tutoriEl Mon Premier Jeu Part 2.

// Les images à dessiner 
Texture2D personTexture;
Texture2D blockTexture;

// Les images seront dessinées avec ce SpriteBatch 
SpriteBatch spriteBatch;

// Le Héros 
Vector2 personPosition;
const int PersonMoveSpeed = 5;

// Les Blocs 
List<Vector2> blockPositions = new List<Vector2>();
float BlockSpawnProbability = 0.01f;
const int BlockFallSpeed = 2;

//on créé un objet de type Random, pour l'apparition aléatoire des blocs 
Random random = new Random();

protected override void Update(GameTime gameTime)
{
    // On récupère les entrées utilisateur 
    KeyboardState keyboard = Keyboard.GetState();
    GamePadState gamePad = GamePad.GetState(PlayerIndex.One);

    // Allows the game to exit 
    if (gamePad.Buttons.Back == ButtonState.Pressed)
        this.Exit();

    // On permet au joueur de bouger à gauche ou à droite 
    if (keyboard.IsKeyDown(Keys.Left) || gamePad.DPad.Left == ButtonState.Pressed)
    {
        personPosition.X -= PersonMoveSpeed;
    }

    if (keyboard.IsKeyDown(Keys.Right) || gamePad.DPad.Right == ButtonState.Pressed)
    {
        personPosition.X += PersonMoveSpeed;
    }

    // On gère la creation des blocs 
    if (random.NextDouble() < BlockSpawnOdds)
    {
        float x = (float)random.NextDouble() * (Window.ClientBounds.Width - blockTexture.Width);
        blockPositions.Add(new Vector2(x, -blockTexture.Height));
    }

    // On met jour tous les blocs afin qu'ils tombent 
    for (int i = 0; i < blockPositions.Count; i++)
    {
        // Animate this block falling 
        blockPositions[i] = new Vector2(blockPositions[i].X, blockPositions[i].Y + BlockFallSpeed);
    }

    base.Update(gameTime);
}

protected override void Draw(GameTime gameTime)
{
    graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

    spriteBatch.Begin();

    // Dessine le Héros 
    spriteBatch.Draw(personTexture, personPosition, Color.White);

    // Dessine les blocs 
    foreach (Vector2 blockPosition in blockPositions)
        spriteBatch.Draw(blockTexture, blockPosition, Color.White);

    spriteBatch.End();

    base.Draw(gameTime);
}

Avant de continuer, veuillez lire attentivement le code ci-dessus. Ce code nous permet de récupérer les entrées de l’utilisateur, d’ajuster la position du joueur en fonction de ses entrées, de créer de nouveaux blocs à certains moments du jeu, et de les faire apparaître à une coordonnée x aléatoire, et d’animer ces blocs.

Compilez votre projet, vous devriez voir maintenant les blocs tombés.

Step 3: Collisions avec l’écran

Vous aurez peut-être remarqué que vous pouvez bouger votre personnage hors de l’écran. Ce qui n’est peut-être pas visible immédiatement, est le fait que les blocs ne sont jamais supprimés (eux aussi pouvant, comme vous, dépasser les limites de l’écran). Si vous laissez donc votre jeu tourner, arrivera un moment ou le jeu consommera toute la mémoire de votre système.

Pour régler ces deux problèmes, vous devez emprisonner l’avatar du joueur dans les limites de l’écran, et supprimez les blocs qui dépassent le bas celui-ci.

Nous allons donc modifier la méthode Update (), afin de régler ces deux problèmes :

protected override void Update(GameTime gameTime)
{
    // On récupère les entrées utilisateur 
    KeyboardState keyboard = Keyboard.GetState();
    GamePadState gamePad = GamePad.GetState(PlayerIndex.One);

    // Allows the game to exit 
    if (gamePad.Buttons.Back == ButtonState.Pressed)
        this.Exit();

    // On permet au joueur de bouger à gauche ou à droite 
    if (keyboard.IsKeyDown(Keys.Left) || gamePad.DPad.Left == ButtonState.Pressed)
    {
        personPosition.X -= PersonMoveSpeed;
    }

    if (keyboard.IsKeyDown(Keys.Right) || gamePad.DPad.Right == ButtonState.Pressed)
    {
        personPosition.X += PersonMoveSpeed;
    }

    // empêche la personne de bouger en dehors de l'écran 
    personPosition.X = MathHelper.Clamp(personPosition.X, 0, Window.ClientBounds.Width - personTexture.Width);

    // On gère la creation des blocs 
    if (random.NextDouble() < BlockSpawnOdds)
    {
        float x = (float)random.NextDouble() * (Window.ClientBounds.Width - blockTexture.Width);
        blockPositions.Add(new Vector2(x, -blockTexture.Height));
    }

    // On met jour tous les blocs afin qu'ils tombent 
    for (int i = 0; i < blockPositions.Count; i++)
    {
        // On anime la chute des blocs 
        blockPositions[i] = new Vector2(blockPositions[i].X, blockPositions[i].Y + BlockFallSpeed);

        // On enlève le bloc si il est en dehors de l'écran
        if (blockPositions[i].Y > Window.ClientBounds.Height)
        {
            blockPositions.RemoveAt(i);

          // Quand on enlève un bloc, le bloc suivant aura le même index que le bloc courant

              //On décrémente i pour éviter de rater un bloc. 
            i--;
        }
    }

    base.Update(gameTime);
}


La ligne 23, empêche simplement personPosition.X de devenir une valeur qui placerait le joueur en dehors des limites de l’écran. Les lignes 39 à 45 permettent d’identifier les blocs tombants en dessous de l’écran, et de les supprimer

Chaque nouveau bloc de code est un mécanisme de détection et de réponse à une collision extrêmement simple, n’utilisant pour ça que les coordonnées des objets et de la fenêtre.

Si vous essayez désormais de compiler, vous ne devriez plus pouvoir dépasser les limites de l’écran.

Step 4: Collision par Rectangle

Si vous êtes arrive jusqu’ici, vous n’êtes plus qu’à quelques pas de quelque chose qui ressemble à un jeu. Votre héros doit pouvoir être touché.

Dans cet exemple, le jeu changera simplement la couleur du fond du jeu en rouge, quand votre héros se fera toucher par un bloc.

Ajoutez cette declaration en haut de votre classe Game1:

   1: // Pour savoir si une collision est détectée
   2: bool personHit = false;

Modifiez la méthode Draw() afin qu’elle commence ainsi:

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice device = graphics.GraphicsDevice;

    // Change the background to red when the person was hit by a block 
    if (personHit)
        device.Clear(Color.Red);
    else
        device.Clear(Color.CornflowerBlue);

Vous devez maintenant déterminer si aucun bloc ne touche votre héros. Une manière simple de faire cela, est de déterminer si les rectangles délimitant les sprites de vos blocs, croisent celui de votre personnage. Pour cela, le framework XNA nous fournit une méthode simple : Rectangle.Intersects().

Modifiez de nouveau la méthode Update(), afin qu’elle ressemble à cela :

    // On permet au joueur de bouger à gauche ou à droite 
    if (keyboard.IsKeyDown(Keys.Left) || gamePad.DPad.Left == ButtonState.Pressed)
    {
        personPosition.X -= PersonMoveSpeed;
    }

    {


    // On gère la creation des blocs 
    if (random.NextDouble() < BlockSpawnOdds)
    {
        float x = (float)random.NextDouble() * (Window.ClientBounds.Width - blockTexture.Width);
        blockPositions.Add(new Vector2(x, -blockTexture.Height));
    }

    // Récupère le Rectangle délimitant le Sprite du héros
    Rectangle personRectangle = new Rectangle((int)personPosition.X, (int)personPosition.Y, personTexture.Width, personTexture.Height);

    // On met jour tous les blocs afin qu'ils tombent 
    personHit = false;

    for (int i = 0; i < blockPositions.Count; i++)
    {
        // Animate this block falling 
        blockPositions[i] = new Vector2(blockPositions[i].X, blockPositions[i].Y + BlockFallSpeed);

        // Récupère le Rectangle délimitant le Sprite des blocs
        Rectangle blockRectangle = new Rectangle((int)blockPositions[i].X, (int)blockPositions[i].Y, blockTexture.Width, blockTexture.Height);

        // Verifie la collision avec entre le Rectangle du bloc et celui du heros
        if (personRectangle.Intersects(blockRectangle))
            personHit = true;

        // Remove this block if it have fallen off the screen 

        if (blockPositions[i].Y > Window.ClientBounds.Height)
        {
            blockPositions.RemoveAt(i);

            // When removing a block, the next block will have the same index as the current block. Decrement i to prevent skipping a block. 
            i--;
        }
    }

    base.Update(gameTime);
}

Les lignes modifiées sont : l 33, l 36, l 44 à 48.

Ce code determine les rectangles délimitant les sprites du héros et des blocs. Chaque rectangle délimitant les sprites des blocs est testé afin de voir si il croise celui du joueur.

Le jeu est maintenant fini, vous pouvez compiler, et observer un peu votre travail.

Félicitations!

Vous savez maintenant comment gérer les collisions par Rectangle. Ces collisions réellement simples sont un élément très important de XNA, permettant aux codeurs débutants, ou non, de pouvoir créer un grand nombre de jeux 2D tirés de leur imagination.

Malheureusement, cette méthode de collision a ses limites. Vous l’aurez peut-être aperçu (dans le code ou en jouant), mais la détection de la collision entre le personnage et le bloc ne se fait pas quand le joueur touche le triangle noir.

Pour ce genre de problèmes, où la collision doit être très précise, il existe la méthode de Collision par Pixels.

Cette méthode sera explicité prochainement.

Ryoma.

Tags: jeu, ryoma, Tuto, tutoriel

Poster un réponse

XNA

Xna est une série d'outils facilitant le développement de jeux sur Pc, Xbox et Zune. Vous trouverez sur ce site un ensemble de tutoriels et de conseils pour commencer à créer vos propres jeux et les diffuser. Bonne lecture

Xna-France.com

Des informations pour débuter et se perfectionner sur XNA