Esoteric Software

dizzy · 28 août 2023

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

dizzy · 23 août 2023

fixed with position absolute

dizzy · 23 août 2023

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 · 23 août 2023

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

dizzy