Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

How to set PNG images for spine player ^ 4.2.70 in React

17573207179

Spinebot

To set PNG images for the Spine Player in a React application, you can use the rawDataURIs configuration property to embed your PNG images directly in the JavaScript. This method allows you to include the image data as a base64 encoded string. Here's an example of how you can do this:

import React, { useEffect } from 'react';
import { SpinePlayer } from 'spine-web-player';

const SpineComponent = () => {
  useEffect(() => {
    new SpinePlayer("player-container", {
      jsonUrl: "path/to/your/spineboy-pro.json",
      atlasUrl: "path/to/your/spineboy-pma.atlas",
      rawDataURIs: {
        "spineboy-pma.png": "data:image/png;base64,<base64 encoded image data>"
      }
    });
  }, []);

  return <div id="player-container" style={{ width: '100%', height: '100%' }} />;
};

export default SpineComponent;

Make sure to replace "path/to/your/spineboy-pro.json" and "path/to/your/spineboy-pma.atlas" with the actual paths to your JSON and atlas files, and <base64 encoded image data> with the base64 encoded string of your PNG image.

17573207179

Directly setting the jsonURL and atlasURL does not output any images. Is this related to the version of the file exported by the spine editor? Currently, the exported version is 3.8.75, while my spine player version is 4.2.70

Davide

17573207179

As explained here:

The major and minor version for the Spine editor used to export JSON or binary data must always match the Spine Runtimes version. If not, the Spine Runtimes will not be able to read the data. This dependency is very important.

So, please, upgrade your assets to 4.2 and then try again.

17573207179

Davide Thank you, I'll give it a try

17573207179

Davide Can't install the specified version 3.8. The minimum selection is version 4.0

17573207179

Spine player did not load the image in the React project, but all other content was loaded. The same configuration image was loaded on the HTML page

Spine player version 4.2.7, could you please help me take a look? Thank you

Spinebot

To resolve the issue of the Spine player not loading images in your React project, ensure that the version of the Spine player matches the version used to export your Spine assets. The major and minor versions of the runtime and the editor must match, as mentioned in the context. If your assets were exported with a different version, you may encounter loading issues. Additionally, check for any CORS errors or incorrect file extensions, such as using .altas instead of .atlas, which can prevent images from loading. Also, ensure that your React component is correctly set up to initialize the Spine player after the DOM element is available.

17573207179

Spinebot Both. atlas and. json are accessible without CORS errors, and the version is consistent with 4.2. It is feasible on HTML pages, but not on React

Davide

17573207179

Hello 🙂

I’ve merged the new thread you created into this one since it relates to the same issue.

I’m not entirely sure if you were able to export the assets to version 4.2, but considering you demonstrated that the player is working for you in the plain HTML version, I assume both the player and assets are at 4.2.

From the screenshots you’ve provided, I don’t see any obvious issues with your code, and embedding a Spine player into React works for me.

That said, please keep in mind that while providing screenshots of code is quicker for you, it doesn’t enable us to provide high-quality support, as we can only visually evaluate the code. As I previously suggested, the best way to get higher-level support is to share a project that reproduces your issue. You can attach an archive here or send it to contact@esotericsoftware.com.

I’d really like to help you, but I need to be able to reproduce the issue on my end.

17573207179

It was found that installing @ esotericsoftware/fine pixi would have an impact