Spherical forums

Creations => Programming => Topic started by: N E O on December 07, 2014, 02:36:06 am

Title: Seeking shattered glass effect, Delaunay triangulation
Post by: N E O on December 07, 2014, 02:36:06 am
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.
Title: Re: Seeking shattered glass effect, Delaunay triangulation
Post by: Radnen on December 07, 2014, 04:29:02 am
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.
Title: Re: Seeking shattered glass effect, Delaunay triangulation
Post by: N E O on December 07, 2014, 01:25:02 pm

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 :)
Title: Re: Seeking shattered glass effect, Delaunay triangulation
Post by: Radnen on December 08, 2014, 01:32:00 am
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).