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 (http://www.bypeople.com/css-broken-glass-effect/) which takes "random" vertices, applies Delaunay triangulation (http://en.wikipedia.org/wiki/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).