LoginSignup
15
9

More than 3 years have passed since last update.

@kingyo222(たっつー)

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

Last updated at Posted at 2018-09-07

はじめに

こんにちは、のんびりエンジニアのたっつーです。
ブログを運営しているのでよろしければ見てください。

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

今回使うもの

Unity での作成

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

新規プロジェクトの作成

  • 新規プロジェクトの作成、名前は何でもいいのですがここでは「TimelineTest」と、「Creaet Project」で作成します。
    image.png

  • Unityが起動したら、右上のレイアウトから「Tall」を選択（個人的な趣味）
    image.png

  • Assetsの表示を一覧表示にする（個人的な趣味）
    image.png

  • フォルダ名を変更（Scenes → TimelineTest）、今後ここに作成したファイルを格納します。
    image.png

Timelineを追加

  • Projectウィンドウから右クリックから、Create > Timeline を選択します、名前は「Timeline」に変更。
    image.png

  • 「Timeline」ファイルを Hierarchy にドラッグアンドドロップする。
    image.png

  • 「Timeline」ファイルをダブルクリックして、「Timeline」ウィンドウを表示する。（ウィンドウが表示したら画面下あたりに配置）

  • 「Timeline」ウィンドウの右上の鍵マークをクリックしてロックしておく。（この方が使いやすい）
    image.png

床を追加

  • hieralceyのシーンを選択し、右クリックから「GameObject > 3D Object > Plane」を選択してPlaneを追加
    image.png

  • 今のままだと小さいので、Planeを選択しscaleを(5,5,5)に変更します。
    image.png

床に柄をつける

  • Assetsで右クリックからマテリアルを追加します。
    image.png

  • 名前は「Yuka」としました。
    image.png

  • 今作成したマテリアルを選択し、InspectorのSheaderをUnit/Textureに変更します。
    image.png

  • Tilingを x=10, y=10 に変更して、Selectを選択します。
    image.png

  • 表示されたダイアログからチェック模様を選択します。
    image.png

  • Yukaを選択して、ドラッグアンドドロップで Plane に設定します。
    image.png

  • シーンビューでタイル模様が設定された事が確認できる。
    image.png

ユニティちゃんを追加

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

  • SDユニティちゃんを、ドラッグアンドドロップで、UnityのAssetsウィンドウに設定する。
    image.png

  • このウィンドウが表示されるので、Import を選択する。
    image.png

  • Assets > UnityChan > SD_unitychan > Prefabs > SD_uniychan_humanoid を選択し、Hierarchyにドラッグアンドドロップする。
    image.png

  • シーンビューにユニティちゃんが追加された！
    image.png

  • Inspector から使わないユニティちゃんの機能をオフにする。

    • Idle Changer の IsGUI をオフ
    • Face Update の IsGUI をオフ
    • Random Wind の IsGUI をオフ
    • IK Look At の IsGUI をオフ

image.png

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

  • Timeline を選択する。
    image.png

  • Timelineウィンドウから、Add > Animation Trackを追加
    image.png

  • Animation Trackが追加される。
    image.png

  • 追加した Animation Track にユニティちゃんを紐付ける
    image.png

  • タイムラインで、右クリックし「Add From Animation Clip」でクリップを追加
    image.png

  • Running@Loopを選択、この時にGenericとHumanoidがあるのでHumanoidを選択する事。
    image.png

  • Timelineウィンドウに Clip が追加されるので横幅を調整して０〜５００くらいに設定する
    image.png
    image.png

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

ユニティちゃんを動かす

  • 新しい Animation Track を追加します。
    image.png

  • Animation Track にユニティちゃんを紐付ける
    image.png

  • 録画ボタンを押す
    image.png

  • ユニティちゃんを選択して、Inspector の Position Z=-5 に設定する。
    image.png

  • 白いバーを右に移動する（終了位置の指定）
    image.png

  • ユニティちゃんを選択して、Inspector の Position Z=5 に設定する。
    image.png

  • 録画を停止、開始位置・終了位置に◆のマークが設定された事が確認できる
    image.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情報サイト」の方にも色々記載しているのでぜひご参照いただければと思います。

Super Thx!

ユニティちゃん
image.png
この作品はユニティちゃんライセンス条項の元に提供されています

15
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
15
9