皆さん、こんにちは。
今回は、ミニキャラ、ちびキャラの表情、笑顔定義について、考えてみました。
ここでご案内しているVRoidstudioやポージングデスクトップなどには、撮影ぺージやその他の項目で、ミニキャラの表情を変更する機能が付いています。
実際に、やって見ますと、眉毛の位置や目の形、口の大きさなど同じ様な動きをしています。今回は、代表する表情で、大まかにどの部分が、どの様な動きをするのか検証してみたいと思います。
最初は、表題の通り笑顔(fun)からやって見ますが、BlendShapesに使われているangry(怒り）fun(楽しい）joy(喜び）、sorrow(悲しみ)surprised(驚き)もやって見ます。
こうやって、記事にして行く為にアニメなどを見ていても、同じ様な動きをしていますので、何かの参考になれば幸いです。
笑顔(fun)の表情定義
では、最初は笑顔(少し笑顔）の定義です。2枚の画像を交互に入れ替える形にして、変化が分かり易い様に表現してみました。
今回は、笑顔の定義ですが、BlendShapesには、fun(少し笑顔）とjoy(大きな笑顔）が有ります。
まゆ毛の動きも大事だったりしますので、額までしっかり見えるミニキャラ、ちびキャラアバターを、モデルにしてみます。
実際に、やって見ますと
- ①眉毛が、持ち上がって（特に中心に近い部分）、ハの字に近い形になる。
- ②目の縦幅が、少なくなって、目が細くなる。
- ③口は、横幅が大きくなって、口角の端が上がった感じになる。
以上の様な感じでしょうか^^。
リアルなアバターですと、口元が注視されて、口の横幅が広がる点や口角が上がるのは、分かり易いですね。実際に、写真を撮る際にも、同じ感じでは無いかと思いますし、意識されている方も多いのでは^^。
眉毛は、盲点で、笑顔の表情になると眉毛も上がった感じになるのだなと再認識しました。
笑顔(joy)の表情定義
では、2種類目の表記は笑顔(大きな笑顔）の定義です。
こうやって、定義を見たり、実際の表情変化を見たりしますと、笑顔ってこんな感じで大丈夫なんだと感じたりします。
笑うと眼が無くなるんだよね💦と気にしている方も、いらっしゃった様な・・・
こちらも、実際にやって見ますと
- ①眉毛が、少し持ち上がり、ハの字の形になっている。
- ②目は、両目とも完全に閉じている。
- ③口は、大きく開いて、口内が見えている。
同じ、笑顔の表現ですが、明らかに見た目が違っていました。
ミニキャラ、ちびキャラも大きな笑顔の場合は、目を閉じた感じになっています。リアルで、撮影の時に、笑顔の表情になると眼が無くなってしなってと気にしておられる方もいらっしゃいますが、こういったプログラムでも、大きな笑顔では、目を閉じているので、笑ったら目は閉じる物なんだと思いました。
悲しい顔（sorrow）の表情定義
次は、悲しい顔（sorrow）の定義です。ここからは、笑顔とは違って、眉毛が下がるシーンが増えて来ます。
①眉毛の位置が、大きく下に下がって、ハの字になっています。
②瞳は、縦幅が少なくなって、少し細くなりますが、眉毛が下に下がってきた分、上まぶたが閉じる度合いが大きい気がします。
③口元は、あとうの中間の様な形になっています。
怒った顔（angry）の表情定義
次は、怒った顔（angry）の定義です。
①眉毛は、大きく下に下がって、逆ハの字になっています。
②瞳は、眉毛が下したに下がった分、少し細くなりますが、悲しい顔程は、細くなっていません。
③口元は、への字になる感じに変化します。
笑った顔の特徴は、目元と口元かなと思いますが、怒った表情の特徴は、逆ハの字の眉毛ですね^^。
驚いた顔（surprised）の表情定義
最後は、驚いた顔の表情定義です。私は、コミカルな感じの驚いた顔が、結構好きです^^。
結構細かい所も設定して、驚いた表情を表しています。
①眉毛は、大きく持ち上がって、ハの字になっている。
②目の大きさが、縦幅が大きくなって、瞳が小さくなり、周りに白目が出来る様になります。
③口元は、あといで大きく開いた感じです。
目を大きく見開いた感じを表現する為に、瞳の大きさも調整していて、細かい配慮だなと感じました。ミニキャラ、ちびキャラは、瞳が大きいので、それを小さくすると、大きく表情が変わった感じになります。
ミニキャラ、ちびキャラの表情の特徴一覧
5つの表情を、一覧にして、特徴を纏めてみました。
| 少し笑顔 | 大きい笑顔 | 悲しい顔 | 怒った顔 | 驚いた顔 | |
| 眉毛 | 持ち上がり、 ハの字 | 少し持ち上がって、ハの字 | 下に下がって、ハの字 | 下に下がって、 逆ハの字 | 持ち上がり、 ハの字 |
| 目元 | 細くなる | 閉じている | 上まぶたが下がる | 少し細くなる | 大きくなって、 瞳が小さくなる |
| 口元 | 口角が上がって 大きくなる | 大きく開いている | あとうの中間 | への字になる | あといで、大きく開いている |
各表情に使ったスライドの作り方
動画程、容量も大きくないですし、2枚の画像を使うだけで、ページに動きが出来て面白いかなと思っています。
記事に合わせて、表情を変えれば、目立つ記事間違いなしです^^。gif画像を使っていますので、普通の画像と同じ様に埋め込みますと、自動でループしてくれますので、読み手の方が、そこに来ますと、自動で画像が動いて見えます^^。
最初に、2種類の画像を用意します。そのままの分と、笑った分^^。
大きさは、大体で良いですが、ある程度揃っていた方が、綺麗です。切り抜いた時に、調整するのが面倒だったら、編集アプリで調整します。いつも、使っているphotopeaを使います。
画像を2枚並べた際に、塗りつぶしと言う項目が有りますので、この部分を調整（今回は100％⇒70％にしてみました）しますと、レイヤーが透けて、大きさの確認がし易いと思います。
これで、2種類の画像が出来ました。
動画（mp4形式）を作るのは、VideoProc Vloggerと言う無料配布の動画編集アプリを使っています。（使い易いですよ^^。）
①最初に先程作った画像を開いて②編集用のトラックに移動します。（1枚の時間は1秒にしています）③出来ましたらトランジション（2種類の画像がフワッと入れ替わる効果）④今回は、クロスフェードを使いました。
⑤これでトラック上のレイアウトが、こんな感じになりました。再生してみて、問題が無ければ⑥で出力して、動画は完成です。
先程、VideoProc Vloggerで作ったmp4動画を、photopeaで開きます。作業は、すごく簡単です。
①画像を開いたら、別名で保存～gifと進みます。
別窓が開きますと、画像が動いていますので確認しながら、③ブーメランに✔を入れます（これで、フワッと連続する画像の出来上がりです。最後に保存をクリックしますと、gif画像が、ダウンロードされます。
ミニキャラ、ちびキャラの笑顔の表情画像の場合、ブーメランにする事で、トランジションの使用を1回にしています。ブーメランにしないと、最初に戻った際に、少し、カクっと^^なります。しかしながら、行って帰るまでが1ループになりますので、画像の容量が倍になってしまいます。シーンに合わせて、使い分けると良いと思います。
最後までお読みいただきありがとうございました。
お疲れ様でした。
コメント