【22日目】25日間でCocos Creatorでゲームを作る

BGMをシーンごとに切り替える

BGMを管理するスクリプトを作成する

1. assets/scriptsにAudioManager.tsを作成する
   AudioManager.ts

   import { _decorator, Component, AudioSource, AudioClip, tween } from 'cc';
   const { ccclass, property } = _decorator;
   
   @ccclass('AudioManager')
   export class AudioManager extends Component {
     @property(AudioSource)
     bgmSource: AudioSource = null;
   
     public fadeOutAndCall(onComplete: Function) {
       if (!this.bgmSource) return onComplete();
   
       tween(this.bgmSource)
         .to(1.0, { volume: 0 })
         .call(() => {
           this.bgmSource.stop();
           onComplete();
         })
         .start();
     }
   
     public fadeInBGM(clip: AudioClip) {
       if (!this.bgmSource) return;
   
       this.bgmSource.clip = clip;
       this.bgmSource.volume = 0;
       this.bgmSource.play();
   
       tween(this.bgmSource)
         .to(1.0, { volume: 1 })
         .start();
     }
   }
   

2. SceneRootにEmpty Nodeを追加しAudioManagerにリネームする
3. AudioManagerにAudioManager.tsをアタッチする
4. MenuManager.tsを調整する
   MenuManager.ts

   import { _decorator, Component, Node, Label, director, find, AudioClip } from 'cc';
   const { ccclass, property } = _decorator;
   import { PlayerData } from './PlayerData';
   import { AudioManager } from './AudioManager';
   
   // ...
   
   public goToGame() {
     if (!this.isLoggedIn) {
       alert("ログインしてから開始してください");
           this.openAuthPopup();
       return;
     }
   
     console.log("GameSceneへ移動します...");
     const audioNode = find("AudioManager");
     const audio = audioNode?.getComponent(AudioManager);
     if (audio) {
         audio.fadeOutAndCall(() => {
             director.loadScene("GameScene");
         });
     } else {
         director.loadScene("GameScene");
     }
   }
   

5. ヒエラルキーパネルのSceneRootをAssetsパネルのassets/prefabsへドラッグ&ドロップし上書きする
6. GameManager.tsを調整する
   GameManager.ts

   import { _decorator, Component, Node, Label, director, find, AudioClip } from 'cc';
   
   // ...
   
   @property(AudioClip)
   gameBGM: AudioClip = null;
   
   start() {
       // ...
       const audioNode = find("AudioManager");
       const audio = audioNode?.getComponent(AudioManager);
       
       if (audio && this.gameBGM) {
           audio.fadeInBGM(this.gameBGM);
       }
   }
   

BGMを設定する

1. AudioManagerのインスペクターのAdd CompornentからAudioSourceを追加する
2. AudioManagerのBgm SourceにヒエラルキーパネルからAudioManagerをドラッグ&ドロップする
3. GameSceneを選択する
4. Canvasを選択し、GameManagerのGame BGMに任意のmp3をドラッグ&ドロップする

まとめ

これでシーン切替時のBGMの切り替えも完了