第5回目:Animationの作成方法|Tech Book Zone Manatee

マナティ

入門Unity 5

第5回目:Animationの作成方法

今回は、Animationの作成方法について解説します。今回は2つのSphereをScene上に配置して、「太陽」の周りを「地球」が回るAnimationの作成方法を解説します。

はじめに

今回は、Animationの作成方法について解説します。今回は2つのSphere(球体)をScene上に配置して、1つを「太陽」もう1つを「地球」とみなして、「太陽」の周りを「地球」が回る、といったAnimationの作成方法を解説します。 今回作成するプロジェクト名はMakingAnimationプロジェクトとしておきましょう。第2回目で解説した方法で、各自がプロジェクトを作成してください。新しくプロジェクトを作成する場合は「New」を選択してください。

オブジェクトの配置

「Hierarchy→Create→3D Object→Sphere」と選択して、Scene上に2つのSphereを配置します。同じ位置に配置されますので、「トランスフォーム ツール」の「移動」で、配置位置を決めてください。Sphereの大きさも変えていますが、Sphereのサイズを変更するには、InspectorのTransformにある「Scale」の値で変更できます。デフォルトでは全て「1」になっていますが、この値より大きくするとSphereは大きくなり、小数点以下にすると小さくなります。「Scale」の値でサイズを変更する場合は「X、Y、Z」のすべての値を同じサイズの値にしてください。 2つのSphereの位置については、Hierarchy内の「Main Camera」を選択して、「Camera Preview」で確認しながら、2つのSphereの位置を決めてください。

Hierarchy内には「Sphere」と「Sphere(1)」の2つが作成されますが、Inspector内で名前を「Sun」と「Earth」に変更しておきましょう。名前を変更した後は必ずエンターキーを叩いてください。すると、変更した名前がHierarchy内のSphereに適用されます。 「Sun」の「Scale」の値は全て「5」に指定し、「Earth」の「Scale」の値は全て「0.5」に設定(図1)してみました。

最終的に図2のような表示になります。Game画面で見ると図3の表示になります。

図1 Sphereの名前をSunにしScaleに5を指定している

図2 SunとEarthの位置を決めた

図3 Game画面で表示させてみた

次に、Hierarchy内のSunの子要素としてEarthを追加します。やり方は簡単です。EarthをドラッグしてSunの上にドロップしてください。図4のような階層構造になります。

図4 Sunの子要素としてEarthを追加した

では、いよいよ実際にAnimationを作成していきましょう。

Animationを作成する

Unity 5メニューの「Window→Animation」と選択します。すると図5のような、Animationを作成する画面が表示されます。

図5 Animation作成画面

中央の「Create」ボタンをクリックして、これから作成するAnimationの名前を付けてください。今回はSunandEarthAnimation.animとしました。「保存」ボタンをクリックしてください。 すると図6のようなAnimationを設定する画面が表示されます。

図6 筆者の選択したローカルの画像が追加された

図6の画面の、左にある「Add Property」ボタンをクリックします。表示される画面から、一番上のTransformを展開して「Rotation」の右にある“●に+”のアイコンをクリックします(図7)。

図7 Rotationの横にある“●に+”のアイコンをクリックする

このとき、図7の左隅上の“●”が“赤い●”になって、Animationの記録が可能になっています。

Rorationの横の“●に+”のアイコンをクロックすると、Animationの画面にSun:Rotationという項目が追加されます(図8)。

図8 Animationの画面にSun:Rotationと追加された

図8の画面の「Sun:Rotation」の先頭に表示されている“右向き▲”をクリックすると、内容が展開されて、Rotationの「x」「y」「z」が表示されます(図9)。

図9 Rotationの「x」、「y」、「z」が表示された

図9の画面からAnimationを記録していきます。まず「赤い縦線」の上の部分を「タイムライン」の「2:00」の位置までドラッグするか、上方の赤い矩形で囲った「0」に入力されている位置に「120」と入力します。すると「赤い縦線」が「2:00(2分)」の位置まで移動します。この状態で「Rotation.y」に「360」と入力します。ほかは「0」のままでかまいません。もともとデフォルトで「1:00」の位置には“ひし形のマーク”が表示されていますので、この「1:00」の位置の“ひし形のマーク”は選択して、マウスの右クリックで表示される「Delete Key」で削除してください。「2:00」の位置には図10のように“ひし形のマーク”が追加されます。

図10 「2:00」の位置に「ひし形マーク」が追加された

これで一度動きを確認してみましょう。 “赤い●”の横にある“右向き▲(Play)”をクリックすると、Sunの周りをEarthが回るような表示になります(図11)。Sunの子要素としてEarthが配置されていますので、SunのAnimationを作成するとEarthにも適用されます。

図11 Sunの周りをEarthが回る

動画ではないので伝えにくいのですが、Sunの周りをEarthが回っています。 これでAnimationは完成しましたので、Animationの画面を閉じてください。右隅上の[x]アイコンで閉じます。 では、次に、これらのSphereにMaterialを適用しましょう。適用の仕方は既に解説済みですので、お分かりかと思います。Sunはオレンジ系統色、Earthには青系統色を作成して適用しましょう。

オブジェクトにMaterialを適用する

2つのMaterialを作成したら、あとは簡単です。Scene上に配置しているSphereに、これらのMaterialをドラッグ&ドロップするだけです(図12)。

図12 2つのSphereにMaterialを適用した

背景色を暗闇にする

宇宙ですから、背景も暗黒の暗闇にしておきましょう。Hierarchyから「Main Camera」を選択し、Inspector内の、Cameraにある「Clear Flags」に「Solid Color」を指定します。デフォルトでは「Skybox」になっています。次に、「Background」の「矩形」をクリックすると「Color」の画面が表示されますので、その中から「黒(Black)」を指定してください。「R、G、B、A」の値を全て「0」に指定すると「黒」になります。これで、Game画面で見ると背景が真っ暗で表示されます(図13)。

図13 背景が黒で表示された

では、これで「Play」ボタンで実行してみましょう。図14のように表示されます。実際にはAnimationでEarthがSunの周りを回っています。

図14 EarthがSunの周りをまわっている

実際に動かしたのが下記の動画です。

Animationの動画
https://youtu.be/pm0FzcIV-V4

以上で、Animationの作成方法は終わりです。この程度のことなら、1行もコードを書くことなく実現できます。実際には「Asset Store」から太陽や地球のAssetをダウンロードして使用すると、もっとリアル感のあるAnimationが作成できます。 折角作った作品なので保存しておきましょう。「File→Save Scene as」と選択して「太陽と地球」という名前で保存しておきましょう。 次回はWebカメラの使い方を解説します。

著者プロフィール

薬師寺国安事務所 薬師寺国安(著者)
薬師寺国安事務所代表。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット「PROJECT KySS」を結成。2003年よりフリーになり、PROJECT KySSの活動に本格的に参加。.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。現在はUnity5、UE4、ExcelVBAについて執筆活動中。
Microsoft MVP for Development Platforms‒Windows Platform Development (Oct 2014‒Sep 2015)。