- 在pixi中缩放spine导致图像变的模糊,代码为
spine.width=80
spine.height=80
之后的spine图像就变得模糊了。
- pixi.js中如何让一个spine完全追随另一个spine的某个骨骼?目前只做到了一个spine被另一个spine的剪裁影响,但是无法跟着骨骼移动。
希望可以得到解答。
spine.width=80
spine.height=80
之后的spine图像就变得模糊了。
希望可以得到解答。
I'm sorry, but without a concrete example that shows the issue, I'm unable to help. Can you please provide a simple .html
file hosted somewhere, that:
Mario 你好!我是主题发布者,我忘了上一个账号的密码。
我现在弄出来了一个托管的网址 https://spine-demo-jade.vercel.app/ 期待你的回复
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.
Davide 十分感谢你的耐心解答,许多部分都令我们受益匪浅。 也很抱歉没有给到一个完美的html,现在我们按照要求将全部内容放在了这里 onlyheartt9/spine-demo 希望可以得到帮助。再次致谢
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
Davide 感谢您的帮助!但是我们的项目实在是太紧张了,诚如您所说,我们现在使用的是pixi-spine,出现了一些使用方面的问题,但是将代码换成spine-pixi需要时间,希望你可以查看我们的源代码,给出一楼疑问的解决方法,如果这在代码层面是无法实现的,也请回复,我们需要紧急评估如何解决一楼出现的问题们,下个版本迫在眉睫了而每个人都忙的快要疯掉。十分感谢 T.T希望我的询问不会显得很没有礼貌。
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
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 版本的剪裁功能不生效了,请麻烦排查一下问题
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 感谢你的回复,原来是兼容性的问题,我去和程序沟通一下。
太恐怖了,我们之后尝试了pixi8,简直是一场灾难,它的动画融合功能完全是错的,我们不得不含泪使用7,我一整个月都在为了7的简陋而不断地做无用功……
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.
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.