Realtime winline effect

[Jonny Shaw]

Hi all, just after a bit of advice on how best to handle something like the realtime winlines below for a slot game...

https://prnt.sc/hpfo74

I currently have it working with PIXI Graphics line to based on the grid which works fine - but leaves little for styling.  I've used the glow effect from PIXI-Filters, but that only seems to work on iOS and desktop (Android chrome on a Note 8 refuses to render the lines when the filter is enabled).  In previous games I've used simple 9 sliced sprites rotated with different widths to join the sections - but not sure what other methods I could try out here? and which would be the best performance wise too?

Thanks in advance!
 

[themoonrat]

PIXI supports 9 sliced sprites too (http://pixijs.download/dev/docs/PIXI.mesh.NineSlicePlane.html) and you might have more success with filters on sprites than on Graphics.

As always with WebGL, performance is best when you are making consecutive draw calls using the same base texture. Filters will always break that batching, so if you could put one filter over all of your sprite draw calls, rather than 1 filter per line, then that'd help

[Jonny Shaw]

5 hours ago, themoonrat said:

PIXI supports 9 sliced sprites too (http://pixijs.download/dev/docs/PIXI.mesh.NineSlicePlane.html) and you might have more success with filters on sprites than on Graphics.

As always with WebGL, performance is best when you are making consecutive draw calls using the same base texture. Filters will always break that batching, so if you could put one filter over all of your sprite draw calls, rather than 1 filter per line, then that'd help

brilliant many thanks, yeah have already used 9 slicing quite a bit so will go that route, probably little need of a filter as its a simple glow for now so will just bake it into the png.  Thanks for the tips on the draw calls though - anyone come across a way of counting the draw calls in chrome?  Tried a couple of webgl extensions but none seem to work with PIXI for me

 

[Exca]

http://benvanik.github.io/WebGL-Inspector/

This chrome plugin can show all gl calls. Useful in some cases at least. The plugin hasnt been updated in a long while, but basic functionality still works.