Zoetrope アイキャッチ画像

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

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

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

 

STYLY

サンプル

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」

今回使用する 3D モデル

今回使用する 3D モデル

 

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

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

「Asset」内に「Z2」のフォルダができていればインポート完了

「Asset」内に「Z2」のフォルダができていればインポート完了

 

ゾートロープとは

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

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

 

3D モデルの配置

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

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

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

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

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

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

STYLY

床をつくる

 

[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-3]~[A-5]の作業

[A-3]~[A-5]の作業

 

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

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

「GameObject」の「Position」を確認する

「GameObject」の「Position」を確認する

 

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

空の 「GameObject」に「Z2」をドラッグ & ドロップ

空の 「GameObject」に「Z2」をドラッグ & ドロップ

 

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

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

オブジェクトの Prefab 化

オブジェクトの Prefab 化

 

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

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

オブジェクトを 24 回コピー

オブジェクトを 24 回コピー

 

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

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

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

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

それぞれの「GameObject」-「Rotation」- Y に入力

それぞれの「GameObject」-「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 の値)を参考にして数値を入力してください。

「GameObject(1)」を選択「Inspector」タブ→「Transform」→「Position」の Y に入力

「GameObject(1)」を選択「Inspector」タブ→「Transform」→「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」のデータをデフォルトで指示された場所にセーブ。すると、タイムラインが現れます。

「Animation」の設定

「Animation」の設定

 

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

「Add Property」を操作

「Add Property」を操作

 

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」データとして記録されます。

「Animation」の録画状態について

「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

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