Jump to content

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


Recommended Posts


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;



        return button;

// in game.ts

public toggleFullScreen(){

Any thoughts?

Link to comment
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?

Link to comment
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'?>
    <platform name="android"> ... </platform>
    <platform name="ios"> ... </platform>
    <!-- added manually -->
    <preference name="Orientation" value="landscape" />
    <preference name="Fullscreen" value="true" />

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.

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...