Spine Web Playerでアセットを埋め込む

April 6th, 2020

時々、あなたの素晴らしいSpineスケルトンや、アニメーション、スキンを見せるために必要なすべてのアセットを含んだシンプルな.htmlが欲しい場合があるかと思います。面倒なウェブサーバーの準備は必要ありません。ただディスク上の.htmlファイルをダブルクリックするだけでブラウザはあなたの美しいアートを表示することができます。

私たちはSpine Web Playerにこの機能を追加し、プロキシでSpine-tsとそのすべてのバックエンドをWebGLやCanvasに対応させました！どのように行われているか見てみましょう。

データURIスキーム - アセットの準備

.pngファイルのようなアセットをブラウザに読み込ませる時には、URLを指定する必要があります。例えば、

または、次のような相対URLです。

ブラウザはこのようなURLに遭遇すると、そのファイルのデータを送信するようにサーバーに要求します。

私たちは、サーバーとの通信を一切行わない方法を見つける必要があります。ありがたいことに、最近のブラウザ標準はそれを実現するための以下のようなツールを提供してくれています: データURIスキーム.

データURIとは、data:で始まり、その後にMIMEタイプが続き、その後にファイルの実際のデータが続く長いテキストのことです。データ自体は Base64 でエンコードされています。こうすることで、バイナリデータであっても.htmlファイルに安全にダンプ(出力)することができます。

ファイルをデータURIに変換するには、たくさんあるデータURIエンコーダー のうちの１つを使うことができます。基本はどれでも同じです:

1. ファイルまたはファイルのURLを指定します。
2. "Upload"または"Encode"など表示されているボタンをクリックします。
3. データURIテキストをコピーします。

私たちのRaptorの例のアトラスページは実際にこれを行いました。こちらにあります。http://esotericsoftware.com/files/examples/raptor/export/raptor-pma.png このHTML要素を使っています:

こんな素敵なイメージにできました:

ファイルのデータURIバージョンを使用すると、タグは次のようになります:

上記はデータURIの99.999%を省略していることに注意してください、なぜならそれは本当に長いからです。これは、すべてを単一の.htmlファイルに埋め込みたいときに必要な代償です。

これでデータURIスキームについてお分かりいただけたかと思いますが、エクスポートした Spineアセット埋め込みの準備も、以下のいくつかのステップを踏むだけで出来ます:

1. SpineでSpineプロジェクトを開き、スケルトンデータを.jsonまたは.skel形式で、アトラスを.atlasと1枚以上の.pngファイルとしてエクスポートします。
2. 各ファイルを データURIエンコーダー でエンコードし、結果として得られたテキストをファイルやお好きなテキストエディタに一時的に保存します。

これで完了です! これで、Spine Web Playerと一緒にアセットを埋め込む準備ができました。

埋め込みアセットを使用してSpine Web Playerを設定する

以前、このブログでSpine Web Playerについてご紹介しました。詳細が思い出せない人は、このブログ記事にアクセスして、記憶をリフレッシュすることをお勧めします。

こちらはSpine Web Player を使って Raptor を表示するための基本的な.htmlファイルです:

2つのファイル、raptor-pro.json と raptor-pma.atlasを読み込むようにプレイヤーに指示していることがわかります。プレーヤーが.atlas ファイルを読み込むと、最初の（そして唯一の）アトラスページを構成する画像である raptor-pma.png という別のファイルも読み込む必要があることがわかります。

これらのファイルはすべてサーバから読み込まれます。これを避けて、すべてのファイルを単一の .html ファイルにまとめるには、新しい設定プロパティ rawDataURIs を使用します。ファイル raptor-pro.json、raptor-pma.atlas、および raptor-pma.png を、最後のセクションで説明したようにデータURIに変換しました。次に、上記のスクリプトの一部を書き換えました:

上のスニペットのデータURIはとても長いので、再度省略しています。何を変更したのか見てみましょう。

まず、jsonUrl と atlasUrl プロパティを書き換えました。完全なURLを指定する代わりに、ファイル名を指定するだけです。次に、rawDataURIs プロパティを追加しました。これは"filename": "data URI"のペアで構成され、Raptorをロードしてレンダリングするために必要なファイルごとに1つずつ指定します。これで完成です！

これで、Spine Web Playerは jsonUrl を読み込もうとします。データ raptor-pro.json は rawDataURIs プロパティで指定されているので、サーバーにデータの提供を求めるのではなく、そこから直接データを取得します。これは raptor-pma.atlas ファイルについても同様です。アトラスファイルが読み込まれると、プレイヤーはアトラスに画像 raptor-pma.png が必要であることを認識します。また、rawDataURIsでも同様に指定しているので、プレーヤーのJavaScriptとCSSを除いて、サーバーへのリクエストは一度もありません。

もちろんこれはバイナリ形式のスケルトンデータでも動作します！

jsonUrlプロパティの代わりに skelUrl プロパティを用います。 rawDataURIs セクションでは、.skel ファイルのデータURIを指定します。

バイナリ形式のスケルトンファイルは、 .json ファイルよりも平均してかなり軽量になります。可能であれば、バイナリ形式のスケルトンファイルを使用してください。

注意:　スケルトンの .json や .png ファイルにデータ URI を埋め込む場合、選択したエディタが少しフリーズしたり、動作が重くなったりすることがあります。これは自動改行をオフにすることで解決することがあります。別の解決策としては、Sublime TextやVisual Studio Codeのような大きなファイルでもうまく動作する優れたエディタを使用することです。

次の展開

Spine 3.9では、上記のすべてをワンクリックで実行できる新しいエクスポートオプションが含まれる予定です。最終的な結果は .html ファイルになり、ディスクからどのウェブブラウザでも開くことができ、友人や同僚に送信して簡単にあなたの作品を見ることができます。私たちの3.9-betaにご期待ください！

Spineフォーラム!であなたの感想を共有してください！