A long time ago, I wrote a library, NTrans, that contained RPGMaker-like screen transitions for Sphere like wipe in/out, iris in/out, etc. The most recent (I think in 2011 or 2012) transition I wanted to add was an animated shattered glass effect for, say, a map-to-battle transition like one of the Tales games. I never had a decent one working.

Fast forward to now, I find this canvas-based script which takes "random" vertices, applies Delaunay triangulation to make triangles, and clips image segments to those triangles. CSS takes care of the animation aspect of it.

What that script can do that mine never could is clip a given image to non-rectangular polygonal boundaries. Sphere does not have a polygonal clip function (in future APIs I'd like to see it called Surface.clipPolygon or something), so how can we make this happen in Sphere? The "fastest" (i.e. the slowest) way I remember is to Surface.cloneSection the triangle's bounds and manually fill outside of that cloned triangle with rgba(0,0,0,0), but that was always unreliably slow.

Do we have better ways to clip a given image or image section to non-rectangular boundaries but still within Sphere 1.5 API? Ideally such a method could also take care of the problem I had with non-rectangular iris in/out transitions, too.

Ask Metallix, he had this in his Aquatis game. I think he did more of a per-pixel thing...

The "fastest" (i.e. the slowest) way I remember is to Surface.cloneSection the triangle's bounds and manually fill outside of that cloned triangle with rgba(0,0,0,0), but that was always unreliably slow.

To make that far faster, I guess you could just do an inverse polygon that "clips" (paints the area a solid color, say, lime green) everything not in the center zone you want to keep (IE a triangle or hexagon). Then you replaceColor() the contents of the the inverse polygon. Since it's all one solid color, it's lightning fast. But yes, you still must use surfaces on a cloned version of the map or current render.

I could make a test game, or you could toy with the above algorithm. I think it's faster... but I haven't tested it. I'm relying on the fact Sphere's replaceColor is really quick. Quicker than the per-pixel method you could do in JS side of things. That and I hope polygons draw really fast too. If so, this is easily the fastest method and could even be done real-time as you play to say, make an interesting hexagon-shaped mini-map.

To make that far faster, I guess you could just do an inverse polygon that "clips" (paints the area a solid color, say, lime green) everything not in the center zone you want to keep (IE a triangle or hexagon). Then you replaceColor() the contents of the the inverse polygon. Since it's all one solid color, it's lightning fast. But yes, you still must use surfaces on a cloned version of the map or current render.

I could make a test game, or you could toy with the above algorithm. I think it's faster... but I haven't tested it. I'm relying on the fact Sphere's replaceColor is really quick. Quicker than the per-pixel method you could do in JS side of things. That and I hope polygons draw really fast too. If so, this is easily the fastest method and could even be done real-time as you play to say, make an interesting hexagon-shaped mini-map.

I've not used replaceColor before; I think I'd like to see that demo

Attached is a test where I clip a rotating rectangle in real time using the inverse polygon method. In non-real-time the method can be used to quickly "shatter" the screen into triangles found via the Delaunay method (not shown).