Block Puzzle — Color, Scores and Sound!
Welcome to the last installment of building a Block Puzzle! In our last article, we made the game playable, but it was a little monochromatic. Today, we will be changing that. We will add color, scores and sound. Finally, you’ll be able to play the game yourself!
Adding some color
Adding some color to the game is quite easy. Since our game pieces use sprites that are made of string, we can simply make a mapping between a letter and a specific color. With that mapping, each piece can have its own color, and our game bursts with color.
Adding a pop of color makes a huge difference in our game.
Pause the game automatically
Another aspect that was not optimal was that the game continued to play even when it lost focus or was hidden from view. This was a small change that leveraged the WidgetBindingsObserver to stop the timer. We hide the game status until the user selects that it should be resumed. This should make it nice for a quick play while queuing: as soon as you lock your phone, the game is paused.
Pause game screen.
Score
Adding the score to the game is relatively easy. The game engine part was the easiest thing to do. We just need to change the unit tests for line removal to also assert for the number of lines removed is returned. After that we, can add the controls to the user interface to count the number of lines removed.
Control to move the piece down
Another thing that was missing, especially if the game is deployed on a mobile phone, was a button to move the piece down. Adding this was quite simple: just adding another button on the bottom navigation bar.
Game screen after adding the button to move down.
Adding Sound
In the last article, I talked about stopping this project at this time. There is one more thing that I feel would add significant value to the game: sound! What is a game without sound? I leverage Pixabay to get sound effects and music for the game that I could use freely.
The first step, after some clean-up, was to add sound support to the game. I leveraged Flame’s Audio package since Flutter does not have sound support backed in. But having the music playing even when the game is paused was very annoying, so I made the music stop when the game is paused.
Adding the sound for actions in the game proved to be a lot harder. A quick look at the commit history shows it. The main issue is that we are escaping Flutter and Dart’s walled garden and leveraging a library with native code. When we do that, we lose the language safety and other advantages of using the language. After some toiling, I ended up with a solution that works.
Next Steps
I believe the game is complete at this moment. At least, it is an MVP of a Tetris like game. I could add multiplayer support, bonus, change the speed as the user scores, animations, high score… The options are endless. For the experience I am conducting, this is sufficient: I know what it takes to make a casual game using Flutter.
You can play the game on itch.io.
As usual, you will find a tag on GitHub with the state of the project at this point.
Articles in the series: