Unity 2018 Timeline を使ってユニティちゃんを走らせてみた

# はじめに

*こんにちは、のんびりエンジニアのたっつーです。*
*[ブログ](https://www.fast-system.jp/)を運営しているのでよろしければ見てください。*

Unityの比較的新しい機能を使ってみようと思ったため、みんな大好きユニティちゃんを走らせてみました。下の動画のようになります。
（一部解説していないのですが、ソースコードは公開するのでそちらをご覧ください）

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Unity の Timeline 機能を完全に理解した！ <a href="https://t.co/cFFKRApuoh">pic.twitter.com/cFFKRApuoh</a></p>&mdash; たっつー（ささきたかし） (@kingyo222) <a href="https://twitter.com/kingyo222/status/1037970859988668416?ref_src=twsrc%5Etfw">2018年9月7日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# 今回使うもの

- ユニティちゃん（ http://unity-chan.com/contents/guideline/ ）

# Unity での作成

Unityのバグ？っぽい現象などが多少あったので、本来であれば走らせるだけならノンプログラミングでいけますが今回はスクリプトを書いています。
（文字を逐次で出す部分は独自に作成しました）

## 新規プロジェクトの作成

- 新規プロジェクトの作成、名前は何でもいいのですがここでは「TimelineTest」と、「Creaet Project」で作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/fbdf2b52-1063-3410-258f-37b1da101002.png)

- Unityが起動したら、右上のレイアウトから「Tall」を選択（個人的な趣味）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/5fd07b0f-3365-d692-b053-f6a51cbe00cb.png)

- Assetsの表示を一覧表示にする（個人的な趣味）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/35463834-260b-a184-67af-96e3b4407791.png)

- フォルダ名を変更（Scenes → TimelineTest）、今後ここに作成したファイルを格納します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/a1170a48-02c9-e907-97bf-23f261188646.png)

## Timelineを追加

- Projectウィンドウから右クリックから、Create > Timeline を選択します、名前は「Timeline」に変更。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/7e9c6fcc-852e-3ba0-e848-36c3b22e1473.png)

- 「Timeline」ファイルを Hierarchy にドラッグアンドドロップする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/5cf347a9-ddf1-01b8-27cb-23aded841e9c.png)

- 「Timeline」ファイルをダブルクリックして、「Timeline」ウィンドウを表示する。（ウィンドウが表示したら画面下あたりに配置）
- 「Timeline」ウィンドウの右上の鍵マークをクリックしてロックしておく。（この方が使いやすい）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/bc562fa0-0af8-a93e-dd9c-87b4f6388a63.png)

## 床を追加

- hieralceyのシーンを選択し、右クリックから「GameObject > 3D Object > Plane」を選択してPlaneを追加
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/34f0e8d5-31a9-8f2d-8f3f-7148cb84449a.png)

- 今のままだと小さいので、Planeを選択しscaleを(5,5,5)に変更します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/c4fd59e4-3450-1fc6-c7c8-cf2c6cb0779b.png)

## 床に柄をつける

- Assetsで右クリックからマテリアルを追加します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/2e9f872b-6da6-4277-8668-545df9787640.png)

- 名前は「Yuka」としました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/d3be1e15-0749-da7e-b524-70ed2f03619c.png)

- 今作成したマテリアルを選択し、InspectorのSheaderをUnit/Textureに変更します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/4d824599-79cd-d52c-50f4-32e2539606b3.png)

- Tilingを x=10, y=10 に変更して、Selectを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/2fa18422-d113-8e40-d1d3-89dc30f4ac0e.png)

- 表示されたダイアログからチェック模様を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/25ab884a-6473-c3f5-7e13-6895ca00cfdd.png)

- Yukaを選択して、ドラッグアンドドロップで Plane に設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/a9cfba9c-afe6-6c14-1969-fdc6962a3fec.png)

- シーンビューでタイル模様が設定された事が確認できる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/d03be143-34ec-b99c-e488-6a722ed977ce.png)

## ユニティちゃんを追加

- SDユニティちゃんをダウンロードする。

- SDユニティちゃんを、ドラッグアンドドロップで、UnityのAssetsウィンドウに設定する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/aa489fb9-ec56-05f0-32f0-d08816801115.png)

- このウィンドウが表示されるので、Import を選択する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/894d84f6-f7d5-0e12-9b28-1fbc177f8dbc.png)

- Assets > UnityChan > SD_unitychan > Prefabs > SD_uniychan_humanoid を選択し、Hierarchyにドラッグアンドドロップする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/9e3bb930-614b-bd08-7e64-0c4e70ad8a8e.png)

- シーンビューにユニティちゃんが追加された！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/c9f6d8b3-a1cd-4279-84e9-d7cad35af99f.png)

- Inspector から使わないユニティちゃんの機能をオフにする。
  - Idle Changer の IsGUI をオフ
  - Face Update の IsGUI をオフ
  - Random Wind の IsGUI をオフ
  - IK Look At の IsGUI をオフ

![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/f1164836-28b4-894a-98f6-c10f885f39ed.png)

## ユニティちゃんを走らせる

- Timeline を選択する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/3cd1f1b0-0b0e-57d2-822f-6a981a7477dc.png)

- Timelineウィンドウから、Add > Animation Trackを追加
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/fcff7084-fc40-bf8f-8cc3-60dec09dbad8.png)

- Animation Trackが追加される。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/d699bd68-1acf-4972-39ee-34aa93bed134.png)

- 追加した Animation Track にユニティちゃんを紐付ける
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/2fbe004a-099d-cab1-81c1-81366d23f587.png)

- タイムラインで、右クリックし「Add From Animation Clip」でクリップを追加
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/78562650-527a-13ec-2929-b4da2cea9072.png)

- Running@Loopを選択、この時にGenericとHumanoidがあるのでHumanoidを選択する事。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/83b13390-6dde-c6b0-e21f-0c0de844a24a.png)

- Timelineウィンドウに Clip が追加されるので横幅を調整して０〜５００くらいに設定する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/03bd3974-2d75-9aea-1104-c52d1092d5c4.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/031a8778-506f-d4b7-dc82-6a8fdd4a27d9.png)

- ここまでの設定で Unity で実行すればユニティちゃんがその場で足踏みできるのが確認できる。

## ユニティちゃんを動かす

- 新しい Animation Track を追加します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/2a631d04-5bd5-3d3f-e8af-a599d7ef36d3.png)

- Animation Track にユニティちゃんを紐付ける
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/7c21d996-4732-a315-4e9a-1c18c38bd6fe.png)

- 録画ボタンを押す
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/a49a52de-b2bb-0349-2752-628cd11d0368.png)

- ユニティちゃんを選択して、Inspector の Position Z=-5 に設定する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/542a474a-12e1-b2a5-51dc-75451de31ecd.png)

- 白いバーを右に移動する（終了位置の指定）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/32f7f263-b2b2-ab31-d451-f1a87460d18f.png)

- ユニティちゃんを選択して、Inspector の Position Z=5 に設定する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/d8cfbcff-d762-2c8b-35e5-1d4005d968e1.png)

- 録画を停止、開始位置・終了位置に◆のマークが設定された事が確認できる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/17097da7-eadf-1301-919e-683992a225e4.png)

- これで Unity の実行ボタンを押せば、ユニティちゃんが走るモーション＋実際に移動していて本当に走っているように見える。

## カメラを動かす

同様に、「Main Camera」にも「ユニティちゃんを動かす」の Timeline を設定すればカメラも動かせるようになる。

## 文字を出す（オプション）

ソースコードを参照
（別のQiita記事を書きます）

## パーティクルで派手にする（オプション）

ソースコードを参照
（別のQiita記事を書きます）

# ソースコード

遅くなりましたが公開します（2018/09/24）
https://github.com/fastsystem/unity-timeline-example

# 最後に

Timeline便利！ユニティちゃんかわいい！
Unity最新機能はなるべくチェックして早い段階で触るのが大事ですよね。
Unity 2017/2018はもちろん、この前の Unite Tokyo 2018 では Unity 2019 の話がちらっとあったので普段Unity使いじゃない自分としては追うので精一杯ですが今後もチェックしていきたいと思います。

*よければ ブログ「[初心者向けUnity情報サイト](https://www.fast-system.jp/)」の方にも色々記載しているのでぜひご参照いただければと思います。*
# Super Thx!

ユニティちゃん
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227880/0e905b6d-ecd6-d33c-a55b-2cb0f54b5d80.png)
この作品は[ユニティちゃんライセンス](http://unity-chan.com/contents/license_jp/)条項の元に提供されています