Setting up a new HaxeFlixel project

Now that we've gone over the basics of the Haxe language, we'll start working on the foundation of our game. The game we're going to make is a side scrolling space shooter similar to games like R-Type or Gradius. It will be much simpler than those games, but by the end of this book you will have the skills you need to take the game to that level of complexity.

To keep the game fun, we'll add a goofy twist: you'll control a walrus with a raygun and a jetpack, and your enemies will be rocket-powered space cats. We'll name this game Star Walrus!

To start, we're going to keep it simple and have enemies that spawn in that you click on to increase your score until a timer runs out. This will help with learning the fundamentals.

Creating the new project

Like in our Hello World example, we'll start by making a new project using the command line. So, open up a command or terminal window, navigate to the folder that you want game's folder to be in, and type in this command:

flixel tpl -n "StarWalrus"

If your code-editing tool doesn't open automatically, navigate to your project's folder and open your project.

The anatomy of our project

A HaxeFlixel project is composed of many files by default. Let's quickly go over what we have to work with. Open up the source folder.

The first file to look at is Main.hx. This is the main class for the game. It handles initialization and gets HaxeFlixel up and running. You can change some of HaxeFlixel's base settings here, but you typically don't write a lot of code yourself in this class.

In the setupGame function, you'll note that a new FlxGame object is added to the stage. FlxGame is the class that gets the HaxeFlixel framework up and running.

Next, you'll see MenuState.hx and PlayState.hx. These two classes extend the FlxState class. You can think of these as the main screens of the game. The FlxState objects will be used to represent different screens of the game and will also be used for things like menus inside other FlxState objects.

After this, have a look at Reg.hx. This is a class meant for tracking game data and progress. It's an entirely optional class to use.

Then, we have AssetPaths.hx. This is a handy class that will keep track of all files your game can load so that you can access them without having to keep track of file paths. We won't be changing it, but we will be using it a lot.

The last file we'll look at is Project.xml. This file contains most of your project's settings. This will let you pull in Haxe libraries, set up paths for files, change compilation settings, and change settings specific to each platform you intend to target.

Before moving on, have a look at the assets and export folders. The assets folder will be used to store any art, sound, and data assets you need to load. The export folder will store builds of your game for each platform. The compiler will add a new folder for each platform as you make builds for them.

Changing settings

We'll get more in-depth with changing project settings over the course of the book, but for now, we'll keep it simple. To start, open up the Project.xml file.

In the window settings section, change the width property to 960 and the height property to 640. Here's what it should look like:

<!--These window settings apply to all targets-->
<window width="960" height="640" fps="60" background="#000000" hardware="true" vsync="true" />

We're going to use the 960 x 640 screen dimensions as our base screen size because it's a good general-purpose screen size for web and mobile games. Don't worry about being locked into those dimensions; we can change them at any time and we'll look at screen scaling options in Chapter 7, Deploying to Multiple Platforms.

Next, open up Main.hx and make the following changes to the settings at the top of the class:

var gameWidth:Int = 960;
var gameHeight:Int = 640; 
var initialState:Class<FlxState> = PlayState; 

The changes in the gameWidth and gameHeight variables are pretty self-explanatory; it's the same change that we made in the Project.xml file. We also need to make those changes in the Main class to ensure that everything gets scaled correctly.

The initialState property is the FlxState class that will appear when we first run the game. We've changed it from MenuState to PlayState because we will be focusing on gameplay for the time being. In the next chapter, we will introduce screen flows and then use MenuState.

Adding assets

Next, we need to add the assets we're going to use to start building the game. Copy the image assets provided for this chapter—enemy01.png and gameBackground.png—into the assets/images folder.