2D TOOLKIT でメトロヴァニア3

unity20131202A-000

■■■■■ OHISASHIBURI ■■■■■

先週はあまりにもの寒さにやられてすっかり寝込んでばかりでしたが、とりあえず復活です。みなさんも寒さには注意してくださいませ。

■■■■■ 本日はアタッチポイント ■■■■■

本日は前回の記事「2D TOOLKIT でメトロヴァニア2.5」で使用した 2D TOOLKIT の機能である「アタッチポイント」を説明します。ソースコードはすいません、アタッチポイントの説明書くのに時間かかりすぎたのでまた次回にいたします。

アタッチポイントは英語ペラペラじゃないので本家の説明だけでは理解しづらかったですが、理解するとナルホド!の便利機能でした。

■■■■■ まずはアタッチポイント ■■■■■

■■ まずはみょんアニメ ■■

前回プログラムではみょんの本体と、腕は別スプライトになっており、こんな構造で構成されています。

unity20131202A-001

本体が Player、腕が Hand と HandAnime です。Player と HandAnime が Tk 2d Sprite Animator コンポーネントで、Hand はそれぞれのスプライトアニメを連結するための接続用オブジェクトになります。

Player には Character Controller とスクリプトが設定されており、キャラクター本体としての機能を持っています。

Hand は Player の子オブジェクトとしてくっついてきます。

ここで問題が発生です。まずはこれを見てください。みょんの走りアニメの一部です。

unity20131202A-002

ポリゴンだと体のあちらこちらに関節があって、それぞれ回転したり移動する事で自動的に関節の位置が決定されますが、このスプライトアニメの場合、そもそも関節無いから! 本体と腕だけだから!

そもそも走りアニメしてるけど物理的には板ポリゴンの上に板ポリゴンが乗ってるだけでポリゴンの中で絵が変化しても関節の位置とか関知しねーから! なのです。

この時はまだ 2D TOOLKIT のアタッチポイントの使い方を理解してなかった自分はアニメに合わせて腕の相対座標をどうやって追従させようか途方にくれていたのでした。

■■ そこでアタッチポイントですよ ■■

では、連続画面写真でアタッチポイント作成方法を説明します。実演用のスプライトコレクション等は先に作っておきました。スプライトコレクションの作り方については「2D TOOLKIT を使ってみようず(中編)」を参照してくださいね。

スプライトコレクションでアタッチ先となるスプライトを表示し、ウインドウ下の AttachPointo をクリックし、Add Attach Point をクリックし、アタッチポイントを作成します。

次にアタッチポイントに名前をつけて Enter します。アタッチポイントはいくつでも作れます。そして名前で区別できます。

作成されたアタッチポイントをドラッグして腕の付け根に移動します。

これでアニメーションにてこのスプライトを表示するフレームではアタッチポイントの場所に子スプライトを追従させる事ができます。

unity20131202A-003

■■ アタッチポイントをプレビューする ■■

スプライトコレクションのウインドウ上で実際にプレビューしてみましょう。再び連続画面写真いきます。

Commit → Preview の順にクリックし、Collection と Sprite を選択してアタッチポイントにアタッチさせたいスプライトコレクションと、スプライトを決定します。

unity20131202A-004

以上で、アタッチポイントの定義が完了します。

このような要領でアニメさせる全てのスプライトにアタッチポイントを設定することで、どのような無茶なアニメでも思い通りに子パーツを追従させる事ができるようになります。

unity20131202A-005

■■ 実際にアタッチポイントを使ってみる ■■

それでは実際にアタッチポイントを使ってみましょう。実際にシーンに配置するにはちょっとした手順を踏みます。毎度おなじみ連続写真で手順を説明します。

アニメは ExampleAnime というスプライトアニメーションに、Run というクリップで作成しています。

Hierarchy ビュー Create → tk2d → Sprite With Animator をクリックし、スプライトアニメを生成します。

Inspector ビュー の Tk 2d Sprite Animator の Anim Lib を ExampleAnime にセットし、Clip を Run にセットし、Play automatically をチェックします。

ここまでは、普通のスプライトアニメをシーンに配置する作業ですね。

unity20131202A-006

次にスプライトに設定したアタッチポイントをシーン上のスプライトアニメに反映し、腕をアタッチします。

Hierarchy ビュー AnitedSprite をクリックして選択状態にし、Component → 2D Toolkit → Sprite → tk2dSpriteAttachPoint をクリックします。

すると、Hierarchy の AnimatedSprite にアタッチポイントとして設定した Hand が子オブジェクトとして追加されます。

この Hand オブジェクトは AnimatedSprite のアニメで設定した通りに相対座標が自動追従します。

unity20131202A-007

次は Hand の下にスプライトを登録します。

Hierarchy ビュー Hand をクリックして選択状態にし、Create → tk2d → Sprite をクリックし、スプライトを追加します。

Inspector ビュー Tk 2d Sprite の Collection を Example、Sprite を youmu_run_hand に設定し、みょんの腕のアタッチ作業を完了します。

unity20131202A-008

■■■■■ これができあがりです ■■■■■

前回のみょんの伝説と同じ手順で作ったので見た目ほとんど変わってませんね。アタッチポイントをフル活用すれば色々スプライトゲームの表現力がアップするかもしれません。服をアタッチして着せ替えとか、剥げ落ちる鎧とか、盾や武器の持ち替え。足元にコリジョンをアタッチして土煙パーティクルや剣の先に星屑パーティクルのエミッタをアタッチとかできるんじゃないでしょうか。

あ、あとあれだ。目にアタッチポイントをつけて目線とか(ぉぃ

「シェアする」

ツイートツイート