[Unity] 2D Animation でやる気のない Just Do It 動画を作る


![2019-10-08_051645.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/52f1640a-57ab-bb7d-a9b1-d8d27b056cf5.jpeg)

テンションの高い[Just Do It! おじさん](https://www.youtube.com/watch?v=ZXsQAXx_ao0)にも、やる気のないときはあります。
![gif_animation_013.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/b042ac9e-b6d4-3deb-667f-131b4c0b5854.gif)

今回は↑コレを作ってみます。

[本家サイト](https://www.youtube.com/watch?v=ZXsQAXx_ao0)から適当な静止画をキャプチャし、背景を透過したものをUnityにドラッグ＆ドロップします。
![JustDoItFull.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/d0ef8f76-77b9-25bd-ace4-19a82f0cde03.png)


次に、UnityのPackage Manager から2D Animation, 2D IKをインポートします。
![2019-10-08_031836.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/5c5cf20e-c0a0-9c2a-4e72-8bebfe9c40a6.png)

インポートした画像をスプライトに設定し、Sprite Editorを開きます。
![2019-10-08_032245.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/70abbff8-53db-7514-59b8-a5e2de48fcd6.png)

2D Animation, 2D IKをインポートしているとSkinning Editorのメニューが出るのでこれを選択します。
![2019-10-08_032517.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/bbc5ec09-de57-b8d6-997f-30b1ac9d792b.png)

Auto Geometry でメッシュを作成します
![2019-10-08_032744.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/e2b8b875-efd0-b2fa-34eb-80a3dca07f0c.png)

体と腕の間にもメッシュができてしまうような場合は、Outline DetailとSubdivideの値を調整してメッシュを作り直してください。
![2019-10-08_033035.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/3561d18a-f297-6261-9f24-679a84cdbf4c.png)

メッシュができたら Create Bone でボーンを作っていきます。ダブルクリックでボーン作成開始です。
ボーンは親子関係があるので、腰から頭、肩から指先、腿からひざ下、のようにつないでいきます。
![2019-10-08_033938.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/7da0f767-8062-7952-a770-9759d5b45ce7.png)


次に Auto Weights でボーンとメッシュを紐付けます。
![2019-10-08_034344.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/eba5615d-c045-6b9d-f830-b207eb036c25.png)

が、真っ赤になってうまくいかなかったので、一旦Weights>Clearでクリアしてから Weight Brushで重みを付けていきます。

まずは頭のボーン（ここでは水色）を選択し、
![2019-10-08_034832.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/bd8ac1e0-28f3-aa1c-ef58-65c26054600a.png)

そのままグリグリと塗っていきます。
![2019-10-08_035048.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/a7251da7-dcdf-e903-e60d-52dad7c0c2d3.png)

ボーンを選択して回転させると、影響範囲に応じてメッシュが変形します。
![2019-10-08_035200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/12a7aa48-98b9-4470-b292-2c4e1bf137ed.png)

引き続きどんどん塗っていきます。途中ボーンを回転させて確認しながら、重みがおかしいところを修正していきます。
![2019-10-08_035614.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/6340789f-5695-27ef-ca93-aba73fc0a382.png)

また、腕・頭など、手前に来てほしいボーンは、
![2019-10-08_040241.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/4fcb5d5b-f6cb-185c-3985-785e4560fd6a.png)

Edit Bone でボーンの優先を高くします。
![2019-10-08_040502.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/57da2021-3ac0-f624-6317-97eeb3138265.png)

一通り作業が済んだらApplyを押して終了。
![2019-10-08_040843.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/28f99ea5-6c1e-1802-a07a-c8967bc6e9e2.png)

作ったスプライトをHierarchyにドラッグ＆ドロップして画面に表示します。
![2019-10-08_041127.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/4d9eea42-cf81-d5e9-e3ee-78a9510afd40.png)

Inspector上でAdd Component > 2D Animation > Sprite Skin を選択し、
![2019-10-08_041217.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/5ece4168-b9bc-332c-37de-81a47215ab8f.png)

Create Bonesボタンを押すと
![2019-10-08_041423.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/44c31b67-d8fa-9806-bd96-ac8b9ee210dd.png)

先ほどつけたBoneが追加されます。
![2019-10-08_041707.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/2f3fa78c-7bab-395e-fbd5-1957004fe5a5.png)

以下のスクリプトをブラブラさせたい関節にアタッチして

```PendulumTransform.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PendulumTransform : MonoBehaviour
{
    [SerializeField] Transform m_targetTr=null;
    [SerializeField, Range(-180f, 180f)] float m_range=5f;
    [SerializeField, Range(0.5f, 100f)] float m_period = 4f;
    Quaternion m_defRot;
    float m_freqTimer;

    // Start is called before the first frame update
    void Start()
    {
        if (m_targetTr == null)
        {
            m_targetTr = transform;
        }
        m_defRot = m_targetTr.localRotation;
        m_freqTimer = 0f;
    }

    // Update is called once per frame
    void Update()
    {
        m_freqTimer += Time.deltaTime / m_period;
        if(m_freqTimer > 1f)
        {
            m_freqTimer -= 1f;
        }
        float amgle = Mathf.Sin(m_freqTimer * Mathf.PI*2f);
        m_targetTr.localRotation = m_defRot * Quaternion.AngleAxis(amgle * m_range, Vector3.forward);
    }
}

```

パラメーターを調整して・・・
![2019-10-08_073206.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/33b91dc6-ed9c-f04e-c1a7-73e73b926406.png)


Unity RecorderでMovie化すれば[完成！](https://youtu.be/YeyD0jrFlDo)