Using spine/Atlas

[ramkrishnakuldeep]

Is there a way to use spine data (animated images) in your project.

[ramkrishnakuldeep]

spine_selfEmoji-s1e0.json

and there is one more file .atlas, the content is as below spine_selfEmoji-s1e0.png size: 368,521 format: RGBA8888 filter: Linear,Linear repeat: none 2_ features rotate: false xy: 232, 59 size: 134, 138 orig: 138, 143 offset: 4, 5 index: -1 2_effect_0 rotate: true xy: 232, 221 size: 41, 27 orig: 41, 27 offset: 0, 0 index: -1 2_effect_1 rotate: true xy: 187, 11 size: 46, 143 orig: 46, 143 offset: 0, 0 index: -1 2_effect_2 rotate: false xy: 2, 2 size: 183, 88 orig: 184, 90 offset: 1, 2 index: -1 2_effect_3 rotate: true xy: 263, 199 size: 320, 97 orig: 322, 97 offset: 2, 0 index: -1 blush_2 rotate: false xy: 2, 92 size: 228, 170 orig: 231, 175 offset: 0, 5 index: -1 face_0 rotate: true xy: 2, 264 size: 255, 259 orig: 255, 267 offset: 0, 8 index: -1

[hairyf]

You can use a custom renderer to add new rendering elements https://vue3-pixi.vercel.app/guide/api-reference/renderer.html#using-a-custom-element

[ramkrishnakuldeep]

I have created a custom component for Spine

Initializing a component

import 'pixi-spine';
import { Container, Assets } from 'pixi.js';
import { Spine } from 'pixi-spine';

class CustomSpine extends Container {
    constructor(spineAsset, setting) {
        super();
        this.name = 'Container';
        Assets.load(spineAsset).then((resource) => {
            console.log(resource);
            const spine = new Spine(resource);
            spine.skeleton.setSkinByName('default');
            spine.skeleton.setSlotsToSetupPose();
            spine.visible = true;
            spine.position = { x: 0, y: 0 };
            spine.alpha = 0.6;
            spine.scale.set(1);
            spine.state.setAnimation(0, 'ani', false);
            spine.interactive = true;
            this.addChild(spine);
        });
    }
}

export default CustomSpine;

Registering the component

renderer.use({
    name: 'CustomSpine',
    createElement: (props) => new CustomSpine(props.spineAsset, props.setting),
    // nextSibling
    // insert
    // setElementText
    // setText
    // parentNode
});

adding the compoent to canvas <custom-spine v-if="player?.emoji" :spineAsset="getEmojiAsset(player.emoji)" ></custom-spine>

But i am getting Spine error

pixi-spine.js?v=aff288ae:21985 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'substr')
    at detectSpineVersion (pixi-spine.js?v=aff288ae:21985:24)
    at Spine4.createSkeleton (pixi-spine.js?v=aff288ae:22097:17)
    at new _SpineBase (pixi-spine.js?v=aff288ae:1184:10)
    at new Spine4 (pixi-spine.js?v=aff288ae:22095:14)
    at CustomSpine.ts:11:18

my version

"pixi-spine": "^4.0.4",
"pixi.js": "^7.3.2",

Could you please guide me through this issue