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.
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.
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.
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."
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:
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!
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.
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:
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?
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.
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...
Comments
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.)
Guess it's time to learn about integrating Javascript with Twine...
Also you ought use this CSS for Sugarcane:
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.
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!
If you fixed the above script you would still see the following errors within the web-browser Developer Console (Chrome and Firefox)
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.
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:
Makes sense; I wondered if this had changed. I should have thought to check the console. Thanks!
Works beautifully. Thanks!
<!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>
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:
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?
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?
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.
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...