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

最新推荐文章于 2024-07-24 11:09:48 发布

dingshi7798

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量129

点赞数

文章标签： javascript 游戏操作系统 ViewUI

本文是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。

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

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

游戏算法

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

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

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

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

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


// 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块砖 ”。仍然，这不是很精确，并且在没有视觉效果的情况下很难改变球的方向。但是也许你们中的一个会找到一个凉爽优雅的解决方案来解决这个问题（提示，提示）。

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

JavaScript的更多动手实践

本文是Microsoft技术传播者开发的Web开发系列文章的一部分，内容涉及实用的JavaScript学习，开源项目以及互操作性最佳实践，包括Microsoft Edge浏览器和新的EdgeHTML呈现引擎。

我们鼓励您使用dev.modern.IE上的免费工具跨浏览器和设备进行测试，包括Microsoft Edge（Windows 10的默认浏览器）：

我们的工程师和宣传人员在Microsoft Edge和Web平台上进行了深入的技术学习：

Microsoft Edge Web Summit 2015 （新浏览器，受支持的新网络平台标准以及来自JavaScript社区的嘉宾演讲者会期待什么）
哇，我可以在Mac和Linux上测试Edge和IE！（来自Rey Bango）
在不中断网络的情况下推进JavaScript （摘自Christian Heilmann）
使Web正常工作的Edge渲染引擎（来自Jacob Rossi）
使用WebGL释放3D渲染（来自David Catuhe，包括vorlon.JS和babylonJS项目）
托管的Web应用程序和Web平台创新（来自Kevin Hill和Kiril Seksenov，包括歧管 .JS项目）

Web平台的更多免费跨平台工具和资源：

From: https://www.sitepoint.com/creating-accessible-breakout-game-using-web-audio-svg/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用网络音频和SVG创建可访问的突破游戏

这篇文章是从微软的Web开发系列的一部分。感谢您支持谁使SitePoint可能的合作伙伴。作为合作作者Babylon.js ，一个WebGL的游戏引擎，我总觉得有点不安听人讨论在网络会议辅助功能的最佳实践。与Babylon.js创建的内容确实是完全不能访问盲人。让网络访问的每个人都非常重要。我比任何时候都有关更相信作为我个人通过我自己的儿子感动。所以，我想有助于以某种方式在网络的...
复制链接

扫一扫