Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

Spine animations React app

dizzy

Hello dear friends,
i am tried to add some spine animation to my React app and it dont work (
Maybe i do something wrong?
i install npm packet "@esotericsoftware/spine-player": "⁴.2.18",
The component render a div but w/o any animation inside.
Please help me
Here is my code

import { useEffect, useRef } from "react";
import atlasData from "../../images/spine/ai_girl/ai_girl.atlas";
import jsonData from "../../images/spine/ai_girl/ai_girl.json";
import imageData from "../../images/spine/ai_girl/ai_girl.png";
import { SpinePlayer } from "@esotericsoftware/spine-player";

export default function SpineAnimationGirl() {
  const spineRef = useRef(null);
  const spineRoot = document.querySelector("#spine");
  useEffect(() => {
    if (spineRoot) {
      const spinePlayer = new SpinePlayer();
      spinePlayer.load({
        atlasText: atlasData,
        jsonText: jsonData,
        texture: imageData,
      });
      spinePlayer.trackEntry.setAnimation(0, "idle_anim", true);
      spineRoot.appendChild(spinePlayer.canvas);
    }
  }, []);
  return <div id="spine" style={{ width: "800px", height: "600px" }}></div>;``

Mario

I added code tags to your post 😃 (use 3 back ticks `)

I'm afraid I'm not super familiar with React. But your Spine code is completely incorrect. Did you ask ChatGPT how to do this?

Have a look at the web player docs. It shows you many examples:
http://en.esotericsoftware.com/spine-player

E.g. try to replace everything inside if (spineRoot) { with:

new spine.SpinePlayer("player-container", {
	jsonUrl: "http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pro.json",
	atlasUrl: "http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy.atlas"
});

Also note that you are using Spine Runtimes version 4.2 via NPM. The current release version is 4.1, while 4.2 is our beta release. Always fix the runtime version to the editor version you are using. More information here:

http://en.esotericsoftware.com/spine-versioning

dizzy

yes, that was ChatGPT )
thank you for your advise.
I have one more questions - it is about backgroundColor.
I tried ti set it to the transparentm but i get all white 🙁
I set it like it says at documentation

 new spine.SpinePlayer("player-container", {
        jsonUrl: "%PUBLIC_URL%/spine/ai_girl/ai_girl.json",
        atlasUrl: "%PUBLIC_URL%/spine/ai_girl/ai_girl.atlas",
        animation: "idle_anim",
        showControls: false,
        backgroundColor: "#00000000",
        alpha: true,
        animation: "idle_anim",
        success: function (player) {
          setTimeout(() => console.log("hello"), 400);
        },
      });

but i get this effect
https://monosnap.com/file/jcB86RJvMRmp9Np7GYvno02rQfApoQ

how cat i set the background to transparent?

thank you again )

dizzy

fixed with position absolute

Mario

Sorry for the late reply, I missed your reply! Looks like you've figured it out 🙂

dizzy

yes, thank you )
and then got and fixed another issue with rendering react component )

huan

const spineRoot = document.querySelector("#spine");
Don't using querySelector outside useEffect
better:

import atlasData from "../../images/spine/ai_girl/ai_girl.atlas";
import jsonData from "../../images/spine/ai_girl/ai_girl.json";
import imageData from "../../images/spine/ai_girl/ai_girl.png";
import { SpinePlayer } from "@esotericsoftware/spine-player";

export default function SpineAnimationGirl() {
  const spineRef = useRef(null);
  useEffect(() => {
   const spineRoot = spineRef.current
    if (spineRoot) {
      const spinePlayer = new SpinePlayer();
      spinePlayer.load({
        atlasText: atlasData,
        jsonText: jsonData,
        texture: imageData,
      });
      spinePlayer.trackEntry.setAnimation(0, "idle_anim", true);
      spineRoot.appendChild(spinePlayer.canvas);
    }
  }, []);
  return <div id="spine" style={{ width: "800px", height: "600px" }} ref={spineRef}></div>;