![見出し画像](https://assets.st-note.com/production/uploads/images/122306694/rectangle_large_type_2_38918e00585bb78ed221cf8a49e97f04.png?width=1200)
4-1ボールをアニメーションさせる【Unityゲーム開発の基礎】作って学ぶブロック崩し
ブロック崩しを作りながらUnityを学んでいこう!
フェーズ1で「ブロック崩しの骨格」を作り
フェーズ2で「見た目をかっこよく」して
フェーズ3で「タイトル画面やゲームオーバーなどの画面を作る」ことができました。
フェーズ4の目標は「アニメーション」です。
ボールは一応動いてますが、ゲームに直接関係ない部分にも動きを付けることができればにぎやかな感じになりますね。
今回はボールを回転させるアニメーションを追加してみます。
AnimationウィンドウとAnimatorウィンドウ
Unityではアニメーションの設定作業を行うための専用画面が用意されています。
Animationウィンドウはオブジェクトに動きを付ける時に使います。
Animatorウィンドウではその動きを条件にあわせて切り替えるなどの制御を行います。
歩く、走るといった動きをAnimationで作成し、歩くから走るに移行する為の設定をAnimatorで行うというイメージですね。
それぞれのウィンドウを表示させるには、メニューから Window → Animation → Animation や Window → Animation → Animatorを選びましょう。
![](https://assets.st-note.com/img/1700543205911-BVSWk8PgRd.png)
ボールが回転するアニメーションを追加
アニメーションクリップとアニメーターを作る
Hierarchyウィンドウから Ball オブジェクトを選択したまま、Animationウィンドウの Create ボタンをクリックすると、新規につくるファイルの保存画面が表示されます。
管理しやすいように Assetsフォルダの下に Animationsフォルダを作成することにします。
拡張子が「.anim」のファイルはアニメーションクリップです。
BallRotation.animという名前を付けてファイルを新規作成します。
すると Ball.controller というアニメーターファイルも一緒に作成されます。
![](https://assets.st-note.com/img/1700544751000-NNIIQCrHis.png)
さらに Ball オブジェクトの Inspectorウィンドウには Animator が追加れれてBall.controller がセットされています。
![](https://assets.st-note.com/img/1700544993781-fKJjHUSIeV.png)
アニメーションクリップを編集する
Hierarchyウィンドウから Ball オブジェクトを選択した状態で Animationウィンドウを見ると先ほど作成したアニメーションクリップを編集できます。
![](https://assets.st-note.com/img/1700545469060-s09ILzrXd3.png?width=1200)
Add Properyボタンをクリックすると Inspector で設定できる項目が選べるので、アニメーションで変化させたい項目の「+」をクリックします。
ここでは Transform の Rotation を選びます。
![](https://assets.st-note.com/img/1700545772469-JMvzWSklzR.png?width=1200)
リストに Rotation.x、y、zが追加されました。
右側にはタイムラインがあります。メモリ部分をドラッグすると縦の白い線を動かせます。ひし形マークがあるところは時間軸に対応した値が設定されていることを表しています。
白い線を最後に移動させ、Rotation.z の値を 360 に指定すると、Z軸を基準に回転するアニメーションができあがります。
![](https://assets.st-note.com/img/1700546770827-HBA78iKg7Z.png?width=1200)
アニメーションのカーブを編集する
実行してみるとボールが回転することが確認できますが、回転のしかたが一定ではないことが分かります。
上記で値を指定したのは 0 と 360 の2か所ですが、時間軸の変化に応じて間の値が自動計算されます。この時の変化のしかたを調整しましょう。
Curvesボタンをクリックすると値の変化がグラフのように表示されます。
![](https://assets.st-note.com/img/1700549171742-1zbzQGeXQc.png?width=1200)
点を右クリックして BothTangents → Linear を選択すると、値変化のカーブが直線になります。
![](https://assets.st-note.com/img/1700549241611-3FCY3Xi9j0.png)
これを 0 と 360 の2か所の点で行うと直線的に値が変わるようになります。
アニメーションのスピードを変える
アニメーションするスピードを変更するには、まず Animatorウィンドウを開きます。Hierarchyウィンドウから Ball オブジェクトを選択した状態で Animatorウィンドウを見ると以下のような図が表示されます。
![](https://assets.st-note.com/img/1700551996453-U1JITZIj4c.png?width=1200)
この中から BallRotation のアニメーションクリップを選択すると Inspectorウィンドウでスピードを変えることができます。
![](https://assets.st-note.com/img/1700552129267-Bdvq9PrK8L.png)
これでボールを回転させる仕組みが出来上がりました。
これが今回の成果です。
Phase4-1の成果(アニメーションでボール回転) #unity #indiedev #indiegame pic.twitter.com/IlrwHIQNuO
— をりはぅ@indiedev (@worihau__) November 22, 2023
つづく
次回:4-2ゲーム開始する時のアニメーション (予定)