• 日本語

  • Spineアニメーションをプレビュー&HTMLに変換するWebアプリを作成しました

    japanski
Related Discussions
...

こんにちは。初投稿です。
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での利用推奨です。

▼使い方

  1. 「Upload Files」ボタンを押下して、Spineエクスポートデータ3点セット（.png、.atlas、.json（もしくは.skel））をアップロードします。
  2. Spineエクスポートデータ3点セットが正しく読み込まれると、画面上にプレビューが表示されます。
  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)

ご共有ありがとうございます！試しに使ってみましたが、とても簡単で便利そうですね！ 😃
ただ乗算済みアルファを使用したテクスチャをアップロードした場合はアタッチメントの周りにアーティファクトが発生したので、おそらくSpine Wev PlayerのpremultipliedAlphaがfalseになっているのかと思いますが、それについて特にReadmeや使い方の説明の中に言及されていなかったので、記載されておいた方が良いかもしれません。(Spineのデフォルトのテクスチャパッキング設定では乗算済みアルファは有効になっているため)
それ以外は使い方も分かりやすくて素晴らしいと思います :yes:

Misaki様
早速の試用とフィードバックありがとうございます！
premultipliedAlphaの設定は全く知りませんでした。。共有ありがとうございます。

「Spineのデフォルトのテクスチャパッキング設定では乗算済みアルファは有効」との事と、
Spine Web Playerの記事でも「Spine Web Playerで表示されるすべてのアセットには、乗算済みアルファを使用することを推奨しています。」ともあるので、
premultipliedAlphaは一律でtrueにする方向で改修してみようと思います。