Jump to content
isaacburns

Spriter.JS JavaScript Implementation

Recommended Posts

implementation by @isaacburns

 

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.

Share this post


Link to post
Share on other sites

Excellent job!

But one of the animation from the demo looks glitchy. Is it due to the plugin or the animation itself ?

I am doing my best to use your plugin on my side but I get a "goog is not defined" as soon as I import the .js file.. Any idea ?

Excellent job again though :grin:

EDIT: Oops, I had forgotten to make a reference to Google closure library : https://developers.google.com/closure/library/docs/gettingstarted

Share this post


Link to post
Share on other sites

As "think1st" said in the previous thread about this, the coordinates can be a bit... wonky.

I managed to get it to work with a bit of a hack:

asset.folder = [];

var data = new spriter.Data().load(asset);

With that, the values were actually what I expected them to be, and it works perfectly.

Share this post


Link to post
Share on other sites

Hello!

I am trying to draw data from this lib using Pixi.js

This is part of my code:

            _.each(pose.object_array, function(object) {

                var sprite = //link to sprite

                if (sprite) {

                    sprite.alpha = object.alpha;

                    sprite.rotation = - object.world_space.rotation.rad;

                    sprite.pivot.set(sprite.width * object.pivot.x, sprite.height * (1 - object.pivot.y));

                    sprite.position.set(object.world_space.position.x, -object.world_space.position.y);

                    sprite.scale.set(object.world_space.scale.x, object.world_space.scale.y);

                }

            }, this);

Rotation, pivot and scale looks good - like in Spriter interface. But position is wrong and not like in Spriter interface. Why?

I placed all sprites in one container and trying to use world_space data.

P.S. Using local_space and containers(bones) hierarchy is impossible due to Pixi renderer. It is don't have zIndex and can draw sprites only сonsistently. But Spriter can draw sprite from container1 then from container2 then again from container1 - it is impossible in Pixi.

Update:

I tried to use local_space and containers(bones) hierarchy, ignoring zIndex. The result almost the same - rotations and scale of sprites identical to Spriter interface, but position is wrong (but little different from previous code)

Update:

Pixi have a plugin for zIndex, so the hierarchy problem can be fixed. https://github.com/pixijs/pixi-display

Share this post


Link to post
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...