레이아웃 정책 선택하기
반응형 게임은 플레이 영역을 재배치하거나, 일정한 가상 영역을 유지하며 여백을 두거나, 기기를 돌리라는 안내를 표시할 수 있습니다. 게임 방식에 맞춰 선택하세요. 넓은 레인에서 달리는 게임은 가로 공간이 필요할 수 있지만, 세로로 쌓는 게임은 세로 화면에서도 읽기 쉬울 수 있습니다. 장면 전체를 늘려 맞추면 객체 비율이 바뀌고 히트 영역이 어긋날 수 있으므로 피하세요.
뷰포트 방향에 따른 레이아웃에는 CSS 미디어 쿼리를 사용하세요. 코드에서 방향 상태가 필요할 때만 ScreenOrientation 변경을 감지하고, 더 이상 권장되지 않는 window.orientationchange 이벤트에 의존하지 마세요. 방향 잠금은 분명한 요구 사항과 대안을 갖춘 경우에만 사용하고, 테스트되지 않은 레이아웃을 피하는 지름길로 삼지 마세요.
좌표 변환 다시 계산하기
회전한 뒤 현재 게임 컨테이너 크기를 측정하고 표시 변환을 다시 계산하세요. 다음 입력을 받기 전에 포인터 좌표를 월드 좌표로 변환하는 방식을 업데이트합니다. 드래그 중이라면 새 변환에 맞춰 계속 진행하거나 깔끔하게 취소하세요. 이전 포인터 좌표와 새 캔버스 크기를 섞으면 객체가 장면을 가로질러 순간 이동할 수 있습니다.
게임 시작 전, 드래그 중, 메뉴가 열린 상태에서 회전을 시험하세요. 크기 변경으로 새 세션이 시작되지 않고 컨트롤을 계속 사용할 수 있는지 확인합니다. MDN은 ScreenOrientation 변경 이벤트와 잠금 기능을 설명합니다. 필요할 때 사용하고 기기가 잠금을 허용하는지도 확인하세요.
브라우저 게임 화면 방향 변경 관련 질문
브라우저 게임에서 가로 모드를 강제해야 하나요?
분명한 이유와 확실한 대안이 있을 때만 강제하세요. 화면을 잠그는 대신 반응형 레이아웃이나 기기를 돌리라는 안내가 더 적절할 수 있습니다.
화면을 돌리면 항상 크기 변경 이벤트가 발생하나요?
뷰포트 및 화면 방향의 동작은 브라우저와 기기에 따라 다를 수 있습니다. 코드가 의존하는 이벤트를 시험하고 변경 후 실제 게임 컨테이너를 다시 측정하세요.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보