Dealing with black bars in RatioScaleMode or another solution

[Bogwog]

Hi everyone.

I'm having trouble with scale modes. My game is designed to work best at 16:9 aspect ratio in portrait mode (for mobile devices). Unfortunately, there are a lot of devices that I want to support which don't adhere to that ratio. So I've been experimenting with scale modes to try to find the best possible solution to this problem without any distortion.

I've concluded that RatioScaleMode gives the best results, except for the damn black bars that show up:

Fortunately I had at least some foresight and rendered the game's background image asset at a 1:1 aspect ratio, so that it could extend beyond the bounds of the screen regardless of the resolution that the game was being played. However, as you can see from the screenshot above, the background is not able to extend anywhere since it is being stopped by those black (gray) bars.

All I would need is a scale mode that will scale the game to fit vertically, while allowing it to flow out horizontally (hope that makes sense...)

I've searched and searched and searched some more and have not been able to find any good documentation on scale modes. Is there a scale mode out there that does what I want, or can I make my own by extending one of the built-ins?

...Alternatively I could bite the bullet and go with a really ugly solution that will manually scale and reposition each element based on the device resolution, but that seriously sucks

I appreciate any help! Thanks!

[Bogwog]

Figured it out! After crawling through the source files of the various different built-in scalemodes, I was able to make one which pretty much did exactly what I needed, and I discovered a mistake in my code that prevented it from working. The process is below in case anyone is curious:

First I had to set gameWidth and gameHeight in Main.hx to the same value (1920x1920 in my case instead of 1080x1920 like I had before), then used this scale mode:

class MyCustomScaleMode extends BaseScaleMode{

private var landscape:Bool; //For landscape orientation

public function new(landscape:Bool = false){

super();

this.landscape = landscape;

}

override private function updateGameSize(Width:Int, Height:Int):Void {

if (landscape) {

gameSize.y = Width;

gameSize.x = Width;

}else {

gameSize.y = Height;

gameSize.x = Height;

}

}

}

And that's it! Once again I'm impressed by HaxeFlixel's performance. Despite such high resolution assets, the game still runs perfectly on a Nexus 4 at 768x1280 as well as on a LG G3 at a 1440x2560 resolution. I was going to test it on my Droid X2, but it crashed due to NoSuchMethodError exception likely caused by some ICS APIs used by Lime not being compatible with Froyo. Still, a Nexus 4 is a low enough benchmark for me atm.

[Gage Peterson]

Thanks, this is exactly what I wanted!