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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.