Modify rendered scene before it gets painted for CANVAS

[Larzan]

I know there are the WebGL Filter that PIXI provides, and i know that they can be ported / called from within Phaser.

 

But is it possible to implement this for canvas also? I know it must be possible (read sty about rendering to a texture or sth.?), but how would one actually go about this?

 

I'd like to be able to 'cut out' parts of the screen and 'paste' them (maybe even a bit zoomed) at a different position (like a sniperscope or magnifying glass) zooming parts of the screen.

 

Could someone with a better and deeper knowledge of Phaser give me a tip on how to actually do that?

[lewster32]

You should just be able to render the contents of game.world to a RenderTexture instance used as the texture for a Sprite. If you get the offsets correct this should give you the functionality you need.

[Larzan]

Great, that sounds exactly like what i need.

 

Although, do you know if there is a way to render tile maps directly to a renderTexture? I just switched form my custom level render method to the Phaser Tilemap classes and am very content with it, it would be a pity to have to rewrite that part again...

 

The only renderTexture examples i found were for single sprites, and on the Phaser page i could only find some ominous phrase concerning 'swapping with render texture for tile maps' or sth. to that effect.

 

I guess I'll dig around a bit more tomorrow.

[lewster32]

You can render any display object to a RenderTexture, so a TileMap would be fine. The RenderTexture's render and renderXY methods will draw the contents of the display object to the RenderTexture.

[Larzan]

Thanks for getting back to me, but I have to admit i am a bit at a loss here.

 

I managed to draw stuff to the rendertexture and also to draw this texture to the screen.

 

But how can i then make the tilemap i loaded be drawn onto the renderTexture? I could not find a way to make the level i loaded with tilemap and tilemaplayer to a rendertexture.

 

Did you mean in you suggestion that i do all the drawing of tiles myself instead of using the methods provided by Phaser, so that i can draw them with renderXY?

 

Because right now i only have to load the tilemap/tilemaplayer and it is drawn automatically...

[lewster32]

Hmm, I've not tested this with a TileMap but I'd have assumed a TileMap would render to a RenderTexture correctly. I don't have any projects which use TileMaps so I can't test this easily I'm afraid. If you render game.world to a RenderTexture, is the TileMap missing?

[Larzan]

Errr, game.world?

 

I have been only playing around with Phaser for a few days (spread over a few months) i did not know that that is possible, i will test that, thx

[Larzan]

Great, it was indeed that simple, just had to draw the whole game.world to the RenderTexture and there it was

...update() {...    this.rendertexture.renderXY(this.game.world, -this.camera.x - 400, -this.camera.y - 225, true);    this.rendertexturesprite.x = this.camera.x;    this.rendertexturesprite.y = this.camera.y;...}...

Although this still does not really do what i need, i can draw now a single rendertexture which contains part of the actual screen by just using an offset whilst painting and the size of the RenderTexture itself as the width and height limit.

BUT i was hoping that i might be able to take this RenderTexture and just draw several different sized rectangles from it to the screen, to give it a distorted look.

 

I guess i will try to implement it with a WebGL filter after all, although then i will have problems with mobile devices.

 

Maybe i'll take a look at the RenderTexture source to find a way to get what i need though...

 

Thanks for your help lewster, i did not know of that feature before.

[lewster32]

If you want to do manipulation, you can also draw a display object (such as the entire world, again) to a BitmapData instance, and then you can manipulate the pixels to apply distortion or whatever. If you just want basic magnification in the mean time, you can apply scale to the sprite yor RenderTexture is attached to.

[Larzan]

That BitmapData instance sounds interesting.

 

Could i also prevent the world to be 'drawn normally' and just draw my BitmapData instance?

 

I get the impression that the world gets painted whatever i do, it would be great if i could tell the game to just render to the RendeTexture / BitmapData and not show anything on the canvas so that i can fill that canvas completely with my modified rendering?

[lewster32]

I think you're getting into the realms of filters or actually messing with the render output itself as your original post describes if you want to do this kind of full-screen manipulation. I don't know exactly how to get hold of the final frame data in WebGL to play with its pixels, but for the canvas renderer it's just game.context.

[Larzan]

I had this idea for a nice filter, but as not every device / browser supports WebGL i wanted to make sure that it is possible with canvas too, so i am investigating right now how to do it for canvas.

Thanks, i will give the game.context and the BitmapData idea a try.

 

You saved me tons of stress and time, thanks a lot

[lewster32]

No problem my friend, let us know how things go!

[valentinaCom]

hi Larzan

 

can u plz show me (the code) how did you render the contents of game.world to a render texture instance used as the texture for a Sprite (and add it to canvas)?