Rendering flow - Spine Web Player

SamTyurenkov

Hi everyone,

Would you please tell me if this is correct flow: If I make a scene in a web player, different skeletons meant to interact with each other?

Every skeleton should have its own player, right? Basically I just take user input or whatever game event happens and pass it to a skeleton to play specific animation?

What about moving in the world and rendering multiple skeletons at the same scale?

I have two characters, both of them from an equal sized png and their scale is approximately the same.
I used two spine renderers with similar configs and viewport sizes, but one of character renders bigger then the other one.

        var german = new spine.SpinePlayer("first-character", {
            alpha: true, // Enable player translucency
            backgroundColor: "#00000000", // Background is fully transparent
            skeleton: "/files/1/export/menu/skeleton.json",
            atlas: "/files/1/export/menu/skeleton.atlas",
            premultipliedAlpha: true,
            preserveDrawingBuffer: true,
            defaultMix: 1,
            showControls: false,
            viewport: {
                width: 600,
                height: 600,
            },
            success: function (player) {
                console.log("Spine animation loaded successfully");
            },
            error: function (player, reason) {
                console.error("Failed to load Spine animation:", reason);
            }
        });

Misaki

SamTyurenkov You are correct that the Spine Web Player can only display a single skeleton. You are also right that if you want to display multiple skeletons, you need multiple players. However, if you want to display more than one skeleton and have them work together like you do, it is better to use other spine-ts based runtimes like spine-webgl. Davide's answer in the following thread would be helpful:
h5上使用 spine player，需要在同一场景内创建多个spine，有没有推荐的做法

SamTyurenkov

@Misaki right now I dont need interactions between skeletons, but I want to achieve equal mesh sizes in two players.

Is that possible somehow? With web player or other ts player? In initialization properties I only found scale, but IDK how to adjust that to have equally sized characters?

Should I add a bounding container to both characters?

Davide

SamTyurenkov

By default, the Spine Player calculates the viewport based on the current animation.

Even if the characters are the same size, an animation with a frame larger than another will result in a bigger viewport, making the skeleton appear smaller in comparison.

If both characters are the same size in the editor, the easiest way to maintain consistency is to use the same viewport size and position. You can read more about viewports here.

If using the same viewport doesn't solve the issue, there may be other factors at play that you haven't mentioned. In that case, the best approach would be to share an example that reproduces the issue or provide your assets for review.

SamTyurenkov

@Davide i think its because of a mesh trace, one character is s bit wider. And its mesh is a bit wider.

To fit both of them in a 600x600 container spine player scales the wider one a bit down.

I want to override this behavior somehow, or what is the correct flow?

Davide

SamTyurenkov

If you set a fixed sized viewport, the player centers that viewport within the html canvas and completely ignores the size of your skeleton.

I'll show you an example. This is a screenshot of Spineboy in the editor with a 100x100 square with its bottom left corner centered on the origin:

If I set the viewport in the player like the white square in the editor:

viewport: {
	debugRender: true,
	x: 0,
	y: 0,
	width: 100,
	height: 100,
	padLeft: "0%",
	padRight: "0%",
	padTop: "0%",
	padBottom: "0%"
},

The result is the following:

debugRender is true to show the viewport in red. As you can see, the given viewport is centered within the player, completely ignoring the current pose/animation.

SamTyurenkov

@Davide so, I still didnt understand what do I have to do?

it renders like this if I provide viewport width & height values and also the same if I dont provide width and height

And if I change resolution, one of them becomes bigger

Davide

SamTyurenkov

A viewport consists of x, y, width, and height.
The x and y coordinates represent the bottom-left corner relative to the skeleton's origin.

It’s very likely that you haven’t provided values for x and y, which makes your viewport invalid. As a result, it defaults to the automatically calculated viewport.

SamTyurenkov

Davide Oh, ok, I thought each property individually fallbacks to default