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
