Today we’re going to cover the FlxCamera class, and its common uses in HaxeFlixel. Here’s a list we’ll be going through:

• Camera shake
• Camera flash/fade/fill
• Camera follow/lerp/bounds

Project Setup

First, let’s create a template HaxeFlixel project, as usual:

To demonstrate camera scrolling and follow functions, let’s create a large CSV map data. Copy the data below, save it as map-data.csv, and put it in your /assets/data  folder:

For the image tilesheet, let’s go to OpenGameArt.org and use one of the tiny 16 basic spritesheets. Download the basictiles.png (a.k.a. basictiles_2.png) and put it in the project’s /assets/images  folder.

Now we can begin coding.

Map & Player Setup

We will not be loading map data using TMX file this time — for simplicity sake, we just load using CSV file. We’ll skip the explanation and jump straight to setting up the map code. Let’s start with the MenuState.hx:

If you build with lime test neko  now, you should see this:

Note: If the map doesn’t show up, make sure your .csv file does not end with an empty line.

Let’s set the resolution lower so we can zoom in on the map. In the Main.hx, change the resolution width/height from 640×480 to 320×240:

Now if you build again with lime test neko , you should get this:

Oh, note that the pillar tile is going to be our player tile. Please excuse the poor choice of graphic; We’re just using one placeholder tilesheet. 🙂

Now, let’s quickly parse the player object so we can move on to the camera stuff:

There shouldn’t be any difference visually when you build, — we just have a player object which we can control.

Now let’s add some player input in the update  function:

And if you build now, you should be able to control the pillar… er, player:

Great! Now let’s move on to the main content of today’s tutorial — using the camera.

The reason why we took quite a few steps to setup the game is so that we have a visual reference, to know the camera functions are working. If you started with a simple empty black screen with a blue box in the middle, it would’ve been difficult to tell if the camera actually shook, or if the camera actually follows the player as you move.

Camera Shake

The simplest way to use the camera shake can be written as follows:

You can refer to the FlxCamera API on how to the function callback and whatnot. If you’re not sure how callbacks are written, try reading the Button events & callback tutorial here.

Notice how when the screen shakes, there’s a visible black area around the screen’s edges:

From a quick search, this page reveals a simple solution. Just add the following lines in your create  function to extend the camera size:

Note that the ext  value is arbitrary, as long as the camera shake’s intensity doesn’t go beyond the extended range.

And now there won’t be any visible black area when the screen shakes:

Camera Flash/Fade/Fill

Camera flash can be used for situations such as lightning flash, or explosions. Let’s just modify the existing camera shake test buttons like this:

Now you should get this when you test:

The camera’s fade  and fill  functions are similar to flash .

fade  will gradually fill the screen with a color — the opposite of flash.   fill  instantly fills the screen with a certain colour. These two functions can be used hand-in-hand for situations like fading in or out between screens. You can check out the FlxCamera API for more info.

Camera Follow/Lerp/Bounds

To get the camera to follow something (in this case, the player), you can just write it like this:

And here’s the result when you move around:

At first glance, there are three problems:

1. The camera scroll is too rigid (no deadzone).
2. The camera movement is not smooth (no lerping).
3. The camera can move out of bounds (shows the black area).

Let’s go fix each of the problems above.

1) To fix the rigid scroll issue, you need to add “deadzones” in the camera (an area within the screen that won’t scroll the camera). HaxeFlixel has a few presets which can be used in the  follow  function, as indicated in the API page. Here’s an example usage, by modifying the existing code:

Note that we added the preset STYLE_TOPDOWN and now it’ll automatically follow the player, with a little deadzone, as demonstrated below:

2) To add smooth camera scrolling (lerping the movement), you can just add additional values to the follow  function, like this (refer to the API):

And now the camera will lag a little when the player moves:

3) To prevent the camera from moving out of bounds, you just need to set the bounds of the map, like this:

And this will give you the result:

There’s a lot of other things you can experiment with in FlxCamera, so go ahead and try them all out! The information above should be enough to give you a rough idea of what’s possible with the FlxCamera — they’re very handy in prototyping games.

This concludes today’s tutorial on HaxeFlixel’s camera. In the next post, we’ll try something more advanced with the camera — split screens and parallax scrolling.