CocosCreator

Cocos Creator 2D UI 겉핥기

뽀또치즈맛 2025. 5. 31. 21:29

 

 

1. Preview In Browser

웹 브라우저에서 게임이나 프로젝트를 실행해서 미리보기를 할 수 있다.

 

특징 :

  • 실제 웹 환경에서 동작하는 모습을 볼 수 있다.
  • HTML5 기반으로 배포할 때 실제 유저가 보는 환경과 동일하다.
  • 빠르게 테스트할 때 유용하다.

2. Preview In Editor

에디터 (지금 사용 중인 개발 툴) 내부에서 미리보기를 실행한다.

 

특징 :

  • 개발 중 바로 에디터 안에서 결과를 확인할 수 있다.
  • 디버그 정보, 에디터에서만 볼 수 있는 추가 정보 등을 확인할 수 있다.
  • 개발에 편리함을 제공한다.

3. Preview In Simulator

별도의 시뮬레이터 프로그램 (또는 창)에서 게임을 실행해서 미리보기 한다.

 

특징 :

  • 실제 모바일 기기 (스마트폰, 테블릿 등)에서 동작하는 것과 비슷하게 시뮬레이션 해서 볼 수 있다.
  • 빠른 테시트의 경우 시뮬레이터가 적합하다.

 

 

 

Preview Browser를 누르면 Web에서 보이는 화면을 확인할 수 있다.

 

 

 

 

 

1. Native

PC, 모바일(안드로이드/iOS) 등 실제 기기에서 실행되는 네이티브 앱 형태로 빌드할 때 선택한다.

 

특징:

  • 앱스토어/구글플레이 등에서 설치해서 실행하는 앱(어플리케이션)을 만든다.
  • 최고의 성능을 낼 수 있고, 각 기기의 고유 기능(카메라, 센서 등)도 활용할 수 있다.
  • Windows, Mac, Android, iOS 등 다양한 OS를 지원

2. Web

웹 브라우저에서 바로 실행되는 게임이나 앱을 빌드할 때 선택한다.

 

특징:

  • 사용자는 설치 없이 크롬, 엣지 등 브라우저로 바로 접속해서 실행할 수 있습니다.
  • HTML5, JavaScript 기반으로 동작합니다.
  • 배포와 접근이 매우 쉽지만, 네이티브보다 성능이 다소 떨어질 수 있습니다.

3. Mini Game

특정 플랫폼(예: WeChat, Facebook Instant Games, QQ 등)에서 제공하는 미니게임 플랫폼 전용 빌드를 할 때 사용

 

특징:

  • 대표적으로 중국의 위챗 미니게임, QQ 미니게임, Facebook 인스턴트 게임 등에 맞춘 전용 빌드 옵션
  • 해당 플랫폼의 정책, API, 환경에 맞게 최적화되어 빌드
  • 앱 설치 없이, 플랫폼 내에서 바로 실행되는 작은 게임을 만들 때 사용
  • 광고, 결제 등 플랫폼 특화 기능도 지원할 수 있다.

정리

  1. Native: 설치형 앱(PC, 모바일 등), 성능 최적, 기기 기능 사용 가능
  2. Web: 브라우저 기반, 설치 없이 바로 실행, 접근성 좋음
  3. Mini Game: 위챗 등 플랫폼 전용 미니게임, 해당 플랫폼에 특화

 

 

 

 

1. Design Width / Design Height

게임(또는 앱)을 디자인할 때 기준이 되는 가상 해상도(픽셀 단위)를 설정

ex) 1280 x 720으로 설정하면, 에디터에서 화면을 이 크기로 본다는 의미이다.

 

특징 :

  • 실제 실행 기기의 해상도가 달라도, 이 크기를 기준으로 UI, 오브젝트 위치, 크기 등을 배치함
  • 화면 비율 (16:9)을 기준으로 디자인하는 경우가 많다.

 

 

 

2. Fit Width / Fit Height

실제 기기 화면 크기와 디자인 해상도가 다를 때, 화면을 맞추는 방식 (스케일링)을 설정

 

Fit Width 체크

  • 가로 길이를 디자인 해상도에 맞춰 전체에 딱 맞춘다.
  • 세로는 기기 해상도에 따라 남거나 잘릴 수 있다.

 

Fit Height 체크

  • 세로 길이를 디자인 해상도에 맞춰서 화면 전체에 딱 맞춘다
  • 가로 기기 해상도는 남거나 짤릴 수 있다.

 

둘 다 체크

  • 가로와 세로를 동시에 맞춰서 화면을 최대한 꽉 채우지만,
  • 화면 비율이 달라지면 빈 공간이 생길 수도 있다.

 

 

4. Download MaxConcurrent

동시에 다운로드할 수 있는 최대 파일(리소스) 개수를 설정

ex) 15로 하면 15개의 리소스를 한 번에 다운로드 가능

 

 

특징 :

  • 값을 높이면 다운로드는 빨라질 수 있지만, 네트워크나 기기에 따라 무리가 갈 수 있다.
  • 값을 낮추면 안정적이지만, 다운로드 속도가 느려질 수 있다.

 

 

요약

  • Design Width/Height: 게임의 기준 해상도(설계 크기)
  • Fit Width/Height: 가로/세로 기준으로 화면을 맞출지 결정
  • 3D High Quality Mode: 3D 그래픽 품질(성능과 트레이드오프)
  • Download MaxConcurrent: 동시에 몇 개의 리소스를 다운받을지
  • Editor Default Scene: 에디터에서 기본으로 여는 씬