HTML5 Full Screen Extension

2023.10 released

• Exposes functions to set or toggle fullscreen directly (instead of using a clickable)
• Correctly catches ESC to exit fullscreen
• Fixes clickable positions
  
• Fixes some bugs
• Nicer demo :D

Demo instructions: run it and move the character. You'll see a "Fullscreen button" on the bottom right. Click it or press F to enter full screen. While on fullscreen, click on the button again (or press F or ESC) to exit back to windowed mode.

Context

As you probably know, window_set_fullscreen() does not work on HTML5. So  after searching online, I basically copy/pasted a small Javascript code for a GMS1 extension found in this forum post (full credit to the original author),  in order to create a button that is added on top of the game canvas (I chose the bottom right corner but you can change that on the provided script), that lets you toggle full screen on or off.  Check out the demo "game" above. 

I also exposed some functions to directly set/toggle the fullscreen and added a small utility function,  to check whether the game is in full screen.

Set up

Include the extension and configure it inside scr_HTMLFullScreen:

• HTML5_FULLSCREEN_CLICKABLE_SPRITE - the sprite to set as clickable. You can leave this as -1 to not render a clickable and use the functions instead.
• HTML5_FULLSCREEN_CLICKABLE_IMAGE - the image index of the clickable sprite.
• HTML5_FULLSCREEN_CLICKABLE_SCALE - the scale to draw the clickable.
• HTML5_FULLSCREEN_CLICKABLE_ALPHA - the alpha to draw the clickable.
• HTML5_FULLSCREEN_CLICKABLE_X - the x position of the clickable origin, with respect to the anchor.
• HTML5_FULLSCREEN_CLICKABLE_Y - the y position of the clickable origin, with respect to the anchor.
• HTML5_FULLSCREEN_CLICKABLE_X_ANCHOR - the x anchor of the position
• HTML5_FULLSCREEN_CLICKABLE_Y_ANCHOR- the y anchor of the position

Functions

The extension will enable the following functions:

• html5_window_set_fullscreen(_value) - sets the fullscreen in HTML5 to true or false
• html5_window_toggle_fullscreen() - toggles the fullscreen in HTML5
• html5_window_get_fullscreen() - gets the value of the fullscreen
• html5_canvas_get_position() - returns a struct with the following fields:
  • x - the x position of the canvas
  • y - the y position of the canvas
  • width - the width of the canvas in px
  • height - the height of the canvas in px

Caveats

• The device_mouse_x_to_gui(_device) and device_mouse_y_to_gui(_device) functions do not seem to work as they are not correctly changed relative to the canvas position/whether is fullscreen

Disclaimer

Tested on GameMaker 2022.8+ (uses a  call_later  call) on current versions of Opera GX, Chrome and Edge. Firefox does not seem to work as expected. Provided as is - expect little to no support, hopefully you won't need it :)