Jump to content

Search the Community

Showing results for tags 'typescript'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Spriter General
    • Spriter
    • Help and Tutorials
  • Art Packs
    • Spriter Animated Art Packs
  • Developers
    • Spriter Implementations
    • Developer Help
  • General
    • Open Topic
    • Your Works
  • Jobs, Freelance, and Collaboration
    • Portfolios
    • Job offers (Paid)

Product Groups

  • Software
  • Animated Art Packs
  • Bundles
  • Environment Art Packs
  • 3D Art Packs


  • Software
    • 3rd Party Productivity Software
  • Paid Spriter Animations
    • Paid Spriter Art Pack Skins
  • Paid Environment Art
  • Free Spriter Animations
    • Free Art Pack Skins
  • Free Environment Art
  • 3D Art for games

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 2 results

  1. Hey guys, I've played around with Spriter on and off for a few years but never really done much with it, but recently I decided to try and throw something together to get an animation loaded and playing in pixi.js. After weeks of playing around and a bunch of googling, I have... something... but I'm not 100% sure what's wrong with my implementation here. Any pointers in the right direction would be great! Everything seems offset by 180 degrees, not entirely sure why though. Arms and legs appear to be positioned on the opposite sides. Hands and feet are attached to the wrong appendages. Interpolating between the first and second keyframes causes all object to scale and rotate in a bizarre (but consistent) manner, all other frames play as expected given the above issues. Given the last point, I'm making a major assumption my my interpolation methods are all working fine and this is just a display-specific set of issues (I get the same even if I just return the state of the first keyframe never update the animation state). From my searches and some experimentation I've made a few other assumptions: All bones excluding the first bone in the bone_refs array have their parent's transform values applied to them. All object_refs have the parent bone transform values applied. All Sprites have the same physical parent (flattened scene graph). I've used the SpriterDotNet repo too to try and help me solve some problems but I'm not sure it will help solve the problems I currently face. I also tried playing around with the existing spriter.js and spriter.ts implementations but I couldn't even get the demo loading and running; looking at the demo source there's also a hell of a lot of set up and not even sure how much of it is even necessary to get something working. Here's my function that applies the parent bone state to the children (bones, objects): private applyParentProps(child: IBoneState | ISpriteState, parent: IBoneState): void { const x = child.x * parent.scale_x; const y = child.y * parent.scale_y; const parentAngle = fromDegrees(parent.angle); const sin = Math.sin(parentAngle); const cos = Math.cos(parentAngle); child.x = ((x * cos) - (y * sin)) + parent.x; child.y = ((x * sin) - (y * cos)) + parent.y; child.scale_x *= parent.scale_x; child.scale_y *= parent.scale_y; if (child.angle != null) { child.angle = Math.sign(parent.scale_x * parent.scale_y) * (child.angle + parent.angle) % 360; } } This just manipulates the data structure for the child. For the objects (Sprites), I use this method to handle applying that data structure: private applyState(component: Component, state: ISpriteState): void { // `this._bones` is just the array of bone data interpolated for the current time. // `state` is the object data interpolated for the current frame. this.applyParentProps(state, this._bones[state.parent]); component.position.set(state.x, state.y); component.scale.set(state.scale_x, state.scale_y); if (state.z_index != null) { component.zIndex = state.z_index; } if (state.angle != null) { component.rotation = fromDegrees(state.angle); } // Update the texture. if (state.file != null && state.folder != null) { const fileData = SpriterCache.getFile(state.folder, state.file); if (component.name !== fileData.name) { component.name = fileData.name; component.texture = TextureCache[fileData.name]; component.width = fileData.width; component.height = fileData.height; component.pivot.set( fileData.pivot_x * fileData.width, fileData.pivot_y * fileData.height ); } } } Am I missing something super obvious? Am I being dumb here? Thanks in advance
  2. Hi, some time ago I wrote Spriter player for Phaser engine. It is written in Typescript and here at GitHub is repository: https://github.com/SBCGames/Spriter-Player-for-Phaser. It supports only features from free version, as at time of writing I had only free one. You can see working sample on my blog here: http://sbcgamesdev.blogspot.cz/2015/09/phaser-tutorial-phaser-and-spriter.html Beside this I wrote Spriter Minimizer. It is utility to shrink Spriter output (https://github.com/SBCGames/SpriterMinimizer) It is kind of "work in progress", but it can already minimize xml output or convert it into binary. These are output sizes for test anim (grey guy): 346 kb standard, pretty printed, Spriter output, 240 kb Spriter output with pretty printing unchecked, 165 kb after minimization with SpriteMinimizer (with default definitions.xml), 74 kb when converted into binary format with smallOffset switch on. 2016-02-20 UPDATE: New version now includes Spriter Pro features: blog: http://sbcgamesdev.blogspot.cz/2016/02/phaser-tutorial-spriter-pro-features.html GitHub: https://github.com/SBCGames/Spriter-Player-for-Phaser Currently it can load scml and scon files. Support for minimized files (made with Spriter Minimizer) is temporarily down.
  • Create New...