Cocos Creator Canvas 최적화 고안

 
 

Cocos Creator Canvas 개념

 
Cocos Creator 2D에서는 Canvas라는 개념이 있다.
이 개념은 유니티의 Canvas와 매우 비슷한 개념이다.

 
 

1. Canvas

• 게임 내에서 UI 요소(버튼, 텍스트, 이미지 등)를 배치하는 "UI의 루트(root)" 역할
• Unity의 Canvas처럼,
• 그 안에 다양한 UI 오브젝트(예: 버튼, 텍스트 등)를 자식 오브젝트로 넣어서 관리

 

2. MainCamera

• 게임 화면을 보여주는 카메라 역할
• Unity에서 Main Camera와 동일하게, 씬(Scene)을 렌더링하는 뷰(View)를 담당

 

요약

• 구조, 역할 모두 Unity의 Canvas와 매우 유사
• UI 시스템의 뿌리(루트)가 Canvas
• 그 아래에 다양한 UI 오브젝트를 배치

 

추가 TIP

• 대부분의 게임 엔진이 "Canvas" 또는 이와 유사한 UI 계층 구조를 가진다.
• 그래서 Unity에서 UI 개발 경험이 있다면, Cocos(혹은 다른 엔진)에서도 비슷하게 UI를 구성할 수 있다.

 

Cocos Creator Canvas 최적화 

 

유니티 기준 설명

Static Canvas:

• 화면에서 자주 바뀌지 않는 UI(예: 배경, 고정된 텍스트 등)
• Draw Call(렌더링 비용)이 한 번만 발생하고, 이후에는 변화가 없어 효율적

Dynamic Canvas:

• 자주 바뀌는 UI(예: 점수, HP 바, 애니메이션 버튼 등)
• 변화가 있을 때마다 다시 렌더링(Draw Call 발생)

 
최적화 전략:

• 자주 변하지 않는 UI와 자주 변하는 UI를 서로 다른 Canvas로 분리
• 불필요한 전체 Canvas 리렌더링을 막음 => 성능 향상!

 

Cocos Creator에서는?

• Cocos Creator(코코스 크리에이터)도 Canvas나 비슷한 UI 계층이 있다.
• 공식적으로 유니티처럼 "Static Canvas, Dynamic Canvas"라는 명칭은 없지만,
  UI 노드를 여러 개의 Canvas로 분리하여 관리하는 방식은 똑같이 적용할 수 있다.

어떻게 적용하나?

• 화면의 UI를 두 개의 Canvas 또는 Panel(또는 노드 그룹)로 나눈다.
  1. Static Canvas:
     • 절대 변하지 않는 UI 요소 배치
  2. Dynamic Canvas:
     • 자주 변경되는 UI 요소 배치 (애니메이션, 점수 등)
• 각각의 Canvas나 Panel은 별도의 렌더 패스, 배치 최적화가 적용될 수 있음
• Draw Call이 줄고, 불필요한 재렌더링을 방지

 

코드 예시(Cocos Creator):

• 여러 개의 Canvas를 만들거나,
• UI를 "레이어" 또는 "노드 그룹"으로 관리해서 비슷한 최적화 효과를 얻을 수 있다.

// 예시 (동적 UI만 따로 갱신)
this.dynamicLabel.string = "변경된 값";  // 자주 변하는 노드만 업데이트

 
 
 

정리

• Cocos Creator에서도 UI를 여러 Canvas 또는 Panel(레이어)로 나눠서 관리할 수 있다.
• 자주 변하는 UI, 고정된 UI를 분리하면 Draw Call과 리렌더링을 최소화할 수 있다.
• Unity와 기본 원리는 같고, 실제 구현 방법만 약간 다르다.

 
참고 문서
 
https://docs.cocos.com/creator/2.4/manual/en/advanced-topics/ui-auto-batch.html

UI Rendering Batch Processing Guide | Cocos Creator

https://docs.cocos.com/creator/3.8/manual/en/ui-system/components/editor/canvas.html

Canvas Component Reference | Cocos Creator