Spine技術ブログ

Spineの使い方チュートリアル – 1

こんにちは!

この記事では、Spine公式チュートリアルに沿ってSpineの操作方法について覚書をおこなって行こうかと思います。

この記事では、公式のTutorial VideoとUser Guideを自分なりに噛み砕いて再度記事にしたものになります。

また、今回の記事はMac環境で制作を行っています。

公式User Guidはこちら

公式Tutorial Videoshはこちら

 

Spine User Guide – Getting Started

この項ではSpineのダウンロードと初期導入についてチュートリアルをおこなっています。

画面のメニューをドラッグアンドドロップで位置変更可能です。

画面左上のSpineボタン押下でメニューが開きます。

右クリック+移動で画面をスクロールできます。

マウスホイールで、マウスカーソルがある場所へズームしながら移動します。

画面左上のSETUP、ANIMATEボタンを押下でAnimateモードとSetupモードを切り替えることができます。

2-SpineのBasic Conceptについて

 

Skeletonについて

この項ではSpineのSkeletonについて解説されていました。

Skeletonは階層化された構造を持ち配下のオブジェクトはサンプルのspineboyでは以下のようになっています。

チュートリアルでは、SkeltonのSlotについて少し解説していました。

⇅アタッチメントを切り替えることができる

また、新しくSkeletonを作成する手順についても触れていました。

SpineMenu -> NewSkeleton

任意の名称を入れて OKを押下

Hierarchy配下に新しいSkeletonが作成されます。

Bonesについて

この項ではSpineのBoneについてざっくり解説されています。

Boneは親子関係を持ち、(画像中では、front-upper-armがfront-bracerやfront-fistの親Boneになっています。)

マニュピレーターで操作することができる。

また、Boneを使わないようなアニメーションのサンプルもあります。

Spine -> OpenProject

/Applications/Spine/examples/spinosaurus.spine

を開きます。

このようなゲーム画面UIのようなアニメーションを作成することも可能です。

Attachment

この項では、Attachmentについて解説されています。

まず、BoneにはSlotが付随していて、そのSlotに各種イメージをAttachしていきます。

Slots

この項ではSlotsについて解説されています。

Slotとは?

Boneなどに付随する概念になります。

SlotにImageがAttachされています。

SlotはTree メニューのDraw Orderのところから重なり順を変更可能です。

↓DDで並び順を変更できます。

eyeとgogglesの並び順が変わりました。

また、チュートリアル中では、Slotを複製(duplicate)して、大きさや並び順を切り替えていました。

gunのSlotをduplicateして

シーン上で大きさなどを変更できます。

また、Slotsの概念を説明するためにexampleのprojectを開きます。

Spine -> OpenProject

/Applications/Spine/examples/goblins.spine

を開きます。

ゴブリンのサンプルが開きます。

左手のBoneを選択し、配下のSlotにAttachされているオブジェクトを切り替えのサンプルです。

取り急ぎ、ここまでがSpineのBasic Conceptのざっくりとした説明になります。

Spine User Guide Images

Images

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

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

(公式のユーザーマニュアル参照)

ImageNodes

ここでは、ImageNodeについての解説をおこなっているようです。

Spine -> NewProjectで新規Projectを作成

作成したら、TreeメニューのImagesを選択後に右下のフォルダーマークのついたボタンを押下します。

/Applications/Spine/examples/spineboy/images

のフォルダを選択

Images配下に各種Imageが読み込まれました。

Images配下のimageをシーンにDDすると配置が可能です。

また、シーンにImageが配置されたことにより、Imageのアイコン表示が赤から緑に変わり

にImageがAttachされたSlotが生成されました。

ImageはShift押しながらの選択でまとめて選択することが可能です。

Skeleton/root/配下のSlotには異なるImageを配置可能です

(異なるImageを追加した場合は片方が非表示になります。)

また、SpineのImagesはPathからImageを参照していて、Pathが変わるなどでImageを参照できなくなるとシーン中のImageがリンク切れ表示に変わります。

また、Slot上のImageの名前は ImagesのPathから見た相対Pathで書かれています。

なので、ここの名称を変えるとシーン中のイメージ表記がリンク切れになります。

Slot上のImageをダブルクリックでRename用のWindowが表示されます。

ここで、headを _headに変えるとPathが切れる為、シーン上のImageがリンク切れ表示になります。

Draw Order

ここでは、DrweOrderについて解説されているようです。

まずは、/Applications/Spine/examples/spineboy.spine を開きます。

DrawOrderはドラッグアンドドロップで、並び順を変えたり。

キーボードの +キー,-キーでも選択中のSlotの並び順を変更可能です。

また、Shiftキーと+キー,Shiftキーと-キー押下で5つずつ上下に並び順を変更することができます。

また、複数選択しての並び替えなども可能です。

TreeFilter

ここでは、Treeメニューの表示のFilter用のボタンについて解説されています。

ボーンのフィルターボタンアタッチボタン

ここでは、AttachのFilterボタンを有効にします。

SlotsでAttach可能なイメージが表示されます。

次に、Boneのボタンを有効にします。

Tree上にBoneのrootが表示されるようになりました。

Scripts

この項では、各種Scriptを使ってPhotoshopなどの外部ツールからSpineにデータを取り込むまでの流れを見ていきます。

内容としては、PhotoshopやGimpなどのグラフィックツールから、レイヤーイメージの座標などを割り出して

Jsonとして吐き出し、Spine側で読み込む方法が書かれています。

各種グラフィックツールからSpineにデータを読み込むための形式に変換するScriptの最新版はここからダウンロードすると良さそうです。

もしくは、/Applications/Spine/scripts 配下に各種変換用のScriptが格納荒れています。

PhotoShop

この項では、PhotoShopで作成したデータをScriptをかまして、出力し

Spineに読み込むまでのフローを解説していきます。

まずは、Photoshop用のScriptをSpineに配置します。

/Applications/Spine/scripts/photoshop/PhotoshopToSpine.jsx

を以下に配置します。

/Applications/Adobe Photoshop CC 2018/Presets/Scripts

にPhotoshopToSpine.jsx を配置します。

PhotoShopを起動し、

上部メニューから ファイル->スクリプト-> PhotoshopToSpine を選択し実行します。

こちらのようなWindowが表示されます。

スクリプト設定:

  • 「Write layers as PNGs」 イメージファイルが各レイヤー用に作成されます。
  • 「Write a template PNG」 アセンブリされたスケルトンイメージを含むイメージがテンプレートとして作成されます。
  • 「WriteSpineJason」 SpineにインポートできるJSONファイルが作成されます。
  • 「Igonore hidden layers」 非表示のグループとレイヤーが無視されます。
  • 「Use groups as skins」 各グループにスキンが作成され、それそれのスキンのサブフォルダにイメージが作成されます。
  • 「Use ruler origin as 0,0」 Spineよりも高い解像度アートをPhotoshop内で使用する時のルーラー位置調整用の設定らしいです。
  • 「Padding」 ここで設定したぶんの余白が設定されます。イメージのアンチエイリアス保護目的?
  • 「Images」 イメージファイルが書き込まれるフォルダ。
  • 「JSON 」 JSONファイルが書き込まれるフォルダ。。

 

OKボタン押下後に指定したフォルダ中にImagesフォルダとjsonが生成されます。

それでは、PhotoShopから生成したデータをSpineに戻り読み込みます。

Spine -> ImportDataを選択

先ほど生成したJsonデータを Json or binary fileで指定してやります。

PhotoShopで作成したキャラクターがSpineにインポートできました!

Spine User Guide – Tools 1

ここでは、Toolの解説が行われているようです。

Spineのツールはエディターエリアツールバーにある「トランスフォーム」と「ツール」内にあります。

エディターエリアを右クリックすると、現在のツールと最後に選択したツールとの間を切り替えます。ツールバーボタンをクリックするより早いので、効率的に複数ツールを使用できます。

Selection

シーン上のBoneを左クリックで選択できます。

また、commandキーを押しながら選択すると複数のBoneを選択できます。

commandキーを押しながら左ドラッグで範囲選択できます。

  

EscapeキーかSpaceキー押下で選択中オブジェクトの選択状態を解除できます。

選択グループの保存

選択したBoneグループは、command+数字  or  control+数字で選択状態を保存できます。

保存された選択グループは、数字キー押下で選択状態にすることができます。

TransformTool

ここでは、選択したBoneの回転に関する操作やToolの操作について触れています。

Boneを選択した状態で、シーンを左ドラッグで角度を変更できます。

rotateの値に直接数値を入れることも可能です。

rotateの箇所にマウスカーソルを合わせて、マウスホイールで上下で値を変更可能です。

左ドラッグを行っても同様の操作が可能です。

また、Shiftキーを押しながら上記の操作を行うと値の変動を少なく調整することができます。

その他にもBone選択中に 右矢印キー、左矢印キーでBoneの角度を変えられます。

また、Shiftキーを押しながら上記の操作を行うと値の変動を少なく調整することができます。

Boneのマニュピレータの矢印について

Axesのボタンを切り替えることで、どのポイントからみて矢印を表示するかどうか変更できます。

Axesのボタンは上から、 選択Boneを起点、選択Boneの親を起点、垂直に表示

となっているようです。

Boneを選択して、

Control+C,or,Command +C でRotateの情報をコピーできます。

次に、情報をペーストしたいBoneを選択して

Control+V,or,Command +V でRotateの情報をペーストできます。

Boneの情報のコピペは複数選択しても行うことができます。

Control+z,or,command+zで操作の取り消しが可能です。

AxesでWorldが選択されている場合は、同じコピペの操作でもBoneの座標も同じ位置になるようです。

RotateTool

ここでは、RotateToolの説明を行っています。

まずは、ショートカットの説明でCキー押下でRotateツールを選択できます。

また、Boneの角度を変える時に、Shiftキー押下で、15度ずつ値を変えられるようになります。

  

Localの場合

  

また、Rotateの値は、Axesがworldか、Localかで値が変わります。

Translate Tool

ここでは、Translate Toolの説明をおこなっています。

AxesがLocalで選択されている場合

このように、選択Boneを起点として移動します。

AxesがParentで選択されている場合

選択ボーンのParentを起点として移動します。

このようにParentを起点にして移動します。

Translateの値は、Parentからみてどの位置にいるかの値を表示しています。

AxesでWorldを選択した場合

シーンの原点を起点にして移動します。

Translateのx,yの値は、シーン原点からみてどの位置にいるかを表示しています。

Localで複数Boneを選択した場合

このような動きになります。

Parentで複数Boneを選択した場合

このような動きになります。

ScaleTool

この項目では、SceleToolの解説をおこなっているようです。

ScaleToolはXキーがショートカットとして割り当てられています。

Boneを選択してScaleを変えると子供のBoneにAttachされているImageのScaleも変わります。

GroupBoneを選択してScaleを変えた場合

Spine User Guide – Tools 2

この項では、引き続きToolsの説明をおこなっています。

BoneLength

選択したボーンの先端上にマウスを置くと、ボーンの長さを調整できます

PoseTool

この項では、PoseToolの使い方について解説しています。

「ポーズ」ツールはインバースキネマティクス(IK)を使用してボーン回転を調整します。

ToolsからPoseを選択します。

取り急ぎ、Boneを複数選択します。

Boneの先端をドラッグするとIKを使った動きになります。

Weights

この項では、BoneのWeight付けのツールがあることを紹介しています。

ToolsからWeightsを選択します。

任意のMeshを選択すると、各頂点のWeight値が表示された状態になります。

取り急ぎは、ざっくりとした紹介でけおこなって、詳細は別の項で説明を行うようです。

 

CreateTool

CreateToolが新しくBoneを作成することができるツールになります。

これは設定モードのみで可能です。

ToolsからCreateを選択します。

Treeメニューからこれから作成するBoneの親を選択します。

クリックでBoneを作成可能です。

作成したボーンの親子関係はこのようになっています。

作成したBoneを回転させた場合

Create時に任意のImageを選択することで、選択したImageを作成したBoneの子にすることができます。

CreateToolを選択後に、Boneの子にしたいImageをcommand+クリックで選択します。

その後に再度クリックでBoneを作成します。

Boneの子Imageは複数設定可能です。

CreateToolを選択後に任意のBoneを選択してoptionキーを押しながらクリックで

Boneの再生成ができます。

これにより、Boneの位置や長さなどを再設定可能です。

Compensation

補正を使用すると、アタッチメントや子ボーンを影響せずにボーンを調整することができます。例えばボーンの回転場所を変更するためにアタッチメントや子ボーンへの影響を避けながら、ボーンを動かす時便利です。

CompensationのImagesが有効になっていると、

Boneを動かした際にImageがBoneの影響を受けなくなります。

CompensationのBonesが有効になっていると、

親Boneを動かした際に、子Boneが影響を受けなくなります。

両方同時に設定することも可能です。

Options

オプションパネルはボーンとアタッチメントの選択、可視性、名前タグを無効にするために便利です

名前タグの列にチェックを入れると各部位の名前タグがシーン上に表示されます。

名前タグが表示されました!

今度は、Boneの表示の箇所だけチェックを外してみます。

Boneが表示されなくなりました。

Imageのチェックを外した場合

Boneだけ表示されるようになりました。

一旦締めます

一旦、区切りが良いのでSpineの使い方チュートリアル – 1 はこのあたりで区切ることにします。

次回、その2に続きます。