Hi
I have read several posts regarding FullScreen in OpenFL but none of them work for me.
I have a FullScreen toggle button to toggle it with FullScreen and Normal mode.
To toggle to FullScreen mode
stage.displayState = StageDisplayState.FULL_SCREEN;
To toggle to Normal mode
stage.displayState = StageDisplayState.NORMAL;
It’s not working. Please note that my target is HTML 5.
I AM STRUGGLING WITH THIS ISSUE FOR WEEKS NOW… PLS HELP
What do you mean by not working - completely nothing happens when you set that displayState? I’ve recently tested it in my project and it seems to work upscaling everything to the screen’s resolution.
I’ve added these lines to my sample, empty Main:
this.addEventListener(MouseEvent.CLICK, function(_){
this.stage.displayState = StageDisplayState.FULL_SCREEN;
});
my project.xml looks like that (at this moment, I’m testing something else but you may find something interesting in here):
<window width="910" height="300" fps="60" hardware="true" allow-shaders="true" require-shaders="true" resizable="false"/>
and it properly turned fullscreen, moved everything to top-left corner.
Very strange. How come it’s working for you ?
Does the content also scales up to full screen ?
In my case only the content does not scale to full screen and the rest of the space is filled with white when toggled to full screen
So you’ve now disclosed something really important - you get the fullscreen but content is not scaled up. So for the content to scale up I’d add some additional code. I personally use this like this. It works but there may be other approaches. Test it out for yourself (I’ve written it in here, without testing). I’m pretty sure .SHOW_ALL does the trick here. Try it out.
this.stage.addEventListener(FullScreenEvent.FULL_SCREEN, function(e:FullScreenEvent){
if (e.fullScreen) {
try{
stage.scaleMode = StageScaleMode.SHOW_ALL;
stage.align = StageAlign.TOP_LEFT;
} catch (e:SecurityError) {
// ... sometimes this happens, I do nothing in here, just catching it
}
} else {
// ... back to .NO_SCALE here
}
});
Fullscreen needs user interaction to work on html5. So put your function in a click.
True.
Fullscreen needs user interaction, (mouse/key) for all content that are shown in a browser.
Nothing of the above works…
I have all done it …
stage.scaleMode = StageScaleMode.SHOW_ALL;
stage.align = StageAlign.TOP_LEFT;
Also I have toggled the fullscreen on click of a button
BUT NOTHING WORKS … TARGET IS HTML 5
ANY HELP PLS …
@outline : Have you added any other code somewhere else other than the above ?
This works for me :
Lib.current.stage.scaleMode = StageScaleMode.SHOW_ALL;
Lib.current.stage.displayState = StageDisplayState.FULL_SCREEN;
Make sure that your code is called from an event triggered by a user interaction (e.g. click).
What is Lib …? Is it part of some Library ?
Can u pls tell the import statement… its giving error for me
import openfl.Lib;
I’ll check for you and create a small sample Main to show how I did that. Give me a second.
OK, so this is everything I’ve done (I’m using develop branch from Github for both OpenFL and Lime so you may try out that too):
package;
import openfl.utils.Assets;
import openfl.display.Bitmap;
import openfl.display.StageDisplayState;
import openfl.events.MouseEvent;
import openfl.display.Sprite;
class Main extends Sprite {
public function new() {
super();
var bitmap:Bitmap = new Bitmap(Assets.getBitmapData('assets/image.png'));
this.addChild(bitmap);
this.addEventListener(MouseEvent.CLICK, function(_) {
stage.displayState = StageDisplayState.FULL_SCREEN;
});
}
}
Here’s that image:
Here’s whole project.xml (I’ve created a sample app ‘TextAlignment’ so this is why you can see those in here):
<?xml version="1.0" encoding="utf-8"?>
<project>
<meta title="Text Alignment" package="org.openfl.samples.textalignment" version="1.0.0" company="OpenFL" />
<app main="Main" path="Export" file="TextAlignment" />
<source path="Source" />
<haxelib name="openfl" />
<window width="910" height="300" fps="60" hardware="true" allow-shaders="true" require-shaders="true" resizable="true"/>
<assets path="Assets" rename="assets" />
</project>
And here’s the effect:
Normal (partial screenshots only):
Fullscreen (also partial):
Google Chrome for OSX (High Sierra), Version 70.0.3538.67 (Official Build) (64-bit).
Perhaps it’s just our letterboxing effect that’s not working fully, here. It should work to allow full-size, and to handle Event.RESIZE after changing to fullscreen (I’ve tested this before with PiratePig and it worked)
I have used your example and observed the following things.
Since you have defined ‘resizable = true’, the screen resizes itself before launch and then if you click on fullscreen it further scales up the content.
Please note that this is not the fullscreen functionality which flash actually does with StageDisplayState.FULL_SCREEN.
Firstly, it should not automatically scale up after launch and should stay at its original size.
Secondly, it should do a proper FullScreen as achieved by StageDisplayState.FULL_SCREEN in Flash.
@tour1st : Even your suggestion does not work as expected.
FYI I’m using fixed width/height for my app.
Here is the relevant section in project.xml :
<window width="800" height="600" />
Also you might want to check the generated index.html, this what is have :
...
<style>
html,body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
#openfl-content { background: #000000; width: 100%; height: 100%; }
</style>
...