HTML5 button to switch to fullscreen

D

Dennis van Duin

Guest
Hi people,

Is it possible to make an button to switch between normal screen and HTML5 fullscreen. Like I did it with this code in PhP:

<!DOCTYPE html>

<html>

<body>


<input class="button" type="button" value="Fullscreen" onclick="toggleFullScreen()" style="position: absolute; bottom: 0; right: 0; float: right; clear:right;">


<script>


function toggleFullScreen() {

if ((document.fullScreenElement && document.fullScreenElement !== null) ||

(!document.mozFullScreen && !document.webkitIsFullScreen)) {

if (document.documentElement.requestFullScreen) {

document.documentElement.requestFullScreen();

} else if (document.documentElement.mozRequestFullScreen) {

document.documentElement.mozRequestFullScreen();

} else if (document.documentElement.webkitRequestFullScreen) {

document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

}

} else {

if (document.cancelFullScreen) {

document.cancelFullScreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

}

}

}

</script>


</body>

</html>

But I want to make an button inside my game... So i dont need to make an button with html...
Can someone help me?

Greets,
Dennis
 
R

rbfraphael

Guest
Hey friend! Can you share your solution, please? :) I'm searching for something like this (full screen button on html5) but I'm not finding something useful :(

Thx :D
 

Mike

nobody important
GMC Elder
use "clickables"

Code:
clickable_add(x, y, tpe, url, target, params);
And note...

It is also worth noting that if the URL argument you pass in is the name of a script (ie: it doesn't start with "http://") AND the script is called gmcallback_* then you can get direct feeds into an html5 event. GameMaker: Studio function names are not obfuscated if they begin with gmcallback_.
 
R

rbfraphael

Guest
use "clickables"

Code:
clickable_add(x, y, tpe, url, target, params);
And note...

It is also worth noting that if the URL argument you pass in is the name of a script (ie: it doesn't start with "http://") AND the script is called gmcallback_* then you can get direct feeds into an html5 event. GameMaker: Studio function names are not obfuscated if they begin with gmcallback_.
I've tested this method. First, I create (with extension) a JS file with a function called toggleFullscreen() and, in GameMaker, I create a script that calls this function (called scr_fullscreen) and, finally, I create a clickable with this code:

Code:
clickable_add(window_get_x() + 32, window_get_y() + 32, sprite_get_tpe(sprButton), "scr_fullscreen", "_self", "");
But, when I run the game, the clickable button doesn't stay inner game canvas and don't work :\

toggleFullscreen() :
Code:
function toggleFullScreen() {
    if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {
            document.documentElement.requestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }
}
scr_fullscreen:
Code:
toggleFullscreen();
 

Mike

nobody important
GMC Elder
A clickable button is not "in" the canvas, it's an HTML button to let the browser do the proper user interaction. You can only go fullscreen on a user "click" (in a JavaScript event callback).
 
I know this is an old thread, but for anyone stumbling across this in the future, it *is* possible to create a "toggle fullscreen" button from within GameMaker that will toggle HTML5 fullscreen (removing browser navigation bar, etc.) The code above is mostly correct, but importantly the script needs to be prefixed with "gmcallback_" so that it is not obfuscated during compile, and is accessible to the clickable.

So in summary:

1. Create an extension, and ad a js file with the relevant fullscreen browser API code:

Code:
function ToggleFullScreen() {
    if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {
            document.documentElement.requestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }
}
Then make sure you expose this function in the GameMaker IDE:
2. Create a script prefixed with "gmcallback_", e.g. "gmcallback_fullscreen" that calls the javascript function:
Code:
ToggleFullScreen();
3. Add a clickable to the screen, which calls the script (this is necessary because browser APIs will only allow toggling of HTML5 fullscreen in direct response to a user click):
Code:
fullscreen_button = clickable_add(x, y, sprite_get_tpe(sStartButton, 0), "gmcallback_fullscreen", "_self", "");
As a final note, the GMS2 documentation suggests that window_set_fullscreen() can be used successfully to set HTML5 fullscreen if called from within a clickable_add() callback, but this appears to be false at this time (May 2020).
 
Last edited:
S

solarcrispz

Guest
I know this is an old thread, but for anyone stumbling across this in the future, it *is* possible to create a "toggle fullscreen" button from within GameMaker that will toggle HTML5 fullscreen (removing browser navigation bar, etc.) The code above is mostly correct, but importantly the script needs to be prefixed with "gmcallback_" so that it is not obfuscated during compile, and is accessible to the clickable.

So in summary:

1. Create an extension, and ad a js file with the relevant fullscreen browser API code:

Code:
function ToggleFullScreen() {
    if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {
            document.documentElement.requestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }
}
Then make sure you expose this function in the GameMaker IDE:
2. Create a script prefixed with "gmcallback_", e.g. "gmcallback_fullscreen" that calls the javascript function:
Code:
ToggleFullScreen();
3. Add a clickable to the screen, which calls the script (this is necessary because browser APIs will only allow toggling of HTML5 fullscreen in direct response to a user click):
Code:
fullscreen_button = clickable_add(x, y, sprite_get_tpe(sStartButton, 0), "gmcallback_fullscreen", "_self", "width=700, height=500, menubar=0, toolbar=0, scrollbars=0");
As a final note, the GMS2 documentation suggests that window_set_fullscreen() can be used successfully to set HTML5 fullscreen if called from within a clickable_add() callback, but this appears to be false.

You're a king!
 
J

jaber

Guest
I know this is an old thread, but for anyone stumbling across this in the future, it *is* possible to create a "toggle fullscreen" button from within GameMaker that will toggle HTML5 fullscreen (removing browser navigation bar, etc.) The code above is mostly correct, but importantly the script needs to be prefixed with "gmcallback_" so that it is not obfuscated during compile, and is accessible to the clickable.

So in summary:

1. Create an extension, and ad a js file with the relevant fullscreen browser API code:

Code:
function ToggleFullScreen() {
    if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {
            document.documentElement.requestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }
}
Then make sure you expose this function in the GameMaker IDE:
2. Create a script prefixed with "gmcallback_", e.g. "gmcallback_fullscreen" that calls the javascript function:
Code:
ToggleFullScreen();
3. Add a clickable to the screen, which calls the script (this is necessary because browser APIs will only allow toggling of HTML5 fullscreen in direct response to a user click):
Code:
fullscreen_button = clickable_add(x, y, sprite_get_tpe(sStartButton, 0), "gmcallback_fullscreen", "_self", "");
As a final note, the GMS2 documentation suggests that window_set_fullscreen() can be used successfully to set HTML5 fullscreen if called from within a clickable_add() callback, but this appears to be false at this time (May 2020).
works like a charm... thnx
 

biyectivo

Member
Hi, in case anyone has a need for this, I've just basically copy/pasted the instructions above and made it available on itch.io as a pre-packaged extension here, along with a demo project. Provided as is.
 
Top