Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Modify rendered scene before it gets painted for CANVAS


Larzan
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

  • 4 weeks later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...