How goto fullscreen HTML5 target


#21

This implemented for desktop, but not HTML5, happy to work with someone to support it


#22

Here is a solution. Not the beautiest, but its work:

    private function buttonClicked(event:MouseEvent):Void {
            this.toggleFullscreen();
        }

        private function toggleFullscreen() {

            var isInFullScreen = untyped __js__("(document.fullscreenElement && document.fullscreenElement !== null) ||
            (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
            (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
            (document.msFullscreenElement && document.msFullscreenElement !== null);");
            if (isInFullScreen) {
                if (untyped __js__("document.exitFullscreen")) {
                    untyped __js__("document.exitFullscreen()");
                } else if (untyped __js__("document.webkitExitFullscreen")) {
                    untyped __js__("document.webkitExitFullscreen();");
                } else if (untyped __js__("document.mozCancelFullScreen")) {
                    untyped __js__("document.mozCancelFullScreen();");
                } else if (untyped __js__("document.msExitFullscreen")) {
                    untyped __js__("document.msExitFullscreen();");
                }
            }
            else {

                if (untyped __js__('document.getElementById("openfl-content").requestFullscreen')) {
                    untyped __js__('document.getElementById("openfl-content").requestFullscreen()');
                } else if (untyped __js__('document.getElementById("openfl-content").mozRequestFullScreen')) {
                    untyped __js__('document.getElementById("openfl-content").mozRequestFullScreen()');
                } else if (untyped __js__('document.getElementById("openfl-content").webkitRequestFullscreen')) {
                    untyped __js__('document.getElementById("openfl-content").webkitRequestFullscreen()');
                } else if (untyped __js__('document.getElementById("openfl-content").msRequestFullscreen')) {
                    untyped __js__('document.getElementById("openfl-content").msRequestFullscreen()');
                }
            }
        }

#23

This should be supported using stage.displayState since Lime 5.1.0, but let me know if it does not work properly or could improve :slight_smile:


#24

Hello!

I’m reviving this thread because I ran into a problem with Fullscreen support on HTML5 as well, for a game powered by OpenFL + Starling. I’m using OpenFL 7.1.2, Lime 6.2.0 and Starling 2.3.1.

The game has normally a fixed size of 760px x 650px inside the HTML page.

I do Starling.current.nativeStage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE in response to a MouseEvent.MOUSE_UP OpenFL event (because a Starling Event.TOUCH wouldn’t be recognized by the browser as user input so the fullscreen request would be denied with an error in the console saying “Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.”).

And I don’t get any errors this way and the browser does go to full screen (I get a temporary pop-up at the top saying " is now full screen. Exit Full Screen (Esc)". However, my Event.RESIZE handler set on the nativeStage is not getting called, so the game doesn’t actually resize. It either remains the same 760x650px, but centered on screen instead of the original top-left corner (in Chrome), or does get expanded to fit the screen height (in Firefox), but this is not a Stage expansion (neigher nativeStage, nor Starling Stage), and the aspect ratio doesn’t change. As I said, no Event.RESIZE is ever called inside my code.

Strangely I do get a FullScreenEvent.FULL_SCREEN event dispatched, and I can read a displayState of StageDisplayState.FULL_SCREEN_INTERACTIVE from withing that handler, but it happens only once, on the first attempt to go to full screen. Subsequent attempts don’t trigger this event anymore (unless I refresh the page and try again), and still no Event.RESIZE, not even on that first attempt.

I’m using
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

What am I missing? I tried StageDisplayState.FULL_SCREEN instead of StageDisplayState.FULL_SCREEN_INTERACTIVE, I’ve tried resizable=“true” / “false” and fullscreen=“true”/“false” in project.xml, I’ve tried to fiddle manually with the generated index.html, but to no avail. I can cause minor differences in the way it expands the content or not, but I can’t make it do perform a true fullscreen that it recognized by OpenFL code as such and resizes my Stage.

In a Flash build it works like a charm, the problem is on HTML5 target only.

Has anyone else hit this problem? Can we do anything about it?
Thanks!


#25

I had a similar issue with stage.fullScreenSourceRect, and ended up with a specific workaround for OpenFL :

Regarding your issue about the stage staying centered in Chrome, I fixed it by patching the style properties in the generated index.html :
html,body { margin: 0; padding: 0; height: 650px; }


#26

Thanks for the answer @tour1st, but unfortunately I don’t quite see how to use it for my case. In that workaround you have some hard-coded numbers (800, 400, 600 etc.), but I have no idea what size my app will have once going to fullscreen. Also, I don’t need fullScreenSourceRect, but just a regular fullscreen of the whole app, which implies Stage resizing. Does your workaround lead to an Event.RESIZE dispatch inside the app?

I did try patching the html,body {} style, but that doesn’t make the content to resize, no matter if I set a fixed px or 100% for height.

I’m still clueless…


#27

Afterall I found a partial solution, although it still doesn’t do real Stage resizing inside the app, so still no Event.RESIZE.

All I had to do was (in project.xml):

<window width="760" height="650" resizable="true" />

and then change a bit index.html to look like this

html,body { margin: 0; padding: 0; width: 760px; height: 650px; overflow: hidden; }
#openfl-content { background: #000000; width: 100%; height: 100%; }

while leaving

lime.embed ("AppName", "openfl-content", 760, 650, { parameters: ...

Somehow I missed this exact combination until now…

This keeps the game inside a 760x650px area in regular mode, while covering the full height of the screen in fullscreen mode, centered, with some black letterbox vertical margins on the sides, and works in both Chrome and Firefox. I would have preferred a real Stage resizing that would change the aspect ratio of the game window, fill the whole screen with no vertical margins and react to Event.RESIZE to adapt the layout internally, but this is fine as well.

PS: Strangely, FullScreenEvent.FULL_SCREEN still comes only once, the first time I go to full screen per running session, and then never again on subsequent toggles.
PS2: Starling.current.stage.window.width / height reports 760x650 in both regular and fullscreen modes.


#28

OpenFL is currently designed so that when you set a window width and height, we will preserve that size, regardless of resizing. So going fullscreen, we’ll still report the same stage width/height, while internally handling letterboxing and scaling. There probably is an issue here with this behavior and Starling, which is not aware of how OpenFL applies this behavior to it’s own display list. If you do an embed with a width/height of 0, OpenFL should look at the parent DIV for the size, and will dispatch Event.RESIZE events accordingly. If we aren’t dispatching more fullscreen events, perhaps we are not properly detecting when the browser is exiting fullscreen, maybe there is a different event we need to listen to.