HaxeFlixel Tutorial – Camera Zoom Revisited

In the previous post, I wrote a tutorial on how to zoom the camera in a hack-ish way. Turns out the original author of Bullet Time Ninja article, Greg Lieberman, already fixed that with a haxeflixel-addon class, the FlxZoomCamera. If you look at the API page, you’ll notice that it doesn’t say much, so let’s explore that today.

Setup

I learned from a recent HaxeFlixel tweet that you can create a new HaxeFlixel “barebones” project template, which has minimal files/folders, and also excludes all the config and comments:

Notice that the usual MenuState.hx file is now missing — the entry point is now PlayState.hx, which makes more sense. We’ll be using the barebones template for tutorials from now on. :)

Before we proceed, let’s change some configs — notice the difference of Main.hx (between barebones and non-barebones). The config variables and comments are now missing, and entry point (the last line) relies on the default values (Refer to the API):

Anyway, to change the resolution of the screen, do it in Main.hx :

… and to change the size of the window screen, do it in Project.xml :

To use the FlxZoomCamera class, which belongs to the flixel-addons haxelib, we need to enable it in the Project.xml, by uncommenting the line below:

And now we can start coding!

Code

Let’s set up the code similar to the previous tutorial:

And when you run with lime test neko , you will get a player that moves in a placeholder map:

licecap-zoomcamera2

Now let’s use the FlxZoomCamera addon:

And when we test :

licecap-zoomcamera2-2

Hmm, when you zoom out, the camera behaves in a peculiar way — the camera moves along with the player’s movement.

If you refer to the FlxZoomCamera API, there doesn’t seem to be anything you can modify that can change the way the camera moves when you’re zoomed out.

However, if you look into the FlxZoomCamera.hx file (on OSX, it’s located at /usr/lib/haxe/lib/flixel-addons/1,1,0/flixel/addons/display), you’ll notice there are actually two private variables that seem better off as public:

You can just make these public , and you can now play around with the value in your game, perhaps like this:

And the result:

licecap-zoomcamera2-3

Note the zoom speed has reduced greatly. Also, when zoomed out, the camera doesn’t seem to move around too much when the player moves.

_zoomSpeed  sounds self-explanatory, but what exactly is _zoomMargin ? I don’t really know. I don’t understand what value it should be, but after some tinkering, it seems to be a range between -1.6 to 1.6. So if you want the camera to not move when zoomed out, just set _zoomMargin  to a big value (e.g. 1.7) and it will probably work.

Otherwise, you may need to extend or rewrite the FlxZoomCamera.hx‘s  alignCamera()  function to suit your needs.

This concludes the revisited tutorial on zooming the camera.

HaxeFlixel Tutorial – Camera Zoom

@mikeevmm tweeted me early this month and noted that there are some problems with FlxCamera.

Here are some known issues I could identify:

  1. Camera doesn’t follow well when zoomed.
  2. Objects start disappearing when zoom is less than 1.

The problems above are apparent (as of writing) even in the FlxCamera demo.

There’s an article by Bullet Time Ninja that discusses and resolves the camera issue, but it’s from 2011 and uses Flixel (not HaxeFlixel), so the result may differ.

Today’s tutorial will attempt to resolve the first problem stated above. If there is a solution for the second problem, I’ll write a tutorial to address that next time. :)

Setup

As usual, let’s setup a new HaxeFlixel template project for testing:

Code

First, let’s set an arbitrary resolution of the game in the Main.hx file:

Now, let’s go into MenuState.hx (the default entry point for the game) and create a large-enough level with a movable character:

Now if you run the game with lime test neko , you’ll get a player that can move around a placeholder map, and the camera follows it, within the map’s bounds (btw, yes, there is no collision logic):

licecap-cam-1

Now let’s add some debug controls to recreate the problems mentioned at the beginning of the article above:

Now if you test the game — Zooming in and out will only zoom the camera’s viewport. The camera still “follows the player”, but not in a way you would expect:

licecap-cam-2

When we use  camera.zoom , it seems we’re actually resizing the camera’s viewport. So how can we fix this? With my limited knowledge, I’d assume the solution is to reposition and resize the camera every time its zoom is changed.

Before we do that, let’s add more debug input into the code so we can later understand what needs to be used to fix the problem:

Now if you play around with the debug keys above, you’ll notice the following points:

  • Changing the camera’s x  or y  value will move the viewport’s origin (top-left corner).
  • Changing the camera’s width  or height  value will increase/decrease the viewport’s size.
  • Changing the viewport size doesn’t seem to update the tilemap’s size, until we use level.updateBuffers() (by pressing P).
  • The camera’s deadzone (when following the player) isn’t updated, until we re-follow the player (by pressing O).

Resolving Camera Zoom issue

After some testing with the debug keys above, it seems we can combine the techniques and resolve the zoom issue, by writing the following code:

Now when you zoom in or out, the camera is centered and the player’s deadzone is updated:

licecap-cam-3

Notice that the player will get cropped when moving out of the map’s bounds. That’s because we used  FlxG.camera.setBounds() . If you modify the following lines:

The player can now freely move around in the camera without being cropped, at the expense of not having any map boundaries:

licecap-cam-4

To top things off, let’s use Bullet Time Ninja’s technique in lerping the camera’s zoom:

And the result:

licecap-cam-5

It’s not perfect, but I think this should be enough for most camera-zooming issues. This concludes the tutorial on zooming the camera.