Render FOV

[Son Tran-Nguyen]

Hi,

First of all, thank for very much for all the contribution to pixi.js. It's a great rendering library that I can use with an entity system to get a prototype up and running really fast.

 

Recently, I run into a requirement to make a field of view. It's like a triangle starting from the entity's position, expanding out. The further the light away from the entity, the more transparent it is. Please see attached image as an example.

 

Calculating the FOV is not hard, but I have trouble rendering it to the stage. I can't use a texture because the light can be blocked by wall and other entities. I cannot use a PIXI.Graphics to draw a triangle, because I would not be able to handle the alpha of the filling.

 

I was thinking of using a single PIXI.Graphics, and keep drawing lines from the entity to each pixel in the FOV. This is, of course, very stupid, and resource intensive, and it has a problem that, due to multiple lines are possibly overlap, making the alpha setting when doing lineStyle ineffective. Besides, redrawing hundreds of lines in a frame is not a good idea at all.

 

There is a topic here about adding a function to PIXI.Texture.Draw that would provide a canvas to draw pixel data in. Correct me if I'm wrong, but from the look of it, it's just for a static texture, in which once you're done, it stays the same. If that is the case, then it won't do for me, since I need to update the FOV as the entity moves. Besides, it's only for canvas, how about WebGL?

 

Would appreciate any help on this!

 

Regards,

 

Son Tran-Nguyen

@sntran

[dirkk0]

If I understand your problem correctly, the whole theory to this is here:
http://www.redblobgames.com/articles/visibility/

[Akis]

This is another great article about this: http://ncase.me/sight-and-light/

[Son Tran-Nguyen]

Thank you dirkk0 and Akis!

 

I have read those articles, and as I mentioned, I can implement those. I guess my question is how you would do a custom drawing.

 

For example, Phaser allows using custom texture proving a canvas context, so I can use it to do my drawing. But in pixi.js, I can't figure out a way to that yet.

[Son Tran-Nguyen]

I found the solution for my question.

 

I just use PIXI.Graphics.drawRect(x, y, 1, 1) to fill the pixel.

[xerver]

For example, Phaser allows using custom texture proving a canvas context, so I can use it to do my drawing. But in pixi.js, I can't figure out a way to that yet.

 

This is done via a pixi feature. Any canvas can be used as the source for a BaseTexture (just like an image can be). There are also custom renderables that allow you to draw directly to the context (webgl/canvas).