Add Screenshot extension (for games running on Windows/macOS/Linux) (#…

…806)

* Add functionality to take screenshots, when running on Electron.

Extensions/Screenshot/JsExtension.js

@@ -0,0 +1,47 @@
+/**
+ * This is a declaration of an extension for GDevelop 5.
+ * 
+ * ℹ️ Run `node import-GDJS-Runtime.js` (in newIDE/app/scripts) if you make any change
+ * to this extension file or to any other *.js file that you reference inside.
+ * 
+ * The file must be named "JsExtension.js", otherwise GDevelop won't load it. 
+ * ⚠️ If you make a change and the extension is not loaded, open the developer console
+ * and search for any errors.
+ * 
+ * More information on https://github.com/4ian/GDevelop/blob/master/newIDE/README-extensions.md
+ */
+module.exports = {
+  createExtension: function (t, gd) {
+    const extension = new gd.PlatformExtension();
+    extension.setExtensionInformation(
+      "Screenshot",
+      t("Screenshot"),
+      t(
+        "Save screenshots of a running game."
+      ),
+      "Matthias Meike",
+      "Open source (MIT License)"
+    ).setExtensionHelpPath("/all-features/screenshot");
+
+    extension
+      .addAction(
+        "TakeScreenshot",
+        t("Take screenshot"),
+        t("Take a screenshot of the game, and save it to a png file (supported only when running on Windows/Linux/macOS)."),
+        t("Take a screenshot and save at _PARAM1_"),
+        t("Screenshot"),
+        "JsPlatform/Extensions/take_screenshot24.png",
+        "JsPlatform/Extensions/take_screenshot32.png"
+      )
+      .addCodeOnlyParameter('currentScene', '')
+      .addParameter("string", t("Save path"), "", false)
+      .getCodeExtraInformation()
+      .setIncludeFile(
+        "Extensions/Screenshot/screenshottools.js"
+      )
+      .setFunctionName("gdjs.screenshot.takeScreenshot");
+
+    return extension;
+  },
+  runExtensionSanityTests: function (gd, extension) { return []; },
+};

Extensions/Screenshot/screenshottools.js

@@ -0,0 +1,35 @@
+/**
+ * @memberof gdjs
+ * @class screenshot
+ * @static
+ * @private
+ */
+
+gdjs.screenshot = {}
+
+/**
+ * Save a screenshot of the game.
+ * @param {string} savepath The path where to save the screenshot
+ */
+gdjs.screenshot.takeScreenshot = function (runtimeScene, savePath) {
+  const electron = runtimeScene.getGame().getRenderer().getElectron();
+
+  if (electron) {
+    const fileSystem = electron.remote.require("fs");
+    const canvas = runtimeScene.getGame().getRenderer().getCanvas();
+
+    if (canvas) {
+      const content = canvas.toDataURL('image/png').replace('data:image/png;base64,', '');
+      if (savePath.toLowerCase().indexOf('.png') == -1) savePath += '.png';
+
+      fileSystem.writeFile(savePath, content, 'base64', (err) => {
+        if (err) {
+          console.error("Unable to save the screenshot at path: " + savePath);
+        }
+      });
+    } else {
+      console.error("Screenshot are not supported on rendering engines without canvas.")
+    }
+
+  }
+}

GDJS/Runtime/cocos-renderers/runtimegame-cocos-renderer.js

@@ -111,3 +111,21 @@ gdjs.RuntimeGameCocosRenderer.prototype.openURL = function(url) {
 gdjs.RuntimeGameCocosRenderer.prototype.stopGame = function() {
     // TODO - Not implemented as not useful for most games on mobile and browsers
 }
+
+/**
+ * Get the canvas DOM element.
+ */
+gdjs.RuntimeGameCocosRenderer.prototype.getCanvas = function() {
+    return cc.game.canvas;
+}
+
+/**
+ * Get the electron module, if running as a electron renderer process.
+ */
+gdjs.RuntimeGameCocosRenderer.prototype.getElectron = function() {
+    if (typeof require !== "undefined") {
+        return require('electron');
+    }
+
+    return null;
+}

GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.js

@@ -199,7 +199,7 @@ gdjs.RuntimeGamePixiRenderer.prototype.setFullScreen = function(enable) {
     if (this._isFullscreen !== enable) {
         this._isFullscreen = !!enable;
 
-        var electron = gdjs.RuntimeGamePixiRenderer.getElectron();
+        var electron = this.getElectron();
         if (electron) { // Use Electron BrowserWindow API
             var browserWindow = electron.remote.getCurrentWindow();
             if (browserWindow) {
@@ -408,7 +408,7 @@ gdjs.RuntimeGamePixiRenderer.prototype.openURL = function(url) {
 gdjs.RuntimeGamePixiRenderer.prototype.stopGame = function() {
     // Try to detect the environment to use the most adapted
     // way of closing the app
-    var electron = gdjs.RuntimeGamePixiRenderer.getElectron();
+    var electron = this.getElectron();
     if (electron) {
         var browserWindow = electron.remote.getCurrentWindow();
         if (browserWindow) {
@@ -421,10 +421,17 @@ gdjs.RuntimeGamePixiRenderer.prototype.stopGame = function() {
     // HTML5 games on mobile/browsers don't have a way to close their window/page.
 }
 
+/**
+ * Get the canvas DOM element.
+ */
+gdjs.RuntimeGamePixiRenderer.prototype.getCanvas = function() {
+    return this._pixiRenderer.view;
+}
+
 /**
  * Get the electron module, if running as a electron renderer process.
  */
-gdjs.RuntimeGamePixiRenderer.getElectron = function() {
+gdjs.RuntimeGamePixiRenderer.prototype.getElectron = function() {
     if (typeof require !== "undefined") {
         return require('electron');
     }