The sprite sheets tutorial

Software: Away3D 4.x

cdz617, Newbie
Posted: 23 April 2013 06:03 PM   Total Posts: 11

I need to add a sprite sheet animation to my 3D Project. I’m trying to do the sprite sheet tutorial, but I can’t find spritesheethelper, spritesheetanimationset, spritesheetanimator, etc…

I’m using Away3D 4.1 Alpha.

Is this tutorial for another away3d version? I’m lost.

   

Avatar
Fabrice Closier, Administrator
Posted: 23 April 2013 07:05 PM   Total Posts: 1265   [ # 1 ]

All the necessary classes are in the dev branch (currently 4.1 alpha)
If you are indeed running 4.1, as these classes and tutorial were added less than 2 days ago, you need to pull the update made to dev branch (either using github cmdline or within your client).
If you have downloaded as zip, you need to download again.
If you are not running the dev branch, then you are not running 4.1.

That having said, the tutorial links are pointing to the to become url.
You need to download the example classes from the examples repo, also from dev branch.

Regarding tutorials/examples, I have added a new example class for the UVAnimator. It’s not the same as spriteSheets, it’s another way to animate with uv’s. You might be interrested at exploring & have a play with this animator too.

 

 

   

cdz617, Newbie
Posted: 25 April 2013 02:27 PM   Total Posts: 11   [ # 2 ]

ok, I’ll try both examples. I didn’t know about the dev branch. Thank you Fabrice.

 

   

Avatar
Fabrice Closier, Administrator
Posted: 25 April 2013 06:07 PM   Total Posts: 1265   [ # 3 ]

So you were not running 4.1, but 4.0.

One way to know the engine version is to look at the Away3D class in root package or right click on stage if the menu is still enabled.

Note that there is also a 4.0 version of the SpriteSheetAnimator into the hotfix branch. It is uncertain of it will be merged to the current 4.0 before we close maintenance on this version to focus on the next version. So if you need it for 4.0, download it quick!

 

   

HugoW, Newbie
Posted: 01 May 2013 10:49 AM   Total Posts: 11   [ # 4 ]

Dear Fabrice,
I am having trouble to follow this tutorial below.
(Using sprite sheets in your project)
http://away3d.com/tutorials/Using_sprite_sheets_in_your_project

The sample files are missing.
Can you please provide me a link to download necessary files?
(My version is 4.0.9.)

Many thanks.

 

   

Avatar
Fabrice Closier, Administrator
Posted: 01 May 2013 02:33 PM   Total Posts: 1265   [ # 5 ]

@HugoW, as explained in first reply, the tutorial classes are not pointing at current location but at future location.
We are currently about to release beta 4.1, hence why all materials, examples etc are pointing to the to become 4.1 beta master.

for now, you can access the classes by downloading examples from the examples repo, in dev branch. The engine 4.1 is also in dev branch.
You need to run 4.1 to be able to compile these newly added animators.

If you run 4.0, there is in hotfix a version of the spritesheet animator, but it’s a tmp version, and already does not have as much features as the 4.1 version.The gotoandplay, stop, are for instance not available in there. The UVAnimator doesn’t work at all in 4.0.

In a few days, all will work as expected, 4.1 beta will be replacing the current master 4.0.x. Same for the example repo.

 

   

HugoW, Newbie
Posted: 01 May 2013 02:47 PM   Total Posts: 11   [ # 6 ]

@Fabrice, thanks for your prompt reply"s”. I do find the dev branch. 

Good day~
Hugo

 

   

Avatar
Fabrice Closier, Administrator
Posted: 01 May 2013 08:45 PM   Total Posts: 1265   [ # 7 ]

little heads up: I have updated a few classes in order to support more, for instance atf format. In order to do so, the SpriteSheetMaterial and spriteSheetHelper were updated

I have commited changes, in both engine and examples.

The changes are minor and showed in updated examples:
- helper returns a spriteSheetNode and not a set.
which will be more handy if you need more animations
so you need to declare a set and add the animation node to it.
-helper does not return vectors of bitmapdatas but texturebase types.
same for SpriteSheetMaterial. Which not only will help support other types, but also improve performance after first texture upload (no longer required)

I’m busy updating the tutorial

 

   

Matej, Jr. Member
Posted: 27 June 2013 12:44 PM   Total Posts: 38   [ # 8 ]

Is there any chance of tutorial for using JSON or XML of atlas to get exact part of texture. This way we can use one bit texture for both UI and 3D models

 

   

Roger Crist, Newbie
Posted: 06 March 2014 04:26 PM   Total Posts: 4   [ # 9 ]

Regarding the tutorial “Using sprite sheets in your project”  at:  http://away3d.com/tutorials/Using_sprite_sheets_in_your_project

It says “you can import two kinds of data: spritesheet maps already defined, or let the helper class generate them for you.”  It mentions Texture Packer and other sprite sheet generators and goes on to say “If you want to have nested animations of different kinds or have different frame sizes to maximize the use of the maps surface used, look at the advanced part of this tutorial to see how it can be done.”  Couldn’t find that advanced part.

And sadly, at the bottom it reads: “Dev note: support for atlas.xml parsing is under dev. Once added, an example will be added to this tutorial.”

Bummer, bummer, bummer.

After spending an evening poking around, I did find this Away3D 3.x tutorial:
http://blog.joachimbaur.de/?p=50

Which offers an open source class and explains how to convert standard coordinate data (like out of a texture atlas) into UV coordinates.  My sense is that right now if you want to use a Sprite Sheet with a Texture Atlas XML file in Away3D, you’d basically have to roll your own system.

I would love for someone to set me straight and point me to the class that will do it . . . but I don’t think it exists in Away3D 4.1.6.  Does anyone have any idea when Away3D will support sprite sheets generated with Texture Packer?  ...or support bitmap data out of Starling’s AssetManager . . . which works very, very nicely?

 

   

Avatar
Fabrice Closier, Administrator
Posted: 06 March 2014 08:28 PM   Total Posts: 1265   [ # 10 ]

I have posted a function exactly for that in this very forum (search a bit) + the why it’s not there yet and what you need to avoid for now.

[edit]
oh and I forgot to mention that you can already define nested animations. Its all in the from-to data that you set.

 

   

Roger Crist, Newbie
Posted: 07 March 2014 02:47 AM   Total Posts: 4   [ # 11 ]

I really appreciate your response, but I can’t find the thread that you mentioned.

I did find the following posts that are as yet un-answered:
http://away3d.com/forum/viewthread/4443/
http://away3d.com/forum/viewthread/4979/

If there is a way to parse an XML texture atlas to get images out of a spritesheet . . . a real one where the images can be all different sizes . . . I’d love to know.  If there is a class that will do it, would you mind putting a link on this thread?  It would not only benefit me, but actionscripters everywhere.

Cheers.

 

   

Avatar
Fabrice Closier, Administrator
Posted: 07 March 2014 10:33 AM   Total Posts: 1265   [ # 12 ]

Here’s an example of a function to do so, that should be added to the helper class.
This function, that John wrote is perfectly fonctional and would only require you to eventually change/replace the attribute names depending on exporter.

However, and that’s what I said above, there is a catch. The current implementation doesn’t take in account the cases of “compression” where a “frame” may be stored smaller than the destination frame. Simply because the shader isn’t ready for it yet. It should once such kind of definition is found, offset the content within its own frame and fill the missing area by a color or transparency. In its current state, the animator would render and play this kind of frames as expected but would very likely show some the neighbourg frame information, which is exactly why it’s not supported till we have it working.

On the other hand, even if unfinished, if you dive a bit into it, play with the animation definitions, you will see that it’s so easy that in most cases it makes the use of xml’s totally overkill and saves you the loading/parsing/ram required for the xml atlasses.

Hope it helps.


public function parseAtlasXml(animID:String, textureWidth:uint, textureHeight:uint, atlasXml:XML) : SpriteSheetAnimationSet
  {
  /* THIS METHOD IS CURRENTLY UNDER DEV */
  var spriteSheetAnimationSet:SpriteSheetAnimationSet = new SpriteSheetAnimationSet();
  var node:SpriteSheetClipNode = new SpriteSheetClipNode();
  node.name = animID;

  spriteSheetAnimationSet.addAnimation(node);

  var frame:SpriteSheetAnimationFrame;
  var u:uint, v:uint,i:uint;

  var scale:Number = 1;//mAtlasTexture.scale;

  for each (var subTexture:XML in atlasXml.SubTexture)
  {
  var name:String = subTexture.attribute(“name”);
  var x:Number = parseFloat(subTexture.attribute(“x”)) / scale;
  var y:Number = parseFloat(subTexture.attribute(“y”)) / scale;
  var width:Number = parseFloat(subTexture.attribute(“width”)) / scale;
  var height:Number = parseFloat(subTexture.attribute(“height”)) / scale;
  //  var frameX:Number = parseFloat(subTexture.attribute(“frameX”)) / scale;
  //  var frameY:Number = parseFloat(subTexture.attribute(“frameY”)) / scale;
  //  var frameWidth:Number = parseFloat(subTexture.attribute(“frameWidth”)) / scale;
  //  var frameHeight:Number = parseFloat(subTexture.attribute(“frameHeight”)) / scale;

  //  var regionR:Rectangle = new Rectangle(x, y, width, height);
  // var frameR:Rectangle = frameWidth > 0 && frameHeight > 0 ? new Rectangle(frameX, frameY, frameWidth, frameHeight) : null;

  frame = new SpriteSheetAnimationFrame();
  frame.offsetU = x / textureWidth;
  frame.offsetV = y / textureHeight;
  frame.scaleU = width / textureWidth;
  frame.scaleV = height / textureHeight;
  frame.mapID = i;

  node.addFrame(frame, 16);
  i++;
  }

  return spriteSheetAnimationSet;
  }

 

   

John Brookes, Moderator
Posted: 07 March 2014 04:20 PM   Total Posts: 732   [ # 13 ]

Just to add. Fabrice has already said this but here is a pic..

Left will not work
Basically there’s is no way to add the missing white space (padding) that has been removed when packing.

Right will work ok.

So you cant have “where the images can be all different sizes”
You can have multiple characters animations though as long as the Bounds are the same size for each animation.

Basically I did the xml thang assuming you could. That why there is lots of commented out code.

Starling does textures differently to Away so that can add that missing padding.

 

   

Roger Crist, Newbie
Posted: 07 March 2014 08:19 PM   Total Posts: 4   [ # 14 ]

Thank you both SO much for clearing that up.

I really, really appreciate it.

I know you guys have a lot going on, but as a fan of Away3D since the version 3.x days, I hope the Away3D Dev Team can make this issue a priority for the next release. 

I know other users on the forums have already suggested this, but I’d take a really good look at using Starling’s AssetManager class.  Especially since Away3D is now part of the Citrus Engine.  If I could use the same Sprite Sheets for Starling and Away3D assets in the same project, it’d be DOPE.  AND the performance benefits would increase frame-rates for gamers everywhere.

Thanks again for all that you do.

 

   
   

X

Away3D Forum

Member Login

Username

Password

Remember_me



X