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 :)

StatusReleased
PlatformsWindows, HTML5
Rating
Rated 5.0 out of 5 stars
(1 total ratings)
Authormanta ray
Made withGameMaker
Tagsextension, GameMaker, html5

Download

Download
HTML5 Fullscreen Extension 2023.10.yymps 12 kB
Download
HTML5 Full Screen Extension 2023.10 Demo Project.yyz 94 kB
Download
HTML Full Screen Extension demo LTS.yyz 94 kB

Install instructions

  1. Download the extension.
  2. Unzip and add to your project.
  3. Build in HTML5 and enjoy.

Development log

Comments

Log in with itch.io to leave a comment.

thank you very much!

(+1)

Glad it worked!

I'm actually getting an error when trying to install the local package. Tried opening your demo and it gives "failed to load project". Tried updating to 2022.9 and didn't work. Any advice?

(1 edit)

Hi, regarding the library import, can you please post the exact error? What do you mean by "installing" the local package? You should import it into your project by using Tools > Import Local Package instead.

Regarding the demo project, I actually saved it in 2023.8 by mistake, so that's why you couldn't open it (you seem to be using a 2022 Gamemaker version). I uploaded the LTS version of the YYZ demo project. Hope it helps!

Ah just saw this. Yeah the version mismatch was the issue. All good now regardless :D

Didn't go far enough. Updating all the way to current version (scary but whatever) did the trick. Implemented without a hitch. Thanks very much!

Thanks, this works great!

Oh man! Just saw this. Super good. I'll have to try it out soon! Thank you :)

hope it works fine for you, let me know :)