Jump to content

Search the Community

Showing results for tags 'pixi.js'.

  • 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. Hello, are there any plans of a pixi.js implementation. I am asking because my favorite engine is using pixi.js - gdevelop. Gdevelop is an open source alternative to construct2. It Builds html5 games, ready for intel XDK packaging. It's editor runs on both windows and Linux. Unlike construct2 it can also build native games - for windows and linux. In the future for mac as well. Since last year it has matured quite a bit- also got open sourced. Please give it a try and let us know what you think. http://compilgames.net/ it's github page (see its getting constant updates) https://github.com/4ian/GD Please consider making an implementation. Unlike any of the other engines you support, this one is open source. You can integrate spriter within its workflow better than any of the others. It is completely free, and you dont have to be a programmer to use it.
  • Create New...