AssetStore-AnyPortraitを使ってみた！2Dアニメーション制作

どうもトミです。

キャラクターに動きをつけたいけど、難しそうとか、やり方が分からないとかで困っていませんか？そんな貴方のため、パーツ画像一枚だけで２Dアニメーションを作成できるアセット（AnyPortrait）をご紹介します。

AnyPortraitを使えば初めての方でも簡単にヌルヌル動くアニメーションを作れます！
今回はAnyPortraitを使って簡単なアニメーションを作ってみますので是非最後までお付き合いください。

この記事を読めばこのようなアニメーションを作れます
AnyPortraitとは
AnyPortraitで出来ること
AnyPortraitを使ってみよう
まとめ（成果物）

この記事を読めばこのようなアニメーションを作れます

AnyPortraitとは

AnyPortraitは一言でいうとUnityの拡張エディターでシンプルにアニメーションを作成できるツールです。

公式チュートリアル動画（英語）

AnyPortraitで出来ること

-強力なGUIエディターで作業します。
-さまざまなツールを使用して2Dメッシュを簡単に作成できます。
-PSDファイルを開いてキャラクターを自動的に作成します。
-クリッピングマスクメッシュをサポートします。
-さまざまな種類の修飾子。
-頂点モーフィング。
-FFD、ソフト選択、頂点モーフィング用のぼかしツール。
-カラーアニメーションによる変換。
-IKをサポートするボーンを追加します。
-リギングとボーンアニメーション。
-キャラクターを制御するための複数の制御パラメーター。
-コントローラーパラメーターを使用してキャラクターの各部分を制御することにより、生きているキャラクターを作成します。
-いくつかの修飾子を設定して、動的で複雑なアニメーションを構成します。
-Physic Modifierを追加して、慣性効果と弾性効果を適用します。
-キーフレームアニメーションを作成するためのリターゲットとポーズスナップショット。
-スクリプトのアニメーションイベント。
-10の言語（英語、韓国語、フランス語、ドイツ語、スペイン語、デンマーク語、日本語、中国語、イタリア語、ポーランド語）をサポートします。
-加速されたアニメーションのアニメーション曲線。
-より自然なループアニメーションを作成するために、自動ループキーフレームと呼ばれる手法が適用されます。
-Bone IK、メッシュカラー、ブレンドアニメーションなどのさまざまな機能を制御するスクリプトAPI。
-イラスト、ジョイントキャラクター、動く小道具など、さまざまなオブジェクトに。
-ホームページ上の初めてのユーザーチュートリアル、リファレンスドキュメント、スクリプトAPI、および実行可能なサンプル。
-並べ替えレイヤー/並べ替え順序をサポート
-高度なスクリーンキャプチャ
-サポートスプライトシート
-Mecanimでアニメーションを制御する
-外部ボーンを使用するIKコントローラー
-自動キー
-自動メッシュ生成
-3Dゲームのパースペクティブカメラをサポート
-ビルボード機能
-MP4ビデオのエクスポート
-軽量レンダリングパイプラインがサポートされています
-ユニバーサルレンダリングパイプラインがサポートされています
-Unityのタイムラインがサポートされています
-マテリアルライブラリ
-VRがサポートされています
-ジグルボーン
-同期を使用してキャラクターのコスチュームを置き換える

AnyPortraitを使ってみよう

今回は英語のチュートリアルを日本語で作りながら解説していきたいと思います。

AnyPortraitをインポートしてエディターを起動しよう

Window => AnyPortrait => 2D Editor の順でエディターを起動しよう

開いたら、こんな感じのエディターが表示されます。

起動できたら「Make New Portrait」をクリックする

任意の名前を決めて「Make Portrait」をクリックする。ここではSlimeで進めます。

Make Portraitしたら左サイドがこのように表示されます。

ここまで来たら早速アニメーションを作っていきましょう

１．Images – 対象キャラクターのパーツ画像（psd,pngなど）を用意する

用意した画像をロードしておく

「Add Image」をクリックしてベースとなる画像を選択してください。

クリックしたら右サイドはこのような表示されます。
「Select Image」をクリックする

対象の画像を選択して「Select」をクリックしてください。するとこのような画面になります。

２．Meshes – 各部位のメッシュ作成

続いて各部位のメッシュ作成をしよう

「Add Mesh」をクリックしよう。すると右サイドはこのようになります。
Nameのところに「Body」を入れます。

「Make Mesh」をクリックしてください。すると頂点とラインを設定できる状態になります。

頂点の打ち方：
マウス左クリックで打つ。右クリックでキャンセル・削除

Shiftキーを押しながら打つとラインの交わる所に自動で頂点が挿入される

頂点を打ち終わったら「Make Polygons」→「Pivot」の順でクリックしてください。

そうしたらBody以外が消えた状態の画面になります。Bodyを画面の中央に持ってくるようにしましょう。（黄色い線が交わるところ）

Bodyのメッシュと同じ要領で下記のすべてのメッシュを作っておきましょう。

各パーツのメッシュの形、ご参考にどうぞ。**各パーツは画面の中央に持ってくるように**

３．Mesh Groups – 作成したメッシュの位置・サイズの調整

各部位のメッシュを作ったらMesh Groupを編集しよう

「Add Mesh Group」をクリックしてください。NameをSlimeにします。

「＋」→「Select All」→「Add」でMesh Groupを作成しておきます。

「Edit Default Transform」をクリックして、編集状態にする

ここまでやると、すべてのパーツが真ん中に集まって表示される画面になっているかと思います。
これから各パーツの位置とサイズと回転を調整していきます。

ショートカットキー
W：パーツの移動
E：パーツの回転
R：パーツのサイズ調整

パーツを選択してあるべき位置に持っていくように、いい感じに調整してみよう。
目のアイコンはパーツのOn/Offの切り替えができます。

参考にこのように調整してみました。

４．Control Parameters – アニメーションをつけるためのパラメーター作成

Control Parametersはアニメーションをつけるためのパラメーターの作成を行います。
チュートリアルでは以下のパラメーターを作成します。

目（Eye Shape）
口（Mouth Shape）
エモーション（Emotion）
縦方向移動（Vertical Position）

「Add Control Parameter」をクリックして各種のパラメーターを作成しよう

５．Mesh Groupを選択してアニメーションをつけよう

作成したMesh Group(Slime)をクリックする

Transform（Controller）を使って目や口の動きを作ろう

「Modifier → Add Modifier → Transform（Controller）」の順でクリック

先にEye Shapeの設定をしていきます。
赤い点（レコードボタン）をクリックしてスライドして・・・

以下の図のように、これを４回繰り返す

Shiftキーを押しながら、Eye 1〜Eye 4を選択する

「Add to Keys」をクリックしてください。

**「Add to Keys」をクリックすると図のように緑のマークがつくようになります。**

Transform（Controller）の「Color Option On」を有効にします。

「**Color Option On**」を有効にすると図のように黄色い目のマークが表示されます

ここまで完了したら、目のアニメーションの切り替えの設定をやっていきます。

先程のスライドを０にして、Eye 1の黄色いのマークのみをONの状態にしてください。

同じようにスライドを１にして、Eye 2の黄色いのマークをONの状態にします・・・
同じ要領でEye 4までやってください。

Eye 4までやったらスライドを左右にずらしてみてください。スライドの状態によって目の動きが切り替わるようになっているかと思います。

ここまでは目の動き（Eye Shape）のアニメーションを作成できました。

続いてMouth ShapeとEmotionについても同じ要領でやってみてください。
ただしEmotionの０番目は何も割り当てないように注意してください（Noneの状態＝何も表示しないため）。
Emotionの１番目はEmotion 1、２番目はEmotion 2、３番目はEmotion 3になるように設定しておいてください。