[Cocos2d-x 기본기능]Sprite 및 SpriteSheet

Sprite

 

이전에 Sprite객체는 스크린상에서 이동하고 컨트롤되어진다고 얘기했었습니다.

정확하게 말하자면 Sprite객체는 자기의 속성인 각도,위치,스케일,색상등을 바꿔서 컨트롤가능한 2D 이미지라고 할수있습니다. 

   

출처: <http://cocos2d-x.org/docs/cocos2d-x/zh/sprites/> 

   

   

Sprite의 생성 

 

한장의 그림으로 sprite를 생성할수 있습니다.

PNG,JPEG,TIFF,Webp 포맷의 파일은 다 가능합니다.

그리고또 다른방식으로 Sprite를 생성할수 있는데 그것이 스프라이트 시트(sprite sheet) 입니다.

이것은 sprite cache를 이용하여 생성이됩니다.

이번 절 에서는 sprite생성을 소개합니다. 

이미지로 생성 

 

Sprite는 내가 정한 이미지로 생성합니다. 

C++ 

auto mySprite = Sprite::create("mysprite.png");

 

위에선 mysprite.png라는 이미지를 사용하여 생성하였습니다.

sprite는 그한장의 그림을 모두 사용합니다.

이미지의 해상도가 200x200이면 생성된 sprite의 해상도도 200x200입니다. 

Rect 사용하기 

 

위의 예 에서 sprite와 원래 그림의 사이즈가 같다고 했습니다.

하지만 원래 이미지의 일부분만 사용하고 싶으면 생성할때 사각형 영역을 알려주고 지정한 값 내의 이미지만 불러올수도 있습니다. 

C++ 

auto mySprite = Sprite::create("mysprite.png", Rect(0,0,40,40));

사각형의 초기좌표는 도형의 좌상단부터 계산됩니다.좌상단은 (0,0)이고 결과는 이미지 좌측상단부터 40x40 사이즈를 불러옵니다.

 

만약 당신이 사각형을 지정하지 않으면 Cocos2d-x엔진은 자동으로 이 이미지 길이와 높이를 사용합니다.

아래 예를 보면 그냥 파일이름으로 생성하는것과 200x200을 지정해주는것은 똑같은 겁니다.(이미지의 전체 크기가 200,200이기 때문) 

 

C++ 

auto mySprite = Sprite::create("mysprite.png"); 

auto mySprite = Sprite::create("mysprite.png", Rect(0,0,200,200)); 

   

출처: <http://cocos2d-x.org/docs/cocos2d-x/zh/sprites/creating.html> 

Sprite Sheet 사용하기 

 

Sprite Sheet는 전문 툴을 사용하여 여러그림을 하나의 큰그림으로 합쳐놓은 것이고 .plist같은포맷이 인덱스를 가지고 있습니다.

sprite sheet를 사용하면 여러 이미지를 사용하는것보다 메모리 사용을 줄일수 있습니다.

성능향상이 되는것이죠.

이러한 방식은 게임업계에서 게임의 성능을 올리는 표준방법중 하나입니다. 

 

Sprite시트를 사용할때 먼저 모든것들을 SpriteFrameCache에 로드합니다.

SpriteFrameCache는 글로벌 메모리관리 클래스입니다.

이것은 SpriteFrame을 저장해두고 Sprite의 검색속도를 높입니다.

SpriteFrame은 딱 한번 Load하며 그다음부턴 SpriteFrameCache에 보존됩니다. 

 그냥 이 그림만 보면 뭐가다른건지 알기 힘듭니다.

이렇게 하면 쉽게 잘보일거라고 생각합니다.

Sprite sheet는 여러 이미지를 하나로 합쳐서 메모리사용량을 낮추었습니다.

코드에서 어떻게 사용되는지 알아볼게요. 

SpriteSheet 읽어오기 

C++ 

// load the Sprite Sheet

auto spritecache = SpriteFrameCache::getInstance(); 

// the .plist file can be generated with any of the tools mentioned below

spritecache->addSpriteFramesWithFile("sprites.plist"); 

 

완성되었습니다.Sprite Sheet를 SpriteFrameCache에 추가하고 이것을 이용하여 Sprite를 만들수 있게됬습니다. 

 

 

스프라이트 시트 생성 

 

수동으로 스프라이트 시트 리소스를 생성하는것은 단조롭고 귀찮은 작업입니다.다행이도 자동으로 생성해주는 툴들이 존재합니다.

아래와 같은 툴을 사용할수 있습니다.

Texture Packer 

Zwoptex 

ShoeBox 

Sprite Sheet Packer 

 

이 중에서 Texture Packet는 Cocos2d-x를 위한 스프라이트 시트 제작 가이드북이 있습니다. 传送门 

출처: <http://cocos2d-x.org/docs/cocos2d-x/zh/sprites/spritesheets.html>