HaxeFlixel is a great engine used for making 2D cross-platform games. Each engine has its own way of doing things. So, how is the UI position handled in Flixel? Have you ever run into an issue where your game UI moves out of place in Flixel?

There is a simple fix for that and it is based on the scroll factor; this is something that can be easily overlooked. Let’s get into it.

Scroll Factor & Camera

In Flixel, the game screen is shown to you through the camera. This camera can be zoomed in/out, scaled, and have it’s sized adjusted. However, as a result, things in the world are dependent on the position of the camera. This affects your UI as well. The only way to fix this is to adjust the scroll factor. You can do so using the below.

class PlayerHUD extends FlxTypedGroup<FlxSprite> {
public function create() {
var myGameUIText = new FlxText(0, 0, 100, 'High Score: 0', 12);
//Sets the scroll factor of the game UIText; this prevents it from scrolling in either direction.
//Note: By default buttons have a scrollFactor of 0.
myGameUIText.scrollFactor.set(0, 0);
view raw scroll-factor.hx hosted with ❤ by GitHub

As you can see, very simple. This allows you to set the scroll factor. By setting it to zero, the UI will not scroll with the rest of the world when the camera moves. Instead, the position of the UI will be fixed to what you see in the camera viewport.

Closing Remarks

I hope this helps you with your own Flixel game. For more helpful information you can find it below.

Haxe Flixel Cheat Sheet

Happy game making!

%d bloggers like this: