Visual Effect: Possible to "Split/Explode a sprite into rows" using a shader?

[JimmyPo 104]

I am not sure how to accomplish this effect for my simple arena shooter game.

I am thinking that shaders might be a good way to do this, but i never used shaders, and never used 3d, only regular 2d effects such as scaling, rotation, alpha blend, etc.

 

What i am trying to achieve, is a kind of "scaled shredding". I take a texture, and splitting in into "rows and columns" to represent a kind of "digital-explosion". So this effect is a kind of "scaling" but i "distribute" the pixel rows by introducing "gaps".

 

One alternative by not using shaders, is that I guess i could (operate on a "texturelevel" intead of a "row level") by drawing the whole sprite multiple times, but scaling (shrinking) them into 1 pixel rows/cols, but then i use the whole sprite for each "row". I really want to avoid using the "whole texture" for every row even though this possible is much simpler than rendering on a row by row basis.

 

Here is a visual representation of the effect:

Edited August 13, 2015 by JimmyPo

[Katie 2252]

This would seem like an ideal job for a pixel shader. You're (presumably) drawing a rect with some sub-area of a texture mapped onto it. The pixel shader runs for each pixel in the image and can fairly easily detect if this pixel is on a row or column which should be left blank, in which case it simply returns a completely transparent pixel -- essentially instead of scaling the texture patch to fit, it just.. breaks it up.

 

If you think about it in one dimension to start with (because extending it to two is easy once it's working), you want to skip N-1 pixels when the image is N times larger than the original. And you want to do this in texture coords (because you may already be stretching the image to get (say) a 32p wide image to draw onto a 128p wide screen area. So if you ask for a draw onto a 256p wide area, you want the pixels to be XXXX----XXXX---- not X-X-X-X-...

 

So, all you need to know is the "shatter" scaling (2 in the case of above; and it can be a floating number). Take the fractional (sub-pixel) part of your texture coord. Multiply it by the shatter scaling and if the result is >1.0, this pixel should be transparent. ExReader: use sprite-centred coordinates so that the shatter effect is symmetrical...

 

I'd suggest having a play around with a basic shader to start with though -- say getting your sprites to appear in monochrome or some other simple processing as a learning exercise -- then work up to something that needs a bit more juggling.

[Stainless 1875]

Key parts to this effect.

 

1) in code scale up the sprite.

    This may be a little expensive if you have lot's of them "exploding" at once though.

 

2) Calculate your UV coordinates based on some equation.

 

3) Clip your texture sampler

    So you can have black pixels by pushing the sampled UV coordinates to the edge of the texture. If you use wrap you may get unwanted effects (they could be really cool though, something to play with )

 

The equation you use to modify your input UV coordinates is where you can have real fun. Try things like.

 sample.X = input.uv.X * cos(time);
 sample.Y = input.uv.Y * sin(time);
 float4 color = tex2D(sampler,sample);

There are so many things you can do with this technique.

 

The only limit is your own creativity.

[wintertime 4112]

I would just draw a bunch of textured lines (or quads), maybe with instancing if you want to get fancy.

That way the work is done mostly by the vertex shader (you probably have a low vertex count in that game) and you don't need to draw huge quads where only a small part is visible.