engine.switchFullscreen(true) doesn't work

[Crocsx]

Hi everyone!

 

I 'm trying to force the fullScreen and the pointerlock on my game made with BabylonJS.
 

I found the function that should do what i want.

The probleme is that she do nothing at all :/

 

here's the loader

window.onload = function(){    window.mouse = new BABYLON.Vector2();    window.fullScreen = true;    var canvas = document.getElementById("canvas");    // Check support    if (!BABYLON.Engine.isSupported()) {        window.alert('Browser not supported');    } else {        // Babylon        var engine = new BABYLON.Engine(canvas, true);        engine.switchFullscreen(window.fullScreen);        //Creating scene        scene = createSceneTuto(engine);        scene = fixCameras(scene);        scene.activeCamera.attachControl(canvas);        // Once the scene is loaded, just register a render loop to render it        engine.runRenderLoop(function () {            scene.render();        });        // Resize        window.addEventListener("resize", function () {            engine.resize();        });    }};

Can someone help me?

 

thx

[GameMonetize]

Going fullscreen can only be done on an user request:

            canvas.addEventListener("click", function() {

                engine.switchFullscreen(true);

            });

[Wingnut]

Hi crocsx, welcome to the forum, good to have you with us.

 

Sometimes, it is easy to confuse fullscreen WINDOW with fullscreen CANVAS.  Just in case you ACTUALLY wanted the canvas to completely fill the window...  please make sure that this CSS style is included in the HEAD section of your HTML document. It can also be put into a linked external CSS stylesheet, but then you delete the first and last lines:

    <style type="text/css">        html,body,#canvas {            width:100%;            height:100%;            padding:0;            margin:0;            overflow: hidden;        }    </style>

This makes the canvas fill the window.  Please ignore this... if it is not applicable.

[Crocsx]

Hi crocsx, welcome to the forum, good to have you with us.

 

Sometimes, it is easy to confuse fullscreen WINDOW with fullscreen CANVAS.  Just in case you ACTUALLY wanted the canvas to completely fill the window...  please make sure that this CSS style is included in the HEAD section of your HTML document. It can also be put into a linked external CSS stylesheet, but then you delete the first and last lines:

    <style type="text/css">        html,body,#canvas {            width:100%;            height:100%;            padding:0;            margin:0;            overflow: hidden;        }    </style>

This makes the canvas fill the window.  Please ignore this... if it is not applicable.

Thx for the Welcome

But that's wasn't the problem ^^

 

 

 

Going fullscreen can only be done on an user request:

            canvas.addEventListener("click", function() {

                engine.switchFullscreen(true);

            });

 

Didn't knew Thx for the answer

[GameMonetize]

My pleasure

[ziguri]

How can i react on a touch on a mobile? I guess I need to adapt this part:

canvas.addEventListener("click", function() {
   engine.switchFullscreen(true);
});

 

[RaananW]

canvas.addEventListener("touchend", function() {
   engine.switchFullscreen(true);
});

For example. See here - https://developer.mozilla.org/en-US/docs/Web/API/Touch_events for a list of events, OR (the better option) - use pointer events, which are integrated in BabylonJS using jQuery pep (https://github.com/jquery/PEP)

[ziguri]

Hi @RaananW

 

Thx for your advice. I tried it like this:

canvas.addEventListener("touchend click", function () {
            engine.switchFullscreen(true);
        });

Works on desktop but NOT on mobile. Any further hints?

So i think i have to use the pointer events you mentioned. Which event is the right I if wanna go to fullscreen once somebody makes a tap on a mobile device.

[RaananW]

Howdy,

What mobile OS are you trying to support? iOS has no full screen support, just in case this is the problem.

[ziguri]

Ah - yes that might be the reason.

Is there any workaround possible on iOS?

[RaananW]

yeah, get a better mobile 

Sadly the Full screenAPI is not supported on iOS (http://caniuse.com/#feat=fullscreen), so there is no way around it. keep your canvas 100% width and height, and make the user switch to landscape mode - this should at least make the address bar go away.

[ziguri]

Hehe...

Ok thx for your help!

 

[ziguri]

Hi,

On 5/26/2014 at 9:31 PM, Deltakosh said:

Going fullscreen can only be done on an user request:

            canvas.addEventListener("click", function() {

                engine.switchFullscreen(true);

            });

@Deltakosh does this still holds today?

Is there a way to load the scene in browser fullscreen (without a user interaction)?

Thx

[Dad72]

Can be with an automatic click event (with Jquery), but not sure

$( "canvas" ).trigger( "click" );

[Pryme8]

13 minutes ago, Dad72 said:

Can be with an automatic click event (with Jquery), but not sure

$( "canvas" ).trigger( "click" );

or domElement.click();

[Pryme8]

On 9/25/2017 at 2:31 AM, RaananW said:

Howdy,

What mobile OS are you trying to support? iOS has no full screen support, just in case this is the problem.

https://css-tricks.com/snippets/html/responsive-meta-tag/
https://www.sitepoint.com/use-html5-full-screen-api/

You can get fullscreen with phones its just hackish.  Use viewport meta tags and css.  If you cant figure it out send me a PM I can put together something for you.

[ziguri]

Thanks for all the hints. I will try to figure out what works best for me...

[ziguri]

BTW: Kiosk Mode of Chrome could help too.

Just call the following from the command line:

chrome.exe --kiosk YOURURL