Cocos2d x Animation

Cocos2d-x Animation

Animation 기본

애니메이션은 어린 시절 즐겨보던 만화와 같은 원리입니다. 그림을 빠른 속도로 조금씩 바꿔가며 움직이는 것처럼 보여주는 것이죠.

애니메이션에서 기본적인 개념은 Sprite, Animate, Animation, SpriteFrame이 있습니다. 이 네 가지를 잘 구분하는 것이 중요한데요. Sprite는 이때까지 잘 써와서 아시겠지만 Image Texture정보를 담고 있는 객체입니다. Animate는 Animation을 인자로 받아서 수행하는 역할을 합니다. Animation은 이미지 전환에 필요한 SpriteFrame들을 묶어둔 객체입니다. 마지막으로 SpriteFrame은 애니메이션의 매 프레임에서 어떤 이미지(틀)를 보여줄 것인지에 대한 정보를 저장하는 객체입니다.

그래서 엄연히 Sprite와 SpriteFrame는 다른 것입니다. Sprite는 addChild를 할 경우 화면 나타나지만 SpriteFrame은 Animation에만 쓰이기 때문에 그 자체만으로는 Layer에서 이미지를 나타낼 수 없습니다.

이 기본 개념을 그림으로 보면 아래와 같습니다.

　

Example 1

기본적인 애니메이션 구현 코드입니다. 크기가 50*80인 걷기 이미지에 대한 애니메이션입니다.

//기본 Sprite
Sprite* smithSprite = Sprite::create("smith.png");

//Animation Frame이 될 SpriteFrame에 파일을 담고, 크기를 지정합니다.
SpriteFrame* smithSpriteFrame1 = SpriteFrame::create("smithWalk01.png", Rect(0, 0, 50, 80));
SpriteFrame* smithSpriteFrame2 = SpriteFrame::create("smithWalk02.png", Rect(0, 0, 50, 80));
SpriteFrame* smithSpriteFrame3 = SpriteFrame::create("smithWalk03.png", Rect(0, 0, 50, 80));
SpriteFrame* smithSpriteFrame4 = SpriteFrame::create("smithWalk04.png", Rect(0, 0, 50, 80));
SpriteFrame* smithSpriteFrame5 = SpriteFrame::create("smithWalk05.png", Rect(0, 0, 50, 80));

//Animation을 생성하고 Frame사이 Delay를 설정(0.2초)하고 SpriteFrame들을 붙입니다.
Animation* animation = Animation::create();
animation->setDelayPerUnit(0.2f);
animation->addSpriteFrame(smithSpriteFrame1);
animation->addSpriteFrame(smithSpriteFrame2);
animation->addSpriteFrame(smithSpriteFrame3);
animation->addSpriteFrame(smithSpriteFrame4);
animation->addSpriteFrame(smithSpriteFrame5);

smithSprite->runAction(Animate::create(animation));
this->addChild(smithSprite);

　

Animation addSpriteFrameWithFileName

Example 1에서는 SpriteFrame을 하나하나 다 지정해줬지만 크기를 지정할 필요가 없다면 바로 파일을 애니메이션에 추가할 수 있습니다.

Example 2

animation->addSpriteFrameWithFileName("smithWalk01.png");
animation->addSpriteFrameWithFileName("smithWalk02.png");
　　　　　　　　　　　...

　

Animation 한장의 이미지로 애니메이션 만들기

큰 한장의 png 파일이 있고, 각각 SpriteFrame들의 좌표와 크기를 안다면 한장의 png 파일만을 사용해서 애니메이션을 만들 수 있습니다.

Example 3

Sprite* smithSprite = Sprite::create("smith.png");

//애니메이션 png들이 합쳐진 Texture를 생성합니다.
Texture2D* smithTexture = CCTextureCache::sharedTextureCache()->addImage("smithTexture.png");

//Cocos2d-x 2.x 버전에서는 CCTextureCache::sharedTextureCache()를 사용했지만 3.x부터는 Director::getInstance()->getTextureCache()를 사용하게 되었습니다. 참고하세요 :)

Texture2D* smithTexture = Director::getInstance()->getTextureCache()->addImage("smithTexture.png");

//Animation을 생성하고 Frame사이 Delay를 설정(0.2초)하고 SpriteFrame들을 붙입니다.
Animation* animation = Animation::create();
animation->setDelayPerUnit(0.2f);
animation->addSpriteFrameWithTexture(texture, Rect(0, 0, 50, 80));
animation->addSpriteFrameWithTexture(texture, Rect(50, 0, 50, 80));
animation->addSpriteFrameWithTexture(texture, Rect(100, 0, 50, 80));
animation->addSpriteFrameWithTexture(texture, Rect(150, 0, 50, 80));
animation->addSpriteFrameWithTexture(texture, Rect(200, 0, 50, 80));

smithSprite->runAction(Animate::create(animation));
this->addChild(smithSprite);

　

Animation Plist 사용하기

앞선 예시들에서 느꼈지만 애니메이션의 좌표들을 한장한장 다 설정하는 일은 상당히 번거로운 일입니다. 그래서 이미지 파일과 별개로 좌표 등의 정보를 따로 저장하는 plist 파일을 만들어서 애니메이션화 시킬 수 있는 방법이 있습니다. plist 정보는 XML 형태로 저장됩니다. 이미지를 합쳐서 plist 파일로 만들어주는 툴이 있는데 가장 대표적인 것은 TexturePacker라는 프로그램이 있습니다.

Example 4

아래는 plist를 사용한 방법입니다.

Sprite* smithSprite = Sprite::create("smith.png");

//plist 정보를 SpriteFrameCache에 저장합니다.
SpriteFrameCache::getInstance()->addSpriteFramesWithFile("smithWalk.plist");

//spriteFrame에 대한 정보가 모두 있기 때문에 cache에서 불러와 애니메이션에 추가만 해주시면 됩니다.
Animation* animation = Animation::create();
animation->setDelayPerUnit(0.2f);
auto smithSpriteFrame1 = SpriteFrameCache::getInstance()->getSpriteFrameByName("smithWalk01.png");
auto smithSpriteFrame2 = SpriteFrameCache::getInstance()->getSpriteFrameByName("smithWalk02.png");
auto smithSpriteFrame3 = SpriteFrameCache::getInstance()->getSpriteFrameByName("smithWalk03.png");
auto smithSpriteFrame4 = SpriteFrameCache::getInstance()->getSpriteFrameByName("smithWalk04.png");

animation->addSpriteFrame(smithSpriteFrame1);
animation->addSpriteFrame(smithSpriteFrame2);
animation->addSpriteFrame(smithSpriteFrame3);
animation->addSpriteFrame(smithSpriteFrame4);

smithSprite->runAction(Animate::create(animation));
this->addChild(smithSprite);

　

Plus

이해를 돕기 위해서 일일이 파일이름을 다 썼지만 for문을 이용해서 여러장을 SpriteFrame을 등록할 수 있습니다. 이상 Cocos2d-x Animation에 관한 내용이었습니다. :)