HTML5 Possible to save file to computer in HTML5 game?

Hello,

In GM2, is it possible to save a screenshot of a game, such as using function screen_save(), to the user's computer when they are playing the game on a web browser? Specifically looking to do this on the platform Itch.io or on a website hosted by Weebly.

Thanks
-Ai
 
Last edited:
Hi Ai,

Thanks for posting your question.

Yes, it's possible using JS. The manual says that screen_save isn't available for HTML5 targets because Game Maker uses the browser's local storage for the file system, and it's too small for large images (1-5mb).

Here's something I hacked together that works on Chrome/Edge. If you put this in "prepend output.js" in the HTML5 settings it creates a button you can press underneath the game window that will take the screenshot and download it.
JavaScript:
// Create download element
var screenshotDownload = document.createElement("a");
screenshotDownload.download = "screenshot.jpeg"; // name of file

// Create the screenshot download button
var button = document.createElement("button");
button.innerText = "Take Screen Shot";

// Click callback
button.addEventListener("click", function() {
    var canvas = document.getElementById("canvas");

    // Retrieve the data
    var img = canvas.toDataURL("image/jpeg");

    screenshotDownload.href = img;
    screenshotDownload.click();
    screenshotDownload.href = "";
});

document.body.appendChild(button);
You'll also need to turn off WebGL in the HTML5 settings because Game Maker doesn't set the gl context's preserveDrawingBuffer flag to true on creation. Every time you request the image data with Canvas.toDataURL it will only return a blank image from the data getting cleared by the time the call is made. I think there's another way to do this by retrieving pixel data within webgl, but using toDataURL is probably the most straightforward.

Edit: It looks like there's a way to take a screenshot with preserveDrawingBuffer set to false in this thread https://stackoverflow.com/questions/30628064/how-to-toggle-preservedrawingbuffer-in-three-js
And I'm sure YellowAfterlife has solved in the extension @rIKmAN posted.

Hope this helps!
 
Last edited:
Also check out:
Thank you, I am trying to run the sample program in gamemaker but keep getting these compile errors:
Script: surface_save_part_dialog at line 13 : wrong number of arguments for function buffer_get_surface
Script: surface_save_dialog at line 9 : wrong number of arguments for function buffer_get_surface


I can't locate the scripts in the program, the script folder is empty. Do you know how I would fix this?
Thanks,
-Ai
 

rIKmAN

Member
Thank you, I am trying to run the sample program in gamemaker but keep getting these compile errors:
Script: surface_save_part_dialog at line 13 : wrong number of arguments for function buffer_get_surface
Script: surface_save_dialog at line 9 : wrong number of arguments for function buffer_get_surface


I can't locate the scripts in the program, the script folder is empty. Do you know how I would fix this?
Thanks,
-Ai
What version of GMS are you using and are you sure you downloaded the matching extension?

I just downloaded and ran the one for v2.3, tested Windows and HTML5 and it worked fine.
 
What version of GMS are you using and are you sure you downloaded the matching extension?

I just downloaded and ran the one for v2.3, tested Windows and HTML5 and it worked fine.
I'm using the latest version on steam, 2.3, and I tried it by opening the project file(.gmz)as well as importing the extension(.gmez) and the notes and test object in a current project. Both ways I get those same compiler errors.
 

rIKmAN

Member
I'm using the latest version on steam, 2.3, and I tried it by opening the project file(.gmz)as well as importing the extension(.gmez) and the notes and test object in a current project. Both ways I get those same compiler errors.
As I said above, you are not using the right version - gmz and gmez files are GMS 1.4 files.

Download the version that is for GMS2.3 - "screen_save_dialog_23.yyz".
 
Hi Ai,

Thanks for posting your question.

Yes, it's possible using JS. The manual says that screen_save isn't available for HTML5 targets because Game Maker uses the browser's local storage for the file system, and it's too small for large images (1-5mb).

Here's something I hacked together that works on Chrome/Edge. If you put this in "prepend output.js" in the HTML5 settings it creates a button you can press underneath the game window that will take the screenshot and download it.
JavaScript:
// Create download element
var screenshotDownload = document.createElement("a");
screenshotDownload.download = "screenshot.jpeg"; // name of file

// Create the screenshot download button
var button = document.createElement("button");
button.innerText = "Take Screen Shot";

// Click callback
button.addEventListener("click", function() {
    var canvas = document.getElementById("canvas");

    // Retrieve the data
    var img = canvas.toDataURL("image/jpeg");

    screenshotDownload.href = img;
    screenshotDownload.click();
    screenshotDownload.href = "";
});

document.body.appendChild(button);
You'll also need to turn off WebGL in the HTML5 settings because Game Maker doesn't set the gl context's preserveDrawingBuffer flag to true on creation. Every time you request the image data with Canvas.toDataURL it will only return a blank image from the data getting cleared by the time the call is made. I think there's another way to do this by retrieving pixel data within webgl, but using toDataURL is probably the most straightforward.

Edit: It looks like there's a way to take a screenshot with preserveDrawingBuffer set to false in this thread https://stackoverflow.com/questions/30628064/how-to-toggle-preservedrawingbuffer-in-three-js
And I'm sure YellowAfterlife has solved in the extension @rIKmAN posted.

Hope this helps!
Super cool, thank you! got both methods working now :)
 
Top