WebオーディオとSVGを使用してアクセス可能なブレークアウトゲームを作成する

この記事は、Microsoft Web Developmentシリーズの一部であり、WebGL、Webオーディオ、およびSVGを使用したアクセス可能なブレイクアウトゲームの作成について詳しく説明しており、視覚的に魅力的なゲームが完全に包括的であることを示しています。 著者、Babylon.JSの共著者は、アクセシビリティに関する会議の講演の後、普遍的にプレイ可能なゲームを作成することに触発されました。

ゲーム、Webオーディオ互換性のあるブラウザで再生可能（Check Caniuse.com）、およびGithubで利用可能ないくつかの主要なアクセシビリティ機能を活用してください：

空間サウンド（WebオーディオAPI）：
• 視覚障害のあるプレイヤーは、オーディオキューを使用してボールの位置を追跡できます。 スケーラブルなSVGグラフィックス：
すべての画面サイズと解像度にわたって最適なディスプレイを保証します。
• ariaライブ地域：破壊的な音声統合なしでスクリーンリーダーにゲームの更新を提供します。
>
• 適応型ゲームプレイ：プレイ可能性を高めるために、アクセス可能なモードでより広いパドルと変更されたオーディオキューを含めます。
• ユーザーテスト：視覚障害のあるユーザーによる広範なテスト洗練されたオーディオとゲームプレイ。 オープンソースコード：
ソースコードは、コミュニティの貢献のためにGitHubで利用できます。
• 開発プロセスと実験：
• このプロジェクトは、SVGを使用した単純なブレイクアウトクローンで始まり、後にBabylon.jsを使用してWebGLスターフィールドの背景で強化されました。 空間的な音を使用した最初の実験は、直感的なゲームプレイには複雑すぎることが判明しました。 著者の息子は、サウンドプレイレートとエフェクトを使用して、パドルに対するボールの位置を示すことを提案しました。 アクセス可能なモードでより広いパドルと画面の底近くのボールを遅くすると、プレイアビリティがさらに向上しました。 盲目ユーザーを使用したテストでは、最初の空間オーディオが過度に複雑であることが明らかになりました。 方向ガイダンスのために左右のチャネルを使用するためにオーディオキューを簡素化することは、はるかに効果的であることが証明されました。

SVG Viewboxは、さまざまな画面サイズと解像度にわたって完全なスケーリングを保証します。

その他の機能：

• Aria Live Regions（音声統合の代わりに）：ゲームステータス（レンガの残り、勝ち/損失、スコア）を支援技術に伝えます。
• cssスタイリング：アクセス可能なモードで高コントラストのビジュアルを提供し、視覚能力がさまざまなユーザーに簡単に切り替えることができます。 これにより、アクセス可能なモードでも視覚的に魅力的なゲームが可能になります。

この記事は、真に包括的なゲーム体験を作成し、オープンソースコードのさらなる開発と貢献を促進することにおけるプロジェクトの成功を強調することで締めくくります。 また、Web開発とアクセシビリティのために他のMicrosoftリソースを促進します。

以上がWebオーディオとSVGを使用してアクセス可能なブレークアウトゲームを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。