- Đã chỉnh sửa
パッキングしたテクスチャからサムネイルを表示したい
Web上でキャラクターを表示しているのですが、
キャラクターの一覧ページでは、アニメーション等の情報を省いて動かないサムネイルを表示するようにして
ページの読み込み速度を早くしたいと考えています。
■現状
・環境・・・Nuxt.js
・以下のようにキャラクターを表示しています。
new spine.SpinePlayer(`character-${this.id}`, {
jsonUrl:
"http://esotericsoftware.com/files/examples/4.0/spineboy/export/spineboy-pro.json",
atlasUrl:
"http://esotericsoftware.com/files/examples/4.0/spineboy/export/spineboy.atlas",
showControls: false,
showLoading: false,
animation: "idle",
alpha: true,
});
・キャラの合成等で、武器や装飾品をランダムに引き継ぐようなことを考えています。
組み合わせが多数になるため、手動でサムネイルを作成するのを避けたいです。
■実現したいこと
方法①
・atlasとjsonとpngを利用して、キャラのサムネイルを表示
→キャラ一覧ページではアニメーションを再生することがないため、できる限り早く表示したいです。
方法②
・atlasとjsonとpngを使用して、キャラのサムネイルをpng形式で生成
→キャラを合成した際に、サムネイルを生成してサーバーにアップロードできればいいなと考えています。
→ランタイムでは実現可能でしょうか？
お手数をおかけいたしますが、ご回答よろしくお願いします。
ページの読み込みを高速化するには、.json形式ではなく、より小さい.skel形式を使用してください。
プレーヤーからサムネイルを生成するには、一度ロードおよびレンダリングされるのを待ってから、 player.canvas.toDataURL（）を呼び出してください。詳しくはこちらをご覧ください：
https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/toDataURL
また、こちらに個々のスキンのサムネイル生成の例もあります：
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-webgl/example/dress-up.html
To speed up page loads, use the .skel format instead of the .json format, which is smaller.
To generate a thumbnail from a player, wait for it to load and render once, then call player.canvas.toDataURL(), see
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
We have also have an example that shows thumbnail generation for individual skins: https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-webgl/example/dress-up.html
ご回答ありがとうございます。
試してみます。
またわからない点があったら、ご質問させていただきます。