Création d'un jeu en petits groupes accessible à l'aide de Web Audio et SVG

Cet article, qui fait partie d'une série de développement Web Microsoft, détaille la création d'un jeu de cassure accessible utilisant WebGL, Web audio et SVG, démontrant que les jeux visuellement engageants peuvent être entièrement inclusifs. L'auteur, un co-auteur de babylon.js, a été inspiré pour créer un jeu universellement jouable après une conférence sur l'accessibilité.

Le jeu, jouable dans les navigateurs compatibles audio Web (vérifiez caniuse.com), et disponible sur github, exploite plusieurs fonctionnalités d'accessibilité clés:

• Sound spatial (API audio Web): permet aux joueurs malvoyants de suivre la position de la balle à travers des signaux audio.
• Graphiques SVG évolutifs: assure un affichage optimal sur toutes les tailles et résolutions d'écran.
• Aria Live Regions: Fournit des mises à jour de jeu pour sélectionner les lecteurs sans synthèse de la parole perturbatrice.
• Gameplay adaptatif: comprend une pagaie plus large et des signaux audio modifiés en mode accessible pour améliorer la jouabilité.
• Tests des utilisateurs: Test approfondi avec les utilisateurs visuellement affinés audio et gameplay.
• Code open source: Le code source est disponible sur GitHub pour les contributions communautaires.

Processus de développement et expériences:

Le projet a commencé avec un simple clone de rupture à l'aide de SVG, amélioré plus tard avec un fond StarField WebGL à l'aide de Babylon.js. Les expériences initiales avec un son spatial se sont révélées trop complexes pour un gameplay intuitif. Le fils de l'auteur a suggéré d'utiliser le taux de jeu sonore et les effets pour indiquer la position de la balle par rapport à la pagaie, une solution affinée par des tests itératifs. Une pagaie plus large en mode accessible et ralentissant la balle près du bas de l'écran a amélioré la jouabilité.

Les tests

avec un utilisateur aveugle ont révélé que l'audio spatial initial était trop complexe. Simplifier les indices audio pour utiliser les canaux gauche et droit pour les conseils directionnels s'est avéré beaucoup plus efficace.

La SVG Viewbox assure une mise à l'échelle parfaite entre différentes tailles d'écran et résolutions.

Caractéristiques supplémentaires:

• Aria Live Regions (au lieu de la synthèse de la parole): Communique le statut de jeu (briques restantes, gagner / perte, score) aux technologies d'assistance.
• CSS Styling: fournit des visuels à contraste élevé en mode accessible, facilement commutable pour les utilisateurs avec des capacités visuelles variables. Cela permet un jeu visuellement attrayant même en mode accessible.

L'article conclut en mettant en évidence le succès du projet dans la création d'une expérience de jeu vraiment inclusive et en encourageant le développement et les contributions supplémentaires au code open-source. Il promeut également d'autres ressources Microsoft pour le développement Web et l'accessibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!