Phaser: Unavailable to use RenderTexture as source for TileSprite

Created on 20 Aug 2019  路  12Comments  路  Source: photonstorm/phaser

Version

  • Phaser Version: 3.19
  • Operating system: Windows 8.1

Description

Texture created with RenderTexture can't be used as source for TileSprite. Only transparent tileSprite, with no errors or warnings

Example Test Code

https://codepen.io/pavel-shirobok/pen/abomqgP?editors=0010

Additional Information

Most helpful comment

TileSprites use a canvas object internally which they create a fill pattern from. You can't drawImage a WebGL Texture to a canvas, which is why you can't use a Render Texture (or anything else specifically WebGL, like a Shader). So, instead, you need to snapshot the GL Texture, which is an _async_ process!, save that to the Texture Manager, then apply this to the TileSprite so it can rebuild its internal canvas fill pattern. Which is fine if you do it locally in your own code, but too much of a change to do internally.

All 12 comments

Thank you for opening this issue. This is a limitation in the way TileSprites work. However, in 3.20 they will now throw a console warning if you try to create one from the incorrect texture type.

@photonstorm Thanks for explanation and update. Is there a chance to make it work sometimes in future?

Not really I'm afraid. You could get around it by using RenderTexture.snapshot() and the image you get back from that could be added to the Texture Manager. Then it's just a normal image, so is safe to use for a TileSprite. This is a massive assumption for Phaser itself to make though, so it won't do it automatically.

@photonstorm Is it kind of webgl's or phaser's limitation? Is there chance to get it work with some PR? And if it's phaser, so can you let me reference for getting start point where to see it? Thanks a lot at all! :)

TileSprites use a canvas object internally which they create a fill pattern from. You can't drawImage a WebGL Texture to a canvas, which is why you can't use a Render Texture (or anything else specifically WebGL, like a Shader). So, instead, you need to snapshot the GL Texture, which is an _async_ process!, save that to the Texture Manager, then apply this to the TileSprite so it can rebuild its internal canvas fill pattern. Which is fine if you do it locally in your own code, but too much of a change to do internally.

@photonstorm thanks a lot for explanations!

Render-texture can draw game object on canvas, if

  1. Canvas render is also available in webgl mode, and
  2. Force render-texture runs in canvas mode.

But point 1. is a big change of p3 engine...

Yes, the problem is a mixture of concerns: If you force a Render Texture to use canvas, then you could draw it to a TileSprite, but you _can't_ then draw GL based items to that Render Texture! (such as cameras, shaders, other RTs, etc) - so you make one thing work, but it breaks something else in the process.

Im not a profession in phaser and webgl, so sorry for maybe stupid words. But maybe it can be solved by extending/new pipeline? I mean I can use RenderTexture for adding it's glTexture to camera's pipeline for example, and have no problem to show it or combine with other units. So perhaps it's limitation of TintTexturePipeline?

It's not really anything to do with the pipeline. It's purely because TileSprites use a canvas fill pattern to generate their base texture. If they used something else, like a frame buffer, then it could work, but they don't and it's a huge change to implement.

@photonstorm @rexrainbow Hi, guys, I know I can be annoying, but what about this codepen?

And if it's not the solution for Phaser's sources. Is there some problems for use it as workaround for concrete project?

If that solution works for you, there is no reason not to use it. It doesn't support tileScaleX/Y by the looks of it, but if you don't need that, then it hardly matters.

Was this page helpful?
0 / 5 - 0 ratings