如何使用Crafty为您的游戏添加声音和场景

就像图像或精灵一样，声音在游戏中也起着至关重要的作用。合适的背景音乐可以为游戏营造氛围。同样，包括碰撞或***声等声音效果将使游戏更加有趣。

您还可以在游戏中添加场景以使其更有条理。例如，您可以先向用户显示主屏幕，而不是直接向用户显示游戏屏幕，他们可以在其中选择游戏的难度级别或增加/减少背景音乐的音量。

在本教程中，您将学习如何使用 Crafty 为您的游戏添加声音和场景。

添加声音

向游戏添加声音的过程类似于添加精灵表。您需要创建一个资产对象，然后为不同的音效提供一组音频文件。Crafty 将加载浏览器支持的第一个文件。这是一个例子：

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);

添加音频文件后，您可以使用 Crafty.audio.play(String id, Number repeatCount, Number volume). 第一个参数是Id我们要播放的文件。要播放背景音乐，您可以通过"back_music"as Id。

您可以使用第二个参数控制音频文件的播放次数。不指定此参数时，文件只播放一次。您可能希望不断地播放一些声音。一个这样的例子是游戏的背景音乐。这可以通过将第二个参数设置为 -1 来实现。

第三个参数控制给定音频文件的音量。它可以是 0.0 到 1.0 之间的任何值。这是播放背景音乐的代码：

Crafty.audio.play("back_music", -1, 0.5);

您还可以根据某些事件播放音频文件，例如实体之间的碰撞或按键。

walking_hero.bind('KeyDown', function(evt) {
  if (evt.key == Crafty.keys.UP_ARROW) {
    walking_hero.animate("jumping", 1);
    Crafty.audio.play("gun_shot", 1);
  }
});

请记住，您需要先将键盘组件添加到您的英雄，然后它才能检测到KeyDown事件。上面的代码将事件绑定KeyDown到 hero 并检查是否使用了按键evt.key。如果按下向上箭头键，则会为英雄播放一次跳跃动画。***声也会响起。

尝试在以下演示中按向上箭头键，您将看到一切都在起作用。我已经注释掉了播放背景音乐的行，但是您可以在播放演示时取消注释。

演示中的背景音乐由Rosalila创作，***声由Luke.RUSTLTD 制作。

See the Pen Adding Sounds in Crafty by Monty (@Shokeen) on CodePen.

您可以使用许多其他方法来操纵 Crafty 播放的声音。.mute()您可以分别使用和将游戏中正在播放的所有音频文件静音和取消静音.unmute()。您还可以Id使用.pause(Id)and.unpause(Id)方法根据音频文件暂停和恢复音频文件。

在 Crafty 中可以同时播放的声音的最大数量是有限制的。此值的默认限制为 7。同时播放的每个不同声音都是一个通道。但是，您可以使用 Crafty.audio.setChannels(Number n). .isPlaying(string ID)您还可以使用该方法检查给定的音频文件当前是否正在至少一个频道上播放。它将返回一个布尔值，指示音频是否正在播放。

See the Pen Adding Sounds in Crafty - II by Monty (@Shokeen) on CodePen.

狡猾的场景

游戏画面通常不是您在游戏中看到的第一件事。通常，您看到的第一个屏幕是加载屏幕或主菜单屏幕。然后，一旦您设置了不同的选项，如音频或难度级别，您可以单击播放按钮进入实际的游戏屏幕。最后，当游戏结束时，您可以向用户显示游戏结束画面。

这些不同的游戏画面或场景让您的游戏更有条理。Crafty 中的场景可以通过调用来创建 Crafty.defineScene(String sceneName, Function init[, Function uninit])。

第一个参数是场景的名称。第二个参数是初始化函数，在播放场景时进行设置。第三个参数是一个可选函数，在下一个场景播放之前和 2D 当前场景中所有带有组件的实体都被销毁之后执行。

这是定义加载屏幕的代码：

Crafty.defineScene("loading_screen", function() {
    
  Crafty.background("orange");
  
  var loadingText = Crafty.e("2D, canvas, Text, Keyboard")
    .attr({ x: 140, y: 120 })
    .text("Scenes Demo")
    .textfont({ size: '50px', weight: 'bold' })
    .textColor("white");

  loadingText.bind('KeyDown', function(evt) {
    Crafty.enterScene("game_screen");
  });
});

在上面的代码中，我定义了一个"loading_screen"场景。初始化函数将背景颜色设置为橙色并显示一些文本以向用户提供一些关于接下来会发生什么的信息。您可以在此处在实际游戏中包含徽标和一些菜单选项。在画布处于焦点时按任意键会将您带到实际的游戏屏幕。该.enterScene(String sceneName)方法已在此处用于加载"game_screen".

在下面的演示中，您可以按 UP 键 10 次进入最终屏幕。

See the Pen Scenes in Crafty by Monty (@Shokeen) on CodePen.