Phaser 3: call canvas texture from another file

Question

I am trying to convert this post to phaser 3: https://phaser.io/tutorials/coding-tips-002 but the update() function not working. In file a.ts I create a canvas texture:

this.textures1 = this.textures.createCanvas('canvastextures1', 450, 170)
this.land1 = this.textures.get(MAPOPTIONS.BASE1_NAME).getSourceImage()
this.textures1.draw(0, 0, this.land1)
this.textures1.context.globalCompositeOperation = 'destination-out'

and in file b.ts, in overlap() function:

  this.activeTextures = this.textures.get('canvastextures1')
  this.activeTextures.context.beginPath()
  this.activeTextures.context.arc(Math.floor(overlap2.x-tile.getTopLeft().x), Math.floor(overlap2.y-tile.getTopLeft().y), 50, 0, Math.PI * 2, false)
  this.activeTextures.context.fill()
  this.activeTextures.update()

Does anyone have any ideas? Thank you.

Answer 1

Basically you could call a function from a different scene, where the texture is created. Checkout this example, to see how calling a function from a different scene looks like: https://phaser.io/examples/v3/view/scenes/call-function-in-another-scene#
(I'm, assuming the mentioned files a.ts and b.ts are different scenes).

Basically you just have to:

• In the file b.ts (or where you want to use the texture) get the scene, that contatins the function, which generates the texture. For example, like this: var sceneA = this.scene.get('sceneA');

• and than call the function on that scene, for example like this var value = sceneA.generateMyTexture();

• finally you can call this.textures.get('canvastextures1'), or just return the needed object/data from the function, depending on your use case.