Bounding box / clipping editing

SamTyurenkov

Hi everyone,

Is there a way to edit clipping with direct width/height input in editor? I want to make a perfect square clipping and can't find a way to do it without manually moving the clipping edges.

Also I want to copy the aspect ratio of a clipping in case its not square. probably should be done at runtime, right?

Spinebot

Currently, Spine does not provide a direct way to input width and height for creating or editing clipping attachments or bounding boxes. You need to manually adjust the vertices to achieve the desired shape, such as a perfect square. This is a known limitation, and while there have been suggestions to improve this functionality, it has not yet been implemented.

For maintaining or copying the aspect ratio of a clipping attachment, you would typically handle this at runtime. You can calculate the aspect ratio based on the vertices' positions and then apply transformations to maintain this ratio when needed.

SamTyurenkov

This helped with making a square clipping:
https://ru.esotericsoftware.com/forum/d/25787-how-do-i-make-perfect-90-deg-angles-with-clipping

SamTyurenkov

what I don't understand is:

i made a perfect square clipping:

when i insert it into webplayer squared canvas it appears 4-5x bigger:

    height = container.scrollHeight;
    spinePlayer = new spine.SpinePlayer("incoming-animation", {
        alpha: true, // Enable player translucency
        backgroundColor: "#00000000", // Background is fully transparent
        skeleton: skeleton,
        atlas: atlas,
        premultipliedAlpha: true,
        //preserveDrawingBuffer: true,
        defaultMix: 1,
        showControls: false,
        animation: "animation",
        showLoading: false,
        viewport: {
            debugRender: true,
            x: 0,
            y: 0,
            width: height,
            height: height,
            padTop: "0%",
            padLeft: "0%",
            padRight: "0%",
            padBottom: "0%",
        },
        success: function (player) {
            console.log("Explosion animation loaded successfully");
            spinePlayer.animationState.addListener({
                complete: (entry) => {
                    //emit('trigger-bombs');
                }
            });
            // Set initial animation speed
            spinePlayer.animationState.timeScale = 1;
        },
        error: function (player, reason) {
            console.error("Failed to load Spine animation:", reason);
        }
    });

DOM element is:

<canvas class="spine-player-canvas" style="display:block;width:100%;height:100%" width="945" height="945"></canvas>

SamTyurenkov

It helped to set fixed width and height:

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

but i don't understand why i had to use 2500 (double of the asset width height here), its not explained in documentation. also how do I get asset width/height at runtime?

Nate

Avoid clipping your whole skeleton whenever possible. It uses a lot of CPU.

The position and size of the viewport is in world coordinates. Rulers ctrl+shift+R in Spine can help you visualize it.

The player viewport defines the portion of the skeleton (in world coordinates) that will be visible. The viewport is scaled to fit the player's size.

I can't tell from the information provided why your skeleton was much larger than expected. If your atlas uses images that are smaller or larger than what was used in Spine, you should set the scale to match:

<script>
new spine.SpinePlayer("player-container", {
      skeleton: "/files/spineboy/export/spineboy-pro.json",
      atlas: "/files/spineboy/export/spineboy.atlas",
      scale: 0.5
});
</script>

Nate

In 4.3-beta we've added a viewport.clip setting, eg:

new spine.SpinePlayer("container", {
	skeleton: "assets/spineboy-pro.json",
	atlas: "assets/spineboy-pma.atlas",
	premultipliedAlpha: true,
	backgroundColor: "#cccccc",
	viewport: {
		debugRender: true,
		x: -115,
		y: 385,
		width: 140,
		height: 140,
		clip: true // <-- This is new!
	},
	debug: {
		meshes: true
	},
	showControls: true,
});

With clip: false:

With clip: true:

Hopefully this helps people avoid using clipping attachments for a viewport. This kind of clipping for rendering has no performance cost at all.