How to use render targets in Phaser

[sonelliot]

Hi guys.

 

I'm working on a dynamic lighting shader for my game. The approach I am using to calculate shadows requires the use multiple render targets to hold the occlusion and shadow data. I am not sure how to accomplish this with Phaser.

 

Currently, I calculate the occlusion map by rendering all of the occluding sprites into a single RenderTexture. Then I create an Image object from this texture and attach my occlusion filter to it. This is a simple shader that fills in opaque pixels with black and transparent pixels in white. Roughly, this is what the code looks like:

var renderTexture, image, occluders, filter;function create(game) {  filter = new OcclusionFilter(game);  renderTexture = game.add.renderTexture(game.width, game.height);  image = game.add.sprite(0, 0, renderTexture);  images.filters = [filter];}function update(game) {  renderTexture.clear();  for (var group in occluders) {    renderTexture.render(group);  }}

This works and I get a nice black-and-white visualization of my occlusion map. The problem is that I don't want this image to appear in the game scene. I only want to use it as a render target to store the output of the occlusion shader. I tried changing the visible and alpha properties of the image so that it is invisible - but this causes the shader to stop being run.

 

I'm starting to get the feeling that I might be going about this the wrong way. What are your thoughts? Is there a nicer/easier way to work with render targets in Phaser?

[wayfinder]

game.make instead of game.add—this creates an object without adding it to the display list.