Share
Genau wie Bilder oder Sprites spielt auch der Ton eine wichtige Rolle in Spielen. Die richtige Hintergrundmusik kann die Stimmung für das Spiel bestimmen. In ähnlicher Weise wird das Spiel durch das Hinzufügen von Soundeffekten für Abstürze oder Schüsse viel interessanter.
Sie können auch Szenen zu Ihrem Spiel hinzufügen, um es besser zu organisieren. Anstatt den Spielbildschirm direkt den Benutzern direkt anzuzeigen, können Sie ihn zunächst auf dem Startbildschirm anzeigen, wo er einen Schwierigkeitsgrad für das Spiel auswählen oder die Lautstärke der Hintergrundmusik erhöhen / verringern kann.
In diesem Lernprogramm erfahren Sie, wie Sie mit Crafty Ihren Spielen Sounds und Szenen hinzufügen.
Das Hinzufügen von Sounds zu einem Spiel ähnelt dem Hinzufügen von Sprite-Sheets. Sie müssen ein Asset-Objekt erstellen und dann ein Array von Audiodateien für verschiedene Soundeffekte bereitstellen. Crafty lädt dann die erste vom Browser unterstützte Datei. Hier ist ein Beispiel:
var game_assets = "audio": "back_music": ["back_music.wav", "back_music.ogg", "back_music.mp3"], "gun_shot": ["gun_shot.wav", "gun_shot.ogg", "gun_shot.mp3"]; Crafty.load (game_assets);
Nachdem Sie die Audiodateien hinzugefügt haben, können Sie sie mit abspielen Crafty.audio.play (String-ID, Number repeatCount, Number volume). Der erste Parameter ist der Ich würde von der Datei wollen wir spielen. Um die Hintergrundmusik abzuspielen, können Sie weitergeben "back_music" wie Ich würde.
Mit dem zweiten Parameter können Sie steuern, wie oft eine Audiodatei abgespielt wird. Wenn dieser Parameter nicht angegeben ist, wird die Datei nur einmal abgespielt. Wahrscheinlich möchten Sie einige Klänge ständig spielen. Ein Beispiel ist die Hintergrundmusik eines Spiels. Dies kann erreicht werden, indem der zweite Parameter auf -1 gesetzt wird.
Der dritte Parameter steuert die Lautstärke der angegebenen Audiodatei. Es kann einen beliebigen Wert zwischen 0,0 und 1,0 haben. Dies ist der Code zum Abspielen von Hintergrundmusik:
Accentsconagua
Crafty.audio.play ("back_music", -1, 0.5);Sie können Audiodateien auch basierend auf bestimmten Ereignissen wie Kollision zwischen Entitäten oder Tastendruck wiedergeben.
walking_hero.bind ('KeyDown', Funktion (evt) if (evt.key == Crafty.keys.UP_ARROW) walking_hero.animate ("springend", 1); Crafty.audio.play ("gun_shot", 1) ;);Denken Sie daran, dass Sie Ihrem Helden die Keyboard-Komponente hinzufügen müssen, bevor er das erkennt Taste nach unten Veranstaltung. Der obige Code bindet das Taste nach unten Ereignis an den Helden und prüft, ob die Taste mit gedrückt wurde evt.key. Wenn die Aufwärtspfeiltaste gedrückt wird, wird dem Helden einmal eine springende Animation abgespielt. Ein Schußklang wird ebenfalls abgespielt.
Drücken Sie die Aufwärtspfeil Geben Sie die folgende Demo ein und Sie werden alles in Aktion sehen. Ich habe die Zeile, in der die Hintergrundmusik abgespielt wird, auskommentiert, aber Sie können sie beim Abspielen der Demo einfach auskommentieren.
Die Hintergrundmusik in der Demo wurde von Rosalila erstellt und der Schussklang stammt von Luke.RUSTLTD.
Es gibt viele andere Methoden, mit denen Sie die von Crafty gespielten Sounds manipulieren können. Sie können alle Audiodateien, die im Spiel abgespielt werden, mit stummschalten und die Stummschaltung aufheben .stumm() und .stummschalten () beziehungsweise. Sie können Audiodateien auch basierend auf ihren Dateien anhalten und fortsetzen Ich würde mit der .Pause (Id) und .Pause (Id) Methode.
Die maximale Anzahl von Sounds, die gleichzeitig in Crafty gespielt werden können, ist begrenzt. Der Standardgrenzwert für diesen Wert ist 7. Jeder der verschiedenen Sounds, die gleichzeitig abgespielt werden, ist ein Kanal. Sie können jedoch Ihren eigenen Wert festlegen, indem Sie verwenden Crafty.audio.setChannels (Nummer n). Sie können auch überprüfen, ob eine bestimmte Audiodatei derzeit auf mindestens einem Kanal abgespielt wird .isPlaying (String-ID) Methode. Es wird ein boolescher Wert zurückgegeben, der angibt, ob das Audio abgespielt wird oder nicht.
Der Spielbildschirm ist im Allgemeinen nicht das Erste, was Sie in einem Spiel sehen. Normalerweise ist der erste Bildschirm der Ladebildschirm oder der Hauptmenübildschirm. Sobald Sie verschiedene Optionen wie Audio oder Schwierigkeitsgrad eingestellt haben, können Sie auf die Wiedergabeschaltfläche klicken, um zum eigentlichen Spielbildschirm zu gelangen. Wenn das Spiel beendet ist, können Sie den Benutzern ein Spiel auf dem Bildschirm zeigen.
Diese verschiedenen Spielbildschirme oder -szenen machen Ihr Spiel besser organisiert. Eine Szene in Crafty kann durch Aufrufen erstellt werden Crafty.defineScene (String szenname, Funktion init [, Funktion uninit]).
Der erste Parameter ist der Name der Szene. Der zweite Parameter ist die Initialisierungsfunktion, mit der die Szene eingestellt wird, wenn die Szene abgespielt wird. Der dritte Parameter ist eine optionale Funktion, die ausgeführt wird, bevor die nächste Szene abgespielt wird und nach allen Entitäten mit 2D Komponente in der aktuellen Szene wurde zerstört.
Hier ist der Code zum Definieren des Ladebildschirms:
Crafty.defineScene ("loading_screen", function () Crafty.background ("orange"); var loadingText = Crafty.e ("2D, Canvas, Text, Tastatur") .attr (x: 140, y: 120 ) .text ("Scenes Demo") .textFont (Größe: '50px', Gewicht: 'Fett') .TextColor ("Weiß"); loadingText.bind ('KeyDown', Funktion (evt) Crafty.enterScene ("game_screen");););In dem obigen Code habe ich eine definiert "Ladebildschirm" Szene. Die Initialisierungsfunktion setzt die Hintergrundfarbe auf Orange und zeigt Text an, um dem Benutzer Informationen darüber zu geben, was als nächstes kommt. Sie können hier ein Logo und einige Menüoptionen in ein Spiel einfügen. Durch Drücken einer beliebigen Taste, während sich die Leinwand im Fokus befindet, gelangen Sie zum eigentlichen Spielbildschirm. Das .enterScene (String szenname) Hier wurde die Methode zum Laden der "game_screen".
In der folgenden Demo können Sie die UP-Taste zehnmal drücken, um zum letzten Bildschirm zu gelangen.
Nach Abschluss dieses Lernprogramms sollten Sie Ihrem Spiel eine Vielzahl von Soundeffekten hinzufügen und die Audioausgabe steuern können. Sie können einem Benutzer jetzt auch unterschiedliche Bildschirme in verschiedenen Situationen anzeigen. Ich sollte Sie daran erinnern, dass ich Crafty Version 0.7.1 in diesem Tutorial verwendet habe und die Demos möglicherweise nicht mit anderen Versionen der Bibliothek funktionieren.
Im nächsten und letzten Tutorial dieser Serie erfahren Sie, wie Sie die Kollisionserkennung in Crafty verbessern können.
