Custom SpriteSheet

Software: Away3D 4.x

Avatar
Alex-Crafter, Newbie
Posted: 24 October 2012 05:08 PM   Total Posts: 28

Hi there.
I am implementing my own particle system, that is based on Sprite3Ds with spritesheet textures and a 3dPlan that manages every animation and particles, and clashed against the troublesome way to implement texture animation in Sprite3Ds.

I resolved the problem with a single change in the Sprite3D class:

public function get geometry():SubGeometry
{
   
return _geometry;

This getter function returns the Sprite3D subgeometry, and gives direct access to the Uv’s

This way I can do something like this (being dot a Sprite3D):

var geo=dot.geometry;
var 
dotData:Array=[];
geo.scaleUV(0.25,0.25);
  
for (var 
k:uint=0;k<geo.UVData.length;k+=2)
{
 dotData
.uv[k]=geo.UVData[k];
 
dotData.uv[k+1]=geo.UVData[k+1];

This will store the default uv positions that will be changed with the animation

And then, to animate, something like this (uvPos is an array with the preset uv positions for a 4x4 spritesheet animation frame)

var geo=dot.geometry;
for (var 
k:uint=0;k<geo.UVData.length;k+=2)
{
 geo
.UVData[k]=dotData.uv[k]+uvPos[0];
 
geo.UVData[k+1]=dotData.uv[k+1]+uvPos[1];
}
geo
.updateUVData(geo.UVData); 

These two parts could be implemented inside the Sprite3D- an array storing the default uv positions, and a method to automatically update the uv position, given uv values. (sort of Sprite3D.moveUV(w,v))
I honestly love old school programming and it seems to me that these simple and direct methods would be worth gold for all the Flash programmers out there.

   

codejockey1, Newbie
Posted: 25 October 2012 03:33 PM   Total Posts: 2   [ # 1 ]

Hello Alex-Crafter,
Along with many others, I am looking to implement animated textures in my project. I get the gist of your solution above, but am wondering if you have an example that you could share. Some of the things that I’m trying to understand is how you lay out your sprite sheet, get the correct coordinates for each “frame” and then scroll the U/V points to the correct location on the bitmap. I appreciate any help that you can provide!

   

Avatar
Alex-Crafter, Newbie
Posted: 29 October 2012 09:42 AM   Total Posts: 28   [ # 2 ]

Well, my solution, although imperfect, was this:

1- change geometry of sprite3D from static to dynamic

//private static var _geometry:SubGeometry;
private var _geometry:SubGeometry

2- add a function inside sprite3d to relay the update of geometry uv’s

public function get geometry():SubGeometry
{
return _geometry;
}
public function updateUVData(uvs Vector.<Number>) : void
{
_geometry
.updateUVData(uvs);

3-create an object with all the spritesheet coordinate presets I need

var uv4x4:Array=[
  [0
,0],[0.25,0],[0.5,0],[0.75,0],
  
[0,0.25],[0.25,0.25],[0.5,0.25],[0.75,0.25],
  
[0,0.5],[0.25,0.5],[0.5,0.5],[0.75,0.5],
  
[0,0.75],[0.25,0.75],[0.5,0.75],[0.75,0.75]
 ]
;
 var 
uv8x2:Array=[
  [0
,0],[0.125,0],[0.25,0],[0.375,0],[0.5,0],[0.625,0],[0.75,0],[0.875,0],
  
[0,0.5],[0.125,0.5],[0.25,0.5],[0.375,0.5],[0.5,0.5],[0.625,0.5],[0.75,0.5],[0.875,0.5],
 
];
 
 var 
obj:Object={
  uv4x4
:uv4x4,
  
uv8x2:uv8x2
 }
;
 
 
//retornar
 
return obj

The 4x4 is a standard panel divided by 4x4. A bitmap of 256x256pixels can hold 16x64px images- a 64x64 animated sprite with 16 frames.
The 8x2 holds a 32x128 animated sprite with 16 frames. This kind is good for animated effects in columns, like a firewall.

4-store the default uv positions for the sprite( in case you create sprites with different shape than the default), and scale the uv’s to 0.25
dot, being the sprite3D
dotData, being an object storing extra data for the sprite

var uv=dot.UVData;
var 
uvN:int=uv.length;
dot.geometry.scaleUV(0.25,0.25);
  
dotData.uv=[];
for (var 
k:uint=0;k<uvN;k+=2)
{
 dotData
.uv[k]=uv[k];
 
dotData.uv[k+1]=uv[k+1];

5- use a routine like this one
dot, being the sprite3D
dotData, being an object storing extra data for the sprite

var sps:Array=spriteSheets["uv4x4"];//used spritesheet
var f:int=dotData.f;//frame for animation
var uvPos:Array=sps[f];//coordinates for current uv's
var baseUV:Array=dotData.uv;//stored default uv position

var uv=dot.UVData;
var 
uvN:int=uv.length;
   
for (var 
k:uint=0;k<uvN;k+=2)
{
 uv[k]
=baseUV[k]+uvPos[0];
 
uv[k+1]=baseUV[k+1]+uvPos[1];
}
dot
.updateUVData(uv);

dotData.f+=1;//increment the animation frame
//if the frame reaches 15, must loop to 0
if(dotData.f>15){dotData.f=0;

All this should be made inside the sprite3d class, or a new implementation of it, where you should store the default uv positions, the frame for animation, and all the stuff needed to make it work without need of extra animators. AND don’t forget a proper dispose() method for cleaning all the stuff from memory.

   

Avatar
Alex-Crafter, Newbie
Posted: 29 October 2012 09:45 AM   Total Posts: 28   [ # 3 ]

If you use a 8x2 spritesheet, you must scale teh sprite3D to scaleUV(0.125,0.5);

   
   

X

Away3D Forum

Member Login

Username

Password

Remember_me



X