xiushihuatie
Hello and thanks for providing us with the demo.
However, it's quite hard for us to debug your solution since everything is bundled in a Single Page Application using React.
The best thing you can do is allow us to access the source code of your SPA or, even better, providing us with a minimal reproduction project in a plain .html
file.
Anyway, I was able to extract some information from your project and found that you are using pixi-spine
and not spine-pixi
. We are the maintainers of the latter and able to fully support you if you use our official runtime. You can find the documentation at this page.
Scaling spine in pixi causes the image to become blurry.
I tried to load your skeletons with our spine-pixi
runtime and after changing the skeleton size as you do, the skeleton was sharp as it should without any blurriness effects.
How to make one spine completely follow a certain bone of another spine in pixi.js? Currently, only one spine is affected by the clipping of another spine, but it cannot move with the bones.
The easiest way you can achieve that is by using the addSlotObject
method. Just by this single line of code:
buzhuo.addSlotObject("petcontainer", yazu);
The buzhuo
spine game object will automatically take care of updating the yazu
spine game object transform as if the latter was placed into the petcontainer
slot.
Be aware of two more things.
First, if you want to be able to modify the yazu
game object, you probably want to add it to a pixi Container
.
const container = new PIXI.Container();
container.addChild(yazu);
buzhuo.addSlotObject("petcontainer", container);
In this way the buzhuo
spine game object will automatically update the container
transform, and you will be free to modify the yazu
game object as you wish.
The second caveat is that if the animation adds/removes an attachment, the game object added using addSlotObject
won't appear/disappear. You are responsible for managing its visibility. To achieve this result you can use the afterUpdateWorldTransforms
that gives you the possibility to execute some code right before the rendering occurs.
You can do that with this two lines of code:
const petcontainer = buzhuo.skeleton.findSlot("petcontainer");
spineboy.afterUpdateWorldTransforms = () => yazu.visible = Boolean(petcontainer.attachment);
If you don't want to use the addSlotObject
to change the position of a skeleton based on a bone of another skeleton, you will be able to achieve the same result by using beforeUpdateWorldTransforms
or afterUpdateWorldTransforms
. These two methods are simple but powerful because they let you modify the world based on the skeleton state and vice versa.
Finally, your skeletons are exported to 4.1 version. The methods mentioned above are from our spine-pixi
4.2 version that expects a 4.2 skeleton as input. Since I was still able to load your skeleton using our latest runtime version, my advice to you is to update your Spine editor version to the latest 4.2.