Spine implements and plays physics transparently. In the simplest case, you just play the animation without considering physics. However, if you are using a game library such as PixiJS or Phaser where a Spine skeleton is usually contained within a game object, you must understand that movements and rotations applied to the game object don't directly affect the physics state of the skeleton.
To be more precise:
- If you increment
gameObject.x, physics constraints aren't affected.
- If you increment
gameObject.skeleton.x, physics constraints will take effect.
However, in your game engine, you typically want to move the game object, not the skeleton.
To make the physics constraints affect the skeleton without actually moving the skeleton, there are two main APIs:
skeleton.physicsTranslate(x: number, y: number) for translationsskeleton.physicsRotate(x: number, y: number, degrees: number) for rotations
There is an additional consideration to keep in mind: you need to transform the distance from the game engine space to the skeleton space. Usually, we have utility functions in our runtime to handle this transformations. For example, in Phaser, we have:
skeletonToPhaserWorldCoordinates(point: { x: number; y: number })phaserWorldCoordinatesToSkeleton(point: { x: number; y: number })
You can refer to the following examples that use the APIs mentioned above:
- Celestial Cirscus, the same skeleton in the blog post to show you
skeleton.physicsTranslate usage.
- Control Bones: to show you the coordinate transformation APIs usage.
