콘텐츠
웹에서 기사를 읽거나 기본 애플리케이션을 사용할 때 스마트 폰과 태블릿은 가로 방향으로 기울이면 화면에서 콘텐츠를 뒤집기 때문에 머리를 비틀 필요가 없습니다. 크기가 고정 된 직사각형 플레이 필드가있는 웹 게임의 경우이 기능은 실제로 해로울 수 있습니다. 가로 모드에서 플레이어는 상대방의 목표에 도달하기 위해 페이지를 아래로 스크롤해야 할 수 있습니다. 또는 플레이 필드가 크기에 맞게 축소 된 경우 상호 작용할 화면 공간이 거의 없습니다.
HTML5 모바일 게임 Forex Hockey를 만들 때 항상 기기의 상단과 하단에 목표를두기로 결정했습니다. 스크롤 문제를 피하기 위해 가로 모드의 플레이 필드에 90도 회전을 적용 할 수 있었지만 모든 터치 입력 좌표도 조정해야하므로 복잡한 수학이 수반됩니다.
대신 화면 방향 변경을 감지하거나 제어하기 위해 HTML5에서 사용할 수있는 API를 살펴 보았습니다. 이 자습서에서는 시도한 각 방법, 장점 및 단점, 원하는 결과를 얻기 위해 이러한 방법을 결합하는 방법을 살펴 보겠습니다. 이러한 기술 중 일부에 대한 지원은 크게 다르므로 도움이되는 브라우저 지원 위젯을 포함했습니다.
CSS 미디어 쿼리
내가 탐구 한 첫 번째 기술은 CSS 미디어 쿼리였습니다. 특정 브라우저 창이나 화면 크기에 가장 잘 맞도록 페이지의 콘텐츠를 다르게 정렬하는 데 사용되는 반응 형 디자인에서 이러한 정보를 알 수 있습니다.
간단히 말해서 미디어 쿼리를 사용하면 조건부로 스타일을 적용 할 수 있습니다. @media 섹션 내에서 CSS 규칙을 래핑하고 그 뒤에 논리 연산자 및 여부와 함께 결합 된 기능 목록으로 작동합니다. 브라우저는 조건이 충족 될 때만이 섹션에서 선언 된 규칙을 적용합니다. 기능은 너비와 높이에서 종횡비, 색상 깊이 및 해상도에 이르기까지 다양합니다.
세로 또는 가로로 설정할 수있는 방향 기능에 초점을 맞출 것입니다.
@media (방향 : 세로) {.playfield {디스플레이 : 블록; } .overlay {디스플레이 : 없음; }} @media (방향 : 가로) {.playfield {디스플레이 : 없음; } .overlay {디스플레이 : 블록; }}
내 게임에서 플레이 필드 클래스가있는 요소는 장치를 똑바로 들었을 때 (또는 데스크톱 브라우저 창이 너비보다 높음) 옆으로 잡으면 숨겨집니다 (또는 창이 높이보다 더 넓음). ). 플레이어가 기기 방향을 변경하도록 유도하는 오버레이 클래스가있는 요소는 기기를 똑바로 잡고 있으면 숨겨지고 그렇지 않은 경우 표시됩니다.
이러한 CSS 규칙이 제가 원하는 시각적 디자인을 달성하지만 단점이 있습니다. 이 방법을 사용하면 플레이 필드가 숨겨 졌을 때 게임이 계속해서 풀립니다. 방향이 바뀌었을 때 게임을 일시 중지하거나 다시 시작하는 코드도 작성해야한다는 결론을 내 렸습니다.
방향 변경 이벤트
window.orientation 및 orientationchange와 같은 추가 속성 및 이벤트를 발견했습니다. 그러나 나중에 큰 단점이 있다는 것을 깨달았습니다. 이론적으로 window.orientation은 직각 (-90 °, 0 °, 90 ° 또는 180 °)으로 표현 된 현재 장치 위치를 제공합니다. window 객체에 orientationchange에 대한 이벤트 핸들러를 등록하면이 속성 값이 변경 될 때 알림을받을 수 있습니다.
window.addEventListener ( "orientationchange", function () {if (window.orientation == 90 || window.orientation == -90) {game.pause (); // 가로 모드} else {game.resume (); // 세로 모드}});
그래서 캐치는 어디입니까? 0 °는 위쪽, -90 ° 왼쪽, 90 ° 오른쪽 및 180 ° 거꾸로 된 것을 의미한다고 가정 할 수 있습니다. 이는 iPhone 및 iPad에서도 마찬가지입니다. Apple은 기기를 주로 세로 모드로 사용하기를 기대합니다.
그러나 안드로이드 폰이 예상되는 모델에 맞지만 태블릿은 다른 이야기를 보여줍니다. Google은 태블릿이 스마트 폰과 다른 용도 (예 : 이동 중에 영화보기)로 사용된다고 가정하기 때문에 옆으로 들고있을 때 0 °를보고합니다.
따라서 여기에 불편한 사실이 있습니다. window.orientation은 기기 제조업체에서 제공 한 기본 방향에 상대적이므로 기기간에 일관성이 없습니다. 이러한 특정 이유로 매우 유망한 기술처럼 보이는 것은 실제로 신뢰할 수 없습니다. 제 생각에는 피하는 것이 가장 좋습니다.
JavaScript matchMedia
방향 변경 기술의 대체물을 찾고자 JavaScript matchMedia를 사용했습니다. 이를 통해 주어진 시점에서 프로그래밍 방식으로 CSS 미디어 쿼리 조건을 평가할 수 있습니다. 이벤트 처리기를 통해 이러한 조건의 상태가 변경 될 때이를 알리는 데 사용할 수도 있습니다.
제 경우에는 장치가 현재 가로 모드에 있는지 확인하기 위해 "(orientation : landscape)"문자열을 window.matchMedia () 함수에 전달한 다음 다음과 같이 반환 된 MediaQueryList 객체의 일치 속성을 확인합니다.
var query = window.matchMedia ( "(orientation : landscape)"); console.log ( "디바이스 보유"+ (query.matches? "horizontally": "vertically"));
장치 방향이 변경 될 때 알림을 받기 위해 위 코드에서 얻은 MediaQueryList 객체에 addListener ()를 호출하여 이벤트 핸들러를 등록합니다. 콜백 함수는 트리거 될 때이 객체를 인수로받습니다.
var toggleGame = function (query) {if (query.matches) {game.pause (); // 가로 모드} else {game.resume (); // 세로 모드}} query.addListener (toggleGame);
더 이상 알림을받을 필요가 없으면 동일한 콜백 함수를 MediaQueryList 객체의 removeListener ()에 전달합니다.
query.removeListener (toggleGame);
JavaScript matchMedia는 CSS 미디어 쿼리를 훌륭하게 보완합니다. 함께, 그것들은 제가 관심사를 분리하는 데 도움이됩니다 : 레이아웃 대 코드. CSS 미디어 쿼리는 방향이 수정 될 때 필요한 시각적 변경을 처리하고 JavaScript matchMedia는 게임 로직 변경을 처리합니다.
장치 방향 API
또한 Device Orientation API를 평가했습니다. 이것은 공간에서 기기의 위치와 움직임을 측정하는 하드웨어에서 정보를 제공하는 두 가지 이벤트로 구성됩니다. 방향은 자이로 스코프와 디지털 나침반이고 속도는 가속도계입니다.
게임에 속도 측정이 필요하지 않기 때문에 devicemotion 이벤트는 제쳐 두었습니다. 대신 장치 지향 이벤트에만 집중했습니다. 방향 데이터는 X, Y 및 Z의 세 축을 중심으로 일련의 회전으로 표시됩니다. 장치에 각도를 측정 할 하드웨어가없는 경우 null로 설정됩니다. 이러한 회전을 해석하는 프레임은 DeviceOrientationEvent.absolute가 true인지 false인지에 따라 다릅니다. 참이면 지구를 사용합니다. X는 동쪽, Y는 북쪽, Z는 위쪽을 가리 킵니다. 거짓이면 임의의 프레임을 기준으로합니다. 예를 들어 Macbook Pro 노트북은 앞뒤로 기울인 정도와 왼쪽 또는 오른쪽으로 기울인 정도를보고 할 수 있습니다. 나침반 방향 감각이 없습니다.
- 알파는 Z를 중심으로 한 회전 각도이며 시계 방향으로 0도에서 359도까지 다양합니다. 나침반 방향의 반대 방향을 나타냅니다.
- 베타는 X를 중심으로 한 회전 각도이며 범위는 -180도에서 179도 사이입니다. 장치가 앞뒤로 기울어 졌는지보고합니다 (화면이 -90 °에서 90 °, 0 °에서 위쪽, -180 °에서 아래쪽으로 향함).
- 감마는 Y를 중심으로 한 회전 각도이며 범위는 -90도에서 89도 사이입니다. 장치가 왼쪽 또는 오른쪽으로 기울어 졌는지보고합니다.
if (window.DeviceOrientationEvent) {window.addEventListener ( 'deviceorientation', function (e) {if (e.absolute) {console.log ( 'Compass heading :', Math.floor (e.alpha));}}) ; }
각도가 직각 값에 가까워지면 축이 위치를 바꿉니다 (베타가 90 °이면 Y가 위를 향하고 Z가 남쪽을 가리키고 -Y가 됨). 자이로 스코프 및 디지털 나침반 판독 값. 사소한 제스처는 큰 값의 스윙과 함께 앞뒤로 진동하는 각도를 보냅니다.
Device Orientation API는 또한 초당 많은 수의 이벤트를 생성합니다. 이것은 웹 애플리케이션이 장치의 모든 미묘한 움직임에 실시간으로 반응해야 할 때 유용합니다. 그러나 화면이 90도 회전했을 때 애플리케이션이 반응해야하는 경우 (내 게임의 경우와 같이)이 API는 과잉입니다. 그래서 게임에서이 API를 사용하지 않기로 결정했습니다.
요약하자면 지금까지 내 게임은 플레이어가 최적이 아닌 위치에 기기를 들고있을 때 반응하지만, 이상적인 방향을 적극적으로 시행 할 수 있다면 어떨까요?
화면 방향 API
다음으로 시도한 기술은 Screen Orientation API였습니다. 이 API를 사용하면 세 가지 작업을 수행 할 수 있습니다. window.screen에 현재 화면 방향을 쿼리하고, 방향 변경시 알림을 받고, 특정 방향을 적용하거나 방향 제어를 운영 체제에 반환 할 수 있습니다.
window.screen.orientation 속성을 통해 상호 작용합니다 (화면도 전역 변수이며 직접 액세스 할 수 있음). ScreenOrientation 객체에는 type이라는 읽기 전용 속성이 있으며 다음 중 하나를 반환합니다.
- 세로 기본
- 세로 보조 (거꾸로)
- 세로 (똑바로 또는 거꾸로)
- 가로-기본 (기기가 옆으로 있고 기기 하단이 오른쪽에 있음)
- 가로 보조 (기기 하단이 왼쪽에있는 옆)
- 가로 (기기 하단 왼쪽 또는 오른쪽)
- 자연 (기기 제조업체에서 고려하는 기본 방향)
- 모두 (방향 잠금 해제, 세로 및 가로 모두 허용)
screen.orientation의 변경 이벤트에 대한 이벤트 핸들러를 등록하여 향후 방향 변경에 대한 알림을받을 수 있습니다.
screen.orientation.addEventListener ( 'change', function () {console.log ( 'new orientation is', screen.orientation.type);});
지원되는 방향 유형 중 하나로 lock ()을 호출하여 특정 방향으로 화면을 잠글 수 있습니다. lock ()은 성공과 오류 핸들러를 첨부 할 수있는 promise 객체를 반환합니다. 통화가 성공하려면 전체 화면 모드에 있어야합니다.
var onGameStart = function () {document.documentElement.requestFullscreen (); screen.orientation.lock ( 'portrait'). then (null, function (error) {document.exitFullscreen ()}); }
마찬가지로 화면의 잠금을 해제하여 운영 체제가 적절하다고 판단하는대로 회전하도록 할 수 있습니다.
document.exitFullscreen (); screen.orientation.unlock ();
Screen Orientation API는 상당히 새롭고 여전히 진화하고 있습니다. 그러나 기기 화면을 완전히 프로그래밍 방식으로 제어하려는 경우 6 가지 기술 중 가장 포괄적 인 옵션입니다. 브라우저에서 지원하는 경우 화면 방향 API를 사용하여 게임이 세로 모드로 재생되도록했습니다.
웹 애플리케이션 매니페스트
마지막으로 고려한 옵션은 웹 애플리케이션 매니페스트였습니다. 네트워크를 사용할 수없는 경우 자산 캐싱에 중점을 두는 오프라인 웹 응용 프로그램 매니페스트와 혼동해서는 안됩니다.
웹 응용 프로그램 매니페스트는 장치의 홈 화면에 추가 된 웹 페이지를 향상시키기위한 것입니다. 페이지가 일반 브라우저에서 열리 든 독립 실행 형 애플리케이션으로 열리 든 홈 화면에 표시되는 아이콘과 이름, 화면이 제한되는 방향을 설명합니다.
먼저 매니페스트 관계가있는 JSON 파일을 가리키는 link> 태그를 추가합니다.
링크 rel = "manifest"href = "manifest.json"/>
둘째, 다음 항목을 포함하는 JSON 파일을 만듭니다.
{ "display": "standalone", "orientation": "portrait"}
display는 fullscreen, standalone, minimal-ui 또는 browser 값 중 하나 일 수 있습니다. 방향은 화면 방향 API 섹션에 설명 된 방향 유형 중 하나 일 수 있습니다.
마지막으로 브라우저에서 페이지를 열고 홈 화면에 추가합니다 (Android 용 Chrome의 경우 페이지 메뉴에서 '홈 화면에 추가').
display : fullscreen은 Fullscreen API와 독립적으로 작동합니다. JavaScript matchMedia로 CSS 미디어 쿼리 (디스플레이 모드 : 전체 화면)를 평가하여 웹 애플리케이션 매니페스트의 결과로 전체 화면이 트리거되었는지 감지 할 수 있습니다.
if (window.matchMedia ( "(display-mode : fullscreen)"). matches) {console.log ( "페이지가 웹 애플리케이션 매니페스트를 통해 전체 화면 모드로 들어갔습니다"); } else if (document.fullscreenEnabled && document.fullscreenElement) {console.log ( "페이지가 전체 화면 API를 통해 전체 화면 모드로 들어갔습니다")}
기기의 홈 화면에서 시작하는 웹 애플리케이션 매니페스트는 웹 페이지의 방향을 제어하려는 경우 (검색 할 내용이 많지는 않음) 매우 간단한 옵션입니다. 물론 기기의 홈 화면에 웹 페이지를 표시하는 것은 사용자 경험 측면에서 비우호적이지만 브라우저 제조업체는이를 개선 할 수밖에 없습니다 (Google은 정기적으로 방문하는 페이지를 홈 화면에 추가하는 옵션을 제공하기 위해 노력하고 있습니다).
이 기술을 사용하면 내 작업이 거의없이 홈 화면에 저장 한 플레이어가 내 게임을 세로 모드로 재생할 수 있습니다.
결론
이제 모바일 웹 애플리케이션에서 화면 방향을 감지하고 제어하는 데 사용되는 6 가지 기술에 익숙해야하며, 각각이 가장 적합한 방법에 대한 몇 가지 아이디어가 있기를 바랍니다. 이들을 함께 결합하면 매우 이질적인 브라우저 지원에 대한 더 큰 범위를 제공합니다. 내 게임 핸들의 코드는 저하를 부드럽게 지원합니다.
- 최상의 시나리오는 화면 방향 API를 사용할 수있는 경우입니다. 세로 모드에서 게임을 잠그고 CSS 및 JavaScript 미디어 쿼리가 트리거되지 않습니다.
- 두 번째로 좋은 경우는 게임이 홈 화면에서 실행되는 경우입니다. Web Manifest API는 동일한 결과를 보장합니다.
- 그렇지 않으면 CSS 미디어 쿼리는 플레이어가 방향을 수정하도록 권장하고 JavaScript matchMedia는 게임을 일시 중지 할 때 누락되는 것을 방지합니다.
이러한 기술을 보여주는 내 CodePen을 확인하고 어떻게 작동하는지 알려주십시오. 대안이 궁금합니다. 알고 계시면 Twitter에서 한마디 해주세요!
말: 제롬 르 콩트
Jérôme Lecomte는 OANDA Canada의 프론트 엔드 개발자입니다. 이 기사는 원래 인터넷 잡지 270 호에 게재되었습니다.
마음에 드 셨나요? 읽어보세요!
- 앱 빌드 방법 :이 훌륭한 튜토리얼을 시도해보세요
- 지금 바로 사용할 수있는 무료 그래픽 디자인 소프트웨어!
- 최고의 무료 글꼴 다운로드
