A JavaScript API for the Spriter SCML/SCON animation data format.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
.gitignore
README.md
spriter.js

README.md

There is a new version of this project written in TypeScript. https://github.com/flyover/spriter.ts

spriter.js

Flattr this git repo PayPal donate button

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.