My First Game – Part 5: Pong – Paddle Movement

In order to move the Paddle, we need to do the following things:

  1. Make the paddle into a class variable so that it can be accessed in other functions.
  2. Check for player UP and DOWN key inputs and move the paddle.
  3. Prevent the paddle from moving outside the screen.

Now we will need to modify our code a little:

Step 1 is shown in lines 15-16 and 25-26 — The paddle  variable is now a class variable, so that the update()  function can later access it.

Step 2 is shown in lines 45-54 — Notice that to move the paddle up, we subtract the y-position, and vice versa. Remember, the origin of the screen begins from the top-left of the screen.

ss3

The same top-left origin applies for all objects (in this case, the paddle), unless you offset its origin — but for now we don’t need to worry about it.

Let’s now write some code to make sure the paddle doesn’t go out of the screen:

In lines 57-60, we make sure the paddle’s y-position does not exceed the screen’s top.

In lines 62-65, the code is a little longer. Remember that the y-position of the paddle is on its top-left, so to make sure that the paddle’s bottom doesn’t go out of the screen’s bottom, we need to add the paddle’s height into the equation.

ss4

Now go ahead and test your game again, back at the command prompt/terminal:

And if everything was done right so far, you’ll be able to move your paddle with the UP and DOWN keys, and they won’t move out of the screen.

In the next post, we shall run through some code to create the second paddle.

My First Game – Part 4: Pong – Paddle

Now we are going to create the Pong paddle. Create a new file in the source  folder and name it  Paddle.hx . Now we have an empty file — how do we write Haxe code in it? You can always refer to the cheat sheet from the website, which will come in handy in the long run:

http://haxeflixel.com/documentation/cheat-sheet/

Copy the template code from the cheat sheet page for FlxSprite  class, and rename the class to Paddle , as shown below:

Important: The class name must be the same as the file name. In the case above, if the class is named Paddle , then the filename would be Paddle.hx .

When a Paddle is created, we want it to do the following things:

  • Create a rectangle of arbitrary size (Width, Height) and color.
  • Position it at an arbitrary location (X,Y)
  • Add the paddle to the screen

So let’s first modify new()  function to the following code:

If you’re wondering why the template function new()  did not have the X and Y values — it’s because they’re optional and default to zero (as written in the API here: http://api.haxeflixel.com/flixel/FlxSprite.html). So, if we want to use our own values, we’d have to manually insert them as the function parameters.

Note that when objects are created in HaxeFlixel, they do not appear on the screen yet — you will need to add the objects by using  add() . The main screen is controlled by the FlxState  class — in our case, by default, the  MenuState .

Now let’s go back to MenuState.hx  and add the following code in the create()  function — where everything is initially created when the screen appears:

In the code above, we create a new paddle and set the X/Y offset values of (10, 50), then we add it to the screen. Note that the starting position (0,0) is on the top-left of the screen.

Now let’s build a game to make sure there’s no errors. While you’re in the MyFirstGamePong  folder, type the following command to build your game:

In a nutshell, you’ll be building a test version of a game (which will allow debugging) and you’re targeting the neko platform — a virtual application that can be emulated on both Windows and OSX. The reason we’re not building to the native Windows or OSX version is that neko builds are a lot faster.

If everything went well, you should get the following:

ss2

Congratulations, you have a paddle on the screen. In our next post, we will make the paddle movable, and within the boundaries of the screen.

My First Game – Part 3: Pong – Setup

Let’s quickly create a new HaxeFlixel project before we begin.

Use the following command to create a new HaxeFlixel template project in a folder of your choice:

This will create a template HaxeFlixel project in the folder called “MyFirstGamePong”.

Now navigate to “MyFirstGamePong” folder. You can drag-and-drop the folder into your Sublime Text to make it easier to manage your files and folders, like this:

ss1

Take note of the  MenuState.hx , as it is the starting point of all HaxeFlixel games by default. You can always change the starting point to another file by going to Main.hx  and changing the initialState value to another state name, like PlayState .

In our next post, we shall write our first piece of code to create the paddle for our Pong clone.

My First Game – Part 2: Game Design

pencil-and-paper

Assuming that you’re a total newbie, then chances are, you would like your first game to be simple and completable — to gauge how much time and effort it takes to make one. And then work your way up from there.

As such, let’s make our first game with the following in mind:

  • Learn the basic HaxeFlixel syntax and techniques
  • Make or use presentable placeholder art
  • Make a complete game which includes a main menu and the game screen
  • Only mouse or only keyboard input.

1242809270906368991Tic_tac_toe

The simplest game I could think of was Tic-Tac-Toe, but I am against that idea because:

  • It’s a game that you can play with pencil and paper in less than 30 seconds.
  • If it’s intended to be a decent game, then you’ll need to write AI (Artificial Intelligence) for it.
  • Regardless of whether it’s versus AI or a friend, the results of the game can get predictable.

2dbcc300-1359-11e4-9d16-0759e16cb1a6_pong-game-screenshot

In my personal experience, I learned that even Pong took a considerable amount of time and effort to complete — so we shall make our very first HaxeFlixel game a Pong clone.

Let’s take a look at what we need for a Pong clone:

  • Paddle
  • Ball
  • Ball bouncing mechanic
  • Player score
  • Player input (left and right side)
  • Restart round when either player wins

Note — HaxeFlixel is able to draw primitive shapes (in this case, rectangles), so there is no need for placeholder images. HaxeFlixel also comes with a decent default font, so there’s no need for custom fonts either.

Another note — For the sake of simplicity and beginner-friendliness of the tutorials, the code written may not be fully optimised. As we progress with more tutorials, we will learn more techniques and clean up code along the way.

In the next post, we will go through a quick project setup for the Pong clone.

My First Game – Part 1: Mental Preparation

Before we begin, let’s watch some excellent videos from Extra Credits — a recent series of episodes talking about making your first game:

How to start your Game Development:

Minimum Viable Product:

Practical Rules – Setting (and Keeping) Production Goals

The fourth video in the “Making Your First Game” series (not shown above) is about marketing your completed game — which isn’t necessary at this stage, especially if you’re just starting out. However, if you’re pursuing game development as an indie career, that video may be worth watching for awareness sake.

In the next post, we shall begin designing our first game.