Screenshot function in seperate js file doens't work

Phaser 3
1

Okay i’m probably doing something very basic wrong but can’t get this to work.

I have a main.js that call a mainscreen.js (scene 1), a hud.js (scene 2) and some levels (all different *.js). Everything works communication between the screens, overlays etc. except for one screenshot function. I added the code below.

The errorcode for the main.js is: “game is not defined” but also when i change game to overallgame or try a line of code with this. I can’t get this to work.

All help is appreciated.

import {ScenarioHUD} from './js/Hud.js';
import {Radar} from './js/MainScreen_Radar.js';
etc etc.........

const config = {
  type: Phaser.WEBGL,
  width: 1920,
  height: 925, //1080
  backgroundColor: 'ffffff',
  type: Phaser.AUTO,  
  dom: {
    createContainer: true},
  scene: [Radar, ScenarioHUD],
}

var overall_game = new Phaser.Game(config);

The code for the MainScreen_Radar.js

export class Radar extends Phaser.Scene 
{
    constructor() 
    {
      super({key: 'Radar', active: true});
    }

   init (puzzlesolved)
    {
      this.puzzlesolvedID = puzzlesolved.id;
    }

    preload() 
    {
    }
    
     create() 
    {
     ........
        button_screenshot.on('pointerup', function (pointer) 
        { 
          game.renderer.snapshot(function (image) 
          {                
            exportCanvasAsPNG(canvas, 'snapshot', image.src);
          });
        });
     ........
    }

  exportCanvasAsPNG(id, fileName, dataUrl) 
    {
      var canvasElement = document.getElementById(id);
      var MIME_TYPE = "image/png";
      var imgURL = dataUrl;
      var dlLink = document.createElement('a');
      dlLink.download = fileName;
      dlLink.href = imgURL;
      dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
      document.body.appendChild(dlLink);
      dlLink.click();
      document.body.removeChild(dlLink);
    }
2

In your code your game is called overall_game, just use that variable, or access the game object over the property on the current scene like this.game.renderer.snapshot

Here how it could look like:

 button_screenshot.on('pointerup', function (pointer)   { 
      this.game.renderer.snapshot(function (image)  {                
        exportCanvasAsPNG(canvas, 'snapshot', image.src);
      });
 }, this);  // add the context to the eventlistener
3

Thank you for your answer. If I add your code i get an error that export CanvasAsPNG doesn’t exist. Which make sense because of the eventlistener. when I change the code to

this.scene.exportCanvasAsPNG(......)

I get a “this is null” error. Also, I think because of the eventlistener. So, I have two questions just to understand what is happing. First how should I now call the function and secondly do you have an example on how to use the “overall_game” variable.

Thank you in advance.

5

If you have so much nesting, I would suggest writing the event handler like this, so that the correct context of this is maintained

button_screenshot.on('pointerup', function (pointer)   { 
      this.game.renderer.snapshot((image) =>  {            // <-- using a arrow function on purpose  
        this.exportCanvasAsPNG(canvas, 'snapshot', image.src);
      });
 }, this);  // add the context to the eventlistener
6

The renderer is also on this.renderer in a scene.