在当前关于HTML5游戏Service Workies的工作中，这是一个gedd.ski的PWA Mastery游戏，用于学习Java的Service Workers，我们决定使用PixiJS Sound的Audio Sprite功能，而不是加载/播放单个声音效果。
主要目标是通过减少下载请求的数量来优化性能。 包括变体在内，游戏中的声音总数已经增长到250多种。
什么是音频精灵，为什么要使用它们？
如果您在游戏中工作，尤其是在2D游戏中，则可能已经在动画中熟悉了“ sprite”或“ spritesheet”一词。
对于游戏开发新手来说，spritesheet基本上是一张图像，例如，包含一个预定义网格（即128×128像素）中角色的所有姿势。
然后，游戏引擎的动画系统将这些图像作为一种流畅的动画连续渲染。 就像一本翻书。
音频精灵背后的概念是相同的。 在这里，我们有一个音频文件，其中包含一个字符的所有声音资产。
PixiJS Sound可以加载这样的Sprite文件并以提供的开始/停止时间查找/播放单个声音。 以后再说。
从REAPER准备和导出音频精灵和时间戳数据
要设置PixiJS Sound音频精灵，我们需要两件事，音频文件以及它包含的每个声音的开始/结束时间信息。
我们将在专用的REAPER会话中处理音频精灵的创建。 将所有单独的声音导入一条轨道后，我们首先需要确保在声音之间留出很小的空间。
用于REAPER的SWS扩展恰好适合此工作：
Xenakios / SWS：重新定位所选项目…
我们已决定在每个声音之间留出0.3秒的间隔，这在我们的情况下效果很好，尽管可能也更少。 散布项目之后，我们为所有单独的声音创建区域。 区域名称将在以后用作PixiJS Sound的键。 为了使生活更轻松，我已经预先使用正确的命名约定导出声音，并使用以下SWS操作创建片段：
SWS：根据所选项目创建区域（按有效拍摄名称）
接下来，我们必须以某种方式将区域信息导出为PixiJS Sound期望的格式。
这是PixiJS Sound文档中精灵对象定义的代码片段：
const sprites = {
'alien death'：{开始：1，结束：2}，
'boss hit'：{开始：3，结束：3.5}，
'转义'：{开始：4，结束：7.2}，
'喵'：{开始：8，结束：8.5}，
'numkey'：{开头：9，结尾：9.1}，
'ping'：{开始：10，结束：11}，
'死亡'：{开始：12，结束：16.2}，
'shot'：{开始：17，结束：18}，
'squit'：{开始：19，结束：19.3}
};
每个声音都有一个键，我们将使用该键使用区域名称以及该区域的开始/结束时间。
REAPER内置支持将区域信息导出为逗号分隔的CSV文件。 当然，我们可以手动手动转换该文件的数据，但是如果我们大量更新精灵，这将很快变得非常乏味。
值得庆幸的是，Raymond Radet（在REAPER社区中更广为人知的X-Raym）已经完成了许多繁重的工作，并创建了REAPER Lua脚本，该脚本将区域信息导出到CSV文件。 我在此基础上进行了更改，并将其更改为使用PixiJS Sound sprite格式导出JavaScript文件。
你可以在这里下载。
现在，我们可以手动渲染项目，然后在每次更改某项内容时使用脚本导出区域信息以将其与PixiJS Sound一起使用，或者将其进一步进行，并创建一个自定义REAPER操作，该操作将一次完成所有操作步。
这是动作定义：
自定义：export_audio_sprite
SWS：删除所有区域
物品：选择所有物品
Xenakios / SWS：重新定位所选项目...
SWS：根据所选项目创建区域（按有效拍摄名称）
时间选择：将时间选择设置为项目
文件：将项目渲染到磁盘...
脚本：export_regions_to_js.lua
我们甚至可以使用尽可能多的渲染动作之一，该动作仅使用最近的渲染设置渲染项目，但是我想确保每个渲染的渲染设置都是正确的。
但是单资产呢？
这是该系统的一个缺点，因为无法在同一个文件中混合单声道/立体声资产，而且最终也会渲染真正的单声道资产立体声。
但是，PixiJS声音提供了一个单声道过滤器，可以在播放时将所有通道组合成一个单声道。 我们还没有尝试过，但是如果需要的话可能值得尝试。
结论
切换到音频精灵后，我们从最初的约240个下载请求减少到仅8个，这对页面加载是一个很大的改进。 最后，我们还显着提高了CPU负载（实际上大于50％）。
由于它具有灵活的动作系统和脚本功能，因此找到一种省时的工作流程以在REAPER中生成正确的资产，而不是依赖于外部工具，这很简单。
如果您正在从事PWA开发，并且想以有趣的方式了解有关Service Workers的更多信息，请免费使用Service Workies！
