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.
To display a sprite in 3D you use a flat plane geometry like so:
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 ]
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.
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.
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 ).
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.
On the left (braid) side, i used a texture atlas. And on the rightside i used a column lookup.
The [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.