웹 오디오 및 SVG를 사용하여 액세스 가능한 브레이크 아웃 게임 만들기

Microsoft Web Development 시리즈의 일부인이 기사는 WebGL, 웹 오디오 및 SVG를 사용하여 액세스 가능한 브레이크 아웃 게임의 생성을 자세히 설명하여 시각적으로 매력적인 게임이 완전히 포괄적 일 수 있음을 보여줍니다. Babylon.js 공동 저자 인 저자는 접근성에 대한 컨퍼런스 토크 후 보편적으로 플레이 할 수있는 게임을 만들도록 영감을 받았습니다.

웹 오디오 호환 브라우저 (Check Caniuse.com)에서 재생 가능하고 GitHub에서 사용할 수있는 게임은 몇 가지 주요 접근성 기능을 활용합니다.

공간 사운드 (웹 오디오 API) : 시각 장애가있는 플레이어가 오디오 신호를 통해 공의 위치를 ​​추적 할 수 있습니다. 확장 가능한 SVG 그래픽 :

모든 화면 크기 및 해상도에서 최적의 디스플레이를 보장합니다.

Aria Live Regions :

는 혼란스러운 음성 합성없이 스크린 리더에게 게임 업데이트를 제공합니다. 적응 형 게임 플레이 :

는 재생 가능성을 향상시키기 위해 액세스 가능한 모드에 더 넓은 패들 및 수정 된 오디오 큐를 포함합니다. 사용자 테스트 :
• 시각 장애가있는 사용자 정제 오디오 및 게임 플레이에 대한 광범위한 테스트. 오픈 소스 코드 : 소스 코드는 커뮤니티 기여를 위해 github에서 사용할 수 있습니다. 개발 프로세스 및 실험 :
이 프로젝트는 SVG를 사용하여 간단한 탈주 클론으로 시작했으며 나중에 Babylon.js를 사용하여 WebGL 스타 필드 배경으로 향상되었습니다. 공간 사운드를 사용한 초기 실험은 직관적 인 게임 플레이에서 너무 복잡한 것으로 판명되었습니다. 저자의 아들은 반복 테스트를 통해 정제 된 솔루션 인 패들에 대한 볼 위치를 나타내는 소리 플레이 속도와 효과를 사용하여 음모에 대한 공 위치를 나타 냈습니다. 접근 가능한 모드의 더 넓은 패들과 화면 바닥 근처에서 볼을 느리게하면 플레이 가능성이 더욱 향상되었습니다.
• 맹인 사용자와 테스트 한 결과 초기 공간 오디오가 지나치게 복잡한 것으로 나타났습니다. 방향 지침을 위해 왼쪽 및 오른쪽 채널을 사용하도록 오디오 신호를 단순화하는 것이 훨씬 더 효과적이었습니다.
SVG 뷰 박스는 다양한 화면 크기와 해상도에 대한 완벽한 스케일링을 보장합니다.

추가 기능 :

Aria Live Region (음성 합성 대신) : 는 게임 상태 (남은 남은, 승리/손실, 점수)를 보조 기술을 통신합니다. CSS 스타일링 : 는 접근 가능한 모드에서 고 대비 비주얼을 제공하며 다양한 시각적 능력을 가진 사용자가 쉽게 전환 할 수 있습니다. 이것은 접근 가능한 모드에서도 시각적으로 매력적인 게임을 허용합니다.

• 이 기사는 진정으로 포괄적 인 게임 경험을 창출하는 데있어 프로젝트의 성공을 강조하고 오픈 소스 코드에 대한 추가 개발 및 기여를 장려함으로써 마무리됩니다. 또한 웹 개발 및 접근성을위한 다른 Microsoft 리소스를 홍보합니다.

위 내용은 웹 오디오 및 SVG를 사용하여 액세스 가능한 브레이크 아웃 게임 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!