spine-player.min.js を利用しています、atlasファイルのpng画像をbase64の形式で行けますでしょうか

luca

xxx.atlasファイルの中身二つxx.pngがあります、デフォルトはxxx.atlasファイルの相対位置から読み込んでいるとわかりましたが、こちらの画像をbase64の形式でロードすることはできますでしょうか？
自分は探しても、解決案が見つからりませんでした。どなかが助けてもらえませんか。ありがとうございます。

Misaki

luca 過去にデータURIを利用してスケルトンを表示する方法に関して紹介しているブログ記事がありますので、こちらが参考になるかもしれません:
https://ja.esotericsoftware.com/blog/Embedding-assets-with-Spine-Web-Player

Spinebot

はい、xxx.atlasファイルの中の画像をbase64形式でロードすることは可能です。以下の手順で行うことができます。

画像をbase64に変換:
まず、xx.png画像をbase64形式に変換します。これは、オンラインツールやスクリプトを使用して行うことができます。
base64データを使用して画像をロード:
Spineのランタイムを使用して、base64データを直接ロードすることができます。以下は、JavaScriptの例です。

// base64データを定義
const base64Image1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."; // xx.pngのbase64データ
const base64Image2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."; // xx2.pngのbase64データ

// 画像をロードする関数
function loadBase64Image(base64Data, callback) {
    const image = new Image();
    image.onload = () => callback(image);
    image.src = base64Data;
}

// SpineのAssetManagerを使用して画像をロード
const assetManager = new spine.AssetManager();
loadBase64Image(base64Image1, (image1) => {
    assetManager.addTexture("xx.png", image1);
    loadBase64Image(base64Image2, (image2) => {
        assetManager.addTexture("xx2.png", image2);
        // ここでSpineのアセットをロード
        assetManager.loadText("xxx.atlas");
        assetManager.loadText("xxx.json");
    });
});

Spineのアセットをロード:
base64データを使用して画像をロードした後、通常の方法でSpineのアセットをロードします。

この方法で、xxx.atlasファイルの相対位置からではなく、base64形式の画像データを使用してロードすることができます。

luca

Misaki
大変助かりました。ピッタリ完璧です！素晴らしい情報をいただきどうもありがとうございました！

luca

Misaki
先日のご回答どうもありがとうございました。すごく助かりました。
もう一つ聞かせていただきますが。。
これら四つのファイルをs3のURLから読み込みことに対しては、どうすればよろしいでしょうか。
自分もテストしましたが。
仮にxxx.atlasファイルがurlの形式で指定していると、xxx.pngとxxx2.pngは常にxxx.atlasの階層から読み込むようになっているようです。pngファイルはatlasとは同じの階層ではないので、読み込めなくて、ご都合の良い際ご回答いただければ嬉しいです！

Misaki

luca こんにちは！.pngファイルの階層が.atlasファイルの階層と異なる場合、.atlasファイルの中身に記述されている.pngファイルのパスを修正してください。
.pngファイルのパスは、.atlasファイルの中の一番上の行に記述されています。例えば以下のような書き出しになっています:

spineboy-pma.png
size:1038,206
filter:Linear,Linear
...

これを、もし1つ下の階層であるimagesというフォルダにpngを置いているとしたら

./images/spineboy-pma.png
size:1038,206
filter:Linear,Linear
...

のように書き換えてください。

luca

Misaki
ご回答ありがとうございます。
仮に階層の違いだけではなくて、URLのドメインも異なった場合はどうでしょうか？物理的に同じの場所に置いてない場合です。

Davide

luca
In general, the atlas and the respective images are expected to be served from the same host.
The images mentioned in the atlas file are loaded using the same path as the atlas file.
However, if the path of the image in the atlas is provided in the rawDataURIs object to the Spine Player, the image will be loaded using the respective value.
This value is generally expected to be a base64 URI, but an actual URL will work as well.

This example shows how to use it:

new spine.SpinePlayer("container", {
	skeleton: "assets/spineboy-pro.skel",
	atlas: "assets/spineboy-pma.atlas",
	animation: "run",
	...
	rawDataURIs: { "assets/spineboy-pma.png": "https://another-server.com/image.png" },
	// rawDataURIs: { "assets/spineboy-pma.png": "data:image/png;base64,iVBOR..." } // it works with base6uri too
});

luca

ご回答ありがとうございます。例えば、こんなケースがありまして。
四つのファイルともurlの形式であれば

下記のファイルのurlをcommonImage変数に格納しています。
SD_Lili_character.atlas:"https://luca-test-bucket-123.s3.ap-southeast1.amazonaws.com/images/deluxe/spine/characters/1/SD_Lili_character.atlas?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAW3MEC5LL5T44E2WR%2F20240626%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240626T020239Z&X-Amz-SignedHeaders=host&X-Amz-Expires=1800&X-Amz-Signature=f91ef3049f6009ece04d3d74033121a80b8027101c759dcfe897a11e60a9a391"
SD_Lili_character.json:"https://luca-test-bucket-123.s3.ap-southeast-1.amazonaws.com/images/deluxe/spine/characters/1/SD_Lili_character.json?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAW3MEC5LL5T44E2WR%2F20240626%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240626T020239Z&X-Amz-SignedHeaders=host&X-Amz-Expires=1800&X-Amz-Signature=053b3eb4be7c4271294757fa89fc9389bb0facc4caed1f2d195f64a27a173db1"
SD_Lili_character.png:"https://luca-test-bucket-123.s3.ap-southeast-1.amazonaws.com/images/deluxe/spine/characters/1/SD_Lili_character.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAW3MEC5LL5T44E2WR%2F20240626%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240626T020239Z&X-Amz-SignedHeaders=host&X-Amz-Expires=1800&X-Amz-Signature=5fd7abaf050bbcca5e9e78619b0a59aad9e71ddab4629ba969ae051a42782a37"
SD_Lili_character_2.png:"https://luca-test-bucket-123.s3.ap-southeast-1.amazonaws.com/images/deluxe/spine/characters/1/SD_Lili_character_2.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAW3MEC5LL5T44E2WR%2F20240626%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240626T020239Z&X-Amz-SignedHeaders=host&X-Amz-Expires=1800&X-Amz-Signature=6d660f38a6479236a1ed9a2311fcc7d3330ac86be968094e903ff0f98cebdb5d"

ソースコードはどう書けばよいでしょうか？
下記のような書き方を試したら、行けなかったです

const spinePlayer = new spine.SpinePlayer(spineCharacterId, {
　　jsonUrl: commonImage['SD_Lili_character.json'],
    atlasUrl: commonImage['SD_Lili_character.atlas'],
    rawDataURIs: {
      "SD_Lili_character.png": commonImage['SD_Lili_character.png'],
      "SD_Lili_character_2.png": commonImage['SD_Lili_character_2.png'],
    },
    backgroundColor: "#00000000",
　　...
    ...
})

二つのPNGロードエラーが出ています↓
結論：仮にatlasはurlの形式であれば、rawDataURIsのpngの値は無効になりそうです、atlasの同じ階層で探すことになってしまいます。

s3非公開なので、query parameterがなくすと、ファイル取得できません。
https://luca-test-bucket-123.s3.ap-southeast-1.amazonaws.com/images/deluxe/spine/characters/1/SD_Lili_character.png 403 (Forbidden)
https://luca-test-bucket-123.s3.ap-southeast-1.amazonaws.com/images/deluxe/spine/characters/1/SD_Lili_character_2.png 403 (Forbidden)

度々申し訳ございません。ご回答いただければ幸いです。ありがとうございます。
画面上に早く表示させるために、いろいろな形式で調整しています。

Davide

luca

I cannot test using your URLs since they are expired, or just don't work for me, but the rawDataURIs you are providing don't match the one the player is searching.
As you can see the player is searching for:
https://luca-test-bucket-123.s3.ap-southeast-1.amazonaws.com/images/deluxe/spine/characters/1/SD_Lili_character.png

So, the correct rawDataURIs object should be:

rawDataURIs: {
      "https://luca-test-bucket-123.s3.ap-southeast-1.amazonaws.com/images/deluxe/spine/characters/1/SD_Lili_character.png": commonImage['SD_Lili_character.png'],
      "https://luca-test-bucket-123.s3.ap-southeast-1.amazonaws.com/images/deluxe/spine/characters/1/SD_Lili_character_2.png": commonImage['SD_Lili_character_2.png'],
    },

Where I guess commonImage['SD_Lili_character.png'] and commonImage['SD_Lili_character_2.png'] contain the actual URL with query parameters too.

Even though it seems a little hacky, it should work.

luca

Davide
Thank you very much for your help. Your answer perfectly solved my problem. Thanks again.