创建svg_使用网络音频和SVG创建可访问的突破游戏

最新推荐文章于 2024-11-05 11:55:05 发布

dingshi7798

最新推荐文章于 2024-11-05 11:55:05 发布

阅读量158

点赞数

文章标签：游戏网络 python 人工智能 java

原文链接：https://www.sitepoint.com/creating-accessible-breakout-game-using-web-audio-svg/

版权

创建svg

本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

作为WebGL游戏引擎Babylon.js的合著者，听人们在网络会议上讨论可访问性最佳做法时，我总是感到有些不安。使用Babylon.js创建的内容确实是盲人无法访问的。使每个人都可以访问网络非常重要。通过自己的儿子受到我的感动，我比以往任何时候都更有信心。因此，我想以某种方式为网络的可访问性做出贡献。

这就是为什么我决定致力于创建使用WebGL并可以完全访问的游戏的原因，以证明视觉游戏并不是天生就不可访问的。我选择保持简单，因此创建了一个突破克隆，您可以在下面的YouTube视频中看到该克隆：

您可以在兼容Web Audio的浏览器中对其进行测试（列表请参见caniuse.com ），也可以在Github上下载或仔细阅读源代码。

现在，让我与您分享该游戏的背景故事以及所有涉及的实验…

很久以前

这一切始于2014年Kiwi Party会议，同时听取了Laura Kalbag关于顶级可访问设计注意事项的准则的演讲。我正在与一个可爱，有趣且有才华的人StéphaneDeschamps讨论关于我缺乏如何使WebGL变得可访问以及如何避免人们创建大量无法访问的内容的知识。为了激励我， 他向我挑战 。可能没有估计后果：“ 如果您设法创建一个易于访问的突破游戏，那将非常酷！ ”。繁荣。你在这里看到的种子就在我的脑海中浮现。我开始认真考虑这一点，并研究了如何创造这样的体验。

首先，我发现在audiogames.net和game-accessibility.com上已经有可访问的音频游戏。我还研究了为盲人制作游戏的最佳做法。虽然有趣，但我没有找到想要的东西。我不想为盲人创造一个专门的游戏体验， 我想创造一个通用的游戏 ，无论能力如何， 任何人都可以玩 。我坚信网络是出于这个原因而创建的，我的梦想是将这种理念融入我的游戏中。我想创造一种可以供所有类型的用户玩的独特体验，以便他们可以一起分享快乐。我想要出色的视觉效果和声音，而不是“看起来很容易访问，这就是为什么它不能这么好”的解决方案。

为此，我开始做一些实验。我玩了一个由我的朋友David Catuhe编写的小型突破游戏，该游戏使用SVG 。我对它进行了一些重构，以使用SVG视图框来更好地跨屏幕缩放并在TypeScript中重新编写它。我还使用Babylon.js用WebGL画布在背景中替换了动画2D画布，以添加星空体验。

使用SVG视图框的演示游戏

SVG视图框的优点在于，它可以在各种尺寸和分辨率下完美缩放

这成为我实验的基准。

对于音频，我有几个想法。我要使用的主要技巧是空间声音 ，使人们无需看屏幕就能知道他们在板上的位置。 这可以使用 Web Audio 实现。由于我无法使用视力障碍的测试人员，因此我戴着一副好的耳机，闭上了眼睛，从而“作弊”。稍后您会看到，与一个真正的盲人用户一起测试游戏可以帮助我解决更多问题，但是，从一开始，这就是测试游戏的一种好方法。

我开始使用有关HTML5Rocks的出色教程中的示例作为指南来修改Web Audio API。主要演示在“ 3D位置声音 ”部分：

然后，我将鼠标光标发出的声音替换为游戏中球的位置。测试效果不理想。仅凭声音无法准确地知道球在屏幕上的位置太复杂了，而且您无法像看到屏幕一样预测球的方向。不过，我认为当球撞击某些物体（砖块或一堵墙）时发出一些3D声音还是很有趣的。这些信息可能对任何人都有用，所以我保留了这一部分。

由于我也是业余时间的作曲家，因此我的下一个想法是为每个砖块的柱子使用特定的钢琴音符，从而增加左右的感觉。默认情况下，我选择有8列覆盖一个八度。我编写了代码，但是……很有趣，但是并没有帮助游戏。

钢琴音符八度

我知道我需要帮助，所以我向大儿子展示了我的所作所为，然后他提出了最佳解决方案 。他告诉我， 使用播放速度和声音效果来提供有关球的位置的信息是很有意义的。经过几次测试，我得到了以下算法：

如果球与球拍完全垂直对齐 ，请以“正常”速率播放声音。
如果球未与桨对准，请降低打球速度 。球离桨距越远，声音就会越慢。这将立即为盲人提供反馈，告知他们球不再对齐，他们需要移动球拍以避免错过球。
以空间化的方式播放音乐声 ：如果球在球拍的中心，则在X轴上为0；根据球到球拍的距离，在X轴上为–value和+ value。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

此算法的首次测试非常令人鼓舞-我几乎可以闭上眼睛玩游戏。一段时间后，我调整了游戏玩法和算法，以解决我所看到的一些问题。当您看不到球时，您无法预测球的方向，因此，当音乐突然变慢时，很难移动球拍。您只是无法及时调整桨叶的位置。

为了解决这个问题，我增加了一些容忍度 。首先， 在“可访问模式”下 ， 桨板的宽度是其两倍，以弥补看不到它的麻烦。其次，当球到达垂直屏幕的80％时，我会放慢速度，以使用户有更多的时间在球落地之前反弹。最后，当球未对准桨叶宽度的66％时 ，我立即更改了打球速度。球拍的其余部分仍可用于球的碰撞，但是使用此方法可使盲人用户预测球何时会错过球拍。

游戏算法

使用这些游戏参数使我非常满意。我一直在与几位能够闭上眼睛玩游戏的同事一起测试游戏。但是他们都知道突破游戏应该是什么样子，因此，他们的大脑已经或多或少已经预料到了游戏机制。他们受到了限制。

我的终极测试是在2014年巴黎Web 会议期间进行的，这是一次在法国举办的令人敬畏的著名会议 。我的目标是为著名的闪电演讲完成游戏的初稿。我对所做的事情感到有些紧张，然后再次见到斯特凡（Stéphane），表达我的担忧。他告诉我，我应该和Sylvie Duchateau对话，她是一名参与Web访问的盲人女士 ，描述我做了什么并与她进行快速测试。

在一个休息时间里，我与她分享了我的项目和背后的音频游戏想法。令我惊讶的是，她告诉我她不知道什么是突破游戏！考虑一下，这是显而易见的。如果看不到，那么纯粹的视觉游戏对您的吸引力不大。但是，她发现具有空间音频的游戏的想法很有趣，因此我们尝试了一下。

她戴上我的耳机，然后我开始游戏……令我沮丧的是，她根本无法玩游戏。音频信息太多，无法精确地决定要做什么。我现在应该左移还是右移？与她简短讨论后，她告诉我应该删除一些音频详细信息。她还建议我避免对音乐使用网络音频空间化（基于距桨的距离，音乐从中心向左或向右移动），而应仅启用右扬声器或左扬声器，以便在该怎么办。在她在那里的时候，我Swift修改了代码，然后她立即就能打破她的前两块砖头 。我真高兴，你甚至都无法想象。她甚至问我，最好的分数是多少，这意味着我达到了提供无障碍游戏的目标-至少对于视障者而言。

处理所有这些的主要代码在这里：

// To help visually impaired users, the sound is being played at normal rate
// on 66% of the global width. It's to help them anticipating the ball
export const ACCESSIBLE_PAD_TOLERANCE = 0.66;
export const DEFAULT_MUSIC_PLAYRATE = 1.3;

private _updateAccessibilityMusic() {
    var paddleX = this._padX;
    var paddleW = this._padWidth;
    var ballPosition = { x: this._ballX, y: this._ballY };

    var deltaX = paddleW * ((1 - ACCESSIBLE_PAD_TOLERANCE) / 2);

    if (ballPosition.x > deltaX + 10 && ballPosition.x < this._viewPortWidth - (deltaX + 10)) {
        paddleX += paddleW * ((1 - ACCESSIBLE_PAD_TOLERANCE) / 2);
        paddleW = paddleW * ACCESSIBLE_PAD_TOLERANCE;
    }

    // If paddle & ball aligned, sound is played on both ears (X = 0, for center)
    // If the ball is on the left, musicIndicatorX should be negative otherwise positive
    var musicIndicatorX;

    // Position coordinates are in normalized canvas coordinates
    // with -0.5 < x, y = paddleX && ballPosition.x <= paddleX + paddleW) {
            this._music.setPlaybackRate(DEFAULT_MUSIC_PLAYRATE)
            musicIndicatorX = 0;
        }
        else {
            var distanceFromPaddle;
            // Ball is on the left of the paddle
            if (ballPosition.x < paddleX) {
                distanceFromPaddle = paddleX - ballPosition.x;
                musicIndicatorX = -30;
            }
            else {
                distanceFromPaddle = ballPosition.x - paddleX - paddleW;
                musicIndicatorX = 30;
            }
            var distanceFromPaddleNormalized = distanceFromPaddle / this._viewPortWidth;
            // Slowing down the play rate based on the distance from the paddle
            this._music.setPlaybackRate(0.9 * (1 - distanceFromPaddleNormalized));
        }
        // Playing music on left or right speaker based on the ball position from the paddle
        this._music.setPosition(new BABYLON.Vector3(musicIndicatorX, 0.5, 0));
    }
}

注意：我正在使用在Web Audio之上实现的BABYLON.JS声音堆栈。您可以阅读我们的文档或在Github上获取代码。

我添加到游戏中的其他想法

我不记得为优化游戏玩法而尝试的所有技巧都是“通用的”，因此我将总结一下我实现的内容。

语音合成

有些用户可能看不到还剩下多少块砖。同样，根据视觉效果，他们也无法知道自己是赢了还是输了。这就是为什么我认为使用Web Audio语音库 meSpeak.js添加音频线索是一个好主意的原因。但是，在活动中与Anthony Ricaud和其他一群人讨论之后，事实证明这不是最佳解决方案。问题是我将在代码中强制使用特定的声音和速度。但是，辅助技术的用户已经具有首选设置-以定义的速度确定的声音 。因此，最好在游戏过程中使用ARIA实时区域来更新用户。我敢肯定，我还能做的更多。如果您愿意，可以随时增强我的代码，我将不胜感激。

语音合成当前会告诉您需要打破的积木数量，游戏已经开始或结束（通过输赢）或最终得分。作为ARIA实时区域中的值，屏幕阅读器会自动向用户读取此信息。视觉用户不需要机器人声音就能告诉他们发生了什么。

SVG样式

我决定将SVG用于此游戏有几个原因：由于它是基于矢量的 ，因此可以在所有屏幕上完美缩放；可以与CSS结合进行设计；最后但同样重要的是，它可以与ARIA完美配合 。我已经在本文前面提到了扩展部分，而对于在这种情况下ARIA（除Live Regions之外）对SVG有用的地方，我还没有进行足够的研究。

另一方面，CSS对我很有帮助。提醒一下，我的目标是让所有人使用相同的游戏，具有相同的代码库。当您加载游戏时，我会加载默认样式表，并针对视障人士进行优化。原因如下：

如果看不到或只看到部分， 最好从高对比度的视觉效果开始 。我默认加载“ indexvi.css”以使用黄色和黑色具有高对比度的颜色。我还禁用了背景WebGL画布，以减少视觉混乱。如果可以看到但不喜欢这样，则可以取消选中适当的选项，并获得星空和不太生动的视觉效果。
如果您根本看不到，则可以禁用“视觉障碍”选项以启用高质量的图形 。这将加载“ index.css”样式表并启用WebGL背景。由于SVG与CSS完美结合，我们只需要加载此新样式表，其余的将自动发生。当然，看不见的人并不关心图形质量差或好。但这对观看您玩游戏的人来说更好，因为它表明无障碍游戏不一定看起来很基础。
如果可以清楚看到，请取消选中所有选项。 您将拥有出色的视觉效果，并且速度和桨宽度将被调整为更加困难 。您也不会获得有关剩余多少块以及您是赢还是输的音频提示。那将是不必要的-这应该很明显。

总之，这是工作流程：

在游戏首次发布时， 我们预计会出现视觉障碍，并为您提供游戏的高对比度版本：
如果您根本看不到，则可以取消选中“ Visual Impaired ”选项，以为周围的观众提供出色的图像。拨片宽度保持不变，并且您仍然可以获得音频帮助：
如果您没有任何视觉障碍，则可以取消所有选择，以使球拍更窄，球速更快：

想法未实现和结论

我给自己带来的挑战是拥有出色的游戏体验，而不受人的视力影响。我知道我还没有完全履行这一承诺，例如，如果您根本看不到，那么您就不知道屏幕上剩下的碎砖在哪里，而如果您可以看到或有轻微的视觉障碍，您可能会找到剩余的砖块并调整球的方向以使其破裂。

我最初的想法是在仅剩10个砖块时使用语音合成。它可以说：“ 左边有4块砖，中间有4块砖，右边有2块砖 ”。仍然，这不是很精确，并且在没有视觉效果的情况下很难改变球的方向。但是也许你们中的一个会发现一个凉爽优雅的解决方案来解决这个问题（提示，提示）。

不过，我对这一挑战感到非常高兴，并且尝试解决它也很有趣 。通过阅读有关可访问性的文章，我学到了很多东西。我还希望我已经证明， 只需考虑可能的情况，就可以为人们提供可访问性，即使是在意外区域也是如此 。最后但并非最不重要的一点是，我了解到，通过在游戏中启用辅助功能，可以改善每个人的体验。