HTML5 Possible to save file to computer in HTML5 game?

A

AaronInternet

Guest
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 by a moderator:
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:
A

AaronInternet

Guest
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.
 
A

AaronInternet

Guest
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".
 
A

AaronInternet

Guest
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".
Ah yes, works now, thanks!
 
A

AaronInternet

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

happyman

Member
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!
hello
how can I add this in chrome
 

rIKmAN

Member
hello
how can I add this in chrome
You don't add it in Chrome, you add the code to your project and then export using HTML5 which then runs in a browser.

I only tested the link I posted by YellowAfterlife which worked fine in Chrome back then and the code posted by @tadashibashi seems to have been tested in Chrome/Edge and worked fine for AaronInternet.

What exact issue are you having with them?
 
Top