Bizzy Bees XNA to DirectX/DirectXTK – Part 8
This is part of a blog series… if you came here directly you might want to read the introduction first.
Now we have a fully functioning game, but we need to add some final touches to it to make it just that little bit better.
The things we are going to do are:
- Add lives – so that you can fail 3 times before it’s game over
- Add some bees to the HUD to represent the lives and animate these bees
- Add a little rainbow flower to the HUD to make things prettier
- Speed things up after a while to make the game harder as we go along
- Enable game restart
Adding lives
Let’s start with the lives.
1. Add a new private int field in the BizzyBeeGame class called lives and initialize it to 3 in BizzyBeeGame::ResetGame()
2. In the BizzyBeeGame::Update method, instead of immediately doing a “GAME OVER” when we reach the bottom, decrease the number of lives instead and move the columns up a bit so the player gets a chance to clean up.
void BizzyBeeGame::Update(float timeTotal, float timeDelta)
{
animationCounter++;
if (animationCounter % 8 == 0){
animationCounter = 0;
lifeAnimationFrame = 1 - lifeAnimationFrame;
}
if (!GameOver){
if (UpdateColumns()){
if (lives > 0){
lives--;
MoveColumnsUp();
}
else
GameOver = true;
}
}
}
void BizzyBeeGame::MoveColumnsUp(){
for (auto columnPtr = begin(columns); columnPtr != end(columns); columnPtr++)
(*columnPtr)->MoveFlowersUp();
}
3. In the Column::MoveFlowersUp() just change the position of all the flowers so that they move up 150px
void Column::MoveFlowersUp(){
for (auto pFlower = begin(flowers); pFlower != end(flowers); pFlower++){
auto flower = (*pFlower);
flower->Position.y -= 150;
}
}
4. Compile and Run, you should now have a chance to die 3 times before it’s game over
Animating the HUD
To represent the lives you have left well add bees at the top of the screen right next to the scoreboard. We are going to animate these bees just because we can:)
There are many ways you can animate things. By changing the location like we did with the flowers, or by chaging the scale or rotation, but one of the more interesting ways to animate something is by creating sort of a filmstrip with scenes for an animation. For the HUD bees we will create a pretty simple animation strip to make it look like the bee is flapping its wings. In the beginning of the series we loaded up a dds file called AnimatedBee.dds and to make the animation happen we will just switch frames back and forth in the strip. The more frames you have, the more realistic it will look but even just using these two frames we can trick the eye to fill in the rest.
1. Add two new int fields to BizzyBeeGame called int lifeAnimationFrame and int animationCounter.
The liveAnimationFrame will tell us if we are in frame 0 (wings up) or frame 1 (wings down). The problem is that if we swap every frame they will flap the wings way too fast so we slow it down a bit by using an animation counter so we only flap every 8th frame.
2. In BizzyBeeGame::Update add code to toggle the lifeAnimationFrame every 8th time Update is called
animationCounter++;
if (animationCounter == 8){
animationCounter = 0;
lifeAnimationFrame = 1 - lifeAnimationFrame;
}
3. Now all that’s left to do is to draw the correct frame in BizzyBeeGame::DrawHUD. The drawing code should look pretty familiar by now. We draw either frame 0 or 1 for each of the lives we have left
RECT lifeBeeRect = { lifeAnimationFrame * 90, 0, (lifeAnimationFrame + 1) * 90, 72 };
if (lives > 0)
spriteBatch->Draw(lifeBeeTexture.Get(), Vector2(200, 15), &lifeBeeRect, Colors::White);
if (lives > 1)
spriteBatch->Draw(lifeBeeTexture.Get(), Vector2(290, 15), &lifeBeeRect, Colors::White);
if (lives > 2)
spriteBatch->Draw(lifeBeeTexture.Get(), Vector2(380, 15), &lifeBeeRect, Colors::White);
4. Compile, run and watch the animation magic take place:)
Add a little rainbow flower to the HUD
If you look at the image above you’ll se a tiny little flower in the HUD right by the score. In order to accomplish this we’ll draw the rainbow flower the same way we have before, just adding on a scale of 0.5f. In fact there are lots of things you can do in the draw method, like rotate, change colors, skew the image among other things so don’t be afraid to explore it to create nice animations.
1. Add the following code to BizzyBeeGame::DrawHUD to draw the image
RECT flowerRect = { 6 * 72, 0, 7 * 72, 72 };
spriteBatch->Draw(flowerMapTexture.Get(), Vector2(40, 45), &flowerRect, Colors::White, 0, Vector2(0, 0), 0.5f, SpriteEffects::SpriteEffects_None, 0);
Make things trickier after a while
If we just continue at the same pace this will soon be a never ending game once the player gets a little better at matching flowers and bees. To up the difficulty a bit we can increase the speed of the flowers every time we hit 10, 20, 30… points
1. Modify the BizzyBeeGame::HandleFlowerSelection method, where we score, to check the score and increase the speed if neccesary
//check if we should add points
if (selectedFlower->Color == RAINBOWCOLOR)
{
score++;
if (score % 10 == 0){
for (auto columnPtr = begin(columns); columnPtr != end(columns); columnPtr++)
(*columnPtr)->Velocity += 0.1f;
}
}
Enable restart
As the final little touch, we’ll enable restarting the game. We have pretty much already done all the work so the only little thing is a few lines at the top of the BizzyBeeGame::HandleInput method
if (GameOver){
ResetGame();
return;
}
Hope you have enjoyed the series, I know there are still a bunch of little bugs left, such as the possibility of no matches in the beginning etc. and the lack of sound but hopefully it should at least get you started on developing 2D games with DirectX/DirectXTK
Comments
Anonymous
October 02, 2014
Awesome! Simple, direct and a great example for the XNA developers getting into C.Anonymous
December 22, 2014
Thanx, a nice example to begin with.