노드를 화면 가득 차게 늘리는 법 #Basic

1. 캔버스의 이해

1280x720 사이즈의 캔버스 밑에 1280x720 사이즈의 이미지 노드를 놓았다.

 

 

이 상태에서 씬을 실행하고서 가로:세로 비율이 2.36인 해상도에서 확인하면 위와 같이 나온다.

 

메인 캔버스의 옵션에서 Fit Width와 Fit Height에 체크를 모두 했으면

 

물리적으로는 둘 다 적용할 수 없기 때문에 에디터는 둘 중 하나를 선택해서 적용한다.

 

실제 화면의 가로:세로 비율이 캔버스 가로:세로 비율보다 큰 경우(가로로 긴 경우) Fit Height를,

 

실제 화면의 가로:세로 비율이 캔버스 가로:세로 비율보다 작은 경우(세로로 긴 경우) Fit Width를 적용한다.

 

(여기서 비율은 가로 사이즈를 세로 사이즈로 나눈 가로:세로 비율을 의미)

 

위는 실제 화면 비율인 2.36이 캔버스 비율 1280x720(1.78) 보다 크기 때문에 내부적으로 Fit Height가 적용된다.

 

그다음 실제로 보이는 화면의 높이를 캔버스의 높이 720이라 간주하고서 화면 위에 캔버스를 그리는 구조다.

 

해상도 비율이 2.36이니 화면상에서 가로 폭은 720 * 2.36 = 1699가 되고,

 

그 위에 가로 폭 1280 사이즈의 이미지를 그리게 되니 양 옆에 여백이 남는 것이다.

 

 

이번에는 1280x720(1.78)보다 비율이 작은 1.54 비율의 해상도에서 씬을 실행하면

 

자동적으로 Fit Width가 적용되어 화면의 가로 폭을 캔버스의 넓이 1280으로 적용한다.

 

1.54 비율에 의해 화면의 세로 높이는 1280 / 1.54 = 831이 되고,

 

그 위에 세로 폭 720 사이즈의 이미지를 그리게 되니 위 아래에 여백이 남는 것이다.

 

 

이번에는 캔버스 옵션에서 Fit Height에만 체크하고 같은 1.54 해상도에 실행한 화면이다.

 

화면의 세로 높이를 캔버스의 높이 720으로 적용하면 화면의 가로 폭은 720 * 1.54 = 1109가 되고

 

가로 폭 1280 사이즈의 이미지가 잘려나가는 것을 볼 수 있다.

 

 

 

2. 화면을 가득 차게 이미지를 늘리는 방법

 

위에서 알아본 캔버스의 성질대로라면 캔버스 옵션 Fit Width 또는 Fit Height를 통해서는

 

이미지를 화면 가로 폭이나 화면 세로 높이. 둘 중 한 쪽에만 맞출 수 있고 다른 한쪽은 여백이 생기거나 잘리게 된다.

 

즉, 스크립트로 Fit Width 또는 Fit Height를 적용받지 않은 다른 쪽까지 화면 사이즈에 맞게 늘려주는 것이

 

곧 이미지를 화면 가득차게 그리는 것과 같다.

 

 

@ccclass
export default class ResolutionTest extends cc.Component {
    onLoad() {
        const frame = cc.view.getFrameSize();
        const resolutionRatio = this.ResolutionRatio();

        this.node.width = frame.width / resolutionRatio;
        this.node.height = frame.height / resolutionRatio;
    }

    ResolutionRatio() {
        const frame = cc.view.getFrameSize();
        const design = cc.view.getDesignResolutionSize();
        
        if (frame.width / frame.height < design.width / design.height) return frame.width / design.width;
        return frame.height / design.height;
    }
}

위 스크립트를 이미지 노드에 붙여주면 이미지는 어떤 해상도에서도 화면 가득 차게 늘어나서 보인다.

 

 

스크립트에서 frame은 실제 화면의 사이즈고, design은 메인 캔버스의 사이즈다.

 

ResolutionRatio 함수는 실제 화면의 가로:세로 비율(frame.width / frame.height)과

 

캔버스의 가로:세로 비율(design.width / design.height)을 비교한다.

 

 

(1) 2.36 비율 해상도에서 실행

실제 화면 가로:세로 비율이 캔버스 가로:세로 비율보다 클 경우, 위의 2.36 비율 해상도에서 확인했다시피

 

에디터는 Fit Height를 통해 세로 폭을 고정하고 가로 양 옆에 여백을 만든다.

 

이 여백만큼 이미지 노드를 가로로 늘려주면 된다.

 

비율적으로 화면의 세로 높이가 캔버스의 세로 높이보다 얼마나 작은지(frame.height / design.height) 그 수치를 구한다.

 

화면의 가로 폭(frame.width)을 이 수치로 나눠주면 그만큼 늘어나게 되고

 

그 결과값이 바로 화면 사이즈에 맞게 늘려줄 이미지의 최종 가로 폭(this.node.width)이 된다.

 

이 경우 this.node.height = frame.height / resolutionRatio 코드는 this.node.height = design.height 코드와 같다.

 

 

 

(2) 1.54 비율 해상도에서 실행

실제 화면 가로:세로 비율이 캔버스 가로:세로 비율보다 작을 경우, 위의 1.54 비율 해상도에서 확인했다시피

 

에디터는 Fit Width를 통해 가로 폭을 고정하고 세로 위 아래에 여백을 만든다.

 

이 여백만큼 이미지 노드를 세로로 늘려주면 된다.

 

비율적으로 화면의 가로 폭이 캔버스의 가로 폭보다 얼마나 작은지(frame.width / design.width) 그 수치를 구한다.

 

화면의 세로 높이(frame.height)를 이 수치로 나눠주면 그만큼 늘어나게 되고

 

그 결과값이 바로 화면 사이즈에 맞게 늘려줄 이미지의 최종 세로 높이(this.node.height)가 된다.

 

이 경우 this.node.width = frame.width / resolutionRatio 코드는 this.node.width = design.width 코드와 같다.

 

 

 

3. 세로 해상도

위 스크립트를 적용하지 않고서 세로가 더 긴 비율의 해상도에서 실행하면 위와 같이 나온다.

 

 

이는 위와 같은 에디터의 성질 때문이다.

 

(자세한 내용은 https://docs.cocos.com/creator/manual/en/ui-system/components/engine/multi-resolution.html)

 

하지만 이 경우도 어렵게 생각할 필요가 없다.

 

실제 화면의 가로:세로 비율이 캔버스 가로:세로 비율보다 작은 경우(세로로 긴 경우) Fit Width를 적용한다 라는

 

캔버스의 성질이 유지되기 때문이다. 다만 실제 화면의 가로:세로 비율이 1 이하일 뿐이다.

 

 

위에서 만든 스크립트를 적용하면 세로 비율의 해상도에서도 잘 적용이 된다.