✨ Week08 - UI強化と演出追加（Polish & Effects）

---

🎯 今週の目的

• ゲーム体験を視覚的・感覚的に磨き上げ、完成度を高める
• Animator / Animation / Particle System の基本的な使い方を学ぶ
• プレイヤー・敵・UIに「気持ちよさ」を追加する

---

🛠 授業の流れ

---

🎞 1. Animator・Animation の基礎

• Animator : コンポーネント。呼び出し元でアニメーションさせたいGameObjectにアタッチする。
• AnimatorController : アセット。アニメーション間の遷移や状態を管理する。
• AnimationClip : アセット。実際にGameObjectにアニメーション情報を持たせるデータ。基本的にアニメーションの編集もこれを扱う。

---

Step 0 : 事前準備

これからレベルアップ演出アニメーションを作成してみよう！ 下準備として、前回作成したGameScene上のPlayerLevelManagerの子供にTextMeshProTextで演出用のテキストを作成しましょう。

Step 1: Animator Controller を作成する

1. _Workspace/Assets/Animations フォルダを作成
2. 右クリック → Create > Animator Controller
3. 名前は LevelUpAnimator
4. 前回作成したGameScene上の'PlayerLevelManager'にアタッチする

---

Step 2: Animator 状態と遷移設定

1. Step1で作成したLevelUpAnimator.animatorをダブルクリック
2. Animator Windowが表示される
3. 下記図のようにStateを作成して遷移図を作成する

• 新規Stateは、右クリック > Create State > Empty から新規のStateを作成できる

4. Animator Windows のParametersにPlay トリガーを追加する

• 上記赤丸の「＋」ボタンクリック　-> Triggerを選択。名前をPlayにする

---

5. Idle -> Play ステートに伸びている矢印をタップして下記画像の部分にTriggerをセット

Step 3: Animation Clip を作成

1. メニューから Create > Animation > Animationを選択。
2. 名前はLevelUpPlayAnimation とLevelUpIdleAnimationの2つを作成する。
3. AnimatorWindowを開き、State内に作成したアニメーションをMotion部分にアサインする

• LevelUpIdleAnimation => Idle, LevelUpPlayAnimation => Play

4. LevelUpIdleAnimationをダブルクリックしてAnimation Window`を開く
5. Hierarchy 上のPlayerLevelManager（Animatorコンポーネントをアタッチした）を選択しておくこと
6. Animationを編集して、演出を作成する

---

Step 4: スクリプトからトリガー発火

• PlayerLevelManager.csに以下のコードを追加して、 Animatorコンポーネントを_animにアサインする。

[SerializeField]
private Animator _anim;

private static readonly int Play = Animator.StringToHash("Play");//セットしたTrigger名を入れる

 private void LevelUp()
{
    _anim.SetTrigger(Play);//ここでAnimation再生
}

---

🌟 2. パーティクルシステムとは

• Particle System (パーティクルシステム) コンポーネントはシーン内で大量の小さな 2D の画像を生成し、アニメーション化することによって、液体、雲、炎などの流体をシミュレーションします。
• コンポーネント内には「モジュール」と言われる単位で設定項目が用意されています。各種モジュールの設定を行いエフェクトを作成します。

今回は、敵を撃破した際の爆発っぽいエフェクトを作成します！

Step 1:　準備

• 空のGameObjectをScene上に配置する
• ParticleSystemコンポーネントをアタッチする。

Step2 : 撃破時の演出をParticleSystemのパラメータを調整しながら作成する。

• パラメーター項目が多いので授業中の画面見ながら行うが、設定画像も添付しておきます。
• 調整終わったらPrefab化する。

▼モジュールにチェックがついているところだけ抜粋

Step3 : 敵撃破時にエフェクトを生成して自動的に破棄

• EnemyHealth.csに以下スクリプトを追加する
• Enemy.prefabのEnemyHealthコンポーネントに、先程作成したEffectPrefabをアタッチする

[SerializeField]
private GameObject _onDeadEffectPrefab;

~

private void OnDeath()
{
    ~ 
    
    if (_onDeadEffectPrefab != null)
    {
         //エフェクトPrefabを生成する
        Instantiate(_onDeadEffectPrefab, transform.position, Quaternion.identity);
    }        
        
    ~
}

---

✅ チェックリスト

• Animator で演出用アニメーションを追加できたか
• 敵にダメージを与えた際にフラッシュするか
• 敵撃破時にパーティクル演出が再生されるか

---

📝 課題

• オリジナルの演出を作成してみよう！

---

🔗 参考リンク

• アニメーション用語
• Particle System モジュール の各種ドキュメント