Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

WebGL fullscreen from within the unity app

Discussion in 'Web' started by DoucettejIBM, Apr 13, 2015.

  1. DoucettejIBM

    DoucettejIBM

    Joined:
    Oct 25, 2013
    Posts:
    8
    Hello, I am having some issues when trying to create a toggle within unity to go fullscreen, Screen.fullscreen=true; This does not work correctly as it requires a extra click after toggling fullscreen for it to actually initialise. I know some people have made externall calls to trigger the default fullscreen toggle html button o something. I've been trying to find info on how to do this external call to trigger the fullscreen but I am not finding much.

    If anyone has any info on how to accomplish this please let us know.

    Thank you,
    Jason
     
  2. DoucettejIBM

    DoucettejIBM

    Joined:
    Oct 25, 2013
    Posts:
    8
    Trying Application.ExternalCall("SetFullscreen",1);
     
  3. liortal

    liortal

    Joined:
    Oct 17, 2012
    Posts:
    3,562
    We have actually faced this issue when porting our game to WebGL.

    What we did was have the button click react on press (not on release).
    When clicking it, we called Screen.fullScreen = true;

    @De-Panther can share more info in case you need it
     
  4. DoucettejIBM

    DoucettejIBM

    Joined:
    Oct 25, 2013
    Posts:
    8
    Awesome, I have msged that name for more info :) We are using a toggle switch currently so maybe not as straightforward.
    thanks again
     
  5. De-Panther

    De-Panther

    Joined:
    Dec 27, 2009
    Posts:
    589
    Well, as @liortal wrote, we set "Screen.fullScreen = true;" before the user doing KeyUp.

    There's a browser limitation - a user must be the one to initiate the fullscreen, so you can enter fullscreen mode only *when* a user click on the page.
    The problem is, Unity is using game loop, and it seems that the KeyUp is called after the user actually did the KeyUp, or at least this is what the browser thinks.

    So we check if the user did KeyDown on the FullScreen Button, and call "Screen.fullScreen = true;", so when the user do KeyUp, the FullScreen mode really happen.

    The down side - if the user did the KeyUp outside of the area of the button, it also will enter fullscreen mode. but we didn't check if we can cancel the fullscreen before that - it was a quick fix.
     
  6. DoucettejIBM

    DoucettejIBM

    Joined:
    Oct 25, 2013
    Posts:
    8
    Awesome thanks for the info we'll try that :)

    Jason
     
  7. Prii

    Prii

    Joined:
    Apr 17, 2015
    Posts:
    20
    How do you change the default UI button to KeyDown? Is this even possible?
     
  8. De-Panther

    De-Panther

    Joined:
    Dec 27, 2009
    Posts:
    589
  9. Prii

    Prii

    Joined:
    Apr 17, 2015
    Posts:
    20
    I decided to lose the fullscreen button and add the feature to resize canvas to the size of browser window. If anyone is interested in this in future:

    1) Add next lines of code to index.html

    OnLoaded();

    function OnLoaded(){
    reportSize();
    document.getElementById('canvas').style.width = myWidth + 'px';
    document.getElementById('canvas').style.height = myHeight + 'px';

    window.onresize = function(){
    reportSize();
    document.getElementById('canvas').style.width = myWidth + 'px';
    document.getElementById('canvas').style.height = myHeight + 'px';
    }
    }

    function reportSize() {
    myWidth = 0; myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
    } else {
    if( document.documentElement &&
    ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
    } else {
    if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
    }
    }
    }
    }

    2) Add this line of code to any Start() funcion in editor

    Application.ExternalCall("OnLoaded");



    Issue I can't fix (or I would also include fullscreen button):
    If you toggle out of fullscreen, canvas size doesn't update to browser size. I tried to add ExternalCall to fullscreen toggle but it didn't work.
    Im out of time with this project and I don't have time to find a solution.
     
  10. De-Panther

    De-Panther

    Joined:
    Dec 27, 2009
    Posts:
    589
    The issue sounds like a bug that is already fixed(or should have been fixed) in latests versions of Unity.
    Which Unity version do you use?
     
  11. Prii

    Prii

    Joined:
    Apr 17, 2015
    Posts:
    20
    5.0.0f4

    Patches' builds doesn't work for some reason..