Bizzy Bees Step 3: Adding flowers (XNA Walkthrough)

This is part of a walkthrough series on creating a game (Bizzy Bees) in XNA

Overview
Step 1: Setting the stage (projects and assets)
Step 2: Drawing the scene
Step 3: Adding flowers
Step 4: Making things move
Step 5: Adding some bees to the mix
Step 6: User interaction
Step 7: Rounding it up

Now we have set the scener for our game, it’s time to add the “players” or rather the flowers to the scene.

The first thing we need to do is to add two classes, Colum and Flower (you can right click the project and choose add new/class from the code section)

The Column class

The Column class will look like this:

  class Column
    {
        const int columnTop = 150;
        const int numberOfFlowerColors = 6;
        const int rainbowFlowerColor = 6;
        const int flowerDeltaY = 80;
        const int flowerWidth = 72;
        const int flowerHeight = 72;
        
        private List<Flower> flowers = null;
        private SpriteBatch spriteBatch;
        private float x;
        private Random r;
        private Texture2D flowerMap;


        public Column(ContentManager content, SpriteBatch spriteBatch, float x, int seed)
        {
            this.spriteBatch = spriteBatch;
            this.x = x;
            this.flowers = new List<Flower>();
            this.r = new Random(seed);
            this.flowerMap = content.Load<Texture2D>("flowermap");

            //add 3 flowers
            AddRandomFlower(x, columnTop + 2 * flowerDeltaY);
            AddRandomFlower(x, columnTop + flowerDeltaY);
            AddRandomFlower(x, columnTop);
        }

        private void AddRandomFlower(float x, int y)
        {
            int color = r.Next(numberOfFlowerColors+1);
            flowers.Add(new Flower(color, x, y));
        }

        public void Draw()
        {
            foreach (Flower flower in flowers)
            {
                spriteBatch.Draw(flowerMap, new Vector2(flower.X, flower.Y), new Rectangle(flower.Color * flowerWidth, 0, flowerWidth, flowerHeight), Color.White);
            }
        }
    }

First we have a few constants just to keep track of where to position the columns and the flowers.

After this we have the list of flowers contained in the column, the position of the column x wise, a randomizer that will allow us to create random flowers, a reference to the global spriteBatch as well as a Texture2D to hold our flower spritemap.

In the constructor we add 3 random flowers spaced 80 px apart.

Finally we have the draw method where we will draw all the flowers that belong to this column.  Since we are using a spritemap we can’t just draw the whole image. If we did we would draw all 6 flower types. So we use an override for the Draw method that takes a Rectangle parameter.  This rectangle specifies which part of the spritemap it should draw, and since our color is also the position in the spritemap we can very easily use this to calculate the x position the rectangle should start at.

The Flower class

The Flower class is extremely simple. It just contains the position we should paint at, and the color of the flower

     class Flower { public int Color; public float X; public float Y; public Flower(int color, float x, float y) { this.Color = color; this.X = x; this.Y = y; } }

Now, all that is left to do is to generate the columns and draw them in the Game1 class

Generating and drawing the columns

1. Create a new function called InitializeColumns that looks like this, where we generate 5 columns, spaced 92 px apart, and send in the randomizer seed.  We need to send in references to the spriteBatch and Content pipeline here so that it can be used in the Column class to load and draw the flowers

  private void InitializeColumns()
        {
            columns = new List<Column>();

            int seed = System.DateTime.Now.Millisecond;
            for (int i = 0; i < 5; i++)
            {
                columns.Add(new Column(Content, spriteBatch, i * 92 + 22, seed + i));
            }
        }

2. Call this method at the end of the LoadContent() method

3. In the draw method, right under the //TODO: Draw flowers and bees here comment paste the following code that will draw all the columns

  //TODO: Draw flowers and bees here foreach (Column c in columns)
                c.Draw();

While we are at it, we can also take the opportunity to draw a small rainbow flower in the HUD.

1. Create a new member variable in the Game1 class to hold the flowermap texture we will use to display the flower

         Texture2D flowerMapTexture;

2. Load up the flower map in LoadContent

             flowerMapTexture = Content.Load<Texture2D>("flowermap");

3. Draw it in the DrawHUD method

             spriteBatch.Draw(flowerMapTexture, new Vector2(40, 45), new Rectangle(6*72, 0, 72, 72), Color.White, 0, Vector2.Zero, 0.5f, SpriteEffects.None, 0f);

Here we are drawing it pretty much the same way we did in the Column class, specifying a rectangle to start with.  But this call has a lot more parameters, why? 
The reason is because I wanted to scale the flower to half its height and width by setting the scale to 0.5f, the other parameters have to do with SpriteEffects, rotation and layerdepth but all those are set to their defaults so all we are doing here is scaling.

If you run the app now, your screen should look something like this which I think is pretty nice looking but in truth it gets pretty boring after a while…

Next time we’ll add some moving parts to get the party started.