3Dモデルを使ったゾートロープ（パラパラアニメ）の作り方

この Tips では、動画の基本的な原理を利用して VR 上にゾートロープを作成する手順について紹介します。コマ落ちのような視覚的効果があり、 空間演出にユニークな雰囲気を取り込みたいときなどに利用できる表現です。

説明は、宇宙飛行士がとび跳ねる表現を例に進めますが、どのような 3D オブジェクトでも使える手法ですので、この記事を読んで表現の幅を広げてみてください。

 

サンプル

STYLY GALLERYからサンプル空間を体験できます。
Astronaut Zoetrope

 

記事で紹介しているUnityプロジェクトのダウンロードはこちらからできます。
STYLY_Examplesの中の「ZOETROPE」というフォルダが今回使用するものです。
STYLY_Unity_Examples

 

事前準備

▼Unity の基本操作をおさえたい方はまず、こちらの記事をご参考ください▼

3D モデルの入手

まず、「Z2 Spacesuit」の 3D モデルを下記 NASAのオフィシャルサイトから入手します。

NASA 3Dmodel Z2 Spacesuit（参照元：NASA ）

（NASA の提供するモデルの利用規約についてはこちらをご確認ください）

・3Dモデル「Z2 Spacesuit」

 

Unity へ 3D モデルのインポート

Unity を起動し、ダウンロードしたデータ「Z2」をフォルダごと「Project」ウィンドウ内「Asset」フォルダにドラッグ&ドロップします。これで事前準備ができました。

 

ゾートロープとは

ゾートロープとは回転方式のパラパラアニメーションで、動きが連続している絵や写真、物体を並べて回転させると動いているように見える仕組みです。

動画が動いて見えるのは、少しづつずれた静止画が連続して目の前を通り過ぎることによって発生する錯覚のためです。ゾートロープはその仕組みを利用したおもちゃで、19 世紀ごろに登場・流行しました。ソートロープの仕組みを利用すれば、紙、フィルムなど平面的な素材だけでなく、フィギュアなどの立体造形物や 3D モデルを使ってアニメーションを制作することが可能になります。この Tips では 3D モデルを用いて VR 空間上に立体的なゾートロープを作成する手順を説明します。

 

3D モデルの配置

ゾートロープを作成するためにはモデルが等間隔かつ円状に並んでいる必要があります。
3D モデルの配置について、以下のABCの順で進めます。

A. 3D モデルの基本的な設定

B. A で設定したモデルをコピー

C. コピーしたモデルを円状に並べる

A. 3D モデルの基本的な設定

[A-1]
とび跳ねるための床を配置します。「Hierarchy」ウィンドウ下の「Create」から「3D Object」→「Plane」を選択します。

 

[A-2]
「Plane」のサイズを変えます。「Inspector」タブ→「Transform」の項目「Scale」の数値を、X, Z, それぞれ「10」に設定します。

 

[A-3]
「Project」ウィンドウ内にある「Z2」フォルダ内 → 3D モデル「Z2」をドラッグ&ドロップして「Hierarchy」ウィンドウ内に追加します。

[A-4]
「Hierarchy」ウィンドウ内「Z2」フォルダを選択した状態で、「Inspector」タブ→「Transform」の項目「Scale」の数値を、X, Y, Z, それぞれ「5」に設定します。

[A-5]
「Inspector」タブ→「Transform」の項目「Position」の Z の数値を「-30」に設定します。

 

[A-6]
「Hierarchy」ウィンドウ内で右クリックし「Create empty」を選択し空のゲームオブジェクト（ウィンドウ内では 「GameObject」 と表示されています）を作成します。

[A-7]
A-6 で作成した「GameObject」を選択し、「Inspector」タブ→「Transform」の項目「Position」のX, Y, Z, それぞれの数値が「0」になっていることを確認します。

 

[A-8]
「Hierarchy」ウィンドウ内にある「Z2」をドラッグ & ドロップして「GameObject」に入れます。

 

B. A で設定した 3D モデルをコピー （Prefab 化→複製）

[B-1]
 「Project」ウィンドウ内にある「Asset」上で右クリックし、「Create」→「Folder」を選び、フォルダーを作成します。名前は「Zoetrope」とします。
そして、「Hierarchy」ウィンドウ内にある「GameObject」を「Zoetrope」のフォルダーの中にドラッグ&ドロップ（Prefab化）します。

 

[B-2]
「Zoetrope」フォルダー内に作成した Prefab 「GameObject」を「Hierarchy」ウィンドウにドラッグ&ドロップすると「GameObject」が「Scene」上にコピーされますので、これを 24 回繰り返し、24 のオブジェクトを作成します。

[B-3]
コピー完了後「Hierarchy」ウィンドウ内にある、後ろに数字のついていない「GameObject」を削除します。

 

C. コピーした 3D モデルを円状に並べる

「Hierarchy」ウィンドウ内にコピーした 24 の オブジェクト（「GameObject（1）」 〜 「GameObject（24）」） を円状に並べます。

オブジェクトを円 / 球状に移動させるには「Rotation」の項目を使います。項目の X, Y, Z, はそれぞれ回転する方向を表し、数字は度数を表します。つまり、仮に「Rotation」の Y を「0」から「15」に変更すると、オブジェクトは元の位置より Y 方向に 15 度移動します。この機能を利用して、宇宙飛行士を円周上に並べてみましょう。

オブジェクトをそれぞれ選択して「Inspector」タブ→「Transform」→「Rotation」の Y に下記表（「Rotation」Y の値）の対応関係を確認しながら数値を入力してください。

 

オブジェクト名	「Rotation」 – Y の値
「GameObject（1）」	0
「GameObject（2）」	15
「GameObject（3）」	30
「GameObject（4）」	45
「GameObject（5）」	60
「GameObject（6）」	75
「GameObject（7）」	90
「GameObject（8）」	105
「GameObject（9）」	120
「GameObject（10）」	135
「GameObject（11）」	150
「GameObject（12）」	165
「GameObject（13）」	180
「GameObject（14）」	195
「GameObject（15）」	210
「GameObject（16）」	225
「GameObject（17）」	240
「GameObject（18）」	255
「GameObject（19）」	270
「GameObject（20）」	285
「GameObject（21）」	300
「GameObject（22）」	315
「GameObject（23）」	330
「GameObject（24）」	345

表：「Rotation」Yの値

次は、動きをつけるための設定を行います。

 

動きの設定

ゾートロープで動きを作るためには、それぞれの 3D モデルが少しづつずれている必要があります。本 Tips ではオブジェクトごとにズレを上下に設けて、とび跳ねているような演出を行います。

ズレは「Position」で設定します。まず「GameObject（1）」を選択し、「Inspector」タブ→「Transform」の項目「Position」の Y の欄に「0.2」と入力。これで「GameObject（1）」が垂直方向に少しズレました。

以下、「GameObject（2）」 〜「GameObject（24）」については下記表（「Position」- Y の値）を参考にして数値を入力してください。

 

オブジェクト名	「Position」 – Y の値
「GameObject（1）」	0.2
「GameObject（2）」	0.4
「GameObject（3）」	0.6
「GameObject（4）」	0.8
「GameObject（5）」	1
「GameObject（6）」	1.2
「GameObject（7）」	1.4
「GameObject（8）」	1.6
「GameObject（9）」	1.8
「GameObject（10）」	1.6
「GameObject（11）」	1.4
「GameObject（12）」	1.2
「GameObject（13）」	1
「GameObject（14）」	0.8
「GameObject（15）」	0.6
「GameObject（16）」	0.4
「GameObject（17）」	0.2
「GameObject（18）」	0
「GameObject（19）」	0
「GameObject（20）」	0
「GameObject（21）」	0
「GameObject（22）」	0
「GameObject（23）」	0
「GameObject（24）」	0

表：「Position」- Y の値

 

ゾートロープの回転数を設定

次は 3D モデル達をまとめて回転させ、アニメーションを生み出す設定を行います

1. 「Hierarchy」ウィンドウ内で右クリックし「Create empty」を選択し空のゲームオブジェ クト（ウィンドウ内では 「GameObject」 と表示されています）を作成し、名前を「Rolling Object」と変更します。 

2. 「GameObject（1）」〜「GameObject（24）」をすべて「Rolling Object」にドラッグ & ドロップします。 

3. 「Rolling Object」を選択した状態でツールバーの「Window」メニューより「Animation」を選択。すると「Animation」ウィンドウが表示されます。

4. 「Animation」ウィンドウの中にある「Create」を押し、現れるメッセージに従い「Animation」のデータをデフォルトで指示された場所にセーブ。すると、タイムラインが現れます。

 

5. 次に「Animation」ウィンドウの中にある「Add Property」ボタンを押し現れるメニューから「Transform」→「Rotation」と進み、「Rotation」の右側にある「➕」ボタンを押します。

 

6. 次にキーフレームを打ち込みます。キーフレームとは動きのタイミングを記録するための印です。
まず、「Animation」ウィンドウの中にある2つの数値を入力する場所を確認します。そして、下段の入力欄が「60」、上段の入力欄が「120」となるようにします。（下の写真：タイムラインの設定 参照のこと）

7. 「Add keyframe」のボタン（下の写真：タイムラインの設定 参照のこと）を押すと、タイムライン上に「◇」が現れます。これで 120 フレーム（2 秒）のタイミングにキーフレームを打ち込むことができました。（60フレーム / 1 秒目のキーフレームはデフォルトで打ち込まれています）

 

8. 以後、 「Animation」ウィンドウ上段の入力欄に下表（キーフレームを打ち込むタイミング）の数値を入力し、その都度「Add keyframe」を押してキーフレームを打ち込みます。

キーフレームを打ち込む「Animation」 上段入力欄の数値
120
180
240
300
360
420
480
540
600

表：キーフレームを打ち込むタイミング

 

9. 次に「Animation」ウィンドウ内にある録画ボタンを押します。「Inspector」タブ内の写真の箇所が赤くなっていれば、続く10 の操作が「Animation」データとして記録されます。

 

10. 回転の設定をします。入力例を参考に下表（回転の設定）の数値を入力してください。

入力例：キーフレームの場所「60」の入力例
「Animation」ウィンドウ上段の入力欄に「60」を入力 → 「Inspector」タブ内→「Rotation」 Y に「1800」と入力

 

キーフレームの場所（数値）	「Rotation」- Y の値
0	0
60	1800
120	3600
180	5400
240	7200
300	9000
360	10800
420	12600
480	14400
540	16200
600	18000

表：回転の設定

これで完成です。

GAME 画面から再生ボタンを押すと、ゾートロープが始まります。

 

STYLY にアップロードする

UnityからSTYLYにアセットをアップロードする方法はこちらをご参考ください。

オブジェクトの手を動かしたり踊らせてみたりするなど、動きをを加えるほどゾートロープは複雑で個性的な表現になります。

（作例：Maillots de bain）

いろいろなゾートロープづくりを試してみてくださいね。