Automatically adapt to screen resolution

Help
#1

I have an android app where I set:

<window width="720" height="1280"/> in project.xml (720:1280 is a 16:9 ratio)

Then, in my code, I define fonts, ui graphics… sizes according to this resolution and place elements relative to Lib.current.stage.stageWidth and Lib.current.stage.stageHeight

I though openfl would directly deal with different devices screen resolutions on mobile platforms and scale accordingly keeping a 1:1 ratio
For example on a 600x1024 screen device (wich is also a 16:9 ratio), I thought calling Lib.current.stage.stageWidth and Lib.current.stage.stageHeight would return 720 and 1280 and that everything would be drawn according to this metrics and then scale down to 600x1024 before rendering on the screen
On a 1200x1600 (4:3 format) device, I thought it would be drawn considering the 720x960 (or 960x1280) 4:3 ratio resolution (so Lib.current.stage.stageWidth and Lib.current.stage.stageHeight should return 720 and 960 or 960 and 1280) and then scale up to 1200x1600 to render on the screen

But that doesn’t seems to be the case…
So is there any utility of defining window width and height on android if that is the device full screen resolution that would be taken into account anyway in Lib.current.stage…

And how should I make an app that can adapt to the multiple possible screen resolution on mobile platforms?

#2

  • Try using Lib.window.config.width and Lib.window.config.height to get the original width/height.

  • If OpenFL doesn’t scale automatically (I thought it did, but that might have been an old version), you can use this.

  • If you want to avoid letterboxing, you’ll have to code it by hand or use a layout library.

#3

Lib.window do not seems to exist

And no, Openfl doesn’t seems to scale automatically

For example If I have a project.xml file with:

<?xml version="1.0" encoding="utf-8"?>
<project>

	<!--architecture name="x86" if="android" /-->
	
	<meta title="OpenflTest" package="com.sample.openfltest" version="1.0.0" company="Company Name" />
	<app main="Main" path="Export" file="OpenflTest" />
	
	<window width="600" height="1024"/>
	<window orientation="portrait" vsync="true" antialiasing="4" if="cpp" />
	
	<source path="Source" />
	
	<haxelib name="openfl" />
	
	<assets path="Assets" rename="assets" />
	
</project>

And this app code:

class Main extends Sprite {
	
	public function new () {
		
		super ();
		
		graphics.beginFill(0xFF0000);
           graphics.drawRect(0, 0, 600, 1024);
     }
}

Running it on a 720x1280 phone would result in a red rectangle with a 120px width white border at the right of the screen and a 256px height white border at the bottom (rather than a full screen red rectangle as we might expect…)

#4

Oops! I meant Lib.application.window.

#5

OK :wink:
Well that returns the same values as Lib.current.stage.stageWidth and Lib.current.stage.stageHeight (so 720x1280 on a 720x1280 screen resolution phone, even if windows width and height are set to 600x1024 in project.xml, for example)

#6

@singmajesty Isn’t WindowConfig meant to report the compile-time values, not the runtime ones?

If not, that’s fine, but people still need some way to get the compile-time values. Something like, say… this pull request.

(Nudge nudge.)

#7

I think window.config.width would be different here than window.width, but I thought that current releases kept the stageWidth and stageHeight constant and letterboxed on mobile

#8

Well that is what should make sense (exept if you define <window width="0" height="0"/> in your project.xml file, in which case it should take the native device screen resolution). Because currently there is no simple way to automatically rescale your app to fit the device full screen resolution (you have to deal with Event.RESIZE event on each of your app states if you want to do it…)

#9

Works perfectly. Thanks.

It doesn’t. There might be some default parameter that need to be changed for that or it is a bug? Could you check on your side with the latest release? It would be great to be able to keep stageWidth and stageHeight constant and letterboxed on mobile rather than having to do it by hand with an onResize function each time…
On the announcement of openfl 4 on the blog: http://www.openfl.org/blog/2016/07/11/openfl-4-is-live/ automatic upscale and letterbox was announced but it doesn’t seems to work… (at least on android. Couldn’t test on other mobile platforms)

#10

I believe it depends on whether <window resizable="true" /> or false. Would you mind trying that out to see if it makes a difference for you? Thank you :slight_smile:

1 Like
#11

Yes. looks like setting <window resizable="false" /> makes openfl to scale automatically. Thanks.

1 Like