모바일 해상도를 PC에서 확인하는 방법

1. 스크립트에서 화면 사이즈를 확인하는 방법

const frameSize: cc.Size = cc.view.getFrameSize();

실제로 게임이 보이는 영역의 사이즈를 반환하는 함수다.

 

어떤 UI를 화면에 가득 차게 그리거나 어떤 예외처리를 하거나 할 때 무조건 사용해야 하는 함수다.

 

 

 

2. 에디터에서 화면 사이즈를 바꾸는 방법

에디터에서 크롬을 통해 게임을 실행하면 위와 같이 기본 해상도 프리셋들이 존재한다.

 

프리셋의 종류도 적고, 이 프리셋이 어떤 비율의 해상도인지 알기 힘들다.

 

 

C:\CocosDashboard_1.0.11\resources\.editors\Creator\2.4.8(version)\resources\static\preview-templates\boot.js

 

코코스 크리에이터 대시보드를 기본 경로에 설치했다면 위의 경로에 있는 boot.js 파일에서 프리셋 목록을 수정할 수 있다.

 

 

var devices = [
        { name: 'Apple iPhone 5',       width: 320,  height: 568,  ratio: 2     },
        { name: 'Apple iPhone 6',       width: 375,  height: 667,  ratio: 2     },
        { name: 'Apple iPhone 6 Plus',  width: 414,  height: 736,  ratio: 3     },
        { name: 'Apple iPhone 7',       width: 375,  height: 667,  ratio: 2     },
        { name: 'Apple iPhone 7 Plus',  width: 414,  height: 736,  ratio: 3     },
        { name: 'Apple iPhone X',       width: 375,  height: 812,  ratio: 3     },

        { name: 'Apple iPad',               width: 1024, height: 768,  ratio: 2 },
        { name: 'Apple iPad Air 2',         width: 768,  height: 1024, ratio: 2 },
        { name: 'Apple iPad Pro 10.5-inch', width: 834,  height: 1112, ratio: 2 },
        { name: 'Apple iPad Pro 12.9-inch', width: 1024, height: 1366, ratio: 2 },

        { name: 'Huawei P9',            width: 540,  height: 960,  ratio: 2     },
        { name: 'Huawei Mate9 Pro',     width: 720,  height: 1280, ratio: 2     },

        { name: 'Google Nexus 5',       width: 360,  height: 640,  ratio: 3     },
        { name: 'Google Nexus 5X',      width: 411,  height: 731,  ratio: 2.625 },
        { name: 'Google Nexus 6',       width: 412,  height: 732,  ratio: 3.5   },
        { name: 'Google Nexus 7',       width: 960,  height: 600,  ratio: 2     },
    ];

파일을 열어보면 가장 상단에 있어서 찾기 어렵지 않다.

 

 

var devices = [
    { name: '[Land] 1.20 (Galaxy Z Fold-unfold)',   width: 968,   height: 806,  ratio: 3 },
    { name: '[Land] 1.54 (iPad Pro 9.7-inch)',      width: 1112,  height: 722,  ratio: 3},
    { name: '[Land] 1.64 (iPad Pro 11-inch)',       width: 1194,  height: 727,  ratio: 3 },
    { name: '[Land] 1.78 (iPad Mini)',              width: 980,   height: 551,  ratio: 3 },
    { name: '[Land] 2.07 (Galaxy S22 Ultra)',       width: 854,   height: 412,  ratio: 3 },
    { name: '[Land] 2.15 (Galaxy S21 Plus)',        width: 827,   height: 384,  ratio: 3 },
    { name: '[Land] 2.22 (iPhone 8+)',              width: 980,   height: 441,  ratio: 3 },
    { name: '[Land] 2.36 (Galaxy Z Flip 4)',        width: 906,   height: 384,  ratio: 3 },
    { name: '[Land] 2.42 (iPhone 11)',              width: 991,   height: 402,  ratio: 3 },
    { name: '[Land] 2.48 (iPhone X)',               width: 980,   height: 395,  ratio: 3 },
    
    { name: '[Port] 1.20 (iPad Air2)',              width: 750,   height: 900,  ratio: 3 },
    { name: '[Port] 1.30 (iPad Pro 11-inch)',       width: 692,   height: 900,  ratio: 3 },
    { name: '[Port] 1.47 (iPhone 7)',               width: 612,   height: 900,  ratio: 3 },
    { name: '[Port] 1.67 (iPhone 13 Mini)',         width: 539,   height: 900,  ratio: 3 },
    { name: '[Port] 1.74 (iPhone 13 Pro Max)',      width: 517,   height: 900,  ratio: 3 },
    { name: '[Port] 2.08 (Galaxy Note 20 Ultra)',   width: 433,   height: 900,  ratio: 3 },
    { name: '[Port] 2.15 (Galaxy S21 Plus)',        width: 419,   height: 900,  ratio: 3 },
    { name: '[Port] 2.36 (Galaxy Z Flip 4)',        width: 381,   height: 900,  ratio: 3 },
    { name: '[Port] 2.47 (Galaxy Z Fold-fold)',     width: 364,   height: 900,  ratio: 3 }
];

이건 내가 쓰고 있는 커스텀 프리셋이다.

 

참고로 수십 종의 핸드폰 모델들의 비율은 직접 계산했기 때문에 검색했을 때 나오는 수치와 다를 수 있다.

 

Land는 Landscape(가로), Port는 Portrait(세로)를 의미한다.

 

그 옆의 숫자는 width/height 또는 height/width를 계산한 해상도 비율이다.

 

그 옆의 모델 이름은 그 해상도를 대표하는 기종을 임의로 적었다.

 

 

iOS 기종은 Safari 브라우저가 차지하는 UI 영역을 제외하고 실제로 게임이 보이는 화면 비율을 측정했고

 

Android 기종은 삼성 인터넷을 통해 게임을 전체 화면으로 실행했을 때의 비율을 측정했다.

 

이러한 특징으로 인해 iPhone에서는 같은 핸드폰이더라도 가로일 때와 세로 일 때의 비율이 다르다.

 

세로일 때 Safari UI가 화면 영역을 더 많이 차지한다. Galaxy는 전체 화면이라 비율이 동일하다.

 

그리고 width, height는 사실 중요한 게 아니고 해상도 비율이 중요하다.

 

프리셋들의 width와 height를 실제 화면 크기로 적으니

 

에디터에서 프리셋을 교체할 때마다 화면 사이즈가 들쭉날쭉 커졌다 작아졌다 하는 게 보기 불편해서

 

[Port] 프리셋들은 모두 height를 900으로 고정하고 비율에 맞게 width를 재조정했다.

 

그러면 프리셋을 바꿀 때마다 화면의 높이는 고정되고 넓이만 바뀌는 걸 확인할 수 있다.

 

 

 

3. 크롬 개발자 도구에서 화면 사이즈를 바꾸는 방법

 

이 방법은 PC 크롬에서 같은 사이트를 모바일에서 켰을 때 보이는 화면을 확인할 수 있는 방법이다.

 

중요한 건 코코스 크리에이터 에디터를 통해 크롬 브라우저로 게임을 디버깅하는 실행 루트로는 이 방법이 동작하지 않는다.

 

크롬 개발자 도구에서 화면 사이즈를 바꿔도 에디터의 프리셋이 화면 사이즈를 잡고 있기 때문이다.

 

 

게임 빌드를 특정 웹사이트에 올리고 웹사이트에서 게임을 실행한다.

 

그 뒤 개발자 도구(F12)를 켜서 표시한 모바일 아이콘을 클릭한다.

 

 

그럼 코코스 에디터와 비슷하게 크롬 개발자 도구가 제공하는 모바일 프리셋들이 존재하는데

 

유동적으로 사이즈를 확인할 수 있는 Responsive를 선택한다.

 

 

그 뒤에 화면 프레임 사이즈를 직접 입력하거나, 드래그 버튼으로 화면 사이즈를 조절할 수 있다.

 

우측 상단에는 화면을 눕히거나 세울 수 있는 버튼도 있다.