Jump to content

brinsleylogic

Members
  • Posts

    6
  • Joined

  • Last visited

  • Days Won

    2

brinsleylogic last won the day on May 26

brinsleylogic had the most liked content!

brinsleylogic's Achievements

Newbie

Newbie (1/14)

2

Reputation

  1. Hey guys, I'm not sure how many people will actually get use out of this but I've been working on throwing an implementation together for use with a pixi.js project I'm working on. I've published it to npmjs and the repo on Github is public with (somewhat) documented code. It's feature-complete (yet) and still a work-in-progress but hopefully someone will find this useful
  2. Looks like I did need to handle the parent-transform stuff before I did the interpolation. Just wanted to drop an update before any wasted their time thinking about this
  3. I didn't know whether I should start a new topic, but I'm still battling with some key-framer interpolation logic. I've intermittently had an issue where it seems the sprites just seem to retrieve weird coordinates: I've managed to finally figure out what this is caused by: `parent` is different from one key-frame to the next, for example: Frame 0: Frame 1: Any suggestions on how to handle interpolation between these frames? At the moment I'm applying the parent transform to the child in my rendering layer, but I guess maybe I should do this at some point before the interpolation? I'm hoping to avoid that to keep it as performant as possible, though I guess I could test whether the parent id is different between the key frames and only apply the transform pre-interpolation if different? Just thinking out loud but I welcome any insight others may have on this problem Thanks. EDIT: After looking more carefully at the hierarchies I noted that the hierarchies are actually the same - it's the ordering that's different, which seems to be interfering with something on my end. Although, I guess the different-parent-between-frames scenario is still something that should be catered for?
  4. I had a play around with the pivot, positional and scale values. Look like I needed to invert the `y` and `scale_y` values too but it's looking good! Animation doesn't look as smooth as I'd expect but that's something I'll definitely be able to debug and fix. Thanks for the help mate; I can't explain how many headaches this has caused me
  5. Well, that's solved part of my issue, thanks I feel so dumb that it was THAT obvious! Was kinda hoping one thing would solve all my problems but I still can't seem to figure out why the legs and arms appear to have their positions swapped. I'm wondering if they're just parented to the incorrect bones... somehow... or whether I'm applying transformations to bones that I shouldn't be?
  6. 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
×
×
  • Create New...