Bizzy Bees XNA to DirectX/DirectXTK – Part 5

  • Article

This is part of a blog series… if you came here directly you might want to read the introduction first.

 

Animating objects in DirectX is just as simple as in XNA.  In the update method we just change the position of the objects and since they are drawn every frame with their respective positions they will start moving.

If you want to create some more advanced animations, like if we would want the bees to flap their wings, you would create sprite maps with images of the various states and then just swap which portion of the sprite map you want to display each time.

Animating the flowers

The flowers are going to move down at a steady pace.  We’ll move them down at 0.4 pixels per frame (at least initially).  The 0.4 is an arbitrary number that I have picked by testing the app on my family until I found a speed that seemed good.

1. Add a new public member variable on the Column class called Velocity (float).

2. In the constructor for Column, set Velocity to 0.4f;

 Column::Column(float x) : X(x), Velocity(0.4f)
{
...

3. Add a public void Update() method to Column and implement it so that it increases the Y position of all the flowers by Velocity. i.e. moving the flowers 0.4 pixels down per frame

 void Column::Update(){
    for (auto pFlower = begin(flowers); pFlower != end(flowers); pFlower++){
        auto flower = (*pFlower);
        flower->Position.y += Velocity;
    }
}

4. Add a private void UpdateColumns() method to the BizzyBeeGame class and call this from the BizzyBeeGame::Update method

5. The BizzyBeeGame::UpdateColumns should look like this, just looping through the columns and updating each one

 void BizzyBeeGame::UpdateColumns(){
    for (auto columnPtr = begin(columns); columnPtr != end(columns); columnPtr++)
        (*columnPtr)->Update();
}

6. Save and run

image

The flowers now slowly move downward until they move off the screen.  And they are never replenished.  We’ll need to do something to fix this.

Game Over

When the flowers reach the bottom, the game is over so we’ll have to keep track of this

1. Add a new private member variable to the BizzyBeeGame class called bool GameOver and set it to false in the ResetGame method

2. Change the BizzyBeeGame::UpdateColumns to return a bool and change it to check for if the column has reached the bottom of the flower area

 bool BizzyBeeGame::UpdateColumns(){
    bool reachedBottom = false;

    for (auto columnPtr = begin(columns); columnPtr != end(columns); columnPtr++){
        auto column = (*columnPtr);
        column->Update();
        if (column->HasReachedBottom())
            reachedBottom = true;
    }
    return reachedBottom;
}

3. In the BizzyBeeGame::Update method, only update if it’s not GameOver, and also set the GameOver variable if we reached the bottom

 void BizzyBeeGame::Update(float timeTotal, float timeDelta)
{
    if (!GameOver){
        if (UpdateColumns()){
            GameOver = true;
        }
    }
}

4. In order to check if the first flower reached the bottom we’ll have to add a static const int columnBottom = 620; to the Column class, and check the first flowers y position against it

 bool Column::HasReachedBottom(){
    if (flowers.size() > 0 && flowers[0]->Position.y >= columnBottom)
        return true;
    else
        return false;
}

5. Finally we need to change the drawing so that we print out the game over message.  In the BizzyBeeGame::Render method, check for GameOver and call DrawGameOver right before the spriteBatch->End() call

     if (GameOver)
        DrawGameOver();

6. In the BizzyBeeGame::DrawGameOver we’ll simply print the string GAME OVER twice (once in red and once in black) with a little offset to get a more gamey effect

 void BizzyBeeGame::DrawGameOver(){
    DrawString(L"GAME OVER", Vector2(79, 404), Colors::Black, 2.0f);
    DrawString(L"GAME OVER", Vector2(75, 400), Colors::Red, 2.0f);
}

image

YAY! so now we can loose… too bad you can’t win:)  oh well… we’ll take care of that too later

Creating a Flower Factory

The game would get a bit boring if we only had 3 flowers per column so to fix that we’ll generate new flowers as the flowers move down. 

1. In Column::Update add code to the bottom of the function to check if we have an empty column, or if the top flower has moved down past the column top, and if so add a new flower

     //generate new flowers if we need to
    if (flowers.size() == 0 || (flowers[flowers.size() - 1]->Position.y > columnTop))
        AddRandomFlower(columnTop - flowerDeltaY);

That is all there is to it. We are done with the flowers!  next time we’ll add some bees to the mix as well.

image