Bizzy Bees XNA to DirectX/DirectXTK – Part 4

  • Article

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

 

The next step is to start adding some flowers to the screen, and the way we will do this is by creating 5 columns that each hold a set of flowers.  The reason we do this is so that each column keeps track of moving the flowers downwards and generating new flowers and also later on when you tap on a bee and then a column it will match the bottommost flower in that column to the bee to see if there is a match.

Adding flowers

The first thing we are going to do is generate the 5 columns and each column is going to generate 3 starting flowers.

1. Create a new class Column (uncheck the Windows Store checkbox when you create the class). 

2. Add a few new methods, some constants and Fields to the class

 #pragma once

using namespace std;
using namespace DirectX;
using namespace Microsoft::WRL;
using namespace DirectX::SimpleMath;

class Column
{
public:
    Column(float x);
    ~Column();
    void Draw(shared_ptr<SpriteBatch> spriteBatch, ComPtr<ID3D11ShaderResourceView> texture);
    float X;
private:
    static const int columnTop = 150;
    static const int numColors = 6;
    static const int flowerDeltaY = 80;
    static const int flowerSize = 72;
    static const int rainbowColor = 6;

    vector<shared_ptr<Flower>> flowers;

    void AddRandomFlower(float y);
};

The Column class contains the following:

  • X – marking the position of the column x-wise
  • Draw method – that will draw the flowers on the screen
  • AddRandomFlower method that will and a random colored flower to the column
  • a vector (list) of flowers
  • a number of constants that will allow us to space and position the flowers on the screen, and also some constants used to generate the colors,

3. Add a Flower class. The Flower class doesn’t have any methods just information about where it is located and the color of the flower

 class Flower
{
public:
    Flower(Vector2 position, int color);
    Vector2 Position;
    int Color;
};

4. Implement the Column methods like this:

 Column::Column(float x) : X(x)
{
    AddRandomFlower(columnTop + 2 * flowerDeltaY);
    AddRandomFlower(columnTop + flowerDeltaY);
    AddRandomFlower(columnTop);
}

Column::~Column()
{
}

void Column::Draw(shared_ptr<SpriteBatch> spriteBatch, ComPtr<ID3D11ShaderResourceView> texture){
    for (auto pFlower = begin(flowers); pFlower != end(flowers); pFlower++){
        auto flower = (*pFlower);
        RECT flowerMapRect = { flower->Color * flowerSize, 0, (flower->Color + 1) * flowerSize, flowerSize };
        spriteBatch->Draw(texture.Get(), flower->Position, &flowerMapRect, Colors::White);
    }
}

void Column::AddRandomFlower(float y){
    int color = rand() % (numColors + 1);
    flowers.push_back(make_shared<Flower>(Vector2(X,y), color));
}

and the Flower constructor like this

 Flower::Flower(Vector2 position, int color) : Position(position), Color(color){}

 

When a new column is created it generates 3 flowers spaced flowerDeltaY apart.  AddRandomFlower randomizes the color, generates a new flower and adds it to the flowers list.

Finally the Draw method loops through the flowers and draws them.  The only difference here between this draw and what we have seen before is that we only draw a portion (rectangle) of the texture specified by the flowerMapRect (left, top, right, bottom).

Just one more little comment, we specify Colors::White here (it has been omitted earlier). This means that we are going to shine a white light on the texture essentially leaving it intact.  If we want a blue tint on the texture we can change this to Colors::Blue for example.

5. Add code to the BizzyBeeGameResetGame method to initialize the columns and randomize (using the current time as the seed) so that we won’t generate the same flowers every run.  In order to use the time we’ll also have to #include <time.h>

 void BizzyBeeGame::ResetGame(){
    //RANDOMIZE
    srand((unsigned)time(NULL));

    //INITIALIZE COLUMNS
    columns.clear();
    for (int i = 0; i < 5; i++)
        columns.push_back(make_shared<Column>(i * 92 + 22));
}

6. In BizzyBeeGame::DrawFlowers – loop through and draw the columns

 void BizzyBeeGame::DrawFlowers(){
    for (auto columnPtr = begin(columns); columnPtr != end(columns); columnPtr++)
        (*columnPtr)->Draw(spriteBatch, flowerMapTexture);
}

7. Run the app. Now we should be getting closer.  It doesn’t really do much yet but display some flowers but that will change shortly

image