Jump to content

Line of sight triangles in v5


Recommended Posts

Congrats on v5 you awesome people!

So a long time ago  I was working on top down 2D game that had line of sight, but I ran into performance problems problems that sound like they can be more easily solved in v5. For some reason the forum is not letting me upload images so here are some links.

Screenshots: https://timetocode.tumblr.com/post/164071887541/much-progress-screenshots-show-in-game-terrain

Video of line of sight https://timetocode.tumblr.com/post/163227386513/11-second-video-tree-blocking-line-of-sight

It's just one of those pseudo-roguelike line of sight effects where you can't see around corners (real-time though!). It involved lots of triangles, and the algos were based on Amit Patel's https://www.redblobgames.com/articles/visibility/

To achieve this effect I created a canvas separate from pixi with the shadow color filling the screen, and then I would mask/subtract the triangles generated by the visibility algo. I would then take that resulting image with a littl ebit of blur and put it in a container that was rendered underneath the wall sprites. That was the fast version, I also made another version based on pixi graphics that had other issue. Even the fast version had all sorts of garbage collection problems, probably because it was creating a texture the size of the whole screen every frame and then discarding it.

It sounds like v5 can probably handle this feature without generating a texture every frame. Could someone suggest a way to accomplish this in v5? I don't have to put the shadows under the wall sprites if that is particularly hard.. they could be ontop of everything instead -- just whatever stands a chance of hitting 60 fps on a chromebook.


Link to comment
Share on other sites

hum, if am not wrong, this kind of stuff should be done in a shader to get good performance.
Di you check work of this guys.
i think it similar of what your target? a kind of Ray casting.
Also @ivan.popelyshev show here how proceed with a kind of ray shadow from a source with shaders.
Maybe play with can inspire you.



mask/subtract the triangles generated in canvas

... this will mean, high cpu work instead of gpu ?

hope those link can't help you.
Also if you can share some code this will help to understand.

Link to comment
Share on other sites

On a visual level pixi-shadows is very similar, the main issue is the performance. I'm definitely doing a form of raycasting, but with heavy optimizations. I'm targeting integrated gpus and mid-level chromebook cpus

I've already got a huge speed increase (maybe 1000x) via an algo that generates triangles by casting rays from the center of the player to the known vertices of obstacles in a spatially-culled sub-section of the whole game world.  Here's what the triangles look like:

And now only entities within the yellow beams of light can be seen

The challenge is using these triangles to get the right visual result in a way that is also fast. The triangles unfortunately are the visible area as opposed to being the shaded area which in the past meant that instead of drawing the triangles directly onto the game, I ended up subtracting the triangles from a darkened overlay to create this effect:

Progress with picking up items, ammo, reloading, shooting, etc. It all works in multiplayer as well. Next up is a buncha drawing of lasers and misc. projectiles. And also some R&D regarding how many different types of projectiles I can get away with...

Here's it a little fancier with dithered look, and also some shadows long the edge of walls generated a different way:


Everything above was made as a hybrid of canvas compositing operations generating textures that then were combined with pixi and it run quickly but creates too much GC pressure due to generating textures every frame. Maybe I should try a mesh....? Or manual addition of triangles via webgl? I need to draw 10-50 triangles per frame, dynamically and potentially entirely different one frame to the next. I also need a sane way to place these triangles in the scene such that they line up with the obstacles in a game with a giant world and a moving camera. I have no idea how to line up the vertices of a mesh in gpu coordinates with the x,y coordinates of the stuff in my pixi containers.

It would also be ideal if the triangles could be used for masking or reverse-masking (e.g. an object that is partially covered by the shadow is partially cropped by the shadow) but I could live without that as I do this manually at the moment.

I'm not shy about math or learning a bit of webgl, so I am open to suggestions.

Link to comment
Share on other sites

I have done similar thingie with v3, though it was heavily optimized with assumptions about what kind of lights there were, what was the world size etc.

What I did in short was this:

- Build a texture (2048x2048) with all the shadow casters in it.
- For each light, do a raycast to 512 directions (on gpu) and build a 1x512 texture with each pixel value telling how long the light can go from that point.
- Render lights using that texture (calculate angle, check if distance is over the value in texture, if it is, ignore pixel, otherwise draw light with light settings).
- Draw lights into a single texture and blend that with diffusetexture.
- Split the lights into static & dynamic groups for performance.

That solution also included normal mapping but in this case that's not needed. Maximum world size was 2048x2048 in this case, as everything had to fit inside a single texture.

Link to comment
Share on other sites

It reminds me of what has been implanted in this game.

I suppose that you have already got your hands on these articles, I share them in case.

it in canvas no pixi but it will be cool to see this in pixidemo ! 

a codepen **

a jsfiddle **

Shadertoy ** best performance i think

Some code for do it in a shader GLSL 
and a very good article 

Link to comment
Share on other sites

Some good stuff, and yea the canvas-punch-out style lighting is nearly identical to what I have. I'll try and learn enough about meshes to make the same thing out of a pixi mesh instead of out of canvas + compositing triangles. I already have all of the triangles, and a mesh is just indices and uvs...how hard could it be right??? Famous last words..

That shadertoy lighting is sooo nice looking lol. I'm not sure if I could legitimately go down that path as the triangles for me are generated in javascript and used within the game logic (not just for rendering). Though that looks so nice it is tempting to try to figure out an alternative. 

Link to comment
Share on other sites

  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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