HaxeFlixel Tutorial – Fullscreen/Window & Scale Modes

Each game may have different screen resolutions, to cater for different physical screen sizes. The most obvious example is the mobile device — there’s just too many screen sizes to worry about. We’ll explore this in today’s tutorial.

Full Screen / Windowed Mode

If you want to toggle between windowed and full-screen mode in HaxeFlixel, you can just use this code snippet:

As noted in the FlxG API, this only works on cpp and flash (and neko) targets. Android and iOS targets naturally don’t need this because they’re already full screen.

Screen Scale Modes

The HaxeFlixel’s ScaleModes demo indicates that this is possible.

To illustrate the a potential problem with screen scale modes, first let’s take a look at an example of a game screen without problem:haxeflixel-scalemodeThe above image assumes that when you make a game at 4:3 ratio, it would fit snugly when you upscale it. However, if we were to enter full-screen, how would it look like — especially on Android devices, where their screen sizes and resolutions differ greatly?

haxeflixel-scalemode-2

In most cases, we want the game’s resolution to be independent from the physical screen size, or at least have it scale gracefully with correct ratio.

By default, HaxeFlixel’s game resolution scales by ratio. This means, if you resize your window, the game maintains ratio rather than stretching to fit the screen, like this:

haxeflixel-scalemode-3

This scale mode is sufficient for most cases, but HaxeFlixel has a few other scale modes we can apply, through flixel.system.scaleModes  (Refer to API).

I’ve written a sample HaxeFlixel project below for you to explore and experiment with the scaleModes.

Create a new HaxeFlixel template project:

Create a map data file “sample-large-map.csv” in /assets/data  folder:

Add the following code in MenuState.hx:

Test the game:

Here’s a GIF to demonstrate the test:

licecap-scalemode

Notes:

  • There is a BaseScaleMode , which can be extended into subclasses, as seen in the API page. The default behaviour of BaseScaleMode seems to be the same as FillScaleMode .
  • Using StageSizeScaleMode  will cause all the other scale modes to break. We could dive into the code to fix it, but to avoid any issues, it’s best to avoid StageSizeScaleMode.
  • FixedScaleMode  and PixelPerfectScaleMode  are similar. The difference is, FixedScaleMode maintains a fixed 1:1 pixel ratio, whereas PixelPerfectScaleMode will upscale to 2:1 or even 3:1 if the screen size is big enough.

This concludes the tutorial on screen sizes.

Leave a Reply

Your email address will not be published. Required fields are marked *