Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Fullscreen

Anyone got a way to get it to run fullscreen - without the distracting gubbins from the browser at the top of the page?

Comments

  • Use your browser's built-in fullscreen capability (if any). On Firefox and Chrome, that's F11 (I don't know about Safari/IE).

    If you mean you want to write a game that tries to force itself into fullscreen, you could try using the Javascript Fullscreen API ( http://davidwalsh.name/fullscreen ). But there are no guarantees that the browser will comply (and it's probably best to leave it up to the user in most cases.)
  • I'm exploring using TWINE to write interactive presentations, ala powerpoint, but with TWINEs navigation features and scripting.  Be nice if the browser stuff could be hidden automatically....being able to launch directly from the web without the need to download or install a viewer has some big plusses.

    Guess it's time to learn about integrating Javascript with Twine...
  • Here's a script I hastily hammered out that should fulfill this functionality.
    window.fullscreen = function(enter) {
    var d = document,
    i = -1, a;
    if (typeof enter != "boolean" && !enter) {
    enter = !(d.fullscreenElement || d.mozFullScreenElement || d.webkitFullscreenElement || d.msFullscreenElement);
    }
    console.log(enter);
    a = enter ? ["requestFullscreen","mozRequestFullScreen","webkitRequestFullscreen","msRequestFullscreen"]
    : ["exitFullscreen","mozCancelFullScreen","webkitExitFullscreen","msExitFullscreen"];
    enter && (d = d.documentElement);
    while(i++ < 3) {
    if (d[a[i]]) {
    d[a[i]]();
    break;
    }
    }
    }
    This installs a function, fullscreen(). Use it like so: <<set fullscreen(true)>> to turn fullscreen on, and <<set fullscreen(false)>> to turn it off. Doing just <<set fullscreen()>> will toggle it, I hope.

    Also you ought use this CSS for Sugarcane:

    :-webkit-full-screen { background-color: #000; }
    :-moz-full-screen { background-color: #000; }
    :-ms-fullscreen { background-color: #000; }
    :fullscreen { background-color: #000; }
  • Thanks, works a treat.
  • Just remember that this will leave the users browser in full screen mode when they have finished with your story/game and they may not know how to get out of this mode them self, which they may not be happy about.
  • Some comments I just posted on Twitter:

    I'm not too sure about the UI of this function, though. Generally I've been avoiding adding modal functions to Twine, as a rule. If you see http://twinery.org/wiki/function , you'll notice all but alert() are used to retrieve or transform data, and are usable in both <<set>> and <<if>>. So, I've cultivated a model within Twine whereby functions passively provide data, and only macros transform the game's or browser's state.

    What this means is, were I to introduce this function into Twine proper, I'd probably make <<setfullscreen>> or <<togglefullscreen>> macros, and fullscreen() would probably become a function that tells whether fullscreen is currently on or not.
  • Fair enough - I can adapt.
  • I know this thread's a bit old, but I wasn't able to find anything more recent on this topic (forgive me if I missed something).

    I'm interested in this kind of fullscreen functionality, and am using Twine 1.4.2 with Sugarcube 2, but the above code isn't working for me. I get "Error: <<set>>: bad evaluation: fullscreen is not defined."

    Any help would be much appreciated. Thanks!
  • edited February 2016
    Okay, I caught the
    &amp;&amp;
    
    needing to be changed to
    &&
    
    and am not getting the errors anymore, but no fullscreen, either.
  • edited February 2016
    The simple answer is that you can no longer force a web-browser into full screen mode without some interaction/gesture from the user, this is done for security reasons.

    If you fixed the above script you would still see the following errors within the web-browser Developer Console (Chrome and Firefox)
    Chrome: Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user .

    Firefox: Request for full-screen was denied because Element.mozRequestFullScreen() was not called from inside a short running user-generated event handler.

    The following stackoverflow post explains an external way to possibly get around the issue but it requires you to access your Twine Story HTML file via a iframe element within a second HTML file.

    note:
    The original post by L may not be clear about this but that script needed to be placed within a script tagged passage, otherwise you would get the error you saw.
    You can create a script tagged passage by using the Story > New > Script menu items.
  • Most browsers gate this functionality behind user action. IOW, the user must perform some action (click, touch, etc) for the API to work. Otherwise, it either silently fails or fails with only a console error.

    If you're calling the function upon startup, or something to that effect, then that's why it isn't working.

    As a test, put the following in your starting passage or StoryMenu, someplace where you can click on it:
    <<click "Toggle Fullscreen">><<script>>fullscreen()<</script>><</click>>
    
  • greyelf wrote: »
    The simple answer is that you can no longer force a web-browser into full screen mode without some interaction/gesture from the user, this is done for security reasons.

    Makes sense; I wondered if this had changed. I should have thought to check the console. Thanks!

    As a test, put the following in your starting passage or StoryMenu, someplace where you can click on it:
    <<click "Toggle Fullscreen">><<script>>fullscreen()<</script>><</click>>
    

    Works beautifully. Thanks!

  • Here's how to make your Story fullscreen, you just need NotePad, so you can save it as a HTML file. Make sure the HTML file is saved in same folder as your Story.

    <!DOCTYPE html>
    <html>
    <body>

    <p>To play the Story, click the button below.</p>

    <button onclick="myFunction()">Story</button>

    <script>
    function myFunction() {
    window.open("Your_Story_Name_Here.html", "_blank", "fullscreen=yes, titlebar=no, menubar=no, toolbar=no, scrollbars=yes, resizable=no, top=0, left=0, width=768, height=1024");
    }
    </script>

    </body>
    </html>
  • Thanks for another solution, HoopaLoopa!

    So I'm in SugarCube trying to create a button that will toggle fullscreen then immediately advance to a certain passage (essentially trying to create a "go fullscreen and start story" button). I'm using the "fullscreen" script from above and the following code:
    <<click "Begin">><<script>>
    $.when( fullscreen() ).done( state.display("MyPassage", this) );
    <</script>><</click>>
    

    This seems to work, but unfortunately when MyPassage is displayed (in fullscreen mode, as intended), the body background-image (set in css) is mysteriously missing unless I force a page refresh... any thoughts?
  • edited March 2016
    Here you can see the problem in action. Click the "begin" link and the story will advance and go fullscreen, but the body background-image is mysteriously invisible: http://jordanmagnuson.s3.amazonaws.com/mslojka/ms_lojka_fullscreen_background_problem.html

    Inspection of the html indicates that the background-image should be there: http://i.imgur.com/4WNKWet.png

    Exiting fullscreen mode renders the background-image visible as expected.

    Any ideas for what's going wrong here?
  • I tried testing the linked page using each web-browser's (Firefox, Chrome, IE) built-in full-screen short-cut key (F11) and that works correctly. I could not do this for Edge because it currently does not have one *sign*

    So I believe the issue is either in the implementation of the fullscreen function or in the web-browser functions it is using. I tried using the web-browser Develop Tools to hide all the fore-ground elements but the background image still was not visible.
  • edited March 2016
    Thanks for taking a look, greyelf--appreciate it!

    It's strange that the fullscreen function works fine by itself, but in connection with state.display() the body background-image fails for some reason. I'm now using a div immediately below body to handle the background-image, and that works fine... so it seems to be something about document.body specifically (in connection with the fullscreen function and state.display()) that's causing this issue...

Sign In or Register to comment.