cocos2d sprite sheet HD(retina) 적용하기

1년전 잠깐 cocos2d를 하다가 손을 놓다보니 까먹은것도 있고, HD sprite sheet 사용도 할겸해서 적어본다. 

sprite sheet tool 들이 여러게 있는 구입할려니 주머니의 가벼워짐 ㅠㅠ 엉엉. 

일반적으로 iOS 개발에서는 Retina와 일반 이미지 구분은 이미지 끝에 @2x 만 붙여주면 OS에서 자동으로 처리를 해준다. 

예) image.png 와 image@2x.png 

하지만 cocos2d에서는 Retina(이하 HD : cocos2d에서는 HD라고 부른다)를 적용하기 위해서는 @2x 대신에 

-hd를 붙여 준다.

예)image.png 와 image-hd.png 

이렇게 하면 cocos2d에서 자동으로 HD 이미지로 처리 한다.

하지만 Zwoptex, TexturePacker, SpriteHelper 등을 이용해서 sprite sheet로 만들면 살짝 만드는 적용하는 방법이 다르다.

우선 일반적인 이미지(이하 SD)는 일반적으로 sprite sheet를 만드는 방법과 같다. 위 툴로 그냥 생성하면 된다.

image1.png, image2.png, image3.png, image4.png, image5.png 를 sprite sheet로 만들면

images.png 와 images.plist 가 생성된다. 

그리고 HD용 sprite sheet는 기존에 파일명이 image1-hd.png, image2-hd.png, image3-hd.png, image4-hd.png, image5-hd.png 이지만 SD파일명과 동일하게 바꾸어 준다. 

image1.png, image2.png, image3.png, image4.png, image5.png로 파일명을 바꾸고 위의 툴로 spriete sheet를 생성한다. 

images.png 와 images.plist로 파일이 만들어 주면 이 2개의 파일에 -hd 를 붙여 준다. 

images-hd.png 와 images-hd.plist 로 바꾸어 준다.

code에서 사용할때는 HD, SD구분없이 images.png 와 images.plist 로 사용하면 cocos2d에서 자동으로 -hd를 처리 해준다. 

그리고 아래와 같이 사용하면 된다. 

CCSpriteFrameCache *cache = [CCSpriteFrameCache sharedSpriteFrameCache];

[cache addSpriteFramesWithFile:@"images.plist"];

        

 CCSpriteBatchNode *spriteSheet = [CCSpriteBatchNode batchNodeWithFile:@"images.png"];

[self addChild:spriteSheet];

CCSprite *image1 = [CCSprite spriteWithSpriteFrameName:@"image1.png"];

CCSprite *image2 = [CCSprite spriteWithSpriteFrameName:@"image2.png"];

CCSprite *image3 = [CCSprite spriteWithSpriteFrameName:@"image3.png"];

CCSprite *image4 = [CCSprite spriteWithSpriteFrameName:@"image4.png"];

CCSprite *image5 = [CCSprite spriteWithSpriteFrameName:@"image5.png"];