다양한 기기 해상도에 맞춘 씬 및 배경 이미지 적응 처리

본 문서는 Cocos Creator를 활용한 위챗 게임 개발 과정에서 경험한 핵심 문제와 공식 문서의 보완 사항을 정리한 내용입니다. 실제 프로젝트 구현 시 참고할 수 있도록 실용적인 접근 방식을 제시합니다.

기존 설정에서는 750×1334 해상도(아이폰6 기준)를 기준으로 디자인하고, 에디터 내 모의 환경도 동일하게 설정했습니다. 그러나 빌드 후 위챗 개발 도구에서 실행했을 때 검은 테두리가 나타나는 현상이 발생했습니다. 이는 다양한 기기의 해상도 비율 차이로 인한 적응 미흡 때문입니다.

공식 문서의 다중 해상도 적응 방안을 살펴보면, 주로 Canvas 컴포넌트의 두 옵션을 활용합니다:

적절한 선택 기준은 다음과 같습니다:

왜 디자인 비율이 더 클 때는 높이 기반 적응이 필요한가?

예시: 디자인 해상도 800×480, 기기 해상도 1024×768

계산 과정:

A1 = 1024 / 800 = 1.28
A2 = 768 / 480 = 1.6

- A1 적용 시: 800×1.28 = 1024, 480×1.28 ≈ 614.4 → 높이 부족 → 검은 테두리 발생.
- A2 적용 시: 800×1.6 = 1280, 480×1.6 = 768 → 너비 일부가 잘림, 하지만 테두리 없음.

→ 따라서 디자인 비율이 더 큰 경우, 높이 기반 적응이 적합.
            

다른 적응 모드도 존재하지만, 각각 한계가 있습니다:

실제 기기들은 다양한 비율을 가지므로, 고정된 옵션으로 모든 기기를 커버하기 어렵습니다.

편집기에서 고정된 옵션을 사용하는 대신, 화면 비율에 따라 동적으로 Fit Height 또는 Fit Width를 선택합니다.

코드 예시:

// FullScreenAdapter.js
cc.Class({
    extends: cc.Component,

    onLoad() {
        cc.view.setResizeCallback(() => this.adjustResolution());
        this.adjustResolution();
    },

    adjustResolution() {
        const screenRatio = cc.winSize.width / cc.winSize.height;
        const designRatio = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height;

        if (screenRatio <= 1) {
            // 세로 화면 (높이 ≥ 너비)
            if (screenRatio <= designRatio) {
                this.enableFitWidth();
            } else {
                this.enableFitHeight();
            }
        } else {
            // 가로 화면 (너비 > 높이)
            this.enableFitHeight();
        }
    },

    enableFitWidth() {
        cc.Canvas.instance.fitHeight = false;
        cc.Canvas.instance.fitWidth = true;
    },

    enableFitHeight() {
        cc.Canvas.instance.fitHeight = true;
        cc.Canvas.instance.fitWidth = false;
    }
});
            

이 스크립트를 Canvas 노드에 연결하면, 모든 기기에서 자연스러운 적응이 가능합니다.

주의사항: 브라우저 등 창 크기 조절 가능한 환경에서는 창 변경 시 리로드 권장.

보다 정교한 적응을 원할 경우, SHOW_ALL 모드를 기반으로 최대 부모 노드의 scale 값을 계산해 조절할 수 있습니다. 상세한 구현은 별도 문서 참조.

최근 기기들의 상태바 형태(노치, 물방울, 카메라 홈 등) 다양하므로, 우측 상단 메뉴 버튼 위치를 기반으로 패딩을 조정해야 합니다.

코드 예시:

const menuInfo = wx.getMenuButtonBoundingClientRect();
const systemInfo = wx.getSystemInfoSync();

const paddingTop = this.node.parent.height * (menuInfo.top / systemInfo.screenHeight);

const widget = this.node.getComponent(cc.Widget);
widget.top = paddingTop;
widget.isAbsoluteTop = true;
widget.isAlignTop = true;
widget.updateAlignment();
            

결론적으로, 다중 해상도 적응의 핵심은 Canvas 또는 관련 노드의 scale 속성을 동적으로 조정하는 것입니다. 공식 API의 이해도가 깊을수록 다양한 기기 문제에 유연하게 대응할 수 있습니다.