*

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とは…様々な

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

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

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

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

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

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

img01

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

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

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

1-2-1.spine-turbulenzを開く

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

img02

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

img03

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

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

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

img04

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

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

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

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

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

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

1-2-2.spine.jsを入れよう

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

img05

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

img06

つまり、【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」になるかと思います。

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

img07

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

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

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

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

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

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

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

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

2-2-1.サンプルファイルの仕組み

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

img08

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

img02

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

2-2-2.Spineから必要なデータを持ってこよう

ここからは弊社で作成したサンプルデータを見ながら説明していきます。

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

img09

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

img10

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

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

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

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

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

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

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

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

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

2-2-3.「index.html」を、テキストエディタで編集

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

img12

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

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

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

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

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

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

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

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

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

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

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

img14

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

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

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

2-2-4.データをアップロードして確認

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

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

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

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

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

img15

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

▼3DCG・アニメーション制作のご相談はフーモアまでご連絡ください。

contact_button

Comments

comments

  • このエントリーをはてなブックマークに追加
  • LINEで送る

イラストレーター大募集中!!

漫画家大募集中!!

イラスト制作依頼ならフーモア!

プロの漫画制作ならフーモア!

関連記事

icatch_animate

【Adobe Animate CC】デザイナー視点で使いやすくなった新機能を解説!

こんにちは、CG開発室のOTKです。 今回は、2016年に名称変更された「Adobe Anim

記事を読む

0

最近注目されているUnityアセット、「Puppet2D」を検証してみました

フーモアCG開発室の遠藤です。 先日「Puppet2D」の書籍を執筆しました。これで3冊目の書籍と

記事を読む

MAblog_005

モーションコミックは流行るのか?「MotionArtist」さわってみた

CG開発室の遠藤です。   前回に引き続き SmithMicroSoftwar

記事を読む

whomorPicturesBlog_140517B

これからはspine!?操作性のあるソーシャルゲーム向けキャラ制作のニーズに答えて使ってみた。その1「イラスト制作~スケルトン組み立て」

読了時間3分 初めまして、フーモアピクチャーズ技術部の遠藤です。ビジネス的側面から切り込んで行

記事を読む

勉強会

【資料公開】マスタッシュ ✕ フーモア共同開催Spine勉強会資料

平成27年1月20日にミクシィcollaboスペースで、スマートフォン向けゲームなどで需要拡

記事を読む

whomorPicturesBlog_140901C

Live2D風モーション、Spineの限界に挑め~spineをLive2D風にしてみました~

ご無沙汰しておりました。フーモアDCCツール研究開発局局長の遠藤です。 7月11日からブログ記事が

記事を読む

whomorPicturesBlog_140523C

spineでキャラに命を吹き込め!アニメーションで個性を出す!その2「2Dにアニメーションを付ける」

フーモアピクチャーズ技術部の遠藤です。引き続きEsotericSoftwareのSpineについて解

記事を読む

e14d883a2a6efd80446f6cad692a716b

第一回spine勉強会〜Mastache x フーモア共同開催(会場mixi)のお知らせ

フーモアピクチュアズの遠藤です。 さて、このたびMustasche × フーモア 共同開催

記事を読む

title

WhomorGames「あの星で君が待ってる」

https://yoyaku-top10.jp/u/a/OTk3NA &nbs

記事を読む

whomorPicturesBlog_140901C

Live2D風モーション、Spineの限界に挑め part3~モデリングちょい足しレシピ~

フーモアDCCツール研究開発局局長の遠藤です。 隔月ペースの記事投稿になってしまいまして、不甲斐な

記事を読む


  • 「おもしろいMANGAを創る」をビジョンに今までになかった新しい価値観を創造する会社。イラストや漫画制作のディレクター集団。
    お問合せはこちらからお気軽にどうぞ
  • ブログ最新記事とクリエイティブに役立つ情報を日々配信しています。

PAGE TOP ↑