CocosCreatorの音の読み込みで詰まった話

10621 ワード
CocosCreator JavaScript JavaScript テキストリンク

こんばんは、やわらーです。
本日は音の読み込みで少し詰まってしまいました。

環境

windows10
CocosCreator v1.9.0

音も先日の画像の一括読み込み
https://qiita.com/Yawarakko/items/98b5fc6c516bdd700909
と同じ要領でできると思い、こんな感じで書いてみました。

Sounds.js
cc.Class({
    extends: cc.Component,

    properties: {
        soundsData: null,
        _bgmID: null,
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this._loadSounds();
    },

    start(){
        this._bgmID = cc.audioEngine.play(this.soundsData[0], true);
    },

    // resourcesフォルダの読み込み
    _loadSounds(){
        let self = this;
        cc.loader.loadResDir("Sounds", cc.AudioClip, function(err, assets){
            if(err){
                cc.error(err);
                return;    
            }
            self.soundsData = assets;
        })
    },
});

音はresources/Soundsフォルダに2曲入れてあります。
BGMを再生したいのでstart()で再生しました。
これで実行してみました、音は再生されたのですがエラー発生。確認するとどうやら読み込みができていないのに再生しようとしているエラーのようです。
cc.log()を入れて確認してみると読み込みが終わる前に再生を呼び出しているのが原因だとわかりました。
しかし、BGMなのでシーンが始まったタイミングで再生したい....

解決策1

というわけで解決策その1。
あらかじめエディタ側でセットしてしまう方法です。

Sounds.js
cc.Class({
    extends: cc.Component,

    properties: {
        soundsData: {
            default: [],
            url: cc.AudioClip
        },
        _bgmID: null,
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        //this._loadSounds();
    },

    start(){
        this._bgmID = cc.audioEngine.play(this.soundsData[0], true);
    },

    // resourcesフォルダの読み込み
    // _loadSounds(){
    //     let self = this;
    //     cc.loader.loadResDir("Sounds", cc.AudioClip, function(err, assets){
    //         if(err){
    //             cc.error(err);
    //             return;    
    //         }
    //         self.soundsData = assets;
    //     })
    // },
});

このように、あらかじめエディタ側でセットする方法です。これなら問題なく再生されます。しかしこの方法、使用する音が少ないならいいのですが、使いたい音が何十曲もあった場合いちいちセットするのが大変です。

解決策2

そこで、解決策2は読み込みの方法は変えずに、読み込みが終わるのを待ち、そこで再生する方法です。

Sounds.js
cc.Class({
    extends: cc.Component,

    properties: {
        soundsData: null,
        _bgmID: null,
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this._loadSounds();
    },

    //start(){
    //   this._bgmID = cc.audioEngine.play(this.soundsData[0], true);
    //},

    // resourcesフォルダの読み込み
    _loadSounds(){
        let self = this;
        cc.loader.loadResDir("Sounds", cc.AudioClip, function(err, assets){
            if(err){
                cc.error(err);
                return;    
            }
            self.soundsData = assets;
            self.playBGM();
        })
    },

    // 音の再生
    playBGM(){
        this._bgmID = cc.audioEngine.play(this.soundsData[0], true);
    }
});

cc.loader.loadResDir()の第3引数のコールバック関数は読み込みが終了したタイミングで呼ばれるようです。なのでそこで再生する方法です。これなら、一括で読み込みつつシーンの開始時に再生できます。しかし、読み込みが終わってから再生されるので、シーン開始から音の再生までラグが生じてしまう可能性があります。

以上が音の読み込みの方法です。どちらの方法も一長一短なので使い分ける必要がありますね。
読み込みは非同期なので気をつけないといけないです。
今回の音は魔王魂様(https://maoudamashii.jokersounds.com/)のものを使用させていただきました。