You're welcome and thanks for providing us with the source files.

If you need any further help, feel free to ask, but as I said previously, we can provide help especially for our runtime spine-pixi or any other general questions about runtime animations 🙂

    Related Discussions
    ...

    Davide 感谢您的帮助!但是我们的项目实在是太紧张了,诚如您所说,我们现在使用的是pixi-spine,出现了一些使用方面的问题,但是将代码换成spine-pixi需要时间,希望你可以查看我们的源代码,给出一楼疑问的解决方法,如果这在代码层面是无法实现的,也请回复,我们需要紧急评估如何解决一楼出现的问题们,下个版本迫在眉睫了而每个人都忙的快要疯掉。十分感谢 T.T希望我的询问不会显得很没有礼貌。

      xiushihuatie

      I don't know the size of your project, but it shouldn't be very hard to migrate to spine-pixi.

      I'm definitely not an expert on pixi-spine. I guess the blurriness is due to min/mag filters.
      Try to access the pixi base texture and change them (the combination below shold give the sharpest solution):

      const baseText: PIXI.BaseTexture = resource.spineAtlas.pages[0].baseTexture;
      baseText.scaleMode = PIXI.SCALE_MODES.NEAREST;
      baseText.mipmap = PIXI.MIPMAP_MODES.OFF;

      Regarding following a bone, I don't see an easy way of doing that. spine-pixi hides some of our APIs and I'm not familiar with theirs.
      I don't see a way to inject logic before the rendering, neither an easy way to get the position of a bone apart from deriving it from a pixi transformation matrix.

      With the code below I was able to move the dragon skeleton with respect to the nnn bone of the card,

          const resource1 = await PIXI.Assets.load("/buzhuo/animation.json");
          const spine3 = new Spine(resource1.spineData);
          const spine4 = new Spine(resource.spineData);
          app.stage.addChild(spine3);
          spine3.position.set(app.renderer.width * 0.4, spine3.height + 100);
          spine3.state.setAnimation(0, "get3", true);
          // spine3.skeleton.findSlot('petcontainer').currentMesh.addChild(spine4)
          // spine4.position.set(app.renderer.width * 0.1, 400);
          const boneToFollow = spine3.skeleton.findBone('nnn');
          spine4.state.setAnimation(0, "idle", true);
          app.stage.addChild(spine4);
          const offsetX = 400;
          const offsetY = 330;
          const point = new PIXI.Point();
          PIXI.Ticker.shared.add(() => {
            point.set(boneToFollow.data.x, boneToFollow.data.y)
            boneToFollow.matrix.apply(point, point);
            spine4.position.x = point.x + offsetX;
            spine4.position.y = point.y + offsetY;
          })

      I have no idea if that's the right way of doing it in pixi-spine though.

        Davide 十分感谢,现在我们已经迁移过去了,然后出现了一些令人头疼的新问题:使用最新pixi.js 8.2.1版本配套的spine-pixi,动画中的裁剪功能并不生效 ,spine版本是4.2.33 以下是实地截取的图片
        https://media.discordapp.net/attachments/1248523217979576361/1258290517943390269/1.jpg?ex=668781dd&is=6686305d&hm=e19abdcea5bc64a9dd13bfbcbb38323388ca0156f2aa09f951e5383efa1232d6&=&format=webp https://media.discordapp.net/attachments/1248523217979576361/1258290518207758426/2.jpg?ex=668781dd&is=6686305d&hm=e2faf4592629529ec02e04b85a249d21a9a49771a3609123d322af88b79e70c8&=&format=webp

          xiushihuatie

          It's very difficult to understand what's going on without seeing the code.
          Can you show us the new version of the code?

          我们主要对pixijs做了升级,还有对应的spine-pixi进行了更换,但是效果上出现了问题,https://spine-demo-jade.vercel.app/,这个是我们原来的展现形式,都是通过动画和插槽实现的功能,但是pixijs8 版本的剪裁功能不生效了,请麻烦排查一下问题

          demo.zip
          1MB

          Thanks for providing us with the code.

          From what I can see, you just added the spine-pixi runtime to the package.json, but you are still using pixi-spine. spine-pixi is not yet compatible with Pixi 8, so if you want to use the latest version, you have to use pixi-spine as you are doing right now.

          Unfortunately, as far as I can see from the pixi-spine repository, clipping attachments are not yet fully functional. I suppose the best thing you can do to work with clipping attachments is to downgrade to version 7 of Pixi, right now.

            Davide 感谢你的回复,原来是兼容性的问题,我去和程序沟通一下。

            1 个月 后

            太恐怖了,我们之后尝试了pixi8,简直是一场灾难,它的动画融合功能完全是错的,我们不得不含泪使用7,我一整个月都在为了7的简陋而不断地做无用功……

              xiushihuatie

              I'm sorry to hear that. We're working with the pixi team to make a stable runtime that works with pixi8. Unfortunately, the changes to pixi8 were so many that it is taking longer than expected.
              I've recently made several PRs to stabilize the runtime, and clipping attachments should work now. However, since the pixi runtime for pixi8 is still under development, I don't think it's wise to use it right now.

              However, spine-pixi, our current official runtime, is stable and works efficiently with pixi7 offering the same functionalities of it. Are you encountering any problem using it?

                Davide 我们确实遇见了,这件事说来话长,因此我跳过一切前置,来向您传达到现在也没有解决的重大疑问:

                spine的导出是带有一个宽高的,在它的json文件里,我们起初以为是四个骨骼+图片设在四角就可以决定它的宽高,然后却发现并不是这样计算的,spine的宽高对我们来说非常重要,它到底由什么决定?

                All json properties are explained in the JSON export format guide in here.

                The height and width property of a skeleton are:

                width: The AABB width for the skeleton's attachments as it was in the setup pose in Spine. This can be used as a general size of the skeleton, though the skeleton's AABB depends on how it is posed.
                height: The AABB height for the skeleton's attachments as it was in the setup pose in Spine.

                It implies that they represent the rectangle containing the skeleton during the setup pose.

                If you need to know precisely the height of a certain animation, there are runtime APIs that can help you calculate it precisely.
                However, it's unclear to me which runtime and version you are using now.

                What do you need the height for? Knowing your goal might help us in giving you better advice.

                  1 个月 后

                  Davide Davide pixi7无法获得spine的某个骨骼坐标系,我们必须要写死一个宽高然后进行后续的招式和动画的制作。

                    xiushihuatie

                    You can transform Spine coordinates to Pixi coordinates and vice versa using the skeletonToPixiWorldCoordinates and pixiWorldCoordinatesToSkeleton functions respectively.

                    Moreover, you can get the bounds (x, y, width, height) of the current pose by using Skeleton.getBounds (or Skeleton.getBoundsRect). If you iterate over the frames of an animation, you can get the animation bounds and transform them to the Pixi coordinate system.

                      1 个月 后

                      Davide 十分感谢您的指教。 spine4.2的版本现在如何能够最无损地导出像素gif呢,期待您的回复

                        xiushihuatie

                        Hello again 🙂

                        There's nothing particularly complicated in the export settings. The higher the quality, the better the result. My advice is to have a look at the user guide's dedicated section and play with the settings. Be aware that depending on your settings, the file size can significantly increase.

                        You might also consider using the APNG format. As stated in the doc:

                        APNG is a lossless animated image format that supports transparency, so no loss of quality will occur.

                        However, keep in mind that APNG is not as widely supported as GIF.