In this beginner tutorial you'll learn how to make Breakout game in HaxeFlixel from scratch!

HF Breakout 5 - Score!

Posted April 19, 2021

Numbers make the games go ‘round! Especially old arcade games like Breakout, where the score was the reason to play. So, let’s add a score counter to the screen!

Score

To keep track of the score, we’ll use a new type: FlxText. As the name implies, it’s a text that’s drawn on screen. We can change the color, font, formatting, effects, and so on. And since it extends FlxSprite, we can even use properties like velocity and elasticity to move it around! Very cool.

We won’t get fancy here though, we’ll just make a simple score label. To that end, define two new variables at the top of the state:

var score:Int = 0;
var scoreLabel:FlxText = null;

The integer score will store the actual score value, while scoreLabel will be used to render it to the screen. Let’s set this up! At the end of create(), create the text:

// Score
scoreLabel = new FlxText(16, 16, 0, "SCORE: 0", 16);
add(scoreLabel);

It’s pretty simple. The signature of the FlxText constructor is:

new(X:Float = 0, Y:Float = 0, FieldWidth:Float = 0, ?Text:String, Size:Int = 8)

The first two parameters set the position of the text. FieldWidth specifies the width of the text field, which comes into play with line breaks and such. Setting it to 0 makes it automatically fit the rendered text. Text is the text we want to render, and Size is the font size. Like any FlxSprite we have to add the text to the state so that it gets rendered.

The text now shows up on screen, but of course we need to update it occasionally. So we’ll write a function that updates the score text. It’s simple and short:

function updateScore(Value:Int)
{
    scoreLabel.text = "SCORE: " + Value;
}

As the name implies, the text property of a FlxText contains the text string we want to render. We pass in a string of SCORE: , along with the value that we pass into the function. Fun fact: Since Haxe 4, you can also do:

scoreLabel.text = 'SCORE: $Value';

Pick whatever style you prefer.

Now we need to increase the score. We want to give players points for each brick they break, so it makes sense to increase the score value in hitBrick():

function hitBrick(Ball:FlxSprite, Brick:FlxSprite)
{
    Brick.kill();
    score += 10;
    updateScore(score);
    //...
}

And that’s it for the score! Pretty quick and simple. Now play the game, break some bricks and see how the score is increased and updated!

images/score.png

In the final part of this series we’ll actually let players win—and lose!—the game. Be excellent to each other, and party on!

If you have any questions, comments or criticism, post them in the comments below or reach out to me on Twitter @ohsat_games!

Download the Project Files!

All patrons on Patreon get the complete source code for this tutorial, as well as other perks such as early access! And Patreon support also ensures that I can keep working on tutorials like this one. Become a Patron!
Just Want to Buy Me a Coffee?

Check out the rest of this tutorial series!

  • HF Breakout 1 - Anatomy of a Project
  • HF Breakout 2 - Balls and Walls
  • HF Breakout 3 - Hitting Bricks
  • HF Breakout 4 - Paddles
  • HF Breakout 5 - Score!
  • Get Words in Your Inbox!

    Be oldschool and sign up for my newsletter to get updates! Just enter your email address, prove you're not part of Skynet and you're good to go!



    Powered by CleverReach. I will not send you spam or sell/give your email address to someone else.  You can of course unsubscribe at any time. By clicking the subscribe button above, you confirm that you have read and agreed to our privacy policy.

    By using the Disqus service you confirm that you have read and agreed to the privacy policy.

    comments powered by Disqus

    Related Posts

    HaxeFlixel Tutorial: Single Separation Collisions

    Collision detection (and handling) is one of the most fiddly things when it comes to creating games, at least in my experience. There seems to be no shortage of weird bugs and issues that can pop up throughout the entire dev cycle of a game (the weirdest one I’ve encountered so far is this one right here). It’s a good thing then that HaxeFlixel comes with several functions that can take care of it for you.
    Read More

    Hanging on Balloons

    One of the best things you can do for yourself in gamedev is to have good tools and an efficient workflow. I’ve already shown how I handle path movement in [Speer] in another post, now I want to show you another small trick I’m using to make level creation easier and quicker. Note: As always this article will show how I’ve implemented it in HaxeFlixel, as that is the framework I’m using.
    Read More

    Path Movement in Speer

    I’ve recently been asked about how I did the movement of some Sparkballs in [Speer], more specifically these ones: While the simple answer would be “Path movement, baby!” I thought I’d use the opportunity to go a bit more in depth and show you how I did it. Since [Speer] is powered by HaxeFlixel this is going to focus on that particular framework, although the general approach could easily be implemented in other engines and languages as well.
    Read More