https://github.com/flyover/spriter.js

A JavaScript API for the Spriter SCML/SCON animation data format.
https://github.com/flyover/spriter.js

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/flyover/spriter.js
• Owner: flyover
• Created: 2012-11-17T03:20:43.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2018-03-12T21:18:52.000Z (over 8 years ago)
• Last Synced: 2024-04-15T00:19:38.709Z (about 2 years ago)
• Language: JavaScript
• Homepage:
• Size: 3.14 MB
• Stars: 106
• Watchers: 18
• Forks: 20
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

spriter.js

==========

[![Flattr this git repo](http://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=isaacburns&url=https://github.com/flyover/spriter.js&title=spriter.js&language=JavaScript&tags=github&category=software) [![PayPal donate button](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=H9KUEZTZHHTXQ&lc=US&item_name=spriter.js&currency_code=USD&bn=PP-DonationsBF:btn_donate_SM.gif:NonHosted "Donate to this project using Paypal")

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.