Implementing fog of war

[Hachi]

I have been trying to implement a simple fog of war a while, which means just normal "fog masking" on top of the stage. Basically it's a movable map and a big map, so the content / mask has to be generated quite frequently when the player moves the map.

I have so far 4 options to try to implement it. Some I have tried and some I have issue with:
1. Masking. Failed in this. Since I need to generate a texture out of the fog that is used for masking. This was a bottleneck (I had to continuously update the texture used in the fog of war and upload it to the GPU).
2. Using blend modes. Particle containers seems to support .blendMode suggesting, that I would not need to generate a texture, just create particle container with i.e. black-and-white and make the white transparent? I think MULTIPLY should work for that. For some mysterious reason my tests failed (using v4-dev). If the particleContainer supports that and it's efficient way (not generating another texture and keep updating it or such :)).
3. Custom shader. This is very tempting and sounds best, but the issue is I hate shaders, I'm totally lost with them and I hate mathematics involved with them :). So it would take me enormous amount of time, most likely. I actually tried to test this lightMapping shader: http://codepen.io/Oza94/pen/EPoRxj , but converting it to V4 was a pain, couldn't do it. When I use the V4-dev it complains that the fragment shader has an issue. Though it works in V3 (I tested the codepen with i.e. changing it to noise shader and it works without issues, pretty much out-of-the-box so it indicates the issue would be with some changes to filters v3 -> v4 or with the shader). If it help, I still have open the codepen for trying out noise shader there: http://codepen.io/Hachitus/pen/JKvywp and here is the light map shader that uses newer pixi (through rawgit): http://codepen.io/Hachitus/pen/bZrAzG and complains "Could not initialize shader.".
4. Using Canvas-only and blend_modes / globalCompositeOperation to cut the areas. I've actually done this before when I was working with easelJS and that was pretty easy. But PIXI seems to handle the things a bit differently, since webGL is involved too. And using canvas2D might not be the most effective method, so I have not checked this option very far.

I'm mostly interested in should particleContainer work in this case perfomantly? And what might be causing issues converting that lightMap shader from V3 -> V4? If I would be able to fathom using shaders in filters a bit better, I might try some ready glslify-shaders, but that's a really long way to go for me.

[ivan.popelyshev]

1. You can make your mask RenderTexture and render to it separately, that way all calculations will be on gpu side

2. blendmodes are set per one particle container. If it doesn't work, please look at source code and fix the error

3. I can help with that

4. why do you need to cut the areas? if for sorting (z-order), i have solution without masks

You dont have to use ParticleContainer if you have below 1000 sprites.

[Hachi]

Normal containers don't have a possibility to use blend mode? That is why I was trying out particleContainers. Otherwise I don't use them. But I do actually have a lot of sprites, for me the desktop-version has 2 layers of 1500 - 2000 sprites on screen (so at least around 3000 + fog of war), though no animation. PIXI actually seems to handle that amount quite nicely still, no issues there that I've noticed so far.

1. Now I was using Texture.fromCanvas. But I could use RenderTexture without being forced to upload a new texture to GPU each time?

4. The fog of war has a black quad and some parts cut out of it based on units / FoW sprite on the map. So I didn't come up with any solution where z-order can help. Can it?

[Hachi]

Regarding using RenderTexture for that, you mean something like this?

var renderTexture = new PIXI.RenderTexture(new PIXI.BaseRenderTexture(500, 500));
renderer.render(maskContainer, renderTexture, true, null, false);
stage.mask = new PIXI.Sprite(renderTexture);

[ivan.popelyshev]

Yep, you just call "renderer.render" (sometimes without clearing) to change parts of your mask, it is much faster than using fromCanvas() thing.

[Hachi]

I got busy, so couldn't test / implement it for real sooner  . But it works A LOT better now :). Thank you! You are really a life saver with PIXI, Ivan :).

I was actually having an issue with renderTexture, cause I was using separate canvas to generate the texture and using it in different one :D. Learnt the lesson hard way.

I will really have to devote time to check the gameofbombs more thoroughly once I have time. It just needs a bit more in-depth knowledge of PIXI, time and patience :).