トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

ララランドのOPをUnityで再現したい【Part1】

今更amazonでララランドを見てハマりました。

ラ・ラ・ランド(字幕版)

OPの高速道路のシーン。

www.youtube.com

これのカメラワークをUnityで再現してみたいです!

全部は厳しいので、最初と最後の2カットだけやります。

  1. 右にパンしていって、最初に歌う女性に近くまで
  2. 黄色の女性が両手を上げて、みんなが車の上で踊るとこ

この記事では1だけやっています。2は別記事で後日。

舞台づくり

高速道路

無料のものがあった

 有料のものだとこれが一番舞台に近いと思う。20ドル

入れたらこんな感じで3種類の線があった。10km20km30km

f:id:bibinbaleo:20181113170821p:plain

本当に10㎞あるっぽい。cubeがこの大きさだった。

f:id:bibinbaleo:20181113170824p:plain

想像してたよりよさげ!!

ただ本家は2車線っぽいけど、こっちは3車線ありますね。まあいいや

f:id:bibinbaleo:20181113202414p:plain

車は無料のものをいろいろダウンロードしました。

種類が多いほうがいいのでね。

 複製していって大量に並べます。ローポリのものが多いので重くはないです。

f:id:bibinbaleo:20181113202355p:plain

最初に歌っている子はこの子にします。ユニティちゃん?かな

f:id:bibinbaleo:20181113202351p:plain

© UTJ/UCL

f:id:bibinbaleo:20181113222048p:plain

ユニティちゃんモデルについているPOSE27がいい感じでした!

口を開けるためのBlendShapeは結構深いところにありました。

headで検索したらいいと思います。

お空は最近買ったAllSkyを使います。

結構ぽくなりました。

f:id:bibinbaleo:20181113204606p:plain

カメラ動かす

まだ使ったことがないcinemachineの出番かと思ったけど、cinemachineは複数のカメラをブレンドしたりするのに使うらしい。(多分)

tsubakit1.hateblo.jp

OPシーンは一本撮り(長まわし)なのでTimelineだけでいいかな?

www.crossroad-tech.com

じゃあフィーリングで使っていこう!と思ったらなんかうまくいかなくてよく見たらAnimationでした。これがTimelineだと思い込んでいた。

f:id:bibinbaleo:20181113204613p:plain

後で調べたらAnimationでも作れたっぽいですが、この時の私はTimelineへ進みました。

Timeline

というわけでちゃんとTimelineを使っていきます。

昔ちらっと触っただけど、ほとんど使ったことはありません。

Unity2017.2開いてみた【Tree,Tango,Timeline】 - トマシープが学ぶ

1~10までこちらの記事の通りにやりました。

www.crossroad-tech.com

右クリックでTimeline作成。ダブルクリックでウィンドウが開く。

f:id:bibinbaleo:20181113211443p:plain

空のGameobjectを作る。

それを選択した状態でtimelineウィンドウのCreateを押すと、そのオブジェクトに対応した?playableオブジェクトができます。

f:id:bibinbaleo:20181113211440p:plain

空のオブジェクトにこの二つがつく

f:id:bibinbaleo:20181113211536p:plain

Animation Track

TimelineのAddでAnimation Track.(動きを付けるのはこれらしい)

f:id:bibinbaleo:20181113211949p:plain

左の欄にに動かしたいもの(camera)オブジェクトをドラッグ。

Animatorがついてなかったらこんな感じのが出るのでCreate Animator~をクリック。

f:id:bibinbaleo:20181113211650p:plain

そのあと赤い丸を押すと録画が始まる。

f:id:bibinbaleo:20181113211433p:plain

最初赤い丸を押しても反応しなかったけど、なんかの拍子に押せるようになった。(よくわかってない)

赤くなっている間に、タイムラインの位置を指定したい時間にして、カメラのインスペクタのTransformの値をその時間にポジションや角度に設定する。

f:id:bibinbaleo:20181113213610p:plain

私はSceneViewでカメラのアングルを決めて、ctrl+Shift+Vでシーンビューとカメラのアングルを一緒にした。

そしたらキーがタイムラインに打たれる。

f:id:bibinbaleo:20181113213607p:plain

もう一度赤いボタンを押したら録画終了。再生したらその通りになった!

もっと手こずるかと思ってたけど、案外すんなり思い通りに動かせました。

 

この記録したアニメーションはAnimationウィンドウでも編集できる。

間違ったキーの消去はこっちでした。

f:id:bibinbaleo:20181113211821p:plain

ちなみにタイムラインの拡大縮小はマウスのホイール。

長い時間(20秒とか)を表示できる。

ちなみに右上で時間表示かフレーム表示かを変更できた気がする。

時間表示の方が長いものを作るときはやりやすい。

Audio Track

ちゃんとOPの曲はiTunesで買いました。

映像と同期させるためにUnityで流したいと思います。

オーディオの始まるタイミングなどはAudioTrackで操作できます。

f:id:bibinbaleo:20181113214714p:plain

右側のタイムラインにAudioClipをドラッグして、左端をドラッグしたら曲の途中から流せました!

f:id:bibinbaleo:20181113214717p:plain

ちょうどyoutubeの音のはじまりと、買った曲の始まるタイミングが違っていて困っていたのですごく助かりました。

Audio Trackがあるって知らなくて、Activation TrackでAudioSourceのアクティブ、非アクティブで開始するタイミングを変えようとしてたけど無理だった。曲の初めから流れてしまう。

途中経過

結構いい感じになりました!!!!

www.youtube.com

Unityとは関係ないのですが、この動画をYoutubeにアップロードすると下のような表示がされました。

f:id:bibinbaleo:20181113221636p:plain

本当が動画を録画するとき、音は録音していないつもりが録音されていて映画の曲が入ってしまったのです。

前にもあったので「著作権侵害だから消しなさい!」って出てるんだろうなと思い詳細を見たらなんと・・・

f:id:bibinbaleo:20181113220740p:plain

著作権者が収益化する代わりにこのまま使っていいよ!」って書いてあります!

f:id:bibinbaleo:20181113220737p:plain

そんなのあるんだ・・・!びっくり。やったー!!!

 

support.google.com

これを読むと

他のユーザーにオリジナル素材の再利用を許可するかどうかは、著作権者の判断に任されています。多くの場合、著作権者は自分のコンテンツの使用を許可する代わりに、その動画に広告を表示するという対応を取ります。

と書いてあります。意外ですね。普通「使っちゃダメ!!」 ってなると思うのに

最後に

まじで想像以上にいい感じにできて、久々に楽しかったです。Unity触ってると時間が溶けますね。

 

次回以降はポストエフェクトで画面効果をかけたり、最後のシーンを作っていきます。

適当なダンスモーションを探して、ローポリの人形に一斉に踊らせたい。

 

続き

bibinbaleo.hatenablog.com

 

ちなみにAmazonのPrime会員ならララランドの曲全部聞けるんですよ!!!やば!

サウンドトラックじゃないで、コンプリート・ミュージカル・エクスペリメンス版の方が全ての曲が入っています。

今日知った。

AmazonMusicにもいいところあるんだな〜