게임 개발을 하면 UI 레이어나 정적 배경 레이어는 아주 흔하게 사용됩니다. 이런 레이어는 아주 빈번하게 바뀔 필요가 없지만 엔진은 많은 자원을 이런 레이어를 렌더링하는데 사용합니다. 특히 이런 레이어가 복합적인 구조를 가지는 경우에 UI 레이어는 게임 컨텐츠 자체보다 더 많은 드로우 호출을 소비하게 됩니다. 이는 제한적인 자원을 가진 모바일 브라우져에게는 아주 고통스럽습니다.
그러므로 이러한 문제를 해결하기 위해 cc.Layer
에 bake
함수를 추가하였습니다. 레이어의 bake
함수가 호출되면 레이어는 캐시된 캔버스에 자식 노드들을 베이크(bake)하고 캐시된 캔버스를 직접 다음 프레임에 렌더링합니다. 그래서 이런 레이어는 베이크된 이후에는 오직 하나의 드로우 호출만을 소비합니다. 레이어가 더이상 베이크될 필요가 없을 경우에 unbake
함수를 실행하여 이런 기능을 해제할 수 있습니다.
- 복합 UI 레이어. 이런 레이어는 렌더링하기 어려운 패널, 버튼 등 몇몇 UI 컨트롤을 포함하지만 아주 빈번하게 바뀌지는 않습니다.
- 레이어가 정적 백그라운드 스프라이트를 포함하는 경우.
베이크 함수를 사용하는 것은 아주 쉽습니다: cc.Layer
오브젝트를 생성하고 자식 노드를 그 오브젝트에 추가한 후 bake
함수를 호출합니다.
예제 코드:
var bakeLayer = cc.Layer.create();
this.addChild(bakeLayer);
for(var i = 0; i < 9; i++){
var sprite1 = cc.Sprite.create(s_pathGrossini);
if (i % 2 === 0) {
sprite1.setPosition(90 + i * 80, winSize.height / 2 - 50);
} else {
sprite1.setPosition(90 + i * 80, winSize.height / 2 + 50);
}
sprite1.rotation = 360 * Math.random();
bakeLayer.addChild(sprite1);
}
bakeLayer.bake(); // 이 레이어에 베이크 기능 작동
세부 사항은 js-tests/src/BakeLayerTest/BakeLayerTest.js
를 참조하세요.
- 변경이 빈번한 레이어에 베이크 함수를 사용하면 게임에 추가적인 계산을 가져올 수 있습니다.
- 베이크 함수는 오직 캔버스 모드만을 지원하며 WebGL 모드나 JSB 에서 이 함수를 사용한다고 어떠한 문제가 발생하는 것은 아니지만 어떠한 효과도 가지지 않습니다.