Nodragem

Make a BABYLON.GUI button to go fullscreen does not seem to work on mobile?

Recommended Posts

Hello,

I know that fullscreen can only be enabled on user request. I made a BABYLON.GUI button that calls engine.switchFullscreen(false) and it works only on desktop 😕 does not seem to work on mobile device...

Here the code I use:

// in Controller.ts

options.onPointerDown = (eventData:BGUI.Vector2WithInfo, eventState:BABYLON.EventState) => {game.toggleFullScreen();}
options.text = "FullScreen";
GUIHelper.addSimpleButton(parent, 'menu', options);

// in GUIHelper.ts

export function addSimpleButton(parent:BGUI.Container|BGUI.AdvancedDynamicTexture, name:string, options:buttonOptions):BGUI.Button{
        let button = BGUI.Button.CreateSimpleButton(name, options.text?options.text:"Button");
        button.width = options.width?options.width:0.5;
        button.height = options.height?options.height:'40px';
        button.top = options.top?options.top:0;
        button.left = options.left?options.left:0;
        button.color = options.color?options.color:"white";
        button.fontSize = options.fontSize?options.fontSize:"5%";
        button.background = options.background?options.background:"#33ff55";
        button.verticalAlignment = options.vAlignment?options.vAlignment:BGUI.Control.VERTICAL_ALIGNMENT_TOP;
        button.horizontalAlignment = options.hAlignment?options.hAlignment:BGUI.Control.HORIZONTAL_ALIGNMENT_LEFT;

        if(options.onPointerDown)
            button.onPointerDownObservable.add(options.onPointerDown);

        parent.addControl(button);

        return button;
        
    }

// in game.ts

public toggleFullScreen(){
        this._engine.switchFullscreen(false);
    }

Any thoughts?

Share this post


Link to post
Share on other sites

I believe that this only works "html buttons", not clicks in a canvas, which what the GUI is.  I wanted to do that too, but do not think it is going to work.

If you say this works on desktop, it might be browser dependent.  Are you trying this on iOS?

Share this post


Link to post
Share on other sites

I am not a very experienced web developer to be honest 😕 I am more a gamedev, so... I am not quite sure how to make a html button. I will try to find out how.

As far as I can tell, a BABYLON.GUI button does not work to enable fullscreen on iOS Safari, Chrome; Android Chrome; and Amazon Fire 7 (of which I forgot the name of the browser).

Also, iOS Safari goes fullscreen when you load the page in portrait and then rotate the device; so that's good enough.

@Deltakosh can you refer me to more information about fullscreen not being supported in iOS? That's quite problematic 😕 would I suffer the same if I pack my game into an app with something like Cordova?

Share this post


Link to post
Share on other sites

I can answer the Cordova part.  Fullscreen should work if you add preferences in the config.xml file, like:

<?xml version='1.0' encoding='utf-8'?>
<widget
    ...
    <platform name="android"> ... </platform>
    <platform name="ios"> ... </platform>
    ...
    <!-- added manually -->
    <preference name="Orientation" value="landscape" />
    <preference name="Fullscreen" value="true" />
</widget>

You can of course choose give some space to elements other than a canvas.  On Android, I seem to remember first time user gets a choice.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.