How do I draw triangles?

I'm admittedly a bit of a purist in that I try to work with the base functionality of C2 as much as possible, but I think I've run into a wall.

For the purpose of line of sight/visibility effects, I need triangles, which don't transform well as normal sprites (ref:http://www.redblobgames.com/articles/visibility/).

Are there any ways to go about this without plugins? I'm familiar with ShadowLight/Casters, but those have certain limitations (as far as effects/blending) and I worry about the performance.

I'm assuming I need to use canvas or paster. What are the purposes/advantages of each? Which would be more suitable?

You can do a concave polygon without plugins by overlapping multiple rectangular sprites with a blend mode, but you need a layer per poly.

To do any polygon you can do it with a right triangle sprite. Basically you triangulate the polygon then break the triangles up into right triangles.

The canvas plugin allows you to use features of the html5 canvas to draw stuff. It has bad performance with webgl though since the canvas needs to be copied to a webgl texture every frame the image is changed.

The Paster plugin is kind of Canvas 2.0 since it doesn't have a slowdown when webgl is used. It only has a draw quad feature instead of all the other canvas drawing features mainly due to technical reasons, However quads can be used for triangles by having two points the same.

Thanks for the help and ideas R0J0! I can start to see how I might go about it using right triangles now. Although it seems your Paster plugin would be the smartest way to go.

Might be fun to try and see if I can put together the generic algorithm to fit any shape triangle with sprites anyway It would solve another problem I recall someone had with skewing/isometric arrow pointers too.

Here's an old attempt at the right triangle idea:

https://dl.dropboxusercontent.com/u/542 ... right.capx

It still has issues but any triangle can be made with two right triangles.

My first attempt: https://www.dropbox.com/s/bwtrse3v6wmth ... .capx?dl=0

Really clunky but I think it works in all situations. Now to start over with a new approach to try to figure out a cleaner method like yours T_T

If I run a function like this that destroys and recreates the triangles every tick rather than resizing them, will run into performance issues? Will the UID numbers overflow eventually? Especially if I have a significant and variable amount of them at any given time, such as for the line of sight application.

I'm figuring drawing triangles with html5's own draw functions would be the most efficient method. Hoping Paster handles the bounding box, collision box, and transparent areas suitably for the purpose of blending modes. I'll experiment a bit with that next.

Nice.

Javascript uses doubles for numbers, which has a max integer value of 9007199254740992.

So that would mean if you created a million new sprites every tick, uid's would overflow after a bit longer than 4 years of continuously running at 60fps.

Construct2 also does object recycling so it doesn't cause javascipt's garbage collector to have to work as much.

I had another go at it here:

https://dl.dropboxusercontent.com/u/542 ... htTri.capx

It take any polygon with a clockwise vertex winding, without self intersections and converts it to triangles. One issue is there are seams between the triangles which should be correctable by scaling the triangles up sightly from their centers, but I've been having trouble getting perfect results.

The simplest way would be to just draw a polygon with the canvas, but as I mentioned before, it will have a performance hit with webgl on. With the paster object you'll need to triangulate the polygon, but since it draws quads it can be more efficient if merge adjacent triangles to make it mostly quads.

Both canvas and paster handle blending modes fine since they are just images. Also they only have bounding box collisions.