Anima2DでのExamplesに習うメッシュ分割とWeight値付け手法

# 最初に

本記事での作業環境は**Unity2017.3**であり、Anima2Dのバージョンは**1.1.4**となります。

またAnima2Dに関する入門記事としては以前作成したものがあるのでそちらをご参考ください。

参考：[Anima2D入門〜紹介&実践(IK付けまで)編〜](https://qiita.com/4_mio_11/items/42512d7d8dbe7e16415e)

本記事は「[Unity Advent Calendar 2017](https://qiita.com/advent-calendar/2017/unity)」の記事となります。遅刻してすいません＞＜
前日は凹みさんの「[Windows における Unity のネイティブプラグイン作成についてまとめてみた](http://tips.hecomi.com/entry/2017/12/21/125251)」でした。名前は凹なのに技術部分は凸ってますね。

## メッシュ分割とWeight値付け

無料アセットであるAnima2Dでは、Live2Dの様に、2Dのイメージにボーン付けとメッシュ分割とWeight値付けを行い、自在に変形させることによって2.5Dの様にヌルヌルと動くアニメーションを作成することができます。

ただ、ボーン付けは比較的簡単に行えても、**メッシュ分割**と**Weight値付け**で困ったりします。

今回は、Anima2Dで用意されているExamplesのUnityちゃんを確認しつつ、どの様にメッシュ分割とWeight値付けをしていけばいいのか見ていくことにしましょう。

![Unityちゃん.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/27104803-1df6-8c6b-6033-58fc4dfff930.gif)

### **メッシュ分割**

ここの工程では絵に頂点数を増やし、三角の面を増やしていく作業となります。この三角の面を変形させることで絵の質感を崩すことなく滑らかなアニメーションを実現することができるのです。メッシュ分割は、「ポリゴン割り」とも呼ばれています。

まず、メッシュ分割の原則としては、**細かく変形するパーツ**は内部にある頂点数の密度が高いです。

例えば…

- 柔らかな質の髪の毛やまつ毛
- 柔らかな布系の服やアクセサリー
- まぶた部分のスキンテクスチャ
- 眉毛

などですね。

逆に、細かい変形を必要としない部分は密度を低くしてアニメーション負荷の軽減に貢献することができます。

例えば…

- 目の瞳孔や白目部分
- 鼻や首、足や腕など
- 金属系のアクセサリーや鎧
- アニメーション内で変形を必要としていないパーツ

などとなります。

### **Weight値付け**

それぞれの頂点が、どのボーンの影響を強く受けるか設定することができます。

ここの値をしっかり行っておかないと、思ってもいないところで変形したりしなかったりという現象に見舞われます。

（例えば二の腕の中間部分当たりがぐにゃっと曲がったり）

## Unityちゃんの例

### **髪の毛**

![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/366ffb82-2b02-7fa2-bf41-c1d4999f8d81.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/02ccf50f-69f4-52f1-e20f-d6b549db1fc1.png)

Unityちゃんの前髪部分です。ここは、例えばUnityちゃんが歩いたり走ったりジャンプした際には前髪を重力や風の向きに伴って滑らかに流したりカーブさせたりする必要があるため、内部に関しては結構細かく分割が行われています。

また、Weightに関しては特に偏りがなく均等に割り振られています。

逆に後ろ髪の方は、リボンによってまとめられているため、最低限の変形でも十分な場合があります。以下の画像の様に、頭と毛先部分は密度を低くし、髪の中間部分（一番変形が起こりそうな箇所）に必要最低限な頂点数を割り当てるだけでも問題がなさそうです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/59568e47-130e-ee29-9d02-2ff20115c37e.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/a19124be-fb7a-a4d0-f7fe-ec8970a317e3.png)

ただし、後ろ髪の毛先も含めて髪部分全てを滑らかなアニメーションを行わせたい、自然になびかせたいといった場合には、Unityちゃんの奥の方にあるもう一つの髪の束が参考になるかと思われます。こちらは先ほどの手前の髪の束よりは密度が高くなっています（ただしリボン部分は変形がそこまで必要ではないので大して変わりません）。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/4f9762bb-d648-35a2-3cf9-e7891f3864d4.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/0f6707fb-c974-3689-7393-5aaf48da9351.png)

### **服やアクセサリー**

![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/32959f29-3d4b-adc2-0bcd-0510b2c01e4f.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/99b7f394-895f-ca23-61a9-b528f0c7f00c.png)

Unityちゃんの衣装部分です。体にある程度接していて、変形自体が行われない上半身部分は密度がとても少なくなっています。逆に、下のスカート？の様なひらひらとした箇所は密度を高くして滑らかに変形が行える様になっています。

Weight値としては、真ん中にあるボーンが軸となって一番大きく影響範囲を持っています。自分の体で試してみるとわかりやすいのですが、上半身の胸から下は、骨盤部分の動きに強く依存しています。また、胸部分に関しては、肩の動きや首（背骨の末端）の動きに依存しているため、胸から上に行くにつれてWeight値も徐々に変化しているのでしょう。スカートの様なひらひらとした部分は固定箇所ほとんど軸ボーンの影響を受けていない作りになっています。

骨盤部分は後述します。

次にUnityちゃんの腕の裾部分を見て見ましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/6625954d-5db6-8ad3-abdc-7d19a86cfae8.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/1375e09c-3dbe-bbfb-42c9-8f0c405b55b5.png)

腕の関節部分、つまり曲げる部分に関しては、それに合わせるために変形を行う必要があるので密度が高くなっています。裾の末端部分も腕を動かした時に揺らめかせる効果を出すため、ある程度の頂点数が割り当てられています。

更に薄い布であれば、アニメーション内でも常に変形すると考えられるので、密度がかなり高くなります。今回であればUnityちゃんの頭についているアンテナ的なリボン部分が該当しますね。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/3bb31dcc-46e7-2a39-66a1-d90f7dbc4c46.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/68f8b3b9-00a5-46b6-db46-2e24576e3b75.png)

### **足や腕**

![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/5ddf8cc8-53bc-3aad-3e81-98264d6896ca.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/3df27f11-80c4-39cd-14d8-a7d7e7813267.png)

腕は内部の頂点数よりも外部、つまり輪郭部分に頂点数の密度を高くしており、特に肩部分に集中して分割されています。腕をまっすぐ伸ばしたり内側に曲げたりする時には、肩が一番変形が必要になるからかと思われます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/1c326584-97da-2e88-64d5-5fc892dfd46a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/3916a716-960e-cad1-88bc-0c5510eec918.png)

足に関しては、腕と同じ様に輪郭部分に頂点数の密度が高く設定されていますが、腕ほど頂点数は多くありません。腕の肩以外の部分も、足と同じくらいの頂点数で十分なのかもしれないです。

### **骨盤**

![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/99175e91-7b49-2fe3-09f0-f2e03b18400d.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/ea824749-a35f-5a41-799b-ff8adb707ffa.png)

こちらはちょうど腰の部分となります。赤いボーンが右足のROOTで、オレンジボーンが左足のROOTとなっており、それぞれ影響範囲が設定されています。緑のボーンが背骨の末端を示している感じですね。

## 最後に

これで以上となりますが、Anima2D自体は無料で配布されているアセットで、更にその中には今回紹介したUnityちゃんの他に恐竜やロボットのサンプルが含まれているので、興味ある方は是非一度お試しください。