Open greencashew opened 4 years ago
did you try to debug it? was json file loaded? were textures loaded? you know that app.start()
here is redudant because you didnt specify autoStart:false
in app params?
@greencashew I have resolved this issue by setting the position of spine object. My working component looks like:
import React from 'react';
import * as PIXI from "pixi.js";
import {Spine} from 'pixi-spine';
function Hero() {
const app = new PIXI.Application();
app.stage.interactive = true;
document.body.appendChild(app.view);
app.loader
.add('spineCharacter', './hero/export/hero.json')
.load(function (loader, resources) {
const animation = new Spine(resources.spineCharacter.spineData);
// set the position
animation.x = app.screen.width / 2;
animation.y = app.screen.height;
animation.scale.set(0.5);
app.stage.addChild(animation);
if (animation.state.hasAnimation('walk')) {
animation.state.setAnimation(0, 'walk', true);
animation.state.timeScale = 0.3;
}
});
return (
<div/>
)
}
export default Hero;
Hi Team, I try to use PIXI spine with the example: hero.zip from Spine. But when i try to load my simple component all i see is black screen:
<canvas style="touch-action: none; cursor: inherit;" width="800" height="600"></canvas>
My simple component look like that:
Spine json version: 3.8.55 Pixi-spine version: ^2.1.8 Pixi js version: ^5.2.4
Could you please help me with the issue?