DPR이란?

**Device-pixel-ratio**

아티스트 DPR Live가 아닌~

디바이스의 픽셀 밀도를 나타내는 값이다. 브라우저에서 웹 페이지를 렌더링할 때, DPR은 디바이스의 픽셀 밀도에 따라 CSS 픽셀과 실제 픽셀 사이의 관계를 정의하는 데 사용된다. 한마디로 논리적 픽셀 : 물리적 픽셀을 나타내는 값이다.

일반적으로, 높은 DPR 값을 가진 디바이스는 픽셀 밀도가 더 높아서 더 선명한 화면을 제공한다. 예를 들어, Retina 디스플레이를 가진 애플 제품은 DPR 값이 2 또는 3이 되며, CSS 픽셀 하나가 물리적인 픽셀 2개 또는 3개에 해당한다.

웹 개발자는 DPR 값을 사용하여 미디어 쿼리 또는 JavaScript를 통해 디바이스의 픽셀 밀도에 따라 웹 페이지의 레이아웃 또는 이미지 등을 다르게 처리할 수 있다. 예를 들어, 고해상도 디바이스에서는 더 큰 이미지를 제공하여 더 선명하게 보이도록 할 수 있다.

겪은 일

DPR을 고려하지않고, 논리적 픽셀과 물리적 픽셀이 1:1일 것이라 당연하게 여긴 나는 phaser.js를 활용해 활을 포물선 모양으로 쏘는 그래픽을 구현했다. 실제로 가상 기기에서도 적절하게 작동했던 해당 코드는 실제 모바일 기기에서는 다음과 같이 동작했다.

호로록~

이는 내가 계산한 논리적 픽셀 값과 물리적 픽셀값이 맞지 않아서 발생한 일이었다.

해결 방안

따라서 물리적 픽셀과 논리적 픽셀이 1:1 관계라 가정하고 화면을 구성한 후, 절댓값에 대하여 devicePixelRatio값을 곱해주면 된다. 이는 window에 포함된 전역변수로 어디서든 호출할 수 있다. 이를 적용할 경우 DPR이 높은 디바이스에서는 화질이 높게, 적절한 포물선을 그리며 움직인다.

더 나은 방향

조사 과정에서 더 나은 방향을 찾게 되었다.

How to Scale a Game for All Device Sizes in Phaser

“모든 디바이스에서 스케일 맞추기”에 대한 글로 결론은 다음과 같다,

ScaleRatio 전역 변수 생성하기

scaleRatio = window.devicePixelRatio / 3;

모든 에셋에 대하여 scale 설정해주기 (기본적으로 추상 클래스 생성하여 상속시키면 될 것)

myAsset.scale.setTo(scaleRatio, scaleRatio);

누군가 비슷한 상황에 부딪히게 된다면, DPR을 꼭 고려하여 개발하라고 이야기해주고 싶다.