Unity技術ブログ

AnyPortraitのスライムのアニメーションのチュートリアル

 

概要

AnyPortraitとはUnityの2Dアニメーション開発の本格的なエディタの拡張機能になります。
2018年3月7日にリリースされた非常に完成度の高いアニメーション作成エディタです。

・注意:
Unityバージョンは最新のものを使ってチェック!

本記事は、Unityの超有用アセットのAnyPortraitを使ってキャラクターをアニメーションさせていくまでのチュートリアルになります。

こちら、公式チュートリアルを噛み砕いて解説した記事になります。

今回はスライムのキャラクターを作成してアニメーションをつけていくまでのチュートリアルとなっています。

・AnyPortrait:使い方
チュートリアル:1.
https://www.youtube.com/watch?v=rLGG9Jp6s8A&list=PLgj5ezX2bzwev9FW9YOY2oLbvlR6HvQb4

・内容:
カメラの設定について
・DirectionalLightを消す


・MainCameraのInspectorでClearFlagsをSolidColorに
・BackGroundのいろをグレーに設定
・ProjectionをOrthographicに設定
・Farを500に

Window -> Lighting
・enviroment light の設定をColor -> Blackに変える
・SkyBoxMaterialをnoneに変える

Window -> AnyPortrait-> 2DEditorを開く


・Make New Projectを選択
・歯車ボタン(設定)を押下 ->Editorタブを選択 -> 言語で英語を選択

       

・bakeボタン押下でゲーム中にデータを反映可能

1.2
https://www.youtube.com/watch?v=0h7vCQ6HlJo&list=PLgj5ezX2bzwev9FW9YOY2oLbvlR6HvQb4&index=2

画像の読み込みとメッシュの追加、及びメッシュ周りの操作について解説

・AnyPortraitのEditorを開いて画像の選択と読み込みをおこないます。

・Select Image を押下して画像一覧を表示する

・SampleCharater_5を選択

・Editor画面に画像が読み込まれました。

・次にメッシュの追加を行います。

・まずは、メッシュの作成を行います。

・AddMeshを選択

・新しくMeshが作成されます。

・右のメニューから

Settingボタンを押下し、その後Change Imageを押下

・先ほど読み込んだ画像を選択し、Selectを押下

・右メニューからMakeMeshを押下

・スライムの周りをメッシュのポイントで囲っていく

・メッシュの形が作成できたらピボットで形を確定させる+オブジェクトの中心を決定する

を順次繰り返して形をいくつも作っていきます。

1.3
https://www.youtube.com/watch?v=8rJqWAHjt7s&index=3&list=PLgj5ezX2bzwev9FW9YOY2oLbvlR6HvQb4

メッシュグループの設定
・メッシュグループ追加ボタン押下して新しいメッシュグループを作る

・右の+ボタンを順次押して1.2で作成したメッシュオブジェクトを順次追加

Edit Default Transformボタンを押下する


wキーを押してオブジェクトを移動を移動
eキーを押して回転モードでオブジェクトを回転できる
rキーで拡大縮小

してうまくスライムの形にオブジェクトを配置する

(window右の目玉ボタン押下で各オブジェクトの表示、非表示を切り替えられる)

オブジェクトの調整が終わったら、ルートユニットボタンを押下する

その後、ベークボタンを押下するとゲームシーン上にオブジェクトが出現しゲーム中で確認できるようになります。

1.4
https://www.youtube.com/watch?v=9Hn5OdJWlow&index=4&list=PLgj5ezX2bzwev9FW9YOY2oLbvlR6HvQb4

制御パラメーターについて
アニメーション時に行う各種パラメーターの箱を順次定義できます。

EyeShape
MouthShape
Emotion
VerticalPostion
の各パラメーターを設定します。

・Add Control Parameterボタンを押下

各種パラメーターを作成し、以下のように設定

1.5
https://www.youtube.com/watch?v=BzjoxF9dqCM&list=PLgj5ezX2bzwev9FW9YOY2oLbvlR6HvQb4&index=5

1.4で設定したパラメーターに動きやアニメを割り当てます。

・まずはメッシュグループを選択する


・AddModifierボタンを押下

・Transform(Controller)を選択

・作成したモディファイアを選択

EyeShapeにキーを3つ追加


・各キーに応じて目の表情の表示

・MeshGroupの黄色い目のアイコンを押下で表示や非表示を切り替えられます。

・同じような流れで

・MouthShapeにもキーを設定し口の表情を割り当て

・Emotionにキーを設定し、!マークやキラキラのアイコンの表示を割り当てます。

1.6
https://www.youtube.com/watch?v=OY18RFb-v18&list=PLgj5ezX2bzwev9FW9YOY2oLbvlR6HvQb4&index=6

・モディファイア追加ボタンを押下


・morphコントロールモディファイアを追加


・オプションで色有効を無効に設定


・BodyMeshを選択

・VerticalPostionのキーを1の箇所にセットする
・Aキーを押下でエディットモードに変更
・範囲選択で各頂点を選択します。

・Y軸の値をあげて地面から浮かせます。

・同じようにBody以外の各パーツも体に追従するように地面から浮かせる

・次にVerticalPostionを0.25くらいの箇所にキーをセット

・Aキーを押下でエディットモードに変更
・範囲選択で各頂点を選択します。

・FFDアイコンを選択(上部の変形アイコン)(command押しながら選択で分割数を変えられる)

・上辺を選択します

・下にグッと下げます。

・左右を少し伸ばします。


・変形が完了したら右上の緑の選択マークを押下

・上記の操作を経て、スライムが跳ねるようなアニメーションが出来上がります。

 

その他変形説明
・FFDボタンの隣はソフト変形ボタン?
・ブラー変形ボタン(変形したメッシュを元の形に戻すような変形)

1.7
https://www.youtube.com/watch?v=VDv6A7wZ2ms&index=7&list=PLgj5ezX2bzwev9FW9YOY2oLbvlR6HvQb4

Physical Effectsのつけかたの解説

プルプル揺れるような動きをつける
・メッシュグループを選択
・モディファイアを選択


・physicsを選択


・メッシュグループからBodyを選択
・AddToPhysicsボタンを押下

・物理プリセットボタンを押下


・Rubber soft を選択

・Aキーを押下してエディットモードに変える

・頂点を範囲選択する

・Viscosity Group ID で1を押下する


・Set Important の箇所で1を押下する

・スライムが真っピンクになります!

・スライムの上部分を選択してSet Important の0を押下する


・スライムの下部分を選択してSet Important の0を押下する


・スライムの左と右の頂点を選択して SetImportant ボタンを押下


・スライムの中上部と中下部の頂点を選択してBlendボタンを押下でナチュラルなweightづけになる


・Bakeしてゲームシーン上で動きを確認する

・ゲーム再生後にキャラクターを動かすとプルプルと弾力のある動きがつきます。

1.8
https://www.youtube.com/watch?v=U1DtJlYeO3A&index=8&list=PLgj5ezX2bzwev9FW9YOY2oLbvlR6HvQb4

右上のキャプチャーボタンで サムネ画像やGifが出力できるみたいです。

※僕の方でもチュートリアルに沿ってキャプチャーボタンを探して見たのですが

見つからず・・・・(右上にキャプチャーボタンが表示されない・・・)

 

■次回以降につきまして

次回は、AnyPortraitのチュートリアル2.1

ボーンを組み込んでのアニメーション手法などについて勉強会などを開催していけたらと考えております。

 

また、平行してキャラクターデザインの教本輪読会や

キャラクタープロモーション戦略本の輪読会も企画しております。