PIXI v8 with Attachment

tsingwong

Our team is new here.
In spine-pixi-v8/example/slot-objects.html

tooth1.x = -10;
tooth1.y = -70;

We don't know where we can get these values from.

Thanks for your help!

Spinebot

The values for positioning a PixiJS object, such as tooth1.x = -10; and tooth1.y = -70;, are typically determined based on the desired position of the object relative to its parent slot or container. These values are often set manually by the developer to achieve the correct visual alignment within the animation. You can adjust these values by trial and error to see how they affect the positioning of the object in your animation. Alternatively, you can use tools like the Spine Editor to preview and adjust the positioning visually before applying the values in your code.

tsingwong

Spinebot
Can you upload screenshots to show where this value is in the Spine Editor?

Davide

tsingwong

Hello 🙂

Those values are manually inserted, you won’t find them in the Spine Editor.
That example shows that a PIXI Container named toothContainer is attached to the frontFist skeleton slot.
The toothContainer contains a PIXI Sprite named tooth1.

The toothContainer is positioned at the same location as the bone that holds the frontFist slot.
The tooth1 sprite, being a child of the container, will follow its parent's transformations, and is manually placed at (-10, -70) relative to it.

If this answer didn’t solve your issue, could you please clarify your question?

tsingwong

Davide
Oh.
This value (-10, 70) needs to be calculated by the developer, is it right?
And those values need to be adjusted little by little, such as position、rotation、scale.

tsingwong

And we find in the Spine-WebGL runtime, we do not need to calculate those values.

				let texture = assetManager.require("head.png");
				let textureRegion = {
					texture: texture,
					u: 0, v: 0, u2: 1, v2: 1,
					width: texture.getImage().width, height: texture.getImage().height,
					degrees: 0,
					offsetX: 0, offsetY: 0,
					originalWidth: texture.getImage().width, originalHeight: texture.getImage().height
				};
				let headSlot = this.skeleton.findSlot("head");
				let newHeadAttachment = headSlot.getAttachment().copy();
				newHeadAttachment.region = textureRegion;
				newHeadAttachment.updateRegion();
				headSlot.setAttachment(newHeadAttachment);

Davide

tsingwong

This value (-10, 70) needs to be calculated by the developer, is that right? And those values need to be adjusted little by little, such as position, rotation, and scale.

That's not entirely true. As I told you, the element added using addSlotObject will follow the bone position. As explained in the documentation, the added element's position will be connected to that of the bone, so you cannot directly change it. This is why it is advised to add a container using addSlotObject, and add further elements to this container. If you do not change the position of these further elements, they will be placed exactly where the bone is. If you need to shift their position, that depends on you. You can even add a 0-length bone exactly where you want to place your slot object and use that one.

And we find that in the Spine-WebGL runtime, we do not need to calculate those values.

They are two completely different functionalities. addSlotObject adds a PIXI object to the skeleton, while the code you pasted changes the texture used by the renderer.