Spine

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

こんにちは!

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

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

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

公式User Guidはこちら

公式Tutorial Videoshはこちら

Spine User Guide – AttachmentsAndMeshs(1/2)

01.Attachments

アタッチメントには、画像やメッシュなど表示されるもの、

もしくは境界ボックスといったような概念があります。

ツリー内の可視性ドットをクリックしてどのアタッチを表示するかどうか決めることができます。

02.RegionAttachments

領域アタッチメント:領域アタッチメントとはボーンにアタッチされる短形の画像のことです。

 

path

アタッチされているイメージを選択

下部にアタッチされているイメージのプロパティが表示されます。

Imagepathが空の時は、Image名を使ってImageを参照しています。

03.Color

Imageのプロパティ上でColorの値を変えると表示の色合いを変えることができます。

04.BackGround

ImageのプロパティでSelectのチェックを外すと

選択ができなくなります。

これにより、背景としてImageを使うことができます。

トレース用の背景とか色々用途はありそうです。

05.TransformCopy

選択したAttachmentのTransformはコピーすることができます。

Attachmentを選択してCommand+C

TransformをペーストしたいAttachmentを選択してCommand+Vを押下します。

他のアタッチメントをDDすることでもTransformをコピーすることができるらしい。

06.MeshAttachments

メッシュは空白部分のピクセルを節約できるのでパフォーマンスを改善できるらしい

07.Setup

Meshを設定する方法は以下になります。

選択Imageのプロパティ上でMeshにチェックを入れます。

08.EditMode

Meshを編集するモードになります。

Imageのプロパティ上でEditMeshのボタン押下で編集モードに移行します。

EditModoには以下のような各種モードがあります。

Modify

「変更」ボタン

meshの頂点の位置を変更して調整することができます。

Commandボタン押下で複数頂点を選択することも可能です。

Create

Createボタン押下でCreateモードに移行します。

クリックで頂点作成

頂点をドラッグでエッジを作成できます。

Delete

Deleteボタン押下でDeleteモードへ移行します。

頂点クリックやエッジをクリックで削除ができます。

■補足

いかなるEditModeのツールを選んでいても頂点やエッジをダブルクリックすると削除が可能です。

また、右クリック押下で [Modify],[Create],[Delete]を切り替えられます。

Reset

Resetボタン押下で設定したメッシュの頂点を初期状態に戻します。

Generate

Generateボタン押下でメッシュの内側とエッジに新しい頂点を作成します。

Exit

編集を終了するには、[スペース]ボタンか[Esc]キーを押下します。

もしくは、TreeプロパティのEditMeshボタンを再度押下します。

もしくは、EditMeshダイアログの[×]ボタンを押下します。

Outline

[アウトラインView]はメッシュを可視化されたものなります。

Spine User Guide – AttachmentsAndMeshs(2/2)

01.Attachments

この項では前回に引き続きAttachmentsの説明をおこなって行きます。

02.NewMode

「New」ボタンを押下すると全ての頂点を削除し新しい頂点モードに入ります。

クリックして頂点を作成するとメッシュの「メッシュのハル(hull/制御線)」を定義します。

↓Hullとは?(公式ドキュメント参照)

ハルサイズ(Hull/制御線サイズ)

メッシュのハルはなるべく空白スペースを排除すべきです。ハル外部のピクセルは描画されず、フィルレートに対してカウントされません。これにより特に空白スペースを多数含む大型イメージなど、フィルレートに制限のあるゲームのパフォーマンスを改善します。例えば、幹の両側に多くの空白スペースを持つ木のイメージがこれに該当します。

※動画を見てみたところでは、[New]ボタン押下で作成メッシュを作成する方法と

[Create]からメッシュを作成する方法があるようです・

(おそらく、[New]で作成した方が早い??)

03.Deformed

変形済み

頂点が「編集」モードでトランスレートされると、描画時の頂点に使用されたイメージのポジションを変更しますが、頂点の実際のポジションは変更されません。「編集」モードが終了すると、頂点ポジションは未変更なのにイメージがメッシュ上で伸ばされていることが分ります。

↓「編集」モードが終了すると、頂点ポジションは未変更なのにイメージがメッシュ上で伸ばされてしまっています。

「編集」モードで「Deformed」をチェックすると、「編集」モードではない時のメッシュ外観を表示します。

04.Edges

メッシュの頂点とエッジはメッシュを「編集」モードにおいて薄いグレーラインで表示される幾つかの三角形に分解するために使用します。

例)ここにspineboyの頭のハルが作られ、鼻を伸ばしたいとします。

↓各種頂点やエッジを新たに追加した際の変形度合いの違い

 

05.Vetices

頂点について

 

-HullSize

メッシュのハルは、なるべく空白部分を削除すべきとのことです。

空白部分が多いとフィルレートを含むゲームの性能に影響を与えるとのこと。

例えばこんな画像など

-VertexCount

メッシュの頂点数は少ない方が良いそうです。

(毎フレームごとに頂点の位置をCPUによって計算するため)

-Deformation

よく利用される方法にメッシュの3D変形などがあります。

06.TransformTools

TransformToolを使うことでメッシュの回転や移動などができます。

command押下で複数頂点を選択可能です。

また、選択した頂点の解除は

[space]or[esc]キー押下で可能です。

また、Rotateツールは回転の中心となる位置を変更することが可能です。

07.Keying

animateモードで頂点が移動するなり操作されると、メッシュにキーが作成されます!

頂点のアニメはFFDとして知られています。

複雑なFFDアニメにはウェイトを使用すると良さげとのこと

08.WhitespaceStripping

テクスチャパッカーを使用する時、空白スペースの除去はメッシュに使用されるイメージに適用できません。

メッシュの各イメージは必要な空白部分のみを含みます。

空白除去設定はテクスチャーパッカー設定で無効にします。

09.LinkedMeshes

メッシュのアニメーションを再利用したい時などにどのように行ったら良いかなどの解説が行われています。

例えば旗のアニメーションを作成した場合などに、アニメーションを

他の旗などに流用したい時などがあります。

そんな時は、Treeのメニュー中でLinkedMeshボタンを押下します。

リンク済みメッシュのImageを差し替える場合は、名前を変更するかPathを差し替えたいイメージPathに変更します。

また、リンク済みメッシュはリンク元と同じSlotに配置しなければなりません。

Spine User Guide – BoundingBoxesAndPaths

01.BoundingBoxes

境界ボックス

境界ボックスはボーンに装着されたポリゴンで

当たり判定をとったりパーティクルの発生場所に指定を行うなどが可能です。

02.SetUp

-EditMode

境界ボックスの新規作成にはツリー内で

ボーンまたはSlotを選択します。

Tree配下のプロパティで

New -> BoundingBoxを選択します。

ボタンクリックで頂点作成、

頂点をドラッグで移動させたりダブルクリックで削除できます。

また、EditBoundingBoxダイアログで
Createボタン押下でCreateモード

DeleteボタンでDeleteモードに移行します。

(頂点や辺をクリック時に削除できるモード)

03.TransformTools

境界ボックスは、TransformToolsを使って編集ができます。

04.Paths

パスとは、合成ベジェスプラインです。

05.Setup

新しいパスを作成するには、Slot、もしくはBoneを選択し

Treeの下部からNew -> Pathを選択します。

画面をクリック->ハンドルで調整を行いPathを作成していきます。

-EditPathmode

Pathは、EditPathのダイアログ中でCreateやDeleteボタン押下で

作成モードに切り替えたり、削除モードに切り替えるなどが可能です。

パスモードは[space]か[esc]で終了可能です。

06.TransformTools

pathもtransformtoolで移動や回転などができます。

[space]か[esc]もしくは空白領域クリックで選択解除できます。

Altボタン押下でハンドルを選択すると他のハンドルに影響を与えずに選択したハンドルのみ操作できます。

07.Closed

Pathのプロパティのclosedを選択すると最初の頂点と最後の頂点が繋がります。

08.ConstantSpeed

Boneをパスコンストレイントするとパスの周囲をBoneが動き回るような動きを与えることができます。

09.Keying

Pathや境界ボックスはAnimateモードでキーを設定することでアニメーションさせることが可能です。

10.Weights

ボーンがトランスフォームされるとPathや境界ボックスも自動的にトランスフォームします。

ノットとハンドルは同じWeightsを持つべきとのこと

 

取り急ぎ、今回はここまでです。

その4に続きます。