イメージ

スケルトンはボーンに装着されたイメージにより構成されます。 Spineはイメージを編集しません。このためお好みのイメージ編集ソフトを使用してスケルトンアートを制作する必要があります。独立した動きを示すスケルトンの各部分は個別のイメージファイルが必要になります。

PhotoshopやGimpファイルでイメージが別々のレイヤー上にある場合、スクリプト を使用することですでにアセンブリされた状態でSpineに投入ことができ、かなりの時間を節約することができます。

スケルトン設定の最初のステップは、それぞれのイメージをボーンに装着された矩形イメージである「領域アタッチメント」として投入することです。詳しい情報は領域アタッチメントをご参照ください。

領域アタッチメントが作成される前に、Spineはスケルトンのイメージがある場所を知る必要があります。

イメージノード

ツリー内の「イメージ」ノードはSpineがスケルトンイメージを発見するためのフォルダパスを保存します。イメージパスはプロジェクトファイルが保存された場所に相対的、あるいは絶対的なパスです。「閲覧」ボタンはパスを指定するために使用できます。またはパスを入力してEnterを押します。パスが設定されると、そのフォルダのイメージは「イメージ」ノードの下に表示されます。Spineはイメージフォルダを観察し、変更を直ちにイメージファイルに読み込みます。

イメージをツリーからエディターエリアにドラッグすると、Spineはスロットと領域アタッチメントを各イメージのルートボーンの下に作成します。ツリー内で複数イメージを選択するには「shift」または「ctrl」(Macでは「cmd」)を使用し、同時にエディターエリアにドラッグします。あるいは直接イメージをツリー内のボーンまたはスロットにドラッグします。

領域アタッチメントは「P」を押す、またはツリーの一番下にあるイメージの属性内の「親設定」をクリックすることで作成できます。「親設定」モードに切り替わるとエディターエリアのボーンまたはツリー内のボーンまたはスロットがクリックできるようになります。スケルトンに多数のボーンがある場合、ボーンの選択はツリーよりエディターエリアでの方が簡単に実行できます。

「イメージ」ノードの下のイメージは、アタッチメントに使用されていない場合は赤いアイコン、使用されている場合は緑のアイコンを有します。

全ての領域アタッチメントが作成されると、「スケール」、「回転」、「トランスレート」ツールを使用して、これらを「ポーズ設定」のためにアセンブリします。この場合の「ポーズ設定」とは非アニメ化されたスケルトンのポーズです。次に「作成」ツールを使用してボーンを作成し、アタッチメントをボーンに移動します。これらのツールの使用方法は次章で説明されます。

イメージファイルルックアップ

Spineは「イメージ 」ノードの下に指定されたパスを使用し、アタッチメント名を追加することでアタッチメントのイメージを発見します。アタッチメント名はファイル拡張子を含む必要はありません。Spineは「.png」、 「.jpg」、 「.jpeg」ファイルを探します。例えば、「./images/」のイメージパスとアタッチメント名、「head」の場合、Spineは「./images/head.png」、 「./images/head.jpg」、 「./images/head.jpeg」を探します。オペレーティングシステムは大文字・小文字を区別することにご注意ください。

アタッチメント名はサブフォルダを含むことがあります。例えば、「./images/」イメージパスと「red/head」というアタッチメント名の場合、Spineは「./images/red/head.png」を探します。

アタッチメントに「パス」セットがある場合、パスはアタッチメント名の代わりにイメージを見つけます。1つのスロット下にある2つのアタッチメントは同じ名前を持つことはできませんが、同じパスを持つことは可能です。

「イメージ」ノードの下に指定されたパスは絶対パスであるか、あるいはSpineプロジェクトファイルを含むフォルダに相対的です。

表示順序

アタッチメントが表示される順序はツリー内の「表示順序」ノードに定義されています。表示順序リスト内で上部にあるスロットはリストの下部にあるスロットの上に表示されます。表示順序を変更するにはスロットを上下にドラッグします。あるいは、キーボードのプラス (+) またはマイナス (-)キーを使用して選択したイメージの表示順序を変えることができます。shiftを押すと、5段階ジャンプします。

ツリーフィルター

ボーンとアタッチメントを両方非表示にし、ツリービューの左上にあるフィルターボタンを使用して「スロット」ノードの下のツリーでスロットのみを表示すると、表示順序の調整が簡単に実行できます。これらのスロットは表示順序を表し、上下にドラッグすることができます。

通常、エディターエリアでアタッチメントが選択されると、ツリー内でも選択されます。アタッチメントを含まないようにツリーがフィルターされると、代わりにツリー内のスロットが選択され、アタッチメントが表示順序のどこにあるかを示します。

スクリプト

Spineの外部でイメージ編集プログラムを使用してスケルトンイメージを作成する時、イメージは高い確立で別々のレイヤー上の作成され、スケルトンの設定ポーズに正しく位置されます。イメージをエクスポートし、それぞれのポジションをSpineで再配置するのはかなり面倒です。時間を節約するために、Spineは多数のイメージ編集プログラムからイメージとポジションデータの両方をエクスポートするスクリプトを搭載します。このデータはSpineにインポートされスケルトン設定の時間を節約します。

スクリプトはSpineのインストレーションフォルダの「スクリプト」サブフォルダにあります。これらのスクリプトの最新版は常にここで見つけることができます。

Photoshop

スケルトンを構成するイメージはPhotoshop PSD またはGimpファイルの別々のレイヤーに存在します。スクリプトを実行すると、各レイヤーが別々のイメージファイルとしてエクスポートされ、Spine形式のJSONファイルを作成します。このJSONを左上のSpineロゴをクリックし、その後「データインポート」と[スケルトン」をクリックしてすることでインポートします。インポートされたスケルトンは添付されたPhotoshopファイルからの全てのイメージとともに1本のボーンを有し、Photoshopと同じポジションと表示順序を使用します。後は「作成」ツールを使用してボーンを作成するだけですが、これは次章で説明されます。

スクリプト設定: 

  • 「PNGとしてレイヤーを書く」 イメージファイルが各レイヤー用に作成されます。
  • 「テンプレートイメージを書く」 アセンブリされたスケルトンイメージを含むイメージがテンプレートとして作成されます。
  • 「Spine Jasonを書く」 SpineにインポートできるJSONファイルが作成されます。
  • 「非表示のレイヤーを無視する」 非表示のグループとレイヤーが無視されます。
  • 「スキンとしてグループを使用」 各グループにスキンが作成され、それそれのスキンのサブフォルダにイメージが作成されます。
  • 「0,0としてのユーザールーラー位置」 Spineにインポートされた時、Photoshopルーラーの位置は0,0 ワールド座標にマッチします。 * 「PNGスケール」 イメージファイルを書く前のレイヤーをスケーリングします。これはSpineよりも高い解像度アートをPhotoshop内で使用する時便利です。
  • 「パディング」 各イメージ周囲のピクセル数。これはイメージのエッジの不透明のピクセルのエイリアシングアーチファクトを避けるために使用します。
  • 「イメージ・アウトプット・ディレクトリ」 イメージファイルが書き込まれるフォルダ。
  • 「JSON アウトプット・ディレクトリ」 JSONファイルが書き込まれるフォルダ。これはSpineプロジェクトを含む同じフォルダでなければなりません。そうでない場合はスケルトンのイメージパスを調整する必要があります。

多数の他のPhotoshopスクリプトがSpine フォーラム (example)に投稿されています。

Illustrator 

Illustratorスクリプトは多少機能が少ないものの、Photoshopスクリプトとよく似ています。必要な場合、Illustrator内で「ファイル」、「エクスポート」、「PSD」をクリックし、PhotoshopでエクスポートされたPSDを開き、上記のPhotoshopスクリプトを実行することができます。

Gimp

Gimp スクリプト はレイヤーPNGとJSONファイルの両方を書き込みます。必要な場合、Photoshopにエクスポートし、上記のPhotoshopスクリプトを使用することができます。

After Effects 

After Effects スクリプト はAfter Effects アニメーションデータをSpineのJSON形式にエクスポートします。ワープ、グローエフェクト機能などSpineでサポートされない機能はエクスポートされません。

Inkscape

Inkscape スクリプト はレイヤーとJSONファイル両方をエクスポートします。

ビデオ

次: ツール 前: 基本コンセプト