Spineアニメーションを、JavaScriptでWEB上に表示してみよう!

こんにちは、CG開発室アニメーターの吉村です。

SpineがWEB上で動いたら、もしかしてゲームが作れるかも…!?

今回はそんな想いを現実にするべく、JavaScriptを使ってSpineアニメーションを動かしてみました。
JavaScriptというプログラミング言語を使用し、SpineのアニメーションをWEB上で表現してみようと思います。

この記事ではSpineのオフィシャルランタイムの、「Turbulenz」を使用します。

ランタイムとは
アプリケーションを実行するためのプログラムのことです。このランタイムが入っていないと、Spineのアニメーションを表示することができません。

筆者のように、プログラミングの知識はないけれどHTML・CSSならいじれるという方であれば、今回の記事が役立つかもしれません。

WEBよりもUnityに興味がある方は前回の記事をどうぞ!

Spineアニメーションを、Unityの画面で確認してみよう! | whomor Pictures
こんにちは、CG開発室アニメーターの吉村です。今回は「SpineのデータがUnityに読み込めない…」とお困りの方に向けた記事になります。Spineで作ったキャラクターアニメーションは、ゲームやアプリの素材として使用されます。そして、そのゲームの開発ツールの一つとして「Unity」が挙げられます。Unityとは…様々な
whomor.com(このサイト内) 4 users

1.SpineをWEBブラウザで表示するための準備

1-1.まずは、サンプルを表示させるための準備をしよう!

最初の目標として、デモページと全く同じものを自分のサイトにも表示させてみましょう。今回の検証に使用するWEBブラウザはGoogle Chrome 48.0.2564.97 mになります。

まずは、このデモページに必要なデータ(ZIPファイル)をダウンロードしてみましょう。
GitHubにて公開されています。

GitHub – EsotericSoftware/spine-runtimes: 2D skeletal animation runtimes for Spine.
spine-runtimes – 2D skeletal animation runtimes for Spine.
github.com 1 user

ZIPファイルを展開したら、下記の2つのフォルダだけ作業フォルダに移しましょう。
他のフォルダは今回は使用しません。

  • spine-js(あるデータを持ってくるために必要)
  • spine-turbulenz(このフォルダを中心に使用します)

デモページのファイルは、「spine-turbulenz」に格納されています。

ただし、「spine-js」のフォルダから必要なデータを持ってくる必要があるため、今回はこの2種類のフォルダが必要になります。

1-2.WEB表示に必要なファイルを集めよう

1-2-1.spine-turbulenzを開く
さて、「spine-turbulenz」フォルダを開いてみましょう。

中の構成はこんな感じになっています。

「spine-turbulenz」の中にはSpineのサンプルデータが入っています。「example」フォルダの「index.html」というHTMLファイルをWEBブラウザで開くと、サンプルが確認できます。

HTMLファイルとは
HyperText Markup Languageの略称で、マークアップ言語です。これはWEBサイトを表示するためのデータです。
このブログも含め、普段閲覧しているWEBサイトはほぼHTMLで表示されています。

「index.html」を確認すると、このような画面が表示されると思います。

※こちら画像なのでボタンなどのクリックはできません。
現時点では、画面が真っ黒です。

実は、このサンプルデータには注意点が2つあります。

  • このフォルダ内の構成をそのままアップロードしただけではSpineを表示することができません。
  • ローカル環境(自分のPC上など)では画像が読み込まれません。サーバー環境でないと画像が表示されません。

「spine-turbulenz」を表示させるためには、このフォルダを整理し、表示できる状態にする必要があります。
また、ローカル環境で表示の確認ができないため、自分が所有しているサーバーのテスト環境にアップしながら確認をする必要があります。

サーバーは無料でレンタルできるサイトなんかもありますので、調べてみてください。

サーバーとは
サーバーには色々な意味がありますが、ここではWEBサイトを表示させるためのアップロード先のことを差します。
普段、私達はサーバーから情報を受け取ってインターネットを閲覧しています。

1-2-2.spine.jsを入れよう
さて、「spine-turbulenz」のフォルダ中にも「spine-js」というフォルダが入っています。
【1-1】で用意したフォルダも「spine-js」という名前でややこしいですね。

中身を確認すると「Place spine-js here.txt」というテキストファイルが入っています。

つまり、【1-1】の「spine-js」フォルダの中にあるspine.jsを、「spine-turbulenz」の中の「spine-js」の中に入れる必要があるということです。

これで、WEB上にSpineアニメーションを表示する準備が整いました。

1-3.サンプルファイルをアップロードしよう

ファイルをまとめた「spine-turbulenz」フォルダをサーバーにアップロードしてみましょう。

FFFTP」や、「WinSCP」などのFTPクライアントを使用して、自身が確認しやすいディレクトリにアップロードしてみましょう。

ディレクトリとは
フォルダの階層のことです。サーバーもパソコンなので、普段私達が扱っているフォルダを扱うことができます。
ちなみに、このディレクトリ名はURLに反映されます。名前は半角の小文字の英語が基本です。

アップロードの仕方については、下記の記事を参考にしてみてください。

2.SpineをWEBで表示してみよう

2-1.サンプルファイルの動作を確認しよう

アップロードが完了したら、「http://自分が持っているドメイン/spine-turbulenz/example/index.html」にアクセスしてみましょう。

例えばテスト環境のディレクトリ名をtestにして、そのフォルダにデータをアップロードしている場合には、「http://自分が持っているドメイン/test/spine-turbulenz/example/index.html」になるかと思います。

サンプルファイルがデモページと同じ動きをすれば成功です。

デモページ内の下部のボタンを押すことでキャラクターの切り替えを行うことができます。キャラクターをクリックすると何かしらのアクションを起こします。

この時点でサンプルがちゃんと表示されない場合は、下記を確認してみましょう。

  • 「spine-js」フォルダの中に「spine.js」が入っていない。
  • どこかのファイル名を変えてしまった。その場合は、元に戻してみましょう。
  • サーバーがatlasファイルやjsonファイルなどをサポートしておらず、configファイルをいじる必要がある。
  • 入力したURLが間違っている。ディレクトリを再度確認してみましょう。

サンプルを表示させるまでが難しい方もいるかと思います。焦らずに手順を追って対応してみてください。

2-2.自分が作ったキャラクターに入れ替えてみよう

さて、ここからが真骨頂です。自分が作ったSpineのキャラクターに入れ替えてみましょう。
この時点であらかじめSpineのキャラクターと「待機」「ジャンプ」のアニメーションを作っておくとスムーズに入れ替えができるかと思います。

アニメーション名は下記のようにしてみましょう。ここで違う名前にしてしまうと、アニメーションが表示されなくなります。

  • idle(待機)
  • jump(ジャンプ)

2-2-1.サンプルファイルの仕組み
キャラクターを入れ替える前に、サンプルファイルの仕組みを紹介します。

サンプルファイルは簡単に言えば、実際にSpineを表示する・操作するための「index.html」と画像データが入っている「data」フォルダと、ゲームエンジンのjavascriptの3種類が入っています。

今回はindex.htmlとdataフォルダだけを編集することになります。

2-2-2.Spineから必要なデータを持ってこよう
ここからは弊社で作成したサンプルデータを見ながら説明していきます。

Spineからデータを出力する前に、Spineファイル内の整理をする必要があります。

Spineデータのスケルトンの名前を半角小文字のアルファベットで名前を付けておきましょう。
ここでは「megane_chang」としました。

アトラス画像とatlasファイルも、スケルトンと同じ名前に揃えるようにしないと表示されないなどのバグが発生します。

また、Spine内でメッシュを使った表現は今回試した方法では使用できないようです。

Spineアニメーションを、Unityの画面で確認してみよう! | whomor Pictures
こんにちは、CG開発室アニメーターの吉村です。今回は「SpineのデータがUnityに読み込めない…」とお困りの方に向けた記事になります。Spineで作ったキャラクターアニメーションは、ゲームやアプリの素材として使用されます。そして、そのゲームの開発ツールの一つとして「Unity」が挙げられます。Unityとは…様々な
whomor.com(このサイト内) 4 users

前回の記事にある「1-3.SpineのExport機能でUnity用のデータを作ろう」に書いてある方法で下記を出力します。

  • アトラス画像(megane_chang.png)
  • atlasファイル(megane_chang.atlas)
  • jsonファイル(megane_chang.json)

基本的には前回の記事のExport方法で書き出すことができますが、Spine Texture Packingの設定をいじる必要があります。

Spine Texture PackingにあるRegionsの項目にあるRotationのチェックは外しておきましょう。ここにチェックが入っていると正しく表示されない可能性があります。

また、OutputのPremultiply alphaで出力すると、パーツ分け画像の縁に線が入ってしまったため、Bleedにチェックを入れることで修正することができました。

全てのエクスポートが完了したら、「data」フォルダの中にアトラス画像、atlasファイル、jsonデータの3ファイルを全て入れておきましょう。

2-2-3.「index.html」を、テキストエディタで編集,/
「index.html」をメモ帳やテキストエディタを使って、編集していきましょう。

このように、HTMLで書かれた文字列が表示されます。

index.htmlの中で、キャラクターの読み込み方法やSpineで作成したアニメーションを指示することができます。
これらはindex.htmlの下の方に書かれているJavaScriptで変更していきます。
ここで書いた指示をゲームエンジンに送信しているという仕組みになっています。

JavaScriptを編集することになりますが、今回行うのは2つの作業になります。

①「spine_boy」という文言を「出力したファイルの名前」に変更しましょう。

index.htmlをメモ帳やテキストエディタを開くと、HTMLを編集することができます。

メモ帳やテキストエディタの置換機能を使って、「spine_boy」を出力したファイル名に一括で置換すると作業が楽になります。

念のため行数だけメモしておきます。

  • 49行目がボタンの記述
  • 60行目がloadの記述
  • 121行目がモーションの記述

ここでは「megane_chang」に変更していきます。

②読み込めないアニメーション名をコメントアウトしていきましょう。

index.html内のJavaScriptにはサンプルで使用しているモーション名が記述されています。

125行目のモーションの部分です。デフォルトでは「walk」になっていますが、サンプルは待機(idle)とジャンプ(jump)だけ作成したので、デフォルトをidleにしてみましょう。

他のモーションは今のところ使用しないので全て「//」をコードの左側に書いて、コメントアウトしましょう。

コメントアウトとは
HTMLやJavaScriptにはコメントという機能があります。コードの中でメモを残すことが出来る書き方なのですが、これを応用し、一部分をコメントにすることで機能させないようにできます。 この事をコメントアウトと呼びます。HTMLとJavaScriptでは書き方が違います。

2-2-4.データをアップロードして確認
【1-3】で行った方法でindex.htmlを変更したら、保存してアップロードしてみましょう。
キャラクターが入れ替わっていたら成功です。

3.マウスでキャラクターを操作してみよう

ここまで来たら、あとはマウスの操作でキャラクターを操作できるようにしていきましょう。
マウスをクリックしたらジャンプができるように指示をしてみたいと思います。

3-1.JavaScriptを書き換えてみよう

128行目と129行目のモーション名を変更してみましょう。

ここではマウスボタンを押したらジャンプをして、待機モーションに戻るという記述にしてみました。

3-2.動作を確認してみよう

下記が、編集を加えたデモ画面です。別キャラクターに切り替えるボタンは外しました。

ここにキャラクターを表示します

キャラクターをクリックするとジャンプします。

今回はJavaScriptでマウスをクリックしたら、ジャンプをするという指定をしましたが、キーボードを入力したらジャンプをするという指定をすることも可能です。

色んなコマンドを作成して、試しながらJavaScriptを学んでいけば、ゲーム制作のヒントが得られるかもしれません。

まとめ

いかがでしたでしょうか。

今回の記事はCGよりもWEB技術寄りの話となりました。

WEBブラウザ上でキャラクターが動く姿を実際に見てみると、ちゃんと勉強すればゲームが作れるんじゃないかという気持ちにもなります。
この機会に、JavaScriptを勉強してみてはいかがでしょうか。

また、実際にプログラムを通して組み込んでみると、Spineのデータ管理がとても大切だということに気がつきます。
少しでも名前を間違えたりしてしまうと、アニメーションが全く表示されなかったりして、かなり焦ります。

普段の業務ではファイル名を仕様書通りに作成しなければならないと思うだけでしたが、今回の記事執筆を通して仕様書通りに命名規則を守らなければ、後の作業が滞ってしまうということを深く理解することができました。

皆さんもSpineを使って、ゲーム制作を始めてみましょう。