どうもトミです。
キャラクターに動きをつけたいけど、難しそうとか、やり方が分からないとかで困っていませんか?そんな貴方のため、パーツ画像一枚だけで2Dアニメーションを作成できるアセット(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 の順でエディターを起動しよう
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/2fd70630052c5bcb21fbeb00b257a6cf-1024x228.jpg)
開いたら、こんな感じのエディターが表示されます。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/9598d63eafc17eb0be6ec5d1d1b0c2a2-1024x615.png)
起動できたら「Make New Portrait」をクリックする
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/716af305d4bb63f23cc938fc20375b36.png)
任意の名前を決めて「Make Portrait」をクリックする。ここではSlimeで進めます。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/bbdc2b2328ed4d2fa6cc7ee27a71d76f.png)
Make Portraitしたら左サイドがこのように表示されます。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/f20435ca1cc5a3d54d1847c1efd0abf2.png)
ここまで来たら早速アニメーションを作っていきましょう
1.Images – 対象キャラクターのパーツ画像(psd,pngなど)を用意する
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/dfd8e06e68fd62b8116584ad42173146-1024x1024.jpg)
用意した画像をロードしておく
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/add_image.png)
「Add Image」をクリックしてベースとなる画像を選択してください。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/57ab5021d30b0abf18f92ae80520f9e2-1-449x1024.png)
クリックしたら右サイドはこのような表示されます。
「Select Image」をクリックする
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/6b7605b42ff759727d3a5f2cf145bfbf-814x1024.png)
対象の画像を選択して「Select」をクリックしてください。するとこのような画面になります。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/1c807f68de56ad40938e59bed98c6c6c-1024x615.png)
2.Meshes – 各部位のメッシュ作成
続いて各部位のメッシュ作成をしよう
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/add_mesh.png)
「Add Mesh」をクリックしよう。すると右サイドはこのようになります。
Nameのところに「Body」を入れます。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/1e9968db8377a320b586edfe0c1782bb-1-322x1024.png)
「Make Mesh」をクリックしてください。すると頂点とラインを設定できる状態になります。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/2faf7f2d6eb656f31b8d32d6a76d7530-968x1024.png)
頂点を打ち終わったら「Make Polygons」→「Pivot」の順でクリックしてください。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/a3ca3b7e63d8572786188aef274627a9-383x1024.png)
そうしたらBody以外が消えた状態の画面になります。Bodyを画面の中央に持ってくるようにしましょう。(黄色い線が交わるところ)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/dd0bc234ef1c2272b461fda6d1298932-1024x615.png)
Bodyのメッシュと同じ要領で下記のすべてのメッシュを作っておきましょう。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/9a59165df752e0dc00d87988062c8b34.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/cc8c3dddec43e67bd5056c96217b43a6-300x237.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/f422805933f41438d1cb6ddf6aace7ad-195x300.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/c78cf5444f7f0709e01a1a5b0bbb4e13-1024x475.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/ec10b2c5137ab411fed7c8e0c6b29ae5-1024x480.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/0553acfab682ac89b639a75ec9846fa8-1024x422.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/2e65496662639ae321ccbbcc2f4ca4d9-1024x445.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/3b885c3b2c48cdb80af9db2cbe8e7d98-300x163.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/d0443beb8c406435cb004350d1b22d46-300x216.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/8f056de27a49fdf6ee76c8a7f8c88ed5-300x212.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/ea0a89248301dea69b9f288b8b45ecd7-894x1024.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/858595880b6c7d19e95c6f1070c7a0f6-300x288.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/6f471a472462e97719b9a0222f9d5a24-735x1024.png)
3.Mesh Groups – 作成したメッシュの位置・サイズの調整
各部位のメッシュを作ったらMesh Groupを編集しよう
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/add_mesh_group-2.png)
「Add Mesh Group」をクリックしてください。NameをSlimeにします。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/c3cdcb7eebfb9df8b0f80e8d359f69f8-1.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/2aeaf47ca797e112cf30620dad211233-1-575x1024.png)
「+」→「Select All」→「Add」でMesh Groupを作成しておきます。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/15508892350075579fe05463511ff223.png)
「Edit Default Transform」をクリックして、編集状態にする
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/f29e6525dc8df057ec53c19a3780aafa-1024x615.png)
ここまでやると、すべてのパーツが真ん中に集まって表示される画面になっているかと思います。
これから各パーツの位置とサイズと回転を調整していきます。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/6c2f1d5fe24958cba33869444440d610.png)
パーツを選択してあるべき位置に持っていくように、いい感じに調整してみよう。
目のアイコンはパーツのOn/Offの切り替えができます。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/659a28e23dcbeb90d12d949a1ea4d3e1-863x1024.png)
参考にこのように調整してみました。
4.Control Parameters – アニメーションをつけるためのパラメーター作成
Control Parametersはアニメーションをつけるためのパラメーターの作成を行います。
チュートリアルでは以下のパラメーターを作成します。
- 目(Eye Shape)
- 口(Mouth Shape)
- エモーション(Emotion)
- 縦方向移動(Vertical Position)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/add_Control_Parameter.png)
「Add Control Parameter」をクリックして各種のパラメーターを作成しよう
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/35c71fec786b857399d030990940c25d-422x1024.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/962f089d109b40b533f025df555658df-418x1024.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/4df767237f0761df2e9a7eaa05d6203a-416x1024.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/a8442672612d78503970c2f58d9919e4-383x1024.png)
5.Mesh Groupを選択してアニメーションをつけよう
作成したMesh Group(Slime)をクリックする
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/fb3ce09368b8ea0d94cfedb9490a7fe1-313x1024.png)
Transform(Controller)を使って目や口の動きを作ろう
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/ee424749ce03077ecec6e6e5905610a8-2.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/40988f17decda66583466b9ea40892c4-3.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/cb201fbf0cccf44e093c451c79198cc8-3.png)
「Modifier → Add Modifier → Transform(Controller)」の順でクリック
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/5ced115d68460e0b0c057a9fc797c561-1-482x1024.png)
先にEye Shapeの設定をしていきます。
赤い点(レコードボタン)をクリックしてスライドして・・・
以下の図のように、これを4回繰り返す
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/a04417123935caddced05e19e5e33123.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/9440b5ddeaed1176ffb7f54ffdeb338b.png)
Shiftキーを押しながら、Eye 1〜Eye 4を選択する
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/d5a0fef4b8b6fd7399815e655fc80b4b.png)
「Add to Keys」をクリックしてください。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/fd8658f8e3488d9b31cd4c6838057be7.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/4498ee0d6fc20119ac4bb764aec26f19.png)
Transform(Controller)の「Color Option On」を有効にします。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/fde9cd3d9d0f82597c95c379da9f8938.png)
ここまで完了したら、目のアニメーションの切り替えの設定をやっていきます。
先程のスライドを0にして、Eye 1の黄色いのマークのみをONの状態にしてください。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/7161d54698951fdf4b6e42c333340c51.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/1b7f9821cb89beaa3ecca00e3c9f5285.png)
同じようにスライドを1にして、Eye 2の黄色いのマークをONの状態にします・・・
同じ要領でEye 4までやってください。
Eye 4までやったらスライドを左右にずらしてみてください。スライドの状態によって目の動きが切り替わるようになっているかと思います。
ここまでは目の動き(Eye Shape)のアニメーションを作成できました。
続いてMouth ShapeとEmotionについても同じ要領でやってみてください。
ただしEmotionの0番目は何も割り当てないように注意してください(Noneの状態=何も表示しないため)。
Emotionの1番目はEmotion 1、2番目はEmotion 2、3番目はEmotion 3になるように設定しておいてください。
Morph(Controller)を使ってジャンプアニメーションを作ってみよう
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/ee424749ce03077ecec6e6e5905610a8-2.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/40988f17decda66583466b9ea40892c4-3.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/761d13c278db371fdb8a21060894fcd4.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/16fe60063f8bd85be5d342f2f5c752de.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/8c5098215d09e3a4ecdf585d2ed0c33e.png)
スライドの値が0と1のところでレコードキーを打ちましょう(赤い点)
スライドの位置を1にして、スライムのBodyをクリックして、それからBodyのすべての頂点を一括で選択して上へずらしてみてください。どこまでズラせばいいかは、ジャンプのおおよその高さをイメージして適当にしてみてください。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/9f15d7e91830a2215e654ba38e5dbc9b.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/b33b767d0771fbdaa6b8ebdbbae8c14c-799x1024.png)
移動のショートカットキーはW
スライドを25%(0.25)の所へ持っていき、レコードキーを打ってください。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/2f714f256659b195641d0f99d8f56741.png)
それからBodyのすべての頂点を選択した上で、FFD(Free-Form Deformation)ボタンを押してください。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/5d763e975d3df10c4fe478e02f192dff.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/b093e8b35b44e973c29c084dc0c994bf-1024x51.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/e97ca9306cb813ee4aa2a476eb0d086d.png)
一番上の段の3つの点を選択して、下へ少しずらす
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/53d4b9b7a41bbd16899e1c9f3e1c6707.png)
中段の3点を選択して、同じように下へ少しずらす
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/cb08e290c048d1902dc3c6883f640138.png)
同じ中段の左右の点を左右に引っ張るようにずらす
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/2098533173c0efe5536be6d00fcefa3c.jpg)
ずらし終わったら最後にチェックボタンを押して保存しましょう。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/f6d7ac743bedaa559945b6f88920c8a5.png)
Bodyのアニメーションを作成したら、それ以外のパーツのアニメーションはBodyの位置に合わせて作っていきます。
まずはすべて選択して「Add to Keys」で追加してください。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/0618f4b5f6ee9b813b1783030f19b300.png)
それからスライドのずらして、それぞれ0、0.25、1の状態のアニメーションをBody位置に合わせて作っていきます。
例えばスライドを1にした時の枝(Blanch)の位置はこんな感じでしょうか?
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/369c245730e30414795aa3b7f0e39b27-662x1024.png)
同じように他のパーツもあるべき位置に持っていくように調整しましょう。
パーツ同士が重なって分かりづらい時は目のマークをOFFにするといいでしょう。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/1985d38a1d97103eb6b7db5a82a4fd44.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/ba489603ebe0b02fc193f4ee7f4976ce-713x1024.png)
スライドの値が0.25時の枝はBodyの縮む具合に合わせて、少しスケールを小さくしてやるとより生き生きとしたアニメーションになると思います。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/b92cf69e375542d1a622c147d5e99aac.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/a5d195b4405c308a323c4f120f7f5aed.png)
スケールショートカットキー:R
回転ショートカットキー:E
6.Physical Effects(物理効果)を追加しよう
Physical Effectsはスライムにプリンのような質感をつけるためです。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/ee424749ce03077ecec6e6e5905610a8-2.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/40988f17decda66583466b9ea40892c4-3.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/dffce4e97974bd6216637966cb499967.png)
Bodyを選択して「Add to physics」をクリック
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/734d9e1c337b9b0c172e3c4e9dc5e10d.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/35bcf40eddfd49515e4fa4e8d3509507.png)
「Physics Presets」-> 「Robber Soft」の順に選択しよう
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/cb0d1f7dc4fe6ebf2ce64ac59a698c2d.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/ae9bf673ad76ed1366464d6207ba8463-564x1024.png)
Bodyの全頂点を選択し、「Viscosity Group ID」を1に、Weightを1に設定してください。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/3d3449c51820301e6c2670c47824266e.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/fc23c1aa03ca03edff10b6af25613a75.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/818867e89e93eb05825c47721e349d70.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/5406f830fa1228faa3a04ebeaf26f6f9.png)
TOPとBottomの頂点のWeightを0に設定します。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/1bd9f4283e009fc7e61202de086bb48a.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/08c34fdfc5ad45c7d19dc73d22bb929c.png)
左右の2頂点(下図青い丸)をImportant Vertexにします。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/8e71ba5d705afbd65f0291f0031215cf.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/2b96ced7b7fb3d69de4988eab8ece66d.png)
より自然な質感になるように、WeightをBlendしていきます。
下図の赤枠で囲まれた部分の頂点を選択して、「Blend」を5〜6回クリック
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/fa121558714dc9dd39ee608d994dcfd3.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/c29e30fafa8e3d53ee5138d8434a5d82.png)
更に下図のように、赤枠で囲まれた頂点を選択して「Blend」します。(4,5回)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/402c28e7148c271df28e29d2a6f24e9a.png)
7.Bake(書き出し)してGameViewで確認しよう
最後にBakeしてゲーム起動して確認しましょう。
Mesh Groupsの「Slime」を選択して「Setting」→「Set Root Unit」をクリックして、親オブジェクトにしましょう。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/e27faac7d1d328c0dab817b754f89398.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/e38dbee3c0e9fc9c83fc885411ce4f09.png)
「Bake」ボタンで書き出しを行います。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/0c0247eb65e3ea0a9d97b5bf5efdb354.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/a5736ee7a04a64fcc6bab193424a9a07.png)
書き出し終わったらAnyPortraitエディターを閉じてゲームを起動してみましょう。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/7672ec58233d7f4d4ee21f611592fd1a-1024x872.jpg)
以下は確認しやすくするための設定です。
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/c94df958759e1c924e3d793493f55ca5.png)
![](https://tomi-no-tubuyaki.com/wp-content/uploads/2022/02/f359f8c22ad4af81841dbc4c2f822ac6.png)
まとめ(成果物)
長い記事、本当にお疲れさまでした!
こんな感じでかわいいスライムのアニメーションができました!
AnyPortraitの使い方を覚えればクオリティの高いアニメーションでも比較的に手軽にできるので、是非導入してみて如何でしょうか?
コメント