Unity3D SmoothMoves で多関節する(後編)

unity20131111A-052

■■■■■ イモムシ君うごかすぞ ■■■■■

前回「Unity3D SmoothMoves で多関節(中編)」のラストでイモムシ君うねうねさせてましたがそんな感じでモーションを作ってシーンに配置する方法いってみます。

これで基本的な操作説明が完了になるわけですが、この後は応用編で実際にスクリプトでアニメーションの切り替えやパーツの差し替え、当たり判定とかに手を出してゲームを作っていくわけですね。

自分はあれですね、セブンフォースとかグラ2のカニとかみたいなのやってみたいですね。

そんじゃま。

■■■■■ 前回のプロジェクトを開く ■■■■■

Unity を起動して前回のプロジェクトを開いてください。ブログ記事通りの場所に保存してない場合は適宜読み替えてください。

  • プロジェクトフォルダ保存先
    • 好みのフォルダ(自分は マイドキュメント\Group_Unity にしてます)
  • プロジェクトフォルダ名
    • smoothmoves_test_20131104b
  • シーン保存フォルダ
    • Assets / imomushikun
  • シーン名
    • imomushikun

シーンの保存方法は「Unity3D / シーンの開き方」を参考にしてください。

■■■■■ イモムシ君ボーンアニメを開く ■■■■■

Project ビュー Assets / imomushikunImomushikunSMAnime をクリックし、Inspector ビュー ImomushikunSMAnimeOpen Animation Editor をクリックしてアニメーションエディターを開きます。
unity20131111A-001

前回イモムシ君のボーンを作ったところで終わってます。これからモーションを作成する手順を説明します。
unity20131111A-002

■■■■■ アイドリングモーションを作る ■■■■■

まずは、アイドリングモーションを作ります。アイドリングモーションは特に何もするわけではないですがこれから色々なモーションに分岐するための基本モーションとなります。

アイドリングモーションはニュートラルモーションを複製してから作りますます。

■■ アイドリングモーションはこんなモーション ■■

こんな感じでいってみましょう。あんま複雑なのは説明長くなるんで(ぉぃ
unity20131111A-003

■■ ニュートラルモーションを複製 ■■

アニメーションエディタ右下ビューのアニメーションクリップ一覧に現在唯一登録されている Neutral を右クリックし、Duplicate Entire Clip をクリックします。

Neutral から複製された New Clip をダブルクリックし、Idle にリネームします。
unity20131111A-004

■■ キーフレームを複製 ■■

アニメーションエディタのタイムラインの 20フレームを右クリックし、Duplicate First Keyframe in Column をクリックし、0 フレーム目(一番最初に作った直立不動のポーズのコマ)を 20 フレーム目にコピーします。
unity20131111A-005

これで、0 ~ 20 フレームまでの間同じポーズをとるモーションが完成です。

これは、0 フレーム目と 20 フレーム目にポーズを設定し、その間のポーズは両端のポーズをなめらかに繋ぐように自動的にポーズを作ってくれます。つまり、補完されます。この明確にポーズをつけたフレームがキーフレームとなります。今作ったのは 2 つ目のキーフレームですね。

今のモーションは動かないモーションになります。アニメーションエディターの再生ボタンを押しても動きません。
unity20131111A-006

■■ 3つ目のキーフレームを複製 ■■

最初と最後は同じポーズのモーションなので中間に違うポーズのキーフレームを作ります。先ほどと同じように 5 フレーム目の部分を右クリックして Duplicate First Keyframe in Column をクリックして 3 つめのキーフレームを作ります。
unity20131111A-007

5 フレーム目の一番上のグリッドをクリックします。ここは Body1 に相当します。つまり、Body15 フレーム目のポーズを編集できます。
unity20131111A-008

ポーズは特定フレームの特定パーツ(ノードともいう)の奥行き、位置、回転角度、大きさを変更することで編集していきます。

大きさ(Scale)の左下に Local ScaleImage Scale がありますがこれは、大きさを変更する時に影響します。 Local Scale を選んでいる時は子供ノードにも大きさが反映されます。Image Scale を選んでいる時は現在編集中ノードの画像のみに大きさが反映されます。
unity20131111A-009

■■■■■ ではモーションを作成するですぞ ■■■■■

■■ 5フレーム目 ■■

連続スナップショットいきます。

Body1 を右に傾けます。
unity20131111A-010

RightLeg を選択し、傾きを元に戻して足の位置ももといた場所にくるように調整します。
unity20131111A-011
unity20131111A-012

LeftLeg を選択し、傾きを元に戻して足の位置ももといた場所にくるように調整します。
unity20131111A-013
unity20131111A-014

Body2 を選択し、傾きを元に戻して右にズリっとずらします。
unity20131111A-015
unity20131111A-016

Body3 を選択し、もといた場所にくるように調整します。
unity20131111A-017
unity20131111A-018

Head を選択し、左にズリっとずらします。
unity20131111A-019
unity20131111A-020

■■ 10フレーム目 ■■

タイムラインの 10 フレームを右クリックし、Duplicate First Keyframes in Column をクリックし、0 フレーム目を 10 フレーム目にコピーします。
unity20131111A-025

Body3 を選択し、左にズリっとずらします。
unity20131111A-026
unity20131111A-027

Head を選択し、もといた場所にくるように調整します。
unity20131111A-028
unity20131111A-029

■■ 15フレーム目 ■■

タイムラインの 15 フレームを右クリックし、Duplicate First Keyframes in Column をクリックし、0 フレーム目を 15 フレーム目にコピーします。
unity20131111A-030

Body1 を選択し、左に傾けます。
unity20131111A-031
unity20131111A-032

RightLeg を選択し、傾きを元に戻して足の位置ももといた場所にくるように調整します。
unity20131111A-033
unity20131111A-034

LeftLeg を選択し、傾きを元に戻して足の位置ももといた場所にくるように調整します。
unity20131111A-035
unity20131111A-036

Body2 を選択し、傾きを元に戻して左にズリっとずらします。
unity20131111A-037
unity20131111A-038

Body3 を選択し、もといた場所にくるように調整します。
unity20131111A-039
unity20131111A-040

Head を選択し、右にズリっとずらします。
unity20131111A-041
unity20131111A-042

■■ 0フレーム目 ■■

0 フレーム目をを設定します。

Body3 を選択し、右にズリっとずらします。
unity20131111A-021
unity20131111A-022

Head を選択し、もといた場所にくるように調整します。
unity20131111A-023
unity20131111A-024

■■ 20フレーム目に0フレーム目をコピー ■■

20 フレーム目に 0 フレーム目をコピーします。

タイムラインの 20 フレームを右クリックし、Duplicate First Keyframes in Column をクリックします。

すでにキーフレームが存在するので上書きしてよいか確認してきますので Yes をクリックします。
unity20131111A-043

■■ 完成! ■■

これでイモムシ君のアイドルモーション完成です。

再生ボタンをおしてしばらくモーションの出来具合を堪能してください。つか、めっさ動き激しいですね。
unity20131111A-044

満足したらアニメーションエディタを閉じます。
unity20131111A-045

■■■■■ イモムシ君をシーンに配置 ■■■■■

■■ イモムシ君の配置とボーンアニメのビルド ■■

Hierarchy ビュー Create → SmoothMoves → Bone Animation をクリックし、ボーンアニメーションを生成します。

Inspector ビュー Bone Animation の Data を ImomushikunSMAnime に選択し、Force Build This Bone Animation をクリックする事でボーンアニメーションが構築されます。インスペクタの内容が現在選択されているモーションに合わせて更新されます。
unity20131111A-046

■■ 制御用スクリプトのコーディングと関連づけ ■■

イモムシ君の初期モーションは Neutral になっており動きませんので Idle に切り替わるスクリプトを作成します。

Project ビュー Assets / imomushikun を右クリックし、Create → C# Script をクリックして C# スクリプト Imomushikun を生成します。
unity20131111A-047

Project ビュー Assets / imomushikun を選択し、Imomushikun.cs をダブルクリックして Mono Develop を開きます。

ソースコードを入力し、Save ボタンをクリックして保存して閉じます。
unity20131111A-048

Project ビュー Assets / imomushikunImomushikun.cs スクリプトを Hierarchy ビュー Bone Animation にドロップします。
unity20131111A-049

これでシーンへのボーンアニメ配置完了です。

■■ カメラを調整 ■■

イモムシ君かなり大きいのでカメラを調整します。

Hierarchy ビュー Main Camera を選択し、Inspector ビュー TransformPositionX = 0, Y = 100, Z = -300 くらいにしておきます。

これで準備完了です。
unity20131111A-050

■■■■■ イモムシ君アニメーション再生 ■■■■■

再生ボタンをクリックしてイモムシ君が元気に動いたら完成です。
unity20131111A-051

■■■■■ イモムシ君スクリプトについて ■■■■■

【参考】
SmoothMoves API Documentation online

ボーンアニメーションを制御する場合、スクリプトは using SmoothMoves を指定します。

初期アニメーションの指定は Start() メソッドでは指定できないので Update() の中で指定します。

一回きりの指定なので割と手抜きしてますが複数のイモムシ君を配置した時のためにアニメーション再生開始のタイミングを乱数でずらすようにしています。

実際にゲームで使う時はここはきちんとコーディングします。

using UnityEngine;
using System.Collections;
using SmoothMoves;

public class Imomushikun : MonoBehaviour {

    BoneAnimation oBoneAnimation = null;

	// Use this for initialization
	void Start () {
        oBoneAnimation = GetComponent();
	}

	// Update is called once per frame
	void Update () {
        if (oBoneAnimation != null && Random.value > 0.995f) {
            oBoneAnimation.Play("Idle");
            oBoneAnimation = null;
        }
    }
}

■■■■■ 基本操作はこれで終わり ■■■■■

次は応用編色々いっときたいですね。マニュアルを見た感じだとカラーアニメーション的な事もできるらしいので使い方がわかったらまた紹介してみたいと思います。

次回は再びメトロヴァニア記事のネタを進めていきます。サイドビューアクションゲーム最高!

「シェアする」

ツイートツイート