يتمّ عرض هذا الموقع بشكل أفضل في متصفّح حديث مع تمكين JavaScript.

Region Not Found in Atlas

Peach

Greetings,

I am attempting to use the java script run time (html5 canvas or webGL). Unfortunately I am unable to get it to work at all, as it says it cannot find the region. Full error below.

I tried exporting many times, made changes, adjusted names, did everything I could think of but didn't end up solving it.

this is my skeleton, atlas and images. Files are hosted here for 6 days.
https://filebin.net/vbluh383e3jpojxs

my error is as follows:
Error: Region not found in atlas: Body (region attachment: Body) at AtlasAttachmentLoader.newRegionAttachment (https://unpkg.com/@esotericsoftware/spine-canvas@4.0.*/dist/iife/spine-canvas.js:3851:15)

here is my script:
` // Load the Spine atlas and skeleton JSON data
var atlasUrl = "hero-ess.atlas";
var skeletonUrl = "hero-ess.json";

    // Create a new Spine atlas and skeleton
    var atlas = new spine.TextureAtlas(atlasUrl, function (path) {
        // Load image files here, if needed
        // return new Image();
    });

    var attachmentLoader = new spine.AtlasAttachmentLoader(atlas);

    // Load the skeleton JSON data
    var skeletonJson = await fetch(skeletonUrl).then(response => response.json());

    var skeletonData = new spine.SkeletonJson(attachmentLoader).readSkeletonData(skeletonJson);
    var skeleton = new spine.Skeleton(skeletonData);

    // Create a Spine WebGL renderer
    var renderer = new spine.webgl.SceneRenderer(canvasId, context);

    // Set the Spine skeleton and default animation
    var stateData = new spine.AnimationStateData(skeleton.data);
    var state = new spine.AnimationState(stateData);
    state.setAnimation(0, "idle", true);

    // Render the Spine skeleton
    renderer.camera.position.z = 10;
    renderer.drawSkeleton(skeleton);
    renderer.camera.position.z = 0;

    console.log("Canvas setup complete asynchronously");`

Nate

Your atlas has an entry named Body so the problem must be with how you load the TextureAtlas. Is this the class you are using?
EsotericSoftware/spine-runtimesblob/4.1/spine-ts/spine-core/src/TextureAtlas.ts#L38
There is only one parameter and it's the texture atlas text, not a URL. If you had the text (the contents of the .atlas file) you could do:

var atlas = new spine.TextureAtlas(atlasText);
console.log(atlas.findRegion("Body"));

Otherwise, do what the example code does:
EsotericSoftware/spine-runtimesblob/4.1/spine-ts/spine-webgl/example/barebones.html

Peach

Greetings,

I did try this suggestion. Now my issue is that the renderer is null.

Peach

Peach
TypeError: Cannot read properties of undefined (reading 'SceneRenderer')

Peach

I was able to resolve these problems. Something I am running into however, even after using the barebones example is that after the first duration the canvas becomes size 0, 0 with no apparent cause.

<script>
    window.onload = function () {
        let lastFrameTime = Date.now() / 1000;
        let canvas, context;
        let assetManager;
        let skeleton, animationState, bounds;
        let skeletonRenderer;

        async function load() {
            canvas = document.getElementById("canvas");
            context = canvas.getContext("2d");
            skeletonRenderer = new spine.SkeletonRenderer(context);

            assetManager = new spine.AssetManager();
            assetManager.loadText("hero-ess.json");
            assetManager.loadTextureAtlas("hero-ess.atlas");
            await assetManager.loadAll();

            let atlas = assetManager.require("hero-ess.atlas");
            let atlasLoader = new spine.AtlasAttachmentLoader(atlas);
            let skeletonJson = new spine.SkeletonJson(atlasLoader);
            let skeletonData = skeletonJson.readSkeletonData(assetManager.require("hero-ess.json"));

            skeleton = new spine.Skeleton(skeletonData);
            skeleton.setToSetupPose();
            skeleton.updateWorldTransform();
            bounds = skeleton.getBoundsRect();

            var animationStateData = new spine.AnimationStateData(skeleton.data);
            animationStateData.defaultMix = 0.2;
            animationState = new spine.AnimationState(animationStateData);

            animationState.setAnimation(0, "idle", true);

            requestAnimationFrame(render);
        }

        function render() {
            var now = Date.now() / 1000;
            var delta = now - lastFrameTime;
            lastFrameTime = now;

            if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) {
                canvas.width = canvas.clientWidth;
                canvas.height = canvas.clientHeight;
            }

            skeleton.x = canvas.width / 2;
            skeleton.y = canvas.height - canvas.height * 0.1;
            let scale = Math.min(canvas.width / bounds.width, canvas.height / bounds.height) * 0.8;
            skeleton.scaleX = scale;
            skeleton.scaleY = -scale;

            animationState.update(delta);
            animationState.apply(skeleton);
            skeleton.updateWorldTransform();

            context.clearRect(0, 0, canvas.width, canvas.height);

            skeletonRenderer.draw(skeleton);

            requestAnimationFrame(render);
        }

        load();
    }
</script>

Nate

You are saying canvas.width is zero the second time render is called? Does the same happen in the example? canvas is the HTML DOM element and you can see there is code that sets the width to clientWidth. If clientWidth is zero, something on your page must be squishing your DOM element.