So verwenden Sie CocosCreator zur Tonverarbeitung bei der Spieleentwicklung

Bei der Spieleentwicklung müssen wir häufig Soundeffekte verwenden, um eine Spielatmosphäre zu erzeugen. Daher fasst dieser Artikel die Kapselung und Verwendung von Soundeffektkomponenten bei der Spieleentwicklung mit Cocos Creator zusammen.

1. Grundlagen der Audiowiedergabe in Cocos Creator

1. Grundlagen

【1】Offizielle Dokumentation der AudioSource-Komponente: http://docs.cocos.com/creator/manual/zh/audio/audio.html

【2】 Offizielle Dokumentation von cc.audioEngine: http://docs.cocos.com/creator/manual/zh/audio/audio.html

Cocos Creator bietet zwei Audiowiedergabemethoden. AudioEngine und AudioSource können beide Audio wiedergeben. Der Unterschied zwischen ihnen besteht darin, dass AudioSource eine Komponente ist, die der Szene hinzugefügt und vom Editor festgelegt werden kann. AudioEngine ist eine reine API, die von der Engine bereitgestellt wird und nur in Skripten aufgerufen werden kann.

Gemeinsamkeiten: Sie verarbeiten im Wesentlichen AudioClip-Audioressourcen und müssen Komponenten im Cocos Creator-Editor mounten.

Ich persönlich empfehle, dies zu verwenden, um die AudioSource-Komponente zum Abspielen von Ton zu ersetzen. Die Schnittstelle ist vollständig und der Test ist effektiv. Sie können ein Skript ähnlich der AudioSource-Komponente kapseln, um es zu verwenden.

Methode 1: Verwenden Sie die AudioSource-Komponente zum Abspielen

Erstellen Sie einen leeren Knoten und fügen Sie ihm eine weitere Komponente hinzu -> AudioSource

Passen Sie AudioSource im Skript vorab an und verbessern Sie die externe Schnittstelle des Skripts entsprechend den tatsächlichen Anforderungen wie folgt

cc.Klasse({

	Eigenschaften:

		Audioquelle: {

			Typ: cc.AudioSource,
			Standard: null

		},
	},
	spielen() {

		diese.audioSource.play();

	},
	pause() {

		this.audioSource.pause();

	},
});

Methode 2: Verwenden Sie AudioEngine zum Abspielen

Definieren Sie im Skript ein AudioClip-Ressourcenobjekt, wie im Eigenschaftenobjekt im folgenden Beispiel gezeigt.

Verwenden Sie zum Abspielen direkt cc.audioEngine.play(audio, loop, volume);. Wie im onLoad-Beispiel unten gezeigt.

cc.Klasse({

	Eigenschaften:

		Audio:

			Standard: null,
			Typ: cc.AudioClip

		}

	},
	beim Laden() {

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

	},
	beimZerstören() {

		cc.audioEngine.stop(dies.aktuell);

	}

});

Bei der Wiedergabe der AudioEngine ist zu beachten, dass ein vollständiges AudioClip-Objekt (keine URL) übergeben wird. Daher empfehlen wir nicht, die Audio-URL direkt in die Wiedergabeoberfläche einzugeben. Stattdessen sollten Sie zunächst einen AudioClip definieren und dann das Audio in den Editor ziehen.

2. Gängige Methoden

【1】Komponenten-Audioquelle

play ( ) Spielt einen Audioclip ab.

stop ( ) Stoppt den aktuellen Audioclip.

pause ( ) Pausiert den aktuellen Audioclip.

resume ( ) Wiedergabe fortsetzen.

【2】Soundsystem cc.audioEngine

// Hintergrundmusik, Schleife

cc.audioEngine.playMusic(Quelle);

cc.audioEngine.stopMusic(Quelle);

// Kurzer Soundeffekt

cc.audioEngine.playEffect(Quelle);

cc.audioEngine.stopEffect(Quelle);

Die erste Methode oben weist in der nativen Plattform viele Fehler auf, daher verwenden alle unsere Spiele die zweite Methode zum Abspielen von Sounds.

2. Cocos Creator – Komponentenpaketierung für Soundeffekt-Management

1. Erstellen Sie die Soundmanagement-Klasse SoundMgr.ts

Konstante {
	cc-Klasse,
	Eigentum
} = cc._Dekorateur;

@ccklasse

exportdefaultclassSoundMgr {

	Soundpfad: Zeichenfolge = „res/sounds/“;

	// sound speichert den Namen der Musik und das Schlüssel-Wert-Paar des Audioobjekts sounds: {
		[Schlüssel: Zeichenfolge]: beliebig
	} = {};

	aktiviert: boolean = true;

	Musik: Zeichenfolge = '';

	// Singleton-Modus geschützte statische Instanz: SoundMgr;

	öffentliche statische getInstance(): SoundMgr {

		wenn (!diese.Instanz) {

			diese.Instanz = neuerSoundMgr();

		}

		gib diese.Instanz zurück;

	}

	// Soundressource hinzufügen addSound(key: string, clip: cc.AudioClip) {

		dies.sounds[Schlüssel] = Clip;

	}

	playFx(fxName: Zeichenfolge) {

		wenn (!this.enabled) zurückgeben;

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

	}

	spieleMusik(Musikname: Zeichenfolge) {

		diese.musik = Musikname;

		wenn (!this.enabled) zurückgeben;

		cc.audioEngine.playMusic(dies.sounds[Musikname], true);

	}

	stopMusic() {

		cc.audioEngine.stopMusic();

	}

	setEnabled(aktiviert: boolean) {

		this.enabled = aktiviert;

		wenn (dies.aktiviert) {

			dies.Musik abspielen(diese.Musik);

		} anders {

			cc.audioEngine.stopAll();

		}

	}

	getEnable() {

		Rückgabewert:

	}

}

2. Laden Sie Audioressourcen während der Initialisierung

Mithilfe des visuellen Bearbeitungstools Cocos Creator haben wir die Spielszene und die Ressourcen wie folgt eingerichtet:

Da wir Sounds dynamisch über Code laden, legen wir den Sounds-Ordner, in dem alle Sounddateien gespeichert sind, in den Ressourcenordner (wie oben gezeigt).

Erstellen Sie dann GameMgr.ts und mounten Sie es in den Canvas-Knoten.

onst
	cc-Klasse,
	Eigentum
} = cc._Dekorateur;

importiereSoundMgr aus "SoundMgr";

@ccklasse

exportdefaultclassGameMgrextends cc.Component {

	ladeSounds() {

		// Beachten Sie, dass dynamisch über Code geladene Ressourcen im Ressourcenordner abgelegt werden müssen cc.loader.loadResDir('sounds', cc.AudioClip, function(err, clips) {

			console.log("Clips laden:", Clips);

			wenn (Fehler) {

				console.log("fehler:", fehler);

			}

			für (sei i = 0; i

				SoundMgr.getInstance().addSound(clips[i].name, clips[i]);

			}

		});

	}

	beim Laden() {

		dies.loadSounds();

		console.log("sounds:", SoundMgr.getInstance().sounds);

	}

	beiPlayClick() {

		console.log("abspielen");

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

	}

	beiPauseKlick() {

		console.log("pause");

		SoundMgr.getInstance().stopMusic();

	}

}

Rufen Sie in der Methode onLoad der benutzerdefinierten Komponente GameMgr loadSounds auf, um alle im Spiel benötigten Soundressourcen zu laden. Gleichzeitig werden in GameMgr.ts die Schnittstellenmethoden onPlayClick und onPauseClick für Wiedergabe und Pause bereitgestellt.

Wird über die Play- und Pause-Tasten aufgerufen.

3. Anrufe abspielen und pausieren

4. Führen Sie den Test durch

Alle Soundressourcen werden erfolgreich geladen und der Test ist erfolgreich, wenn auf die Schaltflächen „Wiedergabe“ und „Pause“ geklickt wird.

3. Hinweise

Hinweis: Wenn alle Einstellungen für die Audiowiedergabe abgeschlossen sind, jedoch bei der Vorschau oder Ausführung in manchen Browsern kein Ton zu hören ist, kann dies an Browser-Kompatibilitätsproblemen liegen. Beispielsweise hat Chrome die automatische Wiedergabe von WebAudio deaktiviert und Audio wird standardmäßig über Web Audio geladen und wiedergegeben. In diesem Fall muss der Benutzer die Audioressource im Ressourcenmanager auswählen und dann den Audiolademodus im Eigenschafteninspektor in DOM Audio ändern, um es normal im Browser wiederzugeben.

Oben finden Sie Einzelheiten zur Verwendung von CocosCreator für die Tonverarbeitung bei der Spieleentwicklung. Weitere Informationen zur Tonverarbeitung von CocosCreator finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!