Cocos Creator SpriteFrame 9-slice 이미지 나인 슬라이스 세팅

코코스 크리에이터에서 나인 슬라이스 세팅 하는 방법

나인슬라이스(9-slice)는 이미지의 모서리/테두리만 유지하고 가운데만 늘려

버튼, 패널 같은 UI를 깔끔하게 확대/축소하는 방식으로 이미지 왜곡을 방지하고 리소스를 효율적으로 사용할 수 있습니다.

 

cocos2d-x, Unity, Cocos Creator 에서 모두 사용 가능합니다.

 

Cocos Creator 3.8.7 에서 설정방법

 

1. 스프라이트 프레임 선택

assets 에서 이미지 선택하고 spriteFrame 클릭

 

2. Border Top, Border Bottom, Border Left, Border Right 세팅

spriteFrame 하단에서 값을 넣거나 Sprite Editor 에서 늘려도 형태가 깨지지 않을 가운데 영역만 남기고 상,하,좌,우 값을 입력

 

3. Sprite 타입을 Sliced로 설정

씬의 노드에서 Sprite 선택 Type: Sliced 로 변경

 

코드로 설정하는 방법

 onLoad() {        
    this.sprite.type = Sprite.Type.SLICED;

    if (this.spriteFrame) {
        (this.spriteFrame as any).insetLeft  = 10;
        (this.spriteFrame as any).insetRight = 10;
        (this.spriteFrame as any).insetTop   = 52;
        (this.spriteFrame as any).insetBottom= 16;

        this.sprite.spriteFrame = this.spriteFrame;
    }

    const ui = this.node.getComponent(UITransform) ?? this.node.addComponent(UITransform);

    ui.width = 420;
    ui.height = 160;
}

반응형

Sprite Editor로 다음과 같이 값을 설정하고 이미지를 확인할 수 있습니다.

 

에디터를 선택하지 않고 그냥 밖에서 값을 넣어도 됩니다.

 

이미지를 그냥 늘린경우

 

SLICED Type으로 늘린경우

 

아래와 같이 팝업, 버튼등에서 사용할 수 있습니다.

 

참고 링크

https://docs.cocos.com/creator/3.8/manual/en/ui-system/components/engine/sliced-sprite.html#-

Use a Sliced Sprite to make a UI image | Cocos Creator