ゲーム開発におけるサウンド処理にCocosCreatorを使用する方法

1. Cocos Creatorでのオーディオ再生の基本

1. 基本

【1】AudioSourceコンポーネント公式ドキュメント: http://docs.cocos.com/creator/manual/zh/audio/audio.html

【2】cc.audioEngine公式ドキュメント: http://docs.cocos.com/creator/manual/zh/audio/audio.html

Cocos Creator には 2 つのオーディオ再生方法があります。AudioEngine と AudioSource はどちらもオーディオを再生できます。両者の違いは、AudioSource はシーンに追加してエディターで設定できるコンポーネントであることです。 AudioEngine はエンジンによって提供される純粋な API であり、スクリプト内でのみ呼び出すことができます。

共通点:基本的には AudioClip オーディオリソースを処理し、Cocos Creator エディターでコンポーネントをマウントする必要があります。

個人的には、AudioSource コンポーネントを置き換えてサウンドを再生するにはこれを使用することをお勧めします。インターフェイスが完成しており、テストも効果的です。AudioSource コンポーネントと同様のスクリプトをカプセル化して使用できます。

方法1: AudioSourceコンポーネントを使用して再生する

空のノードを作成し、そこに別のコンポーネントを追加します-> AudioSource

スクリプトにAudioSourceをプリセットし、実際のニーズに応じてスクリプトの外部インターフェースを次のように改善します。

cc.クラス({

	プロパティ:

		オーディオソース: {

			タイプ: cc.AudioSource、
			デフォルト: null

		},
	},
	遊ぶ（） {

		オーディオソースを再生します。

	},
	一時停止（） {

		this.audioSource.pause();

	},
});

方法2: AudioEngineを使用して再生する

次の例の properties オブジェクトに示すように、スクリプトで audioClip リソースオブジェクトを定義します。

再生するには、cc.audioEngine.play(audio, loop, volume); を直接使用します。以下の onLoad の例に示すように。

cc.クラス({

	プロパティ:

		オーディオ：

			デフォルト: null、
			タイプ: cc.AudioClip

		}

	},
	オンロード() {

		this.current = cc.audioEngine.play(this.audio, false, 1);

	},
	onDestroy() {

		cc.audioEngine.stop(this.current);

	}

});

AudioEngine が再生されているときは、完全な AudioClip オブジェクト (URL ではない) が渡されることに注意してください。したがって、再生インターフェースでオーディオ URL を直接入力することはお勧めしません。代わりに、最初に AudioClip を定義してから、オーディオをエディターにドラッグすることをお勧めします。

2. 一般的な方法

【1】コンポーネントオーディオソース

play ( ) オーディオクリップを再生します。

stop ( ) 現在のオーディオクリップを停止します。

pause ( ) 現在のオーディオクリップを一時停止します。

resume ( ) 再生を再開します。

【2】サウンドシステム cc.audioEngine

// バックグラウンドミュージック、ループ

cc.audioEngine.playMusic(ソース);

cc.audioEngine.stopMusic(ソース);

// 短い効果音

cc.audioEngine.playEffect(ソース);

cc.audioEngine.stopEffect(ソース);

上記の最初の方法はネイティブプラットフォームで多くのバグが発生するため、当社のゲームではすべて 2 番目の方法を使用してサウンドを再生します。

2. Cocos Creator サウンドエフェクト管理コンポーネントのパッケージ化

1. サウンド管理クラスSoundMgr.tsを作成する

定数{
	ccクラス、
	財産
} = cc._デコレータ;

@ccクラス

エクスポートデフォルトクラスSoundMgr {

	sound_path: 文字列 = 'res/sounds/';

	// sound は音楽の名前とオーディオオブジェクトのキーと値のペアを格納します sounds: {
		[キー: 文字列]: 任意
	} = {};

	有効: ブール値 = true;

	音楽: 文字列 = '';

	// シングルトン モード protectedstatic インスタンス: SoundMgr;

	パブリック静的getInstance(): SoundMgr {

		if (!this.instance) {

			this.instance = newSoundMgr();

		}

		このインスタンスを返します。

	}

	// サウンドリソースを追加 addSound(key: string, clip: cc.AudioClip) {

		this.sounds[キー] = クリップ;

	}

	playFx(fxName: 文字列) {

		if (!this.enabled) を返します。

		cc.audioEngine.playEffect(this.sounds[fxName], false);

	}

	playMusic(音楽名: 文字列) {

		this.music = 音楽名;

		if (!this.enabled) を返します。

		cc.audioEngine.playMusic(this.sounds[musicName], true);

	}

	音楽を停止する() {

		cc.audioEngine.stopMusic();

	}

	有効にするかどうかを設定します(有効: ブール値) {

		this.enabled = 有効;

		有効になっている場合

			this.playMusic(this.music);

		} それ以外 {

			cc.audioEngine.stopAll();

		}

	}

	getEnable() {

		returnthis.enabled;

	}

}

2. 初期化中にオーディオリソースをロードする

Cocos Creator ビジュアル編集ツールを使用して、ゲームシーンとリソースを次のように設定します。

コードを通じてサウンドを動的に読み込むため、すべてのサウンドファイルを保存する sounds フォルダーを resources フォルダーに配置します (上図を参照)。

次に、GameMgr.ts を作成し、Canvas ノードにマウントします。

オンスト
	ccクラス、
	財産
} = cc._デコレータ;

「SoundMgr」からSoundMgrをインポートします。

@ccクラス

exportdefaultclassGameMgrextends cc.Component {

	サウンドをロードする（）{

		// コードを通じて動的にロードされるリソースはリソース フォルダーに配置する必要があることに注意してください cc.loader.loadResDir('sounds', cc.AudioClip, function(err, clips) {

			console.log("クリップをロード:", クリップ);

			もし（エラー）{

				console.log("エラー:", err);

			}

			（i = 0とすると、i

				SoundMgr.getInstance().addSound(クリップ[i].name, クリップ[i]);

			}

		});

	}

	オンロード() {

		サウンドをロードします。

		console.log("サウンド:", SoundMgr.getInstance().サウンド);

	}

	再生クリック() {

		console.log("プレイ");

		SoundMgr.getInstance().playMusic('spring_music');

	}

	一時停止クリック() {

		console.log("一時停止");

		SoundMgr.getInstance().stopMusic();

	}

}

GameMgr カスタムコンポーネントの onLoad メソッドで、loadSounds を呼び出して、ゲームに必要なすべてのサウンドリソースを読み込みます。同時に、再生および一時停止インターフェースメソッド onPlayClick および onPauseClick が GameMgr.ts に提供されます。

再生ボタンと一時停止ボタンによって呼び出されます。

3. 通話の再生と一時停止

4. テストを実行する

すべてのサウンドリソースが正常に読み込まれ、再生ボタンと一時停止ボタンをクリックするとテストが合格します。

3. 注意事項

注意: オーディオ再生関連の設定がすべて完了しているにもかかわらず、一部のブラウザでプレビューまたは実行したときに音が聞こえない場合は、ブラウザの互換性の問題が原因である可能性があります。たとえば、Chrome では WebAudio の自動再生が無効になっており、デフォルトではオーディオは Web Audio を使用して読み込まれ、再生されます。この場合、ユーザーはリソースマネージャーでオーディオリソースを選択し、プロパティインスペクターでオーディオ読み込みモードを DOM Audio に変更して、ブラウザーで正常に再生する必要があります。