[예제 게임] TitleScene 만들기 (해상도와 UI)

1. 해상도 설정

 

 

상단 탭에서 Project - Project Settings에서 해상도를 변경할 수 있다.

 

Preview Start Scene은 이 게임을 실행할 때 어떤 신으로 시작할지에 대한 설정이다.

 

유니티에서는 Build Settings - Scenes In Build 에서 빌드에 포함할 씬, 씬의 순서를 정해줄 수 있는데 이와 비슷하다.

 

Web Preview Port는 로컬에서 실행했을 때 localhost의 포트넘버다. 건들 필요는 없는 것 같고 launch.json에 적혀있는 url과 동일해야 한다.

 

Design Resolution은 게임 해상도를 의미한다. 아래 Fit Width와 Fit Height는 고정된 높이를 사용할 것인지에 대한 설정이다.

 

디바이스의 해상도가 설정한 960x640과 다를 경우, 폭 또는 높이에 맞춰서 캔버스 사이즈를 조정한다. 자세한 건 아래에서 설명.

 

이 설정들이 프로젝트에 적용되는 건 아니고, 새로 캔버스를 만들면 저 옵션으로 초기화된다.

 

 

 

 

2. 씬(Scene) 생성

 

 

새 프로젝트를 만들고 나서 assets 하위에 각종 폴더들을 만들어준다.

 

resources 폴더는 유니티에서의 그 폴더와 동일한 역할을 한다. 스크립트에서 리소스를 읽을 때 , 그 리소스는 resources 폴더 안에 있어야 한다.

 

그리고 씬 하나를 만들어준다. 게임의 시작 씬이며 다음 씬을 미리 로드하고, 다음 씬으로 넘어가는 버튼과 게임 타이틀 등을 표시한다.

 

 

 

 

3. 백그라운드(Sprite)와 타이틀(Label) 생성

 

 

씬을 만들면 캔버스와 그 아래 메인 카메라가 기본으로 만들어진다. (코코스 크리에이터 버전에 따라 기본 구조가 다를 수 있음)

 

새 캔버스를 만들어도 되지만 이 씬에서는 하나의 캔버스만 존재할 것이기 때문에

 

기본 캔버스 안에 백그라운드가 될 스프라이트와 타이틀 글자를 출력할 라벨을 만들어준다.

 

 

 

부모가 될 캔버스를 선택하고 Create 메뉴를 통해 스프라이트를 선택하면 스프라이트 컴포넌트 붙은 빈 노드가 하나 생성된다.

 

이 스프라이트는 게임의 백그라운드 역할을 할 것이기 때문에 노드 사이즈를 캔버스와 동일하게 맞춰준다.

 

그리고 라벨도 생성해서 게임 이름을 적어준다.

 

 

 

Node Tree 뷰에 새로운 노드를 생성하는 방법은 정리하면 세 가지가 있다.

 

• 부모가 될 노드 - 오른쪽 클릭 -  Create 메뉴에서 추가할 노드 선택
• Assets 뷰에서 Node Tree 뷰로 드래그 (주로 스프라이트나 프리팹)
• 코코스 크리에이터는 유니티와 다르게 Node Library가 있다. 여기서 추가할 노드를 선택할 수 있다.

 

 

 

4. 캔버스 해상도 설정

 

 

코코스 에디터에서 설정한 캔버스의 사이즈는 그대로 디바이스에 적용되지 않는다. 각각의 디바이스의 해상도에 맞게 캔버스의 사이즈가 변경된다.

 

캔버스의 Fit Height, Fit Width는 캔버스의 사이즈가 조정될 때 디바이스의 높이 또는 폭에 맞추는 옵션이다.

 

 

 

빨간색 박스가 실제로 디바이스에서 보이는 영역이다.

 

Fit Height는 세로 축을 고정하고, 그에 맞게 왼쪽 오른쪽 영역은 자르거나 검은색 여백으로 대체한다.

 

 

 

Fit Width는 가로 축을 고정하고, 그에 맞게 위 아래 영역은 자르거나 검은색 여백으로 대체한다.

 

 

이 과정은 원본의 해상도 비율을 동일하게 유지하기 위함이다. 게임에서 설정한 960 : 640 (1.5 : 1) 비율은 모든 디바이스에서 똑같이 적용된다.

 

Fit Height, Fit Width 둘 다 체크할 수 있게 돼있지만 코코스 크리에이터에서는 자체적으로 하나의 옵션만 적용한다.

 

만약 높이에도 맞추고 폭에도 맞춘다면 1.5 : 1 비율은 망가질 수밖에 없다.

 

그 비율을 무시하더라도 캔버스를 디바이스의 화면에 가득 차게 그리고 싶다면 스크립트에서 따로 조작을 해야 한다.

 

 

public static calcResolutionRatio(): number {
        const design: cc.Size = cc.view.getDesignResolutionSize();
        const frame: cc.Size = cc.view.getFrameSize();
        if (frame.height / frame.width < design.height / design.width) {
            return frame.height / design.height;
        } else {
            return frame.width / design.width;
        }
    }

private updateStretching(): void {
        const screenRatio: number = ScreenUtils.calcResolutionRatio();
        switch (this.stretching) {
            case StretchingType.HORIZONTAL: 
                this.node.width = cc.view.getFrameSize().width / screenRatio;
                break;
            case StretchingType.VERTICAL:
                this.node.height = cc.view.getFrameSize().height / screenRatio;
                break;
            case StretchingType.FULL:
                this.node.width = cc.view.getFrameSize().width / screenRatio;
                this.node.height = cc.view.getFrameSize().height / screenRatio;
                break;
            default:
                break;
        }
    }

 

 

 

 

5. 게임 시작 버튼(Button) 생성

 

 

다음 씬으로 씬 전환을 할 수 있는 버튼 UI를 만든다. 먼저 버튼 이미지를 캔버스에 추가한다.

 

그리고 Properties 뷰에서 Add Component - UI Component - Button 선택해서 버튼 컴포넌트를 추가한다.

 

 

 

Interactable은 현재 버튼의 활성화 여부를 의미한다. 스크립트에서 런타임 중에 true, false로 초기화할 수 있다.

 

Enable Auto Gray Effect는 Interactable이 false일 때, 버튼의 스프라이트를 회색으로 처리할 것인지 설정이다.

 

Transition은 버튼을 누르거나(Press), 버튼 위에 마우스를 올릴 때(Hover) 상태를 어떻게 처리할 것인지 설정이다.

 

• NONE
• COLOR : 클릭 상태에 따라서 스프라이트의 컬러를 바꿀 수 있다.
• SPRITE : 클릭 상태에 따라서 스프라이트를 이전에 캐싱해놓은 다른 스프라이트로 교체할 수 있다.
• SCALE : 클릭했을 때 스프라이트의 스케일 애니메이션이 실행된다.

만약 SPRITE와 SCALE 두 옵션을 같이 쓰기 위해서는 스크립트에서 따로 처리를 해줘야 한다. (Tween 등을 이용해서)

 

Click Events는 버튼 클릭 시 발생할 이벤트 목록이다. 특정 스크립트 내의 콜백 함수를 직접 연결시킬 수 있다.

 

 

 

 

6. 물고기 프리팹 생성 & 배치

 

 

프리팹 관련해서는 유니티와 거의 동일하다. Node Tree 뷰의 노드를 Assets 뷰로 드래그하면 프리팹이 된다.

 

 

 

한 가지 다른 점은 유니티에서는 Assets 뷰(Project 뷰)에서 프리팹에 접근해서 바로 수정할 수 있지만

 

코코스 크리에이터는 Node Tree 뷰에 프리팹을 올려놓아야지만 수정할 수 있다.

 

프리팹을 선택하면 Properties 뷰 오른쪽 상단에 유니티의 Selet / Revert / Apply와 동일한 메뉴가 보인다.

 

하지만 수정된 프리팹들을 여러 개 선택하면 저 메뉴가 활성화되지 않는다.

 

프리팹 관련해서는 유니티에 비해 불편한 점이 많이 느껴진다.