OpenFL/Starling html5 dynamic project size

#1

Hi!
I need your help with my project once more)

Is it possible to set stage size in real time from js code?
Now I set it in project.xml
<window width="960" height="640">

And in starling:

var starling = new Starling(Game, stage, null, null, Context3DRenderMode.AUTO, "auto");
starling.stage.stageWidth = 960;
starling.stage.stageHeight = 640;

private function onResize(e:openfl.events.Event):Void
	{
		var viewPort:Rectangle = RectangleUtil.fit(new Rectangle(0, 0, 960, 640), new Rectangle(0, 0, stage.stageWidth, stage.stageHeight));
					
		try
		{
			starling.viewPort = viewPort;
		} catch (error:Error)
		{
		}
	}

If I change html canvas width or height I get white areas:

image
image824×550 61.3 KB

and no Resize events

Any ideas?)
Thx!

#2

Using the default html5 template, which fills the entire page, if the user resizes the browser window, this correctly resizes the stage, and Event.RESIZE is dispatched. So OpenFL definitely supports being resized dynamically after it has started.

Instead of resizing the Canvas, you might try resizing the <div> element that the Canvas is added to. In the default html5 template, it’s defined like this:

<div id="openfl-content"></div>

So you should be able to find it with something like document.getElementById("openfl-content") (if you’re using a custom template, it might have a different ID). Then, you can try resizing the <div> with something like div.style.width = "100px", and (hopefully) OpenFL can detect the change.

#3

Thx!

I change div height:
image

But still don’t recieve RESIZE event to redraw my game to cover black areas. I want to change stageWidth|stageHeight and update starling viewPort

#4

As I see it just keeping right proportion

#5

I ask other way.
I have universal graphics for my game wirt aspect ratio from 4:3 to 5:2. Game GUI is flexible. Game content is always centered - and black sides are appear for other aspect ratio. Example for AIR Windows version:
Video_2023-01-26_140347

So I need the same for OpenFL project. But I even can’t recieve stage RESIZE event to implement it.
Is it possible?

#6

Can your game fill the entire browser window? Or must it be a smaller region within the page?

Because the default settings for the html5 target are the fill the entire window, and the stage will automatically resize when the user resizes the window. So you should be able to use the exact same aspect ratio logic as in AIR.

However, when you set the window’s width/height in your project.xml, it forces the stage size to be a specific size with no resizing:

<window width="960" height="640"/> <!-- remove this -->

So to go back to the default behavior, just remove the part where you set the width and height.

Or, if you need to support other targets, you could do this instead:

<window width="960" height="640" unless="html5"/>
2 Likes
#7

@joshtynjala Very thanks! Handy advice!

It help me to solve some other things with graphics quality!

I wish there was a cookbook with trikcs like that with examples!

1 Like
#8

Yes, if you set width and height in project.xml you won’t receive any onResize event.

#9

I am not sure if it applies to starling.
But stageScaleMode is something related to this: