Davide
import React, { useEffect, useRef } from 'react';
import { observer } from 'mobx-react';
import { Application, Assets } from 'pixi.js';
import {
AtlasAttachmentLoader,
SkeletonBinary,
SkeletonJson,
Spine,
} from '@esotericsoftware/spine-pixi';
import { useMount } from 'ahooks';
const PixiComponent = () => {
const ref = useRef<any | null>(null);
useMount(async () => {
var app = new Application({
width: window.innerWidth,
height: window.innerHeight,
resolution: window.devicePixelRatio || 1,
autoDensity: true,
resizeTo: window,
backgroundColor: 0x2c3e50,
hello: true,
});
document.body.appendChild(app.view);
// Pre-load the skeleton data and atlas. You can also load .json skeleton data.
Assets.add({
alias: 'spineboyData',
src: 'https://funimg.pddpic.com/common/cartoon_activity/fruiter/water_ani_spine/kettle_and_water.skel',
});
Assets.add({
alias: 'spineboyAtlas',
src: 'https://funimg.pddpic.com/common/cartoon_activity/fruiter/water_ani_spine/water_vfx_optimized_export.skel',
});
await Assets.load(['spineboyData', 'spineboyAtlas']);
const atlas = Assets.get('spineboyAtlas');
const attachmentLoader = new AtlasAttachmentLoader(atlas);
const binaryLoader = new SkeletonBinary(attachmentLoader);
const skeletonData = binaryLoader.readSkeletonData(
Assets.get('spineboyData'),
);
const spineboy = new Spine(skeletonData);
spineboy.x = window.innerWidth / 2;
spineboy.y = window.innerHeight / 2;
spineboy.state.setAnimation(0, 'watering_01', true);
app.stage.addChild(spineboy);
});
return null
};
export default observer(PixiComponent);
The code looks like this. Could it be a problem with skel and atlas
