isaacburns Posted January 25, 2016 Report Share Posted January 25, 2016 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. RunnerPack 1 Quote Link to comment Share on other sites More sharing options...
Kromah Posted February 7, 2016 Report Share Posted February 7, 2016 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 EDIT: Oops, I had forgotten to make a reference to Google closure library : https://developers.google.com/closure/library/docs/gettingstarted Quote Link to comment Share on other sites More sharing options...
FManga Posted February 25, 2016 Report Share Posted February 25, 2016 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. Quote Link to comment Share on other sites More sharing options...
dejavu1987 Posted March 6, 2017 Report Share Posted March 6, 2017 Hey @isaacburns the implementation looks awesome. I think pixijs integration is not far away from here. Is there already an implementation for pixijs yet? Quote Link to comment Share on other sites More sharing options...
gregmax17 Posted March 8, 2017 Report Share Posted March 8, 2017 This is neat! Great work! But now I have to ask: any chance there will be a ThreeJS plugin? (PLEASE!) Quote Link to comment Share on other sites More sharing options...
AlexSor Posted April 9, 2017 Report Share Posted April 9, 2017 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 Quote Link to comment Share on other sites More sharing options...
Aaike64 Posted July 31, 2023 Report Share Posted July 31, 2023 Hello guys. I am going to start a project for a mobile app, I bought spriter pro some years ago and I want to use it. Whats the current implementation for HTML and JS today? this post it's old Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.