こんにちは。初投稿です。
SpineアニメーションをWebページ上で再生できる。かつ、1枚のHTMLにしてダウンロードできるWebアプリを作成してみました。
https://www.npmjs.com/package/@esotericsoftware/spine-player をベースにして構築しています。
よろしければ、使ってみてください。
▼URL
・アプリURL(最新版):https://t-tonyo-maru.github.io/pub_web_spine-web-player-custom/
・概要や使い方:https://github.com/t-tonyo-maru/pub_web_spine-web-player-custom/blob/main/README.md
▼動作環境
最新のChrome、Edge、Firefox、Safariなら動作すると思います。
※PCでの利用推奨です。
▼使い方
- 「Upload Files」ボタンを押下して、Spineエクスポートデータ3点セット(.png、.atlas、.json(もしくは.skel))をアップロードします。
- Spineエクスポートデータ3点セットが正しく読み込まれると、画面上にプレビューが表示されます。
- 「Download as HTML」を押下すると、Spine Web Player のCSS/JavaScript + アップロードファイル3点のデータURIをひとまとめにしたHTMLファイルが生成され、ダウンロードされます。
▼注意点など
・アップロードするファイルには必ず拡張子をつけてください。拡張子のないファイルは読み込まれません。
・テクスチャ画像(.png)は、1枚でなければ正しく動作しません。パック設定をうまく利用して1枚絵にしてください。
・アップロードされたSpineエクスポートデータの変換→プレビュー生成→htmlファイルのダウンロード処理は、すべて利用者のブラウザ上で実行しています。アップロードファイルを他サーバーへ送信・保存等は一切していません。
・そのため、利用者のPC・ブラウザの環境や設定に依存し、意図通りに動作しない場合があります。この点はご了承ください。
Spine ロードマップ(http://ja.esotericsoftware.com/spine-roadmap)の「HTML export option」っぽいモノを先行して、作成してみました。
いつかSpineエディタ本体に実装される日を待ってます。 8)