Spriter.JS JavaScript Implementation

[lucid]

implementation by @isaacburns

 

spriter.js

A JavaScript API for the Spriter SCML/SCON animation data format.

https://cdn.rawgit.com/flyover/spriter.js/master/demo/index.html

Supported Features

• Basic animations
• Bone animations
• All curve types (Instant, Linear, Quadratic, Cubic, Quartic, Quintic, Bezier)
• Points
• Collision Rectangles
• SubEntities
• Events
• Sounds
• Variables
• Tags
• Character maps
• Animation Blending

How to use it

In the initialization:

var scon = JSON.parse(scon_text); // read and parse SCON file
var data = new spriter.Data().load(scon); // create and load Spriter data from SCON file
var pose = new spriter.Pose(data); // create Spriter pose and attach data
pose.setEntity("player"); // set entity by name
pose.setAnim("idle"); // set animation by name

In the animation loop:

var dt = 1000 / 60; // time step in milliseconds
pose.update(dt); // accumulate time
pose.strike(); // process time slice

Refer to the demo for how to blend animations, draw images, play sounds and respond to events, access tags and variables, etc.

[PixelPicoSean]

@lucid As far as I know this one does not have the same API of C++/C# runtime, is that the final officially support or you're going to improve it?

[lucid]

@PixelPicoSean The C++ and C# runtimes also have different public interfaces from eachother.  This is officially fully supported and feature complete.  If there are any errors we will do what we can to help get it fixed.  

[think1st]

The library seems to apply some transformations to positions and related attributes (it doesn't go with the Spriter coordinate system directly). For example, the y axis seems to be flipped in both positions and the pivot points, and I'm not sure but it seems like all objects are translated to the bottom and right by half their width for some reason, even though the pivot point in spriter is defined in the top left.  Is there some information what kind of transformations are applied exactly? I need it so I can switch out single images in an entity with images that have different pivot points than the one currently used in an animation, and I need to transform the pivot points of those images (defined in Spriter) such that in the end the positions match the state as if the images were in fact switched out in the animation itself.

Then again, an easy way to switch out images at runtime would be good, too (not with character maps, otherwise you'd need to create one for every single variable image you have for each body part of an entity).

[Mike at BrashMonkey]

This topic have been moved here: