Script.it .Nam Myoho Renghe Kyo.

Script.it
[Lab] Stage3D UV animation

Going into the subject of rendering flat sprites in Stage3D wich have an animation as if they were 2D.
Common practice for this in Stage3D is using a spritesheet as texture and animate the uv coordinates.

UV mapping… uhhh ?
For those that dont really understand what UV mapping is.
Here’s an image, which explains the logic.
uvmapping


























To display a sprite in 3D you use a flat plane geometry like so:
sprite_plane















You can initially set the UV coordinates to cover the whole texture. So go from 0 –> 1 on the X axis and from 0 –> 1 in the Y axis.
[ 0,0, 1,0, 0, 1, 1,1 ]


So, eehhh, what is a SpriteSheet ?
It’s basicly an animation in big image. Where every small image is a frame in the final animation.
They look something like this.
rings




















Texture Lookup
You typically need to get the correct coordinates on the spritesheet for specific frames in some way or another.
I use 2 approuches for this problem:
1. Make sure the frames on the spritesheet are the same width and height. Then place them in a grid order.
Use a row / column lookup to get the correct frame for the animation.
2. Use a TextureAtlas file in which the frame coordinates are stored.

Both are solutions good.
But if you need a robust and flexible solution i would suggest a TextureAtlas.
Alot of spritesheet programs out there can output a texture atlas so using one also enables you to connect on those and save some time.


UV Animations
To get the correct part of the texture to be shown on the object, you need to set the uv coordinates to the correct values.
For this i use a simple calculation.

?View Code ACTIONSCRIPT
1
2
3
4
var uvX       = 1 / ( spritesheet.width  / atlasframe.x );
var uvY       = 1 / ( spritesheet.height / atlasframe.y );		
var scalar.x = spritesheet.width  / atlasframe.width;
var scalar.y = spritesheet.height / atlasframe.height;

In the atlasfile i use each spriteframe has a x, y, width and height stored.
The calculation above translates those values back to workable uv values.
After this i pass the scalar and the uvX/Y to the FragmentShader ( Best practices would be vertexshader, but i did fragment anyways ).

Inside the shader i divide the normal UV cordinates by the passed scalar.
Then i add the uvX and uvY. And voila. You have a translated uv coordinate.
Now go and sample the texture and such.

Here’s the fragment shader is used ( v1 are the normals ).

?View Code ACTIONSCRIPT
1
2
3
4
"div ft0, v1, fc4 \n" +  //divide UV thru scalar
"add ft0, ft0, fc5 \n"+  //add uvX, uvY
"tex ft1, ft0, fs0 <2d, repeat, linear>\n" + //sample texture at uv.
"mov oc, ft1"

So how does this all look.

This movie requires Flash Player 9

On the left (braid) side, i used a texture atlas. And on the rightside i used a column lookup.

Creative Commons License
[Lab] Stage3D UV animation by Script.it, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Netherlands License.

Comments are closed.

Categories
Archives
Live Supporters