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形式で生成
→キャラを合成した際に、サムネイルを生成してサーバーにアップロードできればいいなと考えています。
→ランタイムでは実現可能でしょうか？
お手数をおかけいたしますが、ご回答よろしくお願いします。
