6. 애니메이션(Animation)

1. 낱개로 된 스프라이트를 이어붙여 애니메이션 제작

· 애니메이션 사용 순서

베이스가 될 스프라이트 선언 → 애니메이션 선언 → 애니메이션 프레임 재생속도 설정 → 선언한 애니메이션 프레임에 파일추가 → 애니메이트

// 애니메이션을 재생하기에 앞서 베이스가 될 스프라이트
auto animationSprite = Sprite::create("Animation_Base.png");
this->addChild(animationSprite);

// 애니메이션 재생을 위한 Animation 클래스 : SpriteFrame과 관련 정보가 그룹화되어 있습니다.
auto animation = Animation::create();

// 초당 프레임 재생 속도를 설정합니다.
animation->setDelayPerUnit(0.05f);

// 애니메이션에 사용할 스프라이트 프레임 추가
animation->addSpriteFrameWithFile("Animation/001.png");
animation->addSpriteFrameWithFile("Animation/002.png");
animation->addSpriteFrameWithFile("Animation/003.png");
animation->addSpriteFrameWithFile("Animation/004.png");
animation->addSpriteFrameWithFile("Animation/005.png");

// SpriteFrame 정보가 추가된 animation 객체를 재생하기 위한 Animate.
auto animate = Animate::create(animation);

// RepeatForever로 애니메이션 무한 반복
auto repeatAnimate = RepeatForever::create(animate);

animationSprite->runAction(repeatAnimate);

 

2. 스프라이트 시트(png 파일)을 이용하여 애니메이션 제작

· 스프라이트 시트를 일정한 가로, 세로 크기만큼 잘라서 사용하기에 스프라이트 시트 선정이 중요합니다.

// 스프라이트 시트 선언
auto Animation_Sprite_Sheet = Sprite::create("Animation/Animation_Sheet.png");

// 애니메이션 선언
auto animation = Animation::create();

// 애니메이션 프레임 재생속도 설정
animation->setDelayPerUnit(0.05f);

 

· 나중에 시트를 자를 때 사용할 X값과 Y값을 구해야 합니다.

· 제 스프라이트 시트의 경우에는 가로로 6줄, 세로로 2줄로 이루어진 총 12개의 스프라이트를 포함한 시트이기 때문에 6으로 계산합니다. 

// 일정 간격으로 시트 자르기
//SpriteFrame 추출
for (int i = 0; i < 12; i++)
{
// 스트라이트 시트의 X좌표
int sheet_X = i % 6;

// 스트라이트 시트의 Y좌표
int sheet_Y = i / 6;
}

 

· 시트 전체에서 텍스쳐 정보를 받아와 애니메이션을 액트해야 합니다.

// 스프라이트 시트의 텍스쳐 정보를 받아옵니다.
auto texture = Animation_Sprite_Sheet->getTexture();
// 텍스쳐에서 크기 200x200 만큼의 스프라이트를 잘라서 프레임에 추가합니다.
animation->addSpriteFrameWithTexture(texture, Rect(sheet_X * 200, sheet_Y * 200, 200, 200));

// 애니메이션 재생을 위한 객체 작성
auto Sheet_Base_Sprite = Sprite::create("Animation/Animation_Base2.png", Rect(0, 0, 200, 200));
this->addChild(Sheet_Base_Sprite);

// 반복
auto animate = Animate::create(animation);
auto repeatAnimation = RepeatForever::create(animate);
Sheet_Base_Sprite->runAction(repeatAnimation);

3. plist 확장자 파일을 이용하여 애니메이션 제작

· 외부 프로그램을 사용하여 만든 plist 파일을 불러오기
auto cache = SpriteFrameCache::getInstance();
cache->addSpriteFramesWithFile("Animation/Animation.plist");

 

· 벡터 SpriteFrame을 선언한 후에, pushback을 통해 이미지 프레임들을 삽입해주는 방식입니다.

· 여기서 사용하는 벡터는 cocos2d 전용 벡터입니다. → cocos2d::Vector ←

· 기존의 vector는 #include "vector.h"선언이 필요하고, Vector가 아닌 vector입니다.

Vector<SpriteFrame*> animtion_Frames;

// Vector에 SpriteFrame 삽입
for (int i = 0; i < 13; i++)
{
// StringUtils::format = 지정된 형식으로 string을 만들어줍니다.
// plist에 담긴 애니메이션 프레임의 이름은 1부터 13으로 저장해놨습니다.
std::string frames = StringUtils::format("d.png", i + 1);

// 추출한 문자열을 이용하여 plist 파일 내부의 SpriteFrame 정보를 받아온다.
SpriteFrame* frame = cache->getSpriteFrameByName(frames);

// SpriteFrame을 벡터에 삽입
animation_Frames.pushBack(frame);
}

// plist 기반으로 만든 SpriteFrame 정보를 활용하여 애니메이션을 
auto animationSprite = Sprite::createWithSpriteFrameName("1.png");
this->addChild(animationSprite);

// 애니메이션 설정
auto animation = Animation::createWithSpriteFrames(animation_Frames, 0.05f);
auto animate = Animate::create(animation);
auto animateRepeat = RepeatForever::create(animate);
animationSprite->runAction(animateRepeat);