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

HF Breakout 2 - Balls and Walls

Posted March 1, 2021

Welcome back to part 2 of the HaxeFlixel Breakout tutorial! This time we’ll add a ball and some walls to keep it in play, and we’ll even make the ball bounce. Let’s get into it!

Asset Paths

A brief excursion: We specified the path of the paddle graphic asset manually. But HaxeFlixel also offers us an easier option. Instead of specifying the path, we could have done:

paddle = new FlxSprite(0, 0, AssetPaths.paddle__png);

HaxeFlixel generates paths to all assets and stores them in AssetPaths. This way we don’t have to memorize and input the paths manually. This is good when you move assets around, as you won’t have to update all references to them. However, there are two things to note:

  1. As you can see, you need to separate the file extension with __ (two underscores) instead of a dot.
  2. When you’ve just added new assets to the project, you might have to restart the Haxe language server so that HF puts it in AssetPaths. In VSCode, simply press Ctrl + Shift + P and select Haxe: Restart Language Server. Then just wait a couple seconds and you’re ready to go!

Ballin'

We have the paddle—now we need a ball!

First, add a variable to the class to hold it:

var ball:FlxSprite = null;

Now to create the ball in create. But…I forgot to make a graphic! Oh well, lucky for me, HaxeFlixel can help us out:

ball = new FlxSprite(0, 0);
ball.makeGraphic(16, 16, FlxColor.RED);
add(ball);

The function makeGraphic is a method of FlxSprite and allows us to quickly create rectangular sprites. In our case, the ball is 16x16 pixels big and it’s red; the class FlxColor contains a few preset colors we can use. Both makeGraphic and FlxColor are great for prototyping, as you can get things on screen very, very quickly.

Now we have a ball, but it’s stuck in the corner. Let’s center it on screen! We could calculate the position manually, using FlxG like we did before. Or we could simply do:

ball.screenCenter();

I probably don’t have to explain what this method does, the name is kind of a giveaway.

Now we have a paddle and a ball! This is starting to almost look like something. But things need to move in order for it to be a game. So, let’s make the ball bounce.

Bouncing

As I’ve said before, FlxSprite has many properties. One of them is velocity. Set it, and HaxeFlixel will move the object by its velocity each frame automatically. The speed of the object doesn’t deteriorate, so it doesn’t get slower with time. Let’s try it on the ball to see how it works. First, define a variable at the top of the state:

var BALL_SPEED:Float = 200;

Then in create, after creating the ball, add:

ball.velocity.set(BALL_SPEED, -BALL_SPEED);

Compile the game and the ball will fly to the top-left! So far so good. But this is Breakout, so the ball has to bounce off the edges of the screen to stay in play. So, now we have two jobs: Create walls surrounding the play area, and make the ball bounce off them. Logically, the first step is to create the walls.

Walls and Groups

We’ll create 3 walls: On the left, top, and right edge of the screen. We’ll also meet a new HaxeFlixel type that is very powerful. At the top of the state, define a new variable:

var grpWalls:FlxTypedGroup<FlxSprite> = null;

Here we define a new FlxTypedGroup, or a group for short. In HaxeFlixel, a group is basically a fancy array; it allows you to store a bunch of objects of the same type. In this case we set the type parameter to FlxSprite, so this group holds FlxSprites.

We could just use a regular array, but groups are an integral part of HaxeFlixel and make accomplishing things a lot easier, as we’ll soon see.

Anyway, time to build some walls. Add the following chunk of code in create.

// Add walls
grpWalls = new FlxTypedGroup<FlxSprite>();

var topWall = new FlxSprite(0, 0);
topWall.makeGraphic(FlxG.width, 8, FlxColor.LIME);
grpWalls.add(topWall);

var leftWall = new FlxSprite(0, 0);
leftWall.makeGraphic(8, FlxG.height, FlxColor.LIME);
grpWalls.add(leftWall);

var rightWall = new FlxSprite(FlxG.width - 8, 0);
rightWall.makeGraphic(8, FlxG.height, FlxColor.LIME);
grpWalls.add(rightWall);

add(grpWalls);

First, we actually create the group. It’s easy to forget this, but it’s important, as otherwise a null access error will hit us in the face!

Then we create our three walls. Again we use FlxG to position them on the edges of the screen and FlxColor to color them a nice lime green. Then we add each wall to the group using the add command. Finally, we add the group itself to the state. This will automatically add all members of the group to the state as well, so there’s no need to double dip. Compile the game and see our glorious walls standing there!

images/walls.png

Next, we want to make the ball bounce off the walls. This requires one set of stepup step of setup. After adding all walls to the group, add this for-loop:

for (wall in grpWalls)
{
    wall.immovable = true;
}

Here, we iterate through the group (like we would with an array) and set the property immovable of each member to true. Every FlxSprite has this property, and it’s important for collision. If we didn’t set this, the walls would fly away when ball hits them! For more information, check out my post on collisions and overlapping in HaxeFlixel.

Now the walls are stable, so let’s smash our ball into them! For this we’ll use the collision functions built into HaxeFlixel. And while collision handling is usually a bit tricky, in our case, it’s very easy to do. In update, after the super.update call, add:

FlxG.collide(ball, grpWalls);

This function does the following: HaxeFlixel takes the ball and every wall in the group. It then checks if they overlap, one by one. If the ball does overlap a wall, they get separated.

This is one of the main reasons to use a group instead of an array. You can simply pass a group into collide and HF will automatically iterate through!

If you compile the game now, you’ll see that the ball now stops at the wall! And since you’re probably curious: Feel free to set wall.immovable = false for each wall and see what happens when the ball hits them. Don’t forget to change it back afterwards though!

Now the ball won’t phase through walls anymore, which is good. However, we want it to bounce, not just stop dead. We could do this manually by manipulating the velocity of the ball, or we could use a trick… of course we’ll go with that. In create, after creating the ball, add:

ball.elasticity = 1;

Yet another useful property of FlxSprite! The elasticity property represents how bouncy an object is. The default is 0, the maximum is 1. At 0, the object simply stops on collision, as we’ve seen. But at 1, the object bounces off without losing speed. Go ahead and try it out!

images/bouncing.gif

And with just this one line we have the ball bouncing off walls! Awesome.

Things have certainly gotten more dynamic now! But a Breakout game isn’t a Breakout game when you can’t break things. So, in the next part, we’ll add some bricks! 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
  • 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