SpriteStudioで2Dブルーマン作成
SpriteStudioでアニメーション作成
前回はSpriteStudioの導入とサンプルアニメーションのインポートについてご紹介しましたが、今回は実際にSpriteStudioを使ってアニメーションを作成し、UE4で動かしたいと思います。
2Dブルーマンの作成
まず、アニメーションの素材となる画像を用意します。
今回はIllustratorでプリミティブ形状から、パーツを作成しました。
急いで作ったものなので、こんなものでご容赦を。。。
新規プロジェクト作成
では、SpriteStudioを起動したら、メニュー > ファイル > 新規プロジェクトと選択し、
Bluemanという名前でプロジェクトを作成します。
セルマップ作成
プロジェクト内のセルマップを右クリックし、新規作成します。
警告が表示されますが、「はい」を選択します。
作成した上記素材となる画像を指定します。
この時画像が2のべき乗のサイズでないと警告が出ますので、2のべき乗となるようにしましょう。
すると、指定した画像がセルマップという領域に表示されます。
セル作成
次にパーツを矩形選択した後、右クリックしてセル作成を選択します。
選択すると作成したパーツの名前を求められるのでHeadと命名します。
そして、画面左のセルリストに作成したセルが追加されているのが確認出来ます。
同じ要領で上のブルーマン画像を下のような名前でセルを作成して行きます。
下のようにセルリストに各パーツのセルが全て作成されているのを確認してください。
中心の設定
各セルは回転や移動を設定された中心点から行うため、ここで中心点を設定しないと回転した時にセルの中央を中心として回転してしまいます。
腕や脚のパーツに関しては下の画像のようにセル上部の真ん中を中心とした動きをとるはずなので、腕や足に関わるパーツは中心点を変更します。
ただし、Footに関してはLowerLegの中心点からの延長線とFootの高さを二分する線との交点に中心点を置いた方が良いでしょう。
と言いつつ座標値は見た感じでざっくり置いてしまいました。
本当はちゃんとピクセル測って決めた方が良いです。
レイアウト作成
作成したセルをドラッグ&ドロップで配置して行き、下のような状態をつくります。
配置したままではパーツの表示順序が配置した順になってしまっているので、
アトリビュート > 一般 > 優先度を表示したい順に変更します。
数値が高くなる程手前に表示されます。
下の画像のようなレイアウトになれば大丈夫です。
階層を作る
階層を作る事で子のセルは親のセルの移動(回転)の影響を受けるのでアニメーションが作成し易くなります。
また、階層構造にする事でIKを適用する事も出来ます。
階層は以下のようにしました。
root
┗LowerBody
┗MiddleBody
┗UpperBody
┗Head
┗LeftUpperArm
┗LeftLowerArm
┗LeftHand
┗RightUpperArm
┗RightLowerArm
┗RightHand
┗LeftUpperLeg
┗LeftLowerLeg
┗LeftFoot
┗RightUpperLeg
┗RightLowerLeg
┗RightFoot
LeftUpperLegとRightUpperLegは足を曲げて屈めるためにLowerBodyから外してます。
私が知らないだけで、良い解決策があるかもしれないですが。。。
アニメーションのキーを設定する
次にアニメーションのキーフレームとなるフレームにキーを設定して行きます。
画面下のフレームコントロールでキーを設定したいフレームに移動します、キーを設定するセルを選択し、アトリビュート一般内のキーを設定したいプロパティにチェックを入れればキーが設定されます。
設定されたキーは各セル毎のタイムライン上に楕円のアイコンとして表示されます。
また、特定のフレームのキーを別のフレームにコピーしたい時は楕円のアイコンを右クリックし、コピー先のフレームで貼り付ける事でコピーが可能です。
IK(Inverse Kinematics)
SpriteStudioではIKによる操作も可能です。
通常親子関係があれば、親の動きに子が追従するものです。
これをFK(Forward Kinematics)と呼びます。
これとは逆に子の動きに親が追従するものがIKです。
では、どうIKを操作するかと言うとかなりシンプルでセルを選択した状態で、
Alt + ドラッグ
しかし、このIK意図した場所にフリップさせないで持ってくるのが少し手間なんですよね。。。
また、IKの影響数も変更可能です。
人型であれば2で充分なので、変更します。
レイアウトの右上にある三角の連続したアイコンを選択し、IKの影響リンク数を変更を選択して2と打ち込みます。
そして、全てのキーを設定して出来たのがこの待機アニメーションです。
簡易的に作ったものなので、この程度でご容赦ください。
ここまで出来たら保存し、前回と同じようにUE4にインポートします。
2DブルーマンをUE4で動かす
インポートすると下のような感じで無事表示できました。
せっかくなので、Blueprintも試してみたいと思います。
てっとり早くアクターを選択して、DetailsタブからBlueprint/Add Scriptクリックして、
Blueprintを作成します。
後は通常のBlueprint同様にスクリプティング出来ます。
各ノードについてはhistoriaさんのこちらのページに記載されています。
その中で試して気になったものを挙げたいと思います。
Pause
文字通りの機能ですが、Actorを最初からPauseした状態で始めたらどうなるのかなと思って試してみました。
具体的にはEvent Begin PlayですぐPauseすると言った感じですが、
Actorは表示されず。。。
再生がされてからのキーボードイベント等では正常にPauseしました。
上記ケースは想定した使用方法ではないんですかね？
Get Loop Count
ループの残り回数を取得するものです。
現在のループ回数ではないので、Set Loop Count 0(=無限)だと常に0を返します。
Auto DestroyはSpawn時のみのオプション
動的にSpawn関数で作成する場合にはAuto Destroyを引数として設定出来るのですが、静的なBlueprintとして用意してあるものは、On Ss End Playで終了タイミングを取得してDestroy Actorする必要があります。
ひとつおもしろいものとしてAdd Texture Replacementと言うものが存在します。
指定したパーツのテクスチャを変更出来るようです。
2Dブルーマンの画像を加工してこんな画像を作ってみました。
RightUpperArmとRightUpperLegに包帯を付けた画像です。
ためしにRightUpperArmを変更してみます。
上の画像をインポートしておき、下グラフのようにスクリプトを組みます。
Aを離すとRightUpperArmのテクスチャが切り替わります。
実行すると、RightUpperArmの部分が包帯に変わっています。
これで装備の変更やダメージといった事も表現出来そうですね。
逆にテクスチャを戻す場合はRemove Texture Replacementを使用すれば可能です。
今回はSpriteStudioを使ってアニメーションを作成し、UE4に組み込みBlueprintを試す所までやってみました。
次回はUE4に戻ってマテリアルを紹介したいと思います。
