本記事はアジアクエスト Advent Calendar 2024の記事です。
お疲れ様です、DI部Web2課の細田 和幸です。
普段はWebアプリやモバイルアプリの開発に携わりつつ、大好きなゲームの研究としてUnityやUnreal Engine、Blenderを使って3DCGやゲーム制作の勉強を個人的に行っております。
今まではConnpassイベントで発信してきたのですが、その内容や今後発表したい内容を残したいと思いこの度テックブログでも発信しようと思った次第です。
今回は第二回ということで、「ドアの開閉アニメーション」を実装してみます。
前回の記事「Unityを使ってみよう!」はこちら
まず今回のメインとなるAnimatorについて紹介します。
・Animator
シーン上にあるオブジェクトを動かすためのUnityの機能です。
Animationというファイルを作成し、それを制御するための機能がAnimatorです。
オレンジだったりグレーだったりするパーツ1つ1つがAnimationファイルです。
それらを写真のように繋げて、どの入力でどのAnimationをどういう順番で再生するかなどを制御しています。
早速アニメーションファイルを作成してドアを動かしましょう
まずは適当にドアっぽい物体を用意します。
今回はキューブの大きさや厚さを調整して簡単なドアっぽい形のものを作成しました。
次に、このオブジェクトに動きを付けていきます。 ドアの開閉なので、Y軸を100度くらい回転させるという簡単なアニメーションです。
しかし、そのままY軸のRotationを動かしてもドアの中心を軸に回転してしまいます。
なぜならオブジェクトの原点が中心にあるからですね。
3Dモデルには中心となる「原点(ピボット)」というものがあり、ギズモが表示される部分がオブジェクトの原点で、そこを中心に回転したり大きさが変わったりします。
ドアのようなオブジェクトの端を軸にした回転は、空のオブジェクトの中にドアを子オブジェクトとして入れ込むことで再現できます。
まずCreateEmptyからParentといった名前を付けてその中にドアを入れます。
そして子にしたドアオブジェクトを左(-X方向)に少しずらします。
その上でParentのY軸を回転させてみるとドアっぽい動きになります。
親子関係のオブジェクトは親を動かすことで子も一緒に動くようになっており、逆に言えば子を動かしても親の座標は動きません。
子オブジェクトの座標をズラした上で親オブジェクトを回転させるとこのような動きが再現できます。
こんな感じでとりあえず動きは良さそうですね。 この動きをアニメーションにしていくわけですが、まずどこまで開くかの角度を覚えておきます。 今回は引いて開けるタイプで「Y軸を-135度」とします。
ここで1つ考えたいのがドアの開き方です。
ゲームを制作するうえで世界観作りというのは非常に重要な要素です。
例えば「戦国時代や江戸時代など昔の日本を舞台にしたゲームを作ろう!」 となったとき、ドアとなるものは大抵は襖や障子です。
昭和ごろの日本も、玄関は大抵引き戸で、ガラガラ開けるタイプが多いですね。
つまりY軸の回転ではなく、X軸を移動するようなアニメーションを作成します。
「『バイオハザード』や『グランド・セフト・オート』のような海外が舞台のゲームを作ろう!」 となった場合、ちゃんと舞台設定に合ったドアを考えなければなりません。
それが何かというと、内開きか外開きかです。
日本は洋式ドアの場合、外に向かって開く場合がほとんどです。
日本には玄関で靴を脱ぐという習慣があるので、中に向かって開くと靴が引っかかったりするので外開きになります。
一方海外では押して開けるのがほとんどです。
もし犯罪者が押しかけてきても全体重をドアにかければ抑え込むことができるからとか、防犯的な理由が多いです。
ホラー映画なんかでも、悪者やゾンビに追い込まれたとき必死に押さえつけたり、近くにある棚を倒したりして開かないようにしますよね。
もちろん日本にも防犯対策として、鍵だけではなく「チェーン」がついています。
それで無理やり引っ張り開けられることを防ぐことができます。
このように国柄や時代でドアの開き方やドアについている鍵などに違いが出るので、その辺りも考えてドアのアニメーションを作成するといいと思います。
それではアニメーションを作っていきます。 まずはAssets内にAnimetionフォルダを作っておきましょう。
次に、ドアの親要素を選択した状態で上部メニューのWindow→Animation→Animation(Ctrl+6)でAnimationファイルを作成します。 表示されたウィンドウの真ん中にある「Create」を押し、保存先を先ほど作成した Animationフォルダ に指定します。ファイル名は「Open」とします。
左上のAdd Propertyから親要素のRotationを追加すると、0と1:00のところに♦マークが打たれます。
それぞれのキーにRotationの値を設定してあげると、0:00から1:00に向かう間の回転の動きを設定した通りに再生してくれます。
プロパティを追加したら左上の赤丸ボタンを押し、レコーディングを開始します。
秒数が書いてある青いバーの部分をドラッグすると白い線を動かせるので1:00のところまで動かし、プロパティのRotation.Yを好みの角度に設定しエンターキーを押すと完成です。
良い感じですね。
このアニメーションはOpenとし、あとは同じ要領で-135→0へ動くClose、閉まっている状態を維持するために0→0のIdleの3つのアニメーションを作ります。
アニメーションが作成出来たら、それをAnimatorという機能で制御します。
アニメーションファイルを作成すると一緒にAnimatorも生成されているので開きます。
例えば「Wを押してるときはWalkアニメーションを再生し、その状態からShiftを押すとRunアニメーションに移動する」といった流れを、ステート同士を→で繋いで制御するわけです。
Animatorはプロジェクトを実行するとEntryからオレンジ色のデフォルトステートというステートに向かいます。
これは変更することができるので、Idleを右クリックしてSet as Layer Default Stateを設定します。
こうすることでIdleがデフォルトとなるのでドアが閉まった状態でスタートします。
最後に各ステートをダブルクリックしてインスペクターに表示されるLoop Timeのチェックを外したらアニメーションの作成は完了です。
次回はInput SystemとRaycastという機能を使用し、Fキーでこれらのアニメーションを呼び出せるようスクリプトを書いていきたいと思います。