Pixi spine with react - Black screen

[greencashew]

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:

import React from 'react';
import * as PIXI from "pixi.js";

window.PIXI = PIXI;
require("pixi-spine")

function Hero() {
  const app = new PIXI.Application();

  document.body.appendChild(app.view);

  app.loader
    .add('spineCharacter', './hero/export/hero.json')
    .load(function (loader, resources) {
      var animation = new window.PIXI.spine.Spine(resources.spineCharacter.spineData);

      // add the animation to the scene and render...
      app.stage.addChild(animation);

      if (animation.state.hasAnimation('walk')) {
        animation.state.setAnimation(0, 'walk', true);
        animation.state.timeScale = 0.1;
      }

      app.start();
    });

  return (
    <div/>
  )
}

export default Hero;

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?

[ivanpopelyshev]

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?

[suneelkumar91]

@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;

[suneelkumar91]

OUTPUT

https://user-images.githubusercontent.com/5219123/146924489-b05d3ad9-57fd-4688-8ad4-03a52e4a91b1.mp4