2022/5/21 加筆・修正しました。
今回は「アニメーションの作り方」についてお伝えします。
この記事を読めば、
- 簡単なポーズ・アニメーションが作れるようになる
- VRChatの遊びの幅が大きく広がる
- 商品販売の幅が広がる
などのメリットがあります。
具体的には、
- AFKモーションとしてアバターに設定したり、
- アニメーションを友人に披露したり、
- BOOTHの紹介写真を撮影したり、
という感じですね。
例えばあなたが「水着の3Dモデル」を販売する場合、
- 水着の写真を単体で載せるよりも、
- アバターが可愛いポーズで水着を着ている
方がイメージが良いですよね。
この辺りは記事の最後でお伝えします。
この記事は『Very Animation』の使用を前提としています。
します。
Very Animationの入手方法は後述するので、このまま読み進めてください。
記事の流れをザックリ説明すると、
- 参考にする画像の準備
- Unityの作業環境を整える
- Very Animationの基本操作
- アニメーションの作り方を解説
- BOOTHの紹介写真に使える透過写真の撮影
という感じでお伝えします。
「作り方を教えるから自由にやってみて」と言われても、多くの人は無理だと思うので、今回はこちらを作ります。↓
これは僕が作ったAFKモーションです。
このモーションをイチから作っていく中で、
- Very Animationの基本操作
- 写真撮影用『ポーズ』の作り方
- 初心者がつまずきやすいポイント
をお伝えします。
「今日初めてアニメーションに触れる方」に向けてお伝えしますので、ゆっくり進めてみてくださいね。
↓素材のダウンロードはこちらからどうぞ！
※注意事項
- 本格的なアニメーションを作りたい方
- すでにある程度の知識がある方
には合わない場合があります。ご了承ください。
※難しい操作を省いたり、専門用語を簡単な表現に言い換える場合があります。ご了承ください。
※この記事はアバターSDK3.0を使用します。
目次
アニメーションを作る前に参考画像を用意しよう！
アニメーションを作る上で重要なのが、参考にする写真です。
可愛いポーズが作りたくても、脳内イメージだけでは抽象的過ぎて、手が止まってしまいます。
僕には、
- イラスト
- 写真
の知識はありません。
じゃあどうやって、細かいポーズを作っているのかといえば、
- Pixabay
- ぱくたそ
などのフリー画像（商用OK・無料素材）サイトで、参考になる写真を用意しています。
写真を見て作ることで、人体の構造を理解していなくても、ある程度のクォリティーをだすことができます。
自分のイメージに合った画像が見つからない場合は、
- 作りたいポーズを実際に自分でしてみる
- 自分の体を見ながら作る
のがおすすめです。
（これはVRChatではなく、現実の体で行ってください。）
要は『どう作るのか？』を具体的にイメージできればOKなのです。
ですが『女の子座り』を男性がやっても、「なんか違うよなぁ～」となると思いますので、参考画像の利用をおすすめします。
1.『Pixabay』で参考画像を探す
リンク：2.300万点以上の高品質なフリー画像素材 – Pixabay
Pixabayとは、無料で高品質な写真・画像を集めたサイトです。
公開されているコンテンツは、クリエイティブコモンズCC0（いかなる権利も所有しない）なので、様々な用途で活用できます。
2.『ぱくたそ』で参考画像を探す
リンク：ぱくたそ – すべて無料の写真素材（フリー素材）、人物や背景・テクスチャーなど高解像度の写真をダウンロード (pakutaso.com)
『ぱくたそ』も無料で高品質な写真・画像をダウンロードできるサイトです。
人物は日本人が中心で、多くのウェブサイト等でも使われているので、見たことがある人も多いのではないでしょうか。
感情を表現したポーズが豊富で、「○○な場面のポーズを作りたい」といったニーズにピッタリです。
【Unity】アニメーションを作る作業環境を整えよう
今回もキュビクローゼット様のオリジナル３D モデル、『狐雪』ちゃんを使わせていただきます！
オリジナル3Ｄモデル「狐雪」Ver.1.04 – キュビクローゼット – BOOTH
めっちゃ可愛くて、表情も豊富で創作活動が楽しくなるのでおすすめ。
まずはUnityの作業環境を整えます。
流れは、
- VRChatへのアップロードに必要なファイルをインポート
- 『Very Animation』の購入・インポート
- アニメーション素材の動作確認をする
- かさばる服・髪を見えないようにする
- 背景を見やすくする
- 視点の切り替え
という順番でお伝えします。
知っている情報は飛ばしてOKです。
1.必要なファイルをUnityにインポート
まずは、
- VRChatのアップロードに必要なファイル
- 参考アニメーション素材（眠い）
をそれぞれUnityにインポートしてください。
ファイルのインポートが完了したら、アバターのprefabをHierarchyに入れます。
「インポートのやり方がよくわからない！」という方は、こちらの記事で詳しく解説しています。↓
Unityのインストールからスタートするので、超初心者の方でも大丈夫です。
2.Very Animationの購入・インポート
こちらのリンクからUnityのAsset Storeを開きます。↑
- Unityにサインインする（Sign In から）
- 『Add to Cart』からダウンロード
という手順で行います。
※お支払いが完了すると『Add to Cart』が『Open in Unity』に変わるので、Unityを開いてインポートしてください。
3.アニメーション素材の動作確認をする
今回は冒頭でお伝えした素材、『眠い』を使用します。
完成のイメージをもってもらうため、アニメーションファイルを再生する方法をお伝えします。
Unityの『Assetes』中で、
- 右クリック
- 『Create』から、
- 『Animator Controller』を追加
します。
- アバターをHierarchyに入れて選択
- Animatorの欄の、Controllerの中に、
- 追加した『Animator Controller』を入れる
- ダブルクリックでAnimator画面へ
というところまで進めてください。
Animator画面に移ったら、アニメーション素材を中に入れます。（ドラッグ＆ドロップ）
『Scene』から最初の画面に戻ります。
- 『Window』から、
- 『Animation』を追加して、
- 『再生ボタン』を押す
ことでアニメーションを再生できます。
この手順はどのアニメーション素材にも有効なので、ぜひ覚えておいてください。
4.かさばる服・髪を見えないようにする
実際に再生してみると、
- もこもこした服や、
- 長い髪
- ケモ耳・尻尾
で体が見づらいので見えない状態にします。
（※嵩張るもの、手足に装着されたものを外します）
基本的に薄着の状態で作り、最後の仕上げで元の姿に戻して完成させます。
5.背景を見やすくする
ついでに背景も青空（skybox）だと見づらいので、単色の黒に設定します。
- 『Edit』から『Preferences…』を選択
- 『Colors』を選択
- Sceneの『Back ground』を選択してRGBを0にする
- 絵のマークからSkyboxを選択する
と背景が変わります。
『Preferences』のタブを閉じて、画面上部の絵のマークから、Skyboxを選択すると背景が設定した色（黒）になります。
6.視点の切り替え
ここで１つ重要なことをお伝えします。
アニメーションを作る時に、
- 真正面
- 真横
- 真上
- 真下
から見て編集します。
画面の右上にある、
- XYZの視点を切り替え（緑・青・赤・灰色）
- 奥行きの切り替え（中央の□）
の操作を必ず覚えてください。
これができないと、体が地面に埋まったり、いびつな形に仕上がります。
上記の操作に加えて、
- 右クリックを押しながらマウスを動かすことで、斜めに視点を動かせる
- マウスホイールを押し込みながら、マウスを動かすことで、画面を固定したまま動かせる
ので、これらも合わせて操作してみてください。
【Unity】Very Animationの起動と基本操作
次に基本操作の説明をします。
- アニメーションファイルの設定
- Very Animationを起動する
- アバターのポーズをリセットする
- 基本操作の解説
という順番でお伝えします。
編集作業は主にアバターの体を、
- 前後・左右・上下に移動させる方法と、
- 軸を回転させる方法
の2つを中心に行います。
この２つを覚えれば、編集作業の7割はできるようになります！
0.編集するアニメーションファイルを設定する
まず、編集に使用するファイルの設定をします。
- 『Assets』で右クリック、
- 『Create』から『Animation』を選択
- 名前を『test』に変更
- 『Loop Time』にチェックを入れる（重要）
ところまで進めます。
『Assets』で右クリックをします。
『Create』から『Animation』を選択してください。
名前を半角で『test』に変更します。（わかりやすい名前をつけます）
- Hierarchyのアバターを選択する
- Animator画面を開いて、お手本の素材の上で右クリック
- Delete選択して消す
- 代わりに『test』のファイルを入れる
『アニメーション素材の動作確認』の項目で使用したファイル（オレンジ色）を、右クリック→Deleteを選択して消します。
代わりに『test』をドラッグ＆ドロップしたら、『Scene』を押して最初の画面戻ります。
（※素材の動作確認を行っていない人は、そのままtestを入れればOKです。）
Loop Timeとは？
Loop Timeというのは、音楽のループ再生みたいに、繰り返し再生される設定です。例えば５秒のアニメーションの場合、
- 5秒経過した後、
- また最初（0秒）からスタートして繰り返し再生され続けます。
今回は「眠いよ～」って、目をこすり続けるアニメーションなのでチェックを入れます。
『Loop Time』にチェックを入れない場合というのは、
- ゲームの「究極の奥義」的なもの
- 一発限りのアニメーション
を作りたい場合です。
「究極の奥義」が短時間に何度も繰り返されたら「ええ…」って思いますよね。
- 一発限りで終わらせたい（チェックなし）
- 何度も繰り返したい（チェックあり
という感じで『Loop Time』を使い分けます。（AFKモーションは基本的にチェックを入れます）
1.Very Animationの起動
- 『Window』から
- 『Very Animation』→『Main』を選択
します。
すると画面の右端に『Very Animation』のタブが追加されるので、
- Hierarchyのアバターを選択
- タブの『Focus Animation Window』をクリック
- 『Edit Animation』をクリック
すると編集画面が開きます。
↓
↓
↑必ずこの順番で行わないと、編集画面が開かないのでご注意ください。
言語を日本語に設定するには？
- Settingsをクリック
- 『Japanese』を選択
すると一応日本語に設定できますが、、、
「どこが変わったの！？」というくらい、変化がみられません。
『Edit Animation』がクリックできない時は？
という方もいますよね。
これはどういうことかと言うと、
- 「選択しているアバターに、編集するアニメーションファイルが設定されていないよ」
- 「アバターにアニメーションファイルを設定してね！」
ということなのです。
解決方法は、1つ前の項目『編集するアニメーションファイルを設定する』を読み直してください。
2.アバターのポーズをリセットする
まず一番最初に行うべきなのは、アバターのポーズをリセットすることです。
- 『VA Editor』のメニューから、
- 『Pose』の欄の、
- 『Reset』→『T-Pose』をクリック
するとポーズがTポーズにリセットされます。
『T-Pose』が無い場合は？
という人もいると思います。
結論から言うと、僕も原因がよくわかりませんでした。（ごめんなさい）
「じゃあどうすれば良いの…？」となりますよね。。
結論は、『Edit Start-Pose』で代用します。
（要はポーズをT字にリセットすることが目的なので、これで問題ないはずです。）
原因を探るべく、
- PCの再起動
- 新規プロジェクトの立ち上げ
- アバター、VeryAnimationの入れ直し
- 狐雪以外のアバターで試す
など試してみましたが、解決できませんでした。。
ところが、1か月くらい前に立ち上げてあったUnityプロジェクトで、同じように『Very Animation』をインストールした結果、
なぜか普通に『T-Pose』がありました。（なんで…？謎。。）
（過去に使ったプロジェクトで試すと良いのか？？）
この謎を解明できた方、お手数ですが、こちらのツイートに連絡をくださると嬉しいです。
ベリーアニメーションのポーズをリセットする項目に、『Tポーズ』の項目がある場合と無い場合があって、原因がわからないのですが、、、
どなたか教えていただけないでしょうか…？ pic.twitter.com/gdw0mwbaA9
— いーぐる@AFK Motion (@jiriblog) June 3, 2021
体が一部消える（表示されない）場合は？
という方もいると思います。
これはアバターによりますが、狐雪ちゃんの場合、
- Body_allに腕のシェイプキーがある
- シェイプキーで腕を表示させたのに、
- VeryAnimationの起動と共に消える（反映されない）
という不具合が起こる場合があります。
原因は謎なのですが、結論は『Edit Start-Pose』を押したら表示されました。
やり方は同じです。
- 『VA Editor』のメニューから、
- 『Pose』の欄の、
- 『Reset』→『Edit Start-Pose』をクリック
してみてください。
Very Animationの基本操作① 前後・左右・上下に体を動かす
- 『Move Tool』を選択
- 体の絵の中から、手にチェックを入れる
- アバターの足をクリックすると、矢印の方向へ動かせる
ところまで進めます。
『Move Tool』を選択中は、画面左の体の絵（IK）にチェックを入れることで、体を好きな方向へ動かせるようになります。
試しに動かしてみてください。
IKのチェックを入れた場合・入れていない場合
↑IKにチェックを入れた手
↑チェックを入れていない手
画面左の体の絵（IK）にチェックを入れたところと、入れてないところを見比べてみてください。
- 『チェックを入れたところ』→立体の小さな三角形が表示される
- 『チェックを入れていないところ』→白い○のまま
となっていますよね。
立体の小さな三角形は、マウスで選択して、前後左右上下に動かせます。
しかし白い○のままの場合、移動させられません。
『Move Tool』を選択していても、画面左の体の絵（IK）にチェックを入れていないと、矢印の方向へ動かせません。
この操作は初心者がよく失敗するので、何度も動かして覚えてください。
と思ったら、「IKにチェックを入れ忘れていた…」というパターンが多いです。
Very Animationの基本操作② 体の軸を回転させる方法
続いて②の『軸を回転させる方法』です。
- 『Rotate Tool』をクリック
- 選択している部位の円をマウスで動かす
ことで、選択している部分を中心に回転させられます。
選択した部位を解除したい時は、背景（何もない場所）をクリックすることで、選択を解除できます。
選択している部位の近くを選択したい時は？
- 最初に首の○を選んだ状態で、
- 頭を選択したい場合
など、現在選択している部位と、次に選択したい部位が近い場合、クリックしても反応しません。
一度背景をクリックして、選択を解除すると反応します。
体を回転させてみよう
いろいろ傾けてみます。
肘や膝の関節を動かしたい時は？
肘や膝の関節を動かしたい時は、画面左の体の絵（IK）の選択を解除してからでないと、動かせません。
とはいえ、肘や膝を回転させてみるとわかりますが、あり得ない方向に体が曲がります。
基本的には、
- 肘を動かすなら、肩を動かす
- 膝を動かすなら、足の付け根を動かす
のが無難です。
ただし、肘や膝を動かす場面もあるので、操作手順は覚えておいてください。
Very Animation基本操作③ IKで体を固定する
- 体全体を動かす方法
- IKで体を固定する方法
をお伝えします。
①体全体を動かす
まず画面左上の『Move Tool』を選択して、腰の辺りにある◎を選択します。
するとXYZ軸の矢印が出てくるので、自由に動かしてみてください。
この操作で体全体を一度に動かすことができます。
②体をIKで固定する
ここで重要なのは、
- IKが選択されている部位はその場に固定される
- IKが選択されていないと自由に移動させられる
という違いです。
IKにチェックを入れた足は、地面に足が固定されて膝が曲がります。
ちなみに両足にチェックを入れて、体を下に下げることで、しゃがむことができます。
【応用】地面に寝かせる
◎を選択して体を回転させて、下に下げると地面に寝かせることもできます。
Very Animationの基本操作④ ミラー機能（左右対称に動かす）
『VA Editor』の中にある『Mirror』を選択することで、左右対称のポーズを簡単に作れます。
女の子座りをする時も使うので、この機能も覚えておいてください。
【重要】アニメーションをパソコンに保存する方法（Unity package file）
- Assetsの中のアニメーションファイルを選択
- 画面左上の『Assets』から、
- 『Export Package』を選択
- 『Export』を押す
という手順でPCに保存できます。
BOOTHの商品に多い、Unity package fileに保存されます！
- データの仮保存
- 作ったデータをシェア・販売したい
という時に便利です。
ゲームと同じように、アニメーション制作も『こまめにセーブ』することが大切です。
「Unityがフリーズして再起動したら、データが全部飛んでいた…」ということが起こります。（経験談）
完成していなくても、こまめにセーブしましょう。
以上の操作ができれば、簡単なポーズやアニメーションを作って保存できます。
作業に詰まったら、目次からわからない項目へジャンプして、確認してみてくださいね。
【Unity初心者向け】Very Animationで簡単なアニメーション・ポーズを作る方法
前置きが長くなりましたが、ここからはアニメーションを作っていきます。
工程は、
- ポーズをリセットする（T-Pose）
- 両足以外のIK（チェック）を外す
- ◎を選択してアバターをしゃがませる
- ミラー機能にチェックを入れて、足を外側へ広げる
- 足の間にある青色の円を選択して、前に倒す
- 片手を太ももの上に置いて、脇を閉める
- 手を軽く握った状態にする
- もう片方の手を目の近くへ移動させる
- 表情を作る（服を着せて雰囲気を確認）
- 細かな仕上げをする（ポーズの完成）
- 固定ポーズを作る（モーション無し・撮影用）
- アニメーションファイルを複製する
- 動作（モーション）を入れる
- 完成！（VRChatにアップロード）
という流れで編集します。
基本操作の復習も兼ねて進めます！
1.ポーズをリセットする（T-Pose）
- 『VA Editor』のメニューから、
- 『Pose』の欄の、
- 『Reset』→『T-Pose』をクリック
してリセットします。
上述した基本操作で変なポーズになっている方は、ここでリセットしましょう。
2.両足以外のIKを（チェック）を外す
『眠い』ポーズは女の子座り（ぺたん座り）ですので、
- 頭・両手のIKを外す
- 両足のIKにチェックを入れる
- アバターをしゃがませる
- 足の向きを変える
という流れで下半身を作ります。
手のIKにチェックが入っていると変なポーズになるので、ここで両足以外のIKを外します。
3.◎を選択してアバターをしゃがませる
- 『Move Tool』を選択して、
- 腰の辺りの◎を選択して、
- Y方向（緑）の軸を下に下げる（上下の動き）
ところまで進めます。
良い感じにできていると、
- 上半身はT字のまま、
- 下半身はしゃがんだポーズ
になっています。
※下に下げ過ぎると足の形が崩れてバグります。
（失敗したら、キーボードの ctrl ＋ Z で1つ前の状態に戻せます）
体を上下に動かせない場合は？
という方は、◎じゃなくて、近くの〇を選択してしまっています。
解決方法は簡単です。
- 背景をクリックして〇の選択を解除する
- マウスホイールでズームさせて、◎をクリック
という順番で操作すれば上手にできます。
4.ミラー機能にチェックを入れて、足を外側へ広げる
- 『Move Tool』を選択して、
- ミラー機能を選択
- 立体の小さな三角形を選択
- 足を外側へ広げる
ところまで進めます。
良い感じにできていると、
- 足が綺麗にアルファベットのMを描いた状態
になっています。
5.足の間にある青色の円を選択して、前に倒す（ぺたん座りにする）
- 足の間にある青色の円を選択して、前に倒す
- 真横の視点に切り替えて、奥行きを無くす
- 足の裏を自然な向きに回転させる
- 踵の高さをお尻と平行な位置へ持ち上げる
ところまで進めます。
良い感じにできると、
- 真横から見た時に、
- 上半身から太ももの角度が90～120°
- お尻から膝までまっすぐ！
になっています。
順番に見ていきます。
まず足の間にある青色の円を選択して、前に倒します。
するとM字の状態から、女の子座りに変化します。
（ミラー機能で左右対称に倒します。）
参考画像や自分の足で、自然な足の角度を見ながら調整します。
真横の視点に切り替えて、奥行きを消します。
奥行きを消すと背景のグリッド線が見えるので、お尻から膝までまっすぐにします。
コツはいろいろな角度から見ること。
真横から見て完璧でも、「真後ろから見たら、異常な向きに足が曲がってた…」ということがあります。
特に、
- 足の裏（親指側）
- お尻
- 太もも
- 膝
がまっすぐ（平行）になっているかをグリッド線で確認します。
6.片手を太ももの上に置いて、脇を閉める
- ミラー機能を解除
- IKにチェックを入れる
- 手首を回転させ、手の向きを変え、脇を閉める
というところまで進めます。
良い感じにできていると、
- 腕が自然な状態（力の抜けた様子）で、
- 太ももの上に置かれている
状態になります。
視点を
- 真上
- 真横
- 真正面
- 斜め
からそれぞれ見て確認。
まず手を選択します。
脇の青い円を選択して、脇を閉じます。
（ピッタリ体に着けず、少し隙間をあけます）
様々な視点に切り替えたり、斜めからも見て、自然な形に整えていきます。
上手くできない時は…
という人は、『眠い』のお手本アニメーションを、もう一度再生してみましょう。
「編集中のファイルとは別に、Unityの新たなプロジェクトを立ち上げる」のがおすすめです。
つまり、
- 今編集しているプロジェクト
- お手本のアニメーションを確認する用のプロジェクト
という様に2つ立ち上げておくとスムーズです。
- 参考画像や、
- 自分の手足を見つつ、
- お手本のアニメーションも見る
という感じで進めましょう。
※アバターによって仕様も異なるため、写真と違う場合もあり得ます。
7.手を軽く握った状態にする
- 『VA Editor』の、『Hand Pose』から
- ツマミを動かして手を握らせる
- 指が埋もれるので、手首を回転させる
ところまで進めます。
『VA Editor』の、『Hand Pose』のツマミを動かして、手を軽く握った状態にします。
握らせる手を間違えたら、ctrl ＋ Z で元に戻せます。（重要なので何度も言います）
真正面から見ると、「完璧や…！」って思うのですが、真横から見ると手が浮いていました。
何度も言いますが、「いろいろな角度から見る」のがコツです。
8.もう片方の手を目の近くに移動させる
- もう片方の手のIKにチェックを入れる
- 手を目の近くに移動させる（大体でOK）
- 手首の向きを整える
- 手のひらを軽く握らせる
というところまで進めます。
同じように、『VA Editor』の『Hand Pose』で手を握らせます。
後から整えるので、位置や角度は大体でOKです。
手の指を動かすには？
- ▼をクリックして指を1本ずつ握らせる
- 指の▼をクリックして左右に微調整
ができるので、細かく調整したい方はどうぞ。
9.表情を作る（服を着せて雰囲気を確認）
- 『Inspector』をクリック
- 『Hierarchy』をクリックして、
- アバターの髪、ケモ耳等を見える状態にする
- 表情を変える
ところまで進めます。
『Preview』をクリックすると、編集中のポーズが再生されたまま、表情を編集できます。
まず画面右上の『Inspector』タブをクリックします。
Hierarchyの中のアバターを選択して、髪やケモ耳のチェックを入れ、見える状態にします。
（ここでTポーズに戻るのは仕様であり、Very Animationタブを再度開けば、編集中の画面に戻れるのでご安心ください。）
アニメーションを再生させるには？
一番最初にお手本を確認した、『Animation』タブを開きます。
（※画面上部の『Window』→『Animation』から出せます）
「再生ボタンを押したら、体が動いちゃった！」という場合は？
という方、たぶんいると思います。
そういう時は、
- 再生ボタンを再度押して動きを止める
- 白い線をマウスで掴んで、
- 0秒の位置に戻す（重要）
ことで元のポーズに戻るのでご安心くださいね。
必ず0秒（左端いっぱい）まで戻してください。
中途半端な位置に白い線があると、手足を微調整した時に、
- ポーズではなく、
- モーション（動作）として
入力されてしまいます。
重要なので注意してください。
表情を作る理由とは？
記事では『眠そうなポーズ』を作りますが、あなたの好みで自由な表情に変えてみてください。
「なぜ表情を作る必要があるのか？」という点について、疑問を抱く方もいると思います。
結論から言うと、
- 目がパッチリ開いたままでは、手の位置が合わせにくいから
です。
アバターにもよりますが、VRChat向けのアバターは目が大きい傾向にありますよね。
- 目をパッチリ開いた時と、
- 眠そうに閉じかけている時
では、目をこする手の位置が違ってきます。
そのため、あえて表情を作る工程を入れています。
表情を入れるとモチベーションが上がる！
表情を入れてみるとわかりますが、可愛い表情を作ることで、作業のモチベーションが大幅に上がります！！
表情を入れることで、
- 「このアバター、こんな表情できたんだ…！」
- 「この角度からのこの表情、めっちゃ可愛い…！！」
という知られざるアバターの魅力に気づくことができます。
アバターを改変している人でも、細かな表情調整をしている人は、あまり多くないと思います。
ここまでの、
パァッと明るくなります。
アニメーション制作のイメージがガラリと変わる瞬間を、感じていただけると思います。
※VRChatへアップロードする前に、表情のシェイプキーをすべて元に戻さないと、VRChatでも表情が適用されてしまうのでご注意ください。
ちょっと余談ですが『狐雪ちゃん』を買った時は、「それなりに好き…」だったんですけど、アニメーションで表情作ってたら、「めっっっっちゃ好き！！」にランクアップしました。
あなたも今の好きの、「最低10倍」は好きになります。
10.細かな仕上げをする（ポーズの完成）
- 髪やケモ耳を再び見えないようにする
- 『Very Animation』タブを開く
- 体を地面に着ける（重要）
- 手の微調整をする（表情に合わせて）
ところまで進めます。
ここでポーズを完成させますので、そのつもりで整えましょう。
Hierarchyから髪やケモ耳を再び見えない状態にして、Very Animationタブをクリックして起動します。
緑の軸が生えているところが地面です！
体の中心から伸びている、緑の軸の付け根がありますよね。
- この付け根と、
- アバターのお尻が同じ位置になるよう下げる
必要があります。
この緑の軸が生えているところが地面だと思ってください。
IKの絵の足元をクリックすると、◎と同じ効果
実は体全体を動かす方法は2つあります。
- ◎をクリックする方法と、
- IKの絵の足元をクリックして（青く光った状態）
でも動かせます。（お好きな方でOK）
体全体のIKをすべて解除します。
画面左上の『Move Tool』を選択して、体を緑の軸の付け根まで下に下げます。
11.固定ポーズを作る（モーション無し・撮影用）
次にモーション無しの固定ポーズを作ります。
- 画面右の再生ボタンを押す
- 0秒の位置で縦一列を全部選択した状態にして、
- キーボードの ctrl ＋ A で全選択する
- 右側の縦一列を左側に統合する
ことで固定ポーズを作れます。
まずは画面右側の再生ボタンを押してみてください。
ここを押すと、編集中のアニメーションが動き出します。
◇を統合する方法は？
固定のポーズですので、アニメーションを再生させても、体が動かないよう設定する必要があります。
そのためには、◇の一番上をクリックして、縦一列を一度に選択します。（青色になったら選択された状態です。）
（※全部選択されなかった場合、アバターの背景をクリックすると、選択を解除できます。）
縦一列を一度に選択した状態で、キーボードのctrl ＋ A を押します。
すると写真のように、左右の縦一列が全選択された状態になります。
右端の縦一列を、左端（0秒）までスライドさせると、0秒のポーズに統合されます。
※本来は「最初からアニメーションを再生させて編集する」のが一般的だと思うのですが、0秒（開始ポーズ）の段階で再生させていても目障りなので、最後にお伝えしました。
固定ポーズを活かせる場面とは？
- BOOTH等で販売する「商品の写真」を撮りたい場合
- 動作あり、無しで使い分けて遊びたい場合（VRChat）
- VRChatで複雑な姿勢で写真を撮りたい時
に便利です。
Unityで写真撮影をする場合、自動的に再生状態になってしまいます。
固定ポーズであれば、再生されても動かないので、撮影に集中できます。
12.アニメーションファイルを複製する
- 『Project』タブを開く
- 『test』ファイルを選択する
- ファイルを3か所「Original」にする
- キーボードの ctrl ＋ D でファイルを複製する
だけで簡単にできます。
アニメーションファイルに限らず、Unity上の他のファイルにも使えるので、覚えておくと便利です。
※Originalにするところは、ぶっちゃけやらなくても動きます。（他のサイトに、した方が良いと書かれてたので設定しました。）
13.動作（モーション）を入れる
最後に目をこするモーションを入れます。
- 左端（0秒）の縦一列を選択する
- 白い線を左端（0秒）に合わせる
- 『Quick Save』の1番を押す
- 1.30秒に白い線を合わせる
- 『Quick Load』の1番を押す
- 白い線を0.50に合わせる
- 手のIKにチェックを入れる
- 『Move Tool』を選択
- X軸（赤）方向で顔の中心に手を移動させる
ところまで進めたら完成です。
難しそうに見えて、めっちゃ簡単なのでサクサク終わらせましょう。
【ステップ①】0秒のポーズをコピーする
まず固定ポーズの時と同じように、左端（0秒）の縦一列を選択します。
（一番上の◇をクリックして、縦一列を全選択します。）
この時に白い線を0秒のところに合わせて、『Quick Saveの１番』を押します。
（※①～③の操作で、選択した縦一列の動作をコピーした状態になりました。）
【ステップ②】0～1.30秒のアニメーションを作る
マウスホイールを転がして、1.30秒を表示させ、白い線を1.30秒に合わせます。
（1.30秒の左手前の少し長い線です。）
ここで『Quick Load』の1番を押します。
（※④⑤の操作で、コピーしていた0秒の縦一列を、1.30秒に貼りつけた状態になりました。）
この操作によって、0秒～1.30秒までのモーションを作れる状態になりました。
【ステップ③】モーションを入れてみよう！
モーションの編集は、画面右の再生ボタンを押して、再生しっぱなしの状態で編集していきます。
いつでもキーボードのctrl ＋ Z で動作を取り消せるので、試しに手足を適当に動かしてみてください。
アニメーションは実際にいろいろ動かしてみた方が、僕があれこれ言うより身につきやすいと思います。
- グッと腕を伸ばしてみる
- ミラー機能で動かしてみる
- 0.3秒と1.2秒で、同じように体を動かした時の違い
などなど、新しい気づきがたくさんあると思います。
お手本そっくりに完成しなくてもOKなので、自由にアレンジしてみてください。（一応最後まで説明はします。）
【ステップ④】「眠い」の完成！！
目をこする手のIKにチェックを入れます。
『Move Tool』を選択し、白い線を0.50秒に合わせます。
X軸（赤）方向で顔の中心に手を移動させます。
これでアニメーションの編集はおしまいです。
【失敗】操作ミスでctrl＋Zを押しても元に戻らなくなった場合は？
という方もいると思います。
そんなときは、複製したファイルを使えばOKです。
ファイルを取り換える手順は、
- 『Hierarchy』のアバターを選択
- アバターのAnimatorのControllerをダブルクリック
- 最初に入れたファイル（test）を右クリックして、
- 『Delete』を選択
- 複製してあったファイル（test 1）を入れる
- Assets内の失敗したファイルを選択して、『Delete』で消す
という流れで、複製してあった予備のファイルを使うことができます。
再びVery Animationを起動して、編集してみてください。
14.完成！（VRChatへアップロード）
アニメーションの編集お疲れ様でした。
この項目では、「作ったアニメーションをAFKモーションに設定し、VRChatへアップロードする手順」をお伝えします。
3分くらいでサクッと終わるので、もう少しお付き合いください。
手順は、
- 『VRC Avatar Descriptor(Script)』の中の、
- 『Playable Layers』の『Action』から、
- vrc_AvatarV3ActionLayerを選択
- 作ったアニメーションファイルをAFKモーションに設定
- Animatorを『None』にする
- Very Animation Save Settings(script)を消す
- VRChatにアップロード
という流れです。
⑥は初心者が特につまずくポイントです。
順番にお伝えします。
【ステップ①】vrc_AvatarV3ActionLayerを選択
Very Animationはもう使わないので、『Hierarchy』をクリックして、最初の画面に戻します。
アバターを選択して、『VRC Avatar Descriptor(Script)』を追加します。
『Playable Layers』の『Action』から、vrc_AvatarV3ActionLayerを選択します。
vrc_AvatarV3ActionLayerをダブルクリックしてAnimator画面移ります。
【ステップ②】AFKモーションとして設定
Animator画面で、
- 『AFK Init』
- 『AFK』
- 『Blend Out』
それぞれのMotionの中に、作ったアニメーションファイルをドラッグ＆ドロップします。
【ステップ③】再生に使ったアニメーションファイルを外す
- アバターを選択
- AnimatorのControllerを『None』にする
- （これを外さないとVRChatでポーズがバグる）
ので注意！
【ステップ④】エラーメッセージの原因
- VRC Avatar Descriptor(Script)の一番下にある、
- 『Very Animation Save Settings(script)』を、
- 歯車マークから、
- 『Remove Component』を選択して消す。
- VRChatにアップロードする
という手順を踏む必要があります。
これマジでわかりにくくて、、、
と思ってVRChatにアップロードしようとしたら、『Auto Fix』を押しても消えないエラーメッセージが出て、
ってなるんですよね。。
意味不明すぎて「ラスボスかよ…」って思いました。
VRChatで確認しよう！
AFKモーションに設定したので、離席状態にして動作確認をしてみてください。
- 自分で作ったモーションを眺めたり…
- フレンドさんに見せびらかしたり…
してみてください。（笑）
お疲れ様でした。
「アニメーションが動かないんですけど…？」
- 「固定ポーズを間違えて、AFKモーションに設定していないか？」
確認してください。
Unityでアニメーションの動作確認をする方法は、『アニメーションを作る作業環境を整えよう』→『アニメーション素材の動作確認をする』を読み返してください。
「アニメーションが一瞬しか再生されないんだけど…？」
という方もいると思います。
ありがちなのは、
- 『Loop Time』のチェックを入れ忘れている
です。
Unityでアニメーションファイルをダブルクリックします。
そこで『Loop Time』にチェックが入っている場合、他のミスが原因です。
こちらの記事から、『バグ・不具合の解決方法まとめ』の項目をお読みください。
↑この記事は、
- 「アップロードするための説明が足りない！」
- 「アバター3.0のアクションメニューから、ON・OFFで再生させたい」
という声にも対応しています。合わせて参考にしてください。
【Unity】Very Animationで作ったポーズでアバターの透過写真を撮影する方法
アニメーションを作りたい方の中には、
- アバターに可愛いポーズをさせて、
- BOOTHの紹介写真に利用したい…
という方もいるのではないでしょうか？
BOOTHでVRChat向けの衣装やアクセサリーを販売する場合、
- 商品の写真を単体で紹介するよりも、
- アバターに商品を着せて、
- 可愛いポーズで撮影した写真
を載せた方が、圧倒的にイメージが良くなりますよね。
商品もじっくり見てもらえるので、売り上げも大きくあげられるでしょう。
ここからは「BOOTHの販売にポーズを利用したい方」に向けて、『アバターの透過写真を撮影する方法』をお伝えします。
Unity・Blenderで作った商品を、「初めてBOOTHに出品する際のコツと注意点」について記事を書きました。
BOOTHの紹介文の書き方などを、物販初心者目線でお伝えします。
こちらの記事も合わせて参考にしてください。
※以下の商品を撮影に使用させていただきました。
・水着：Atelierめたもきゅ様
「狐雪」ちゃん用水着 – Atelierめたもきゅ – BOOTH
・着せ替えツール：とも屋様
VRC向け簡単着せ替えツール「キセテネ」 – とも屋 – BOOTH
透過画像とは？
↑このようにキャラクターの背景が透明になり、合わせた他の画像に馴染むのが透過写真だと思ってください。
この画像は、
- ビーチの写真の上に、
- キャラクターの透過画像を挿入しただけ
の写真になります。
透過していないとどうなるの？
これが透過していない画像です。
説明不要なほど、画像を重ねたのがバレバレですよね…。
このキャラクター画像は、
- PCの画面をスクリーンショットで保存しただけ
です。
こうなってしまわないよう、次の項目で『透過画像の作り方』をお伝えします。
1.UnityRecorderの設定
ツールはUnityにあらかじめ用意されており、外部から入手する必要はありません。
設定方法はこちらの記事がわかりやすかったです。↓
UnityRecorderでアバターなどの透過画像を撮影する-unity2018編 | わたあめ子 Official web site (wataameko.com)
僕もこの記事を読んでサクッと導入できました。
2.UnityRecorderを固定ポーズで撮影する
撮影には、本記事で作り方を解説した『固定ポーズ』で撮影します。
撮影中はアニメーションが再生されるので、固定ポーズ（モーション無し）と相性が良いです。
流れは、
- アニメーションファイルをアバターに設定する
- カメラの位置を合わせる（適当でOK）
- 再生ボタンを押す
- 『Scene』でカメラの角度を合わせる
- UnityRecorderの撮影ボタンを押す
という感じです。
順番にお伝えします。
①アニメーションファイルをアバターに設定する
撮影したいポーズのアニメーションファイルを、アバターに設定します。
詳しくは本記事の、
- 『アニメーションを作る作業環境を整えよう』から
- 『アニメーション素材の動作確認をする』
をお読みください。
アニメーションを再生できるよう設定した後、撮影したい角度に合わせて表情を調整します。
②カメラの位置を合わせる（適当でOK）
- Hierarchyにあるデフォルトのカメラを選択
- アバターが写る座標へ動かす
- （カメラの視点に入る座標）
という感じでザックリと座標を合わせます。
③再生ボタンを押す
- 画面上部にある再生ボタンを押す
- Sceneをクリックして、カメラ座標を合わせる
ところまで進めます。
Sceneをクリックすると、矢印の座標移動ができます。
④『Scene』でカメラの角度を合わせる
- 『Game』画面と切り替えつつ、最適な角度を調整
- ズームで大きさを整える
- （カメラの座標が合わない時は、数値をリセットするのもあり）
ところまで進めます。
撮影はGame画面（カメラ視点）で行われます。
Sceneで微調整しつつ、カメラのズームで大きさを整えて、最適な角度を探しましょう。
⑤UnityRecorderの撮影ボタンを押す
良い角度が決まったら、UnityRecorderを起動します。
『START RECORDING』を押すとパソコンに保存されます。
デフォルトの保存場所は、
- 開いているプロジェクト（Unity）の、
- セーブデータが保存されているフォルダの、
- 『Recordings』という名前のフォルダの中
です。
3.UnityRecorderで撮影する4つのコツ
この項目では、『UnityRecorder』を使って、
- 手際よく作業するコツ
- 「可愛く撮るには…？」
という疑問にお答えします。
「いつも心掛けていること」をお伝えするので参考にしてください。
お伝えする内容は、
- カメラの角度を合わせるコツ
- アバターの大きさを微調整するコツ
- 写真を明るくするコツ
- 「良い感じ」に撮影するコツ
です。
順番にお伝えします。
①「カメラの角度を合わせるのが難しいんだけど…？」
結論は、
- 真上からカメラの角度を見る
とわかりやすいのでおすすめです。
このように、白い線の範囲がカメラの範囲です。
真上から見ると、より直感的にカメラの視点を合わせることができます。
②「カメラの微調整が難しいんだけど…？」
結論は、
- ド真ん中にアバターを置く
- ズームで調整
- （アバターの角度を回転させるのもアリ！）
です。
アバターがカメラ視点のド真ん中にくるよう合わせたら、ズームで合わせましょう。
初心者が失敗しがちなのは、
- カメラを動かしてしまう…
ことです。
せっかく良い位置なのに、「カメラが遠いから…」という理由で、カメラを動かしてしまうんですよね…。（僕も失敗しました。。）
ですからズーム機能で大きさを整えつつ、
- アバターの角度を回転させる
のもOKですので、試してみてください。
③「写真が暗いのですが…？」
結論は、
- ライトを設定
してください。
Hierarchyにデフォルトで入っているライトの座標を合わせて、影やライトの色を変えると、印象もガラリと変わります。
↑この写真は、
- ライトをアバターの正面に持ってきて、
- 角度をアバターの中心に向けた
状態です。
④「良い感じに撮影するコツは…？」
結論は、
- 販売する商品の『何を見せたいか？』を明確にする
です。
「可愛いく撮りたいけど、基準がわからない」という人、多いのではないでしょうか。
まずは、
- アバターの魅力（体のパーツ・雰囲気）
- 見てほしいところ（商品の一番見せたい部分）
- 商品を使用したイメージを妄想させる角度・表情
をハッキリさせましょう。
「想像」ではなく、あえて「妄想」という言葉を使っています。
違いを説明すると、
- 『想像』→「ふ～ん。こんな感じか…」
- 『妄想』→「これを着て写真を…ウへへ…」
という感じですね。
ちょっとキモイんですけど、、、
でもそれぐらい強烈に欲求を刺激できれば、「よし！買おう！」と思ってもらえる確率が、グンと上がるのではないか？と考えています。
どうせ「お客さん全員に好かれることはできない」わけですし、それならいっそ、極限まで尖らせてしまえ…というのが僕の考え方ですね。
抽象的で申し訳ないのですが、
- 見た人にどう感じてもらいたいか？
- 商品のどこにこだわって作ったのか？
- それらをどう撮れば伝わるのか？
を意識して撮影しましょう。
まとめ：ベリーアニメーションで初心者でも簡単にAFKモーションを自作できる！
- 参考画像の探し方
- Very Animationの作業環境
- 簡単なポーズ・モーションの作り方
- 透過画像の撮り方
についてお伝えしました。
僕がつまずいて失敗したことや、BOOTHで販売する写真を撮って気づいたことなど、今僕が持っている情報を詰め込みました。
何か１つでも役に立つ情報があれば嬉しいです。
（※2021年12月12日更新）
こちらの記事も参考にどうぞ！
- Unity
- Blender
- BOOTH（販売）
について何もわからない初心者に向けて、15分でVRChat向けの自作3Dモデルを作って、販売開始までいけるマニュアルを書きました。
3Dモデルの販売において、初心者が躓くポイントの解説に加えて、僕の販売ノウハウをすべて無料で公開しています。
この記事は以上です。
おしまい。
お陰様でポーズを作ることができました！
ありがとうございました。