Jump to content

SpriterMC - An AS3 Starling Implementation with Bones


slopps

Recommended Posts

SpriterMC - A full-featured AS3 Starling Implementation

Official website

http://www.sammyjoeosborne.com/SpriterMC

Overview

SpriterMC is a Starling implementation for importing skeletal (and non-skeletal) animations generated with Spriter, complete with a familiar API mimicking Starling MovieClip. Features include SpriterMC generation from an existing TextureAtlas or individual assets (a TextureAtlas is generated from assets dynamicall), bone support, ability to create multiple instances with low overhead, Framerate-independant and adjustable playback speed and playback direction, swap entire texture sets at runtime, and more. It currently supports all features of the Spriter file format (version a4.1), with future support planned for any subsequent changes to the SCML format.

Demo and Benchmark

Benchmark - Several hundred SpriterMC instances at ~60FPS

Basic Demo - Showcasing some basic SpriterMC features such as bone display and frame sounds

Usage

For full features and API, see examples in the ReadMe provided on the SpriterMC Github page.

Quick and simple example:


var monster1:SpriterMC = SpriterMCFactory.createSpriterMC("monster", "xml/monster.scml", _myTextureAtlas);
monster1.play(); //Note: SpriterMC's will not actually start playing or show up on stage until SpriterMC.SPRITER_MC_READY is broadcast, though there is no need to listen for this event
myJuggler.add(monster1); //Add each SpriterMC to a Juggler, just like a regular Starling MovieClip

Features


  • [*:1jnin3vk]API mimicking Starling MovieClip for easy and familiar use
    [*:1jnin3vk]Generates a SpriterMC (similar to a Starling MovieClip) from a provided SCML filepath (loading of the SCML file is handled for you)
    [*:1jnin3vk]Accepts a preloaded TextureAtlas for assets, or loads the individual assets referenced in the SCML file and dynamically generates a TextureAtlas for you (uses a modified version of Emiliano Angelini's Dynamic Texture Atlas Generator)
    [*:1jnin3vk]Effortlessly create multiple instances of existing SpriterMCs with little to no additional memory or processing (100 instances at 60FPS in the Benchmark)
    [*:1jnin3vk]Draw underlying bone structure (for debugging)
    [*:1jnin3vk]Attach frame sounds
    [*:1jnin3vk]Attach frame callbacks
    [*:1jnin3vk]Framerate-irrelevant playback features ability to play and adjust your SpriterMC's playbackSpeed in real time, even reversing play direction altogether (by setting playbackSpeed to a negative)
    [*:1jnin3vk]Switch between Animations in the SpriterMC effortlessly (mySpriterMC.setAnimationByName("Running");)
    [*:1jnin3vk]Switch out TexturePacks at runtime to completely change the graphics used (TexturePack must contain the same folder/file structure as the SpriterMC's original TexturePack)
    [*:1jnin3vk]Friendly and familiar API featuring most (though not all) of the same methods of the Starling MovieClip
    [*:1jnin3vk]Queued commands that will execute once the SpriterMC is loaded and ready for display, so you don't have to wait on an event listener to start issuing calls such as play(), playbackSpeed = -1.5, currentFrame(), setAnimationByName(), etc. (You can still add an event listener to wait for the SpriterMC.SPRITER_MC_READY if you need to)

Acknowledgements

Special thanks to:


  • [*:1jnin3vk]GrimFang - for his valuable insight into transform concatenation when I was erroneously trying to use matrix math
    [*:1jnin3vk]Coworkers at NogginLabs for support and advice (Brent Meyers, Paul Burowski)

License

SpriterMC is licensed under the MIT License.

Download

The API and samples are available on GitHub:

https://github.com/SammyJoeOsborne/SpriterMC

Link to comment
Share on other sites

Sorry for the delay! Trying to get it completed as fast as possible, but keep finding slight errors with my playback (specifically playing backward). There are actually some inconsistencies with Spriter itself and the way it plays back animations...but I think I know what it's supposed to do, so I'm gonna integrate it that way.

I've now included ability to play more than one animation, and integrated looping/non-looping.

Once the playback irregularities are ironed out, I've still got to make it load assets individually or via spritesheet. Right now it only has spritesheet support.

While I anticipate it being easy to use, I suppose I'll need to make some sort of documentation as well.

I'm hoping no more than another week...but we shall see. Only able to work on it in the evenings after I get off work so it's been somewhat slow going.

I'll post here as soon as it's ready for public!

Link to comment
Share on other sites

Hey slopps,

I was very sad when I noticed the first iteration of the Spriter AS3 plugin was a commission job and it wasn't being maintained with each release of Spriter.

I'm very glad to see someone take up the mantle and contribute back to the community.

Thanks for the update, I really appreciate it!

Link to comment
Share on other sites

Glad there's interest. For that reason, I want to be certain this is the best, most efficient, easy-to-update/modify/extend, and flexible implementation possible.

The Spriter class (or Character class...haven't decided on naming yet) will be as similar to the Starling MovieClip class as possible, with many of the exact same methods. This should ensure it's familiar and easy to use.

While the foundation for interpreting and animating the SCML data is there (no more playback bugs!), I'm still refactoring some things and changing the way assets are managed to allow for multiple instances of the same character with little memory overhead.

I'm still hoping by the end of the week, but with documentation and such it could be a little longer.

Working as fast as I can!

Link to comment
Share on other sites

I've updated with the first public release of SpriterMC v.01!

If you check out the benchmark, you can achieve over 100 instances at 60FPS with extremely low memory and draw calls.

Check out the Readme referenced up top (located in the github repo) for full reference until I can get the AsDocs generated

Link to comment
Share on other sites

Excellent, thanks a lot Lucid! I love what you guys have done and I look forward to the next Spriter release.

@sHTiF: Can you verify what text is displayed under the "Display Driver Used" box provided in the benchmark? My guess is your flash player is either falling back to Software support or you are using a Debug version of the flash player in either Firefox, IE, or Safari.

If you view the file using a debug version of the flash player, the benchmark will run terribly. I'm guessing you're either using a debug version of the flash player or it is falling back on Software support instead of using the GPU.

The debug player is much slower than the release flash player, and it's been verified to cause a huge performance difference (Starling forum post):

http://forum.starling-framework.org/topic/spritermc-starling-extension-for-skeletal-animations-created-in-spriter#post-21919

I will update the benchmark and sample tomorrow night to issue a warning notification if a viewer is in fact using a debug version of the flash player (determined by evaluating Capabilities.isDebugger).

If you're not using a debug player, or if you're not in fact falling back to Software support instead of GPU, then I'm at a loss.

I included a last-resort warning in both the benchmark and sample to warn viewers if no GPU support was detected.

Did you happen to see the red warning bar, as displayed in the screenshot below?

Capture.PNG

Link to comment
Share on other sites

  • 2 weeks later...

Thanks!

I've updated the website and github with the latest versions.

After some major optimizations I've managed to get around 400+ instances with bones at 60 fps, and far more without bones. The simpler the animations and less body parts/keyframes, the more instances you can get. Also, for some reason I get far more in Firefox (which uses DirectX) than I do in Chrome (using openGL), not sure why exactly...anyone have any idea?

Benchmark with bones

Benchmark without bones

Basic Demo of features

Link to comment
Share on other sites

Nice benchmarks

I've been trying to use the API but I've run into a few errors when I try. First, under sammyjoeosborne/spriter/load/SimpleAssetLoader.as (38), _totalItems (uint) is passed to a new SimpleLoadItem(), but it expects a String.

Next in sammyjoeosborne/spriter/load/SimpleLoader.as (23) url is not defined anywhere.

Now seeing as how these haven't been updated in 10 days on git, I figure that I must be missing something, considering things seem to be working for you guys.

I only have flashdevelop on hand so I haven't been able to check out the .fla files, and I'm new to starling. Anything I should know about getting this API up and running?

EDIT: Looking further into some of these errors, it seems like these are legitimate issues that your compiler seems to be hiding away from you guys. After patching the ones I found, and loading an the scml file, and its textures, it seems to have gotten confused with trying to load an event.

Scml files and folders parsed. Sending to TexturePack
loading textures from individual files
START LOAD CALLED
ScmlData ready
TexturePack hero loaded all textures successfully.
TexturePack hero loaded all textures successfully.
[Fault] exception, information=TypeError: Error #1034: Type Coercion failed: cannot convert starling.events::Event@478b041 to flash.events.Event.
Fault, invokeEvent() at EventDispatcher.as:138

Can I get a fix?

EDIT2: Disregard that last part, that was my fault. My main class that took the sprite ready callback was importing the wrong library :) Hopefully this will help other people

Link to comment
Share on other sites

Hi speedtouch,

Thanks for your patience and also for the bug report...

So you're compiling from command line I take it? Is there a further stack trace than that?

The issue you reported stems from the compiler being confused about which "Event" class to use. The namespace for the native Flash event (flash.events.Event) is totally different than the Starling Event (starling.events.Event), and if you try to combine them the world blows up. Even using the full namespace to define what you ant tends to end in error in my experience...

I've had major issues with this, and to counter it, I've usually had to cast any Flash Event as * if I also need the Starling Event.

I've never tried compiling the benchmarks or code with command line...actually, the benchmarks won't work via command line due to the simple fact that there are assets in the FLA's that the code references.

I will look into this asap, and try to find a solution to your Event issues. I'm just curious how it's happening...it might just be matter of typing some arguments for event listeners as *. Can you pm me some further info about your system or the error?

Link to comment
Share on other sites

Oop! Thanks for the quick reply, I managed to solve it, and it was user-error of course.

My main starling class had: import flash.events.Event;

When it should have been: import starling.events.Event;

Easy mistake to make, I just hope my mistake might help someone in the future that runs into something similar.

There were a few more errors I had to fix to get the library to work flashdevelop. I'm running it on air SDK 3.5 so perhaps it's more strict. I just implemented what I would expect the compiler would have done:

simpleAssetLoad.as (38) col: 35 Error: Implicit coercion of a value of type uint to an unrelated type String.
_queue.push(new SimpleLoadItem(_totalItems, $url, $data));
_queue.push(new SimpleLoadItem(_totalItems.toString(), $url, $data));

SimpleLoader.as(23): col: 4 Error: Access of undefined property url.
url = _simpleLoadItem.url;
//url = _simpleLoadItem.url;

SpriterMC.as(497): col: 3 Error: Function does not return a value.
Animation.as(234): col: 3 Error: Function does not return a value.
Animation.as(355): col: 3 Error: Function does not return a value. (added return false;)
return null; // added it to the end of each function since we need to guarantee a return value

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...