Animator, Animation2D

예제 :)

https://github.com/eazuooz/YamYamEngine/commit/4eeca35f9022cf076e299466032e9e4db0679707

Animation 2D · eazuooz/YamYamEngine@4eeca35

2D 게임에서 애니메이션을 재생시키는 방법은 영화에서 쓰이는 방식과 크게 다르지 않다.

이러한 애니메이션 기법을 Sprite 애니메이션이라고 한다.

 

이러한 그림을 한장장한을 움직이는 순서대로 빠른시간동안 재생시켜주면 눈의 착시로 움직이는 것 처럼 보이게 된다.

 

우선은 Animation이 재생되게 하는 Animator 컴포넌트와 

Animator 컴포넌트는 Animation 을 가지고 있다.

#pragma once
#include "yaComponent.h"
#include "yaTexture.h"
#include "yaAnimation.h"
namespace ya
{
	using namespace ya::graphics;
	class Animator : public Component
	{
	public:
		struct Event
		{
			void operator=(std::function<void()> func)
			{
				mEvent = std::move(func);
			}
			void operator()()
			{
				if (mEvent)
					mEvent();
			}
			std::function<void()> mEvent;
		};
		struct Events
		{
			Event mStartEvent;
			Event mCompleteEvent;
			Event mEndEvent;
		};
		Animator();
		~Animator();
		virtual void Initialize();
		virtual void Update();
		virtual void FixedUpdate();
		virtual void Render();

		bool CreateAnimation(const std::wstring& name, std::shared_ptr<Texture> atlas, Vector2 leftTop, Vector2 size, Vector2 offset, float columnLegth, UINT spriteLength, float duration);
		Animation* Find(const std::wstring& name);
		void Play(const std::wstring& name, bool loop);
		void Binds();

	private:
		std::map<std::wstring, Animation*> mAnimations;
		std::map<std::wstring, Events*> mEvents;
		Animation* mActiveAnimation;
		bool mbLoop;
	};
}

Animator 컴포넌트는 여러개의 Animation 들 (예 : 달리기, 걷기, 대기, 죽는 모션 등) 을 가지고 있게 된다.

그리고 현재 실행되는 애니메이션은 PlayAnimation이다.

Loop가 활성화 되어있다면 해당 애니메이션은 종료되지 않고 

다시 Reset() 시켜서 처음부터 다시 재생되게 된다.

 

	void Animator::FixedUpdate()
	{
		if (mActiveAnimation == nullptr)
			return;

		if (mActiveAnimation->IsComplete() && mbLoop)
		{
			mActiveAnimation->Reset();
		}

		mActiveAnimation->FixedUpdate();
	}

 

애니메이션 클래스는 다음과 같이 구성되어 있다.

#pragma once
#include "yaEntity.h"
#include "yaTexture.h"
namespace ya
{
	using namespace ya::math;
	using namespace ya::graphics;
	class Animator;
	class Animation : public Entity
	{
	public:
		struct Sprite
		{
			Vector2 leftTop;	// 좌측 상단 픽셀좌표
			Vector2 size;		// 좌측 상단으로 부터 잘라낼 가로 세로 픽셀 길이
			Vector2 offset;
			Vector2 atlasSize;
			float duration;			// 해당 프레임 유지시간

			Sprite()
				: leftTop(0.0f, 0.0f)
				, size(0.0f, 0.0f)
				, offset(0.0f, 0.0f)
				, atlasSize(0.0f, 0.0f)
				, duration(0.0f)
			{

			}
		};
		Animation();
		~Animation();
		void Update();
		void FixedUpdate();
		void Render();


		void Create(const std::wstring& name, std::shared_ptr<Texture> atlas, Vector2 leftTop, Vector2 size, Vector2 offset
			, float columnLegth, UINT spriteLength, float duration);
		void Binds();

		void Reset();
		bool IsComplete() { return mbComplete; }

	private:
		std::shared_ptr<Texture> mAtlas;
		Animator* mAnimator;
		std::vector<Sprite> mSpriteSheet;
		int mIndex;
		float mTime;
		bool mbComplete;
	};
}

Animation 클래스는 Sprite Image를 가지고 있다.

여러개의 Sprite 가 모여서 하나의 Sprite sheet가 되고 그것이 하나의 애니메이션 정보라고 보면 된다.

 

애니메이션을 생성할때 해당 이미지에서 시작점을 기준으로 한칸씩 이동하면서 그림별로 Sprite정보를 Spritesheet에다가 저장한다.

 

애니메이션을 만들때는 해당 텍스처의 UV 좌표를 통해 애니메이션 시작위치와 끝위치를 계산해서 저장해둔다.

void Animation::Create(const std::wstring& name, std::shared_ptr<Texture> atlas, Vector2 leftTop, Vector2 size, Vector2 offset, float spriteLength, UINT column, float duration)
	{
		// Animation Name
		SetName(name);
	@@ -47,13 +48,15 @@ namespace ya
		float height = (float)atlas->GetHeight();

		// Frame Info
		for (int i = 0; i < column; ++i)
		{
			Sprite frm = {};
			frm.leftTop = Vector2( (leftTop.x + spriteLength * (float)i) / width, leftTop.y / height );
			frm.size = Vector2(size.x / width, size.y / height) ;
			frm.offset = offset;
			frm.duration = duration;
			//frm.atlasSize = Vector2(width, height);
			frm.atlasSize = Vector2(200.0f / width, 200.0f / height);

			mSpriteSheet.push_back(frm);
		}
	@@ -63,6 +66,18 @@ namespace ya
	{
		mAtlas->BindShader(eShaderStage::PS, 12);

		ConstantBuffer* cb = renderer::constantBuffers[(UINT)eCBType::Animator];

		renderer::AnimatorCB info = {};
		info.type = (UINT)eAnimatorType::SecondDimension;
		info.leftTop = mSpriteSheet[mIndex].leftTop;
		info.offset = mSpriteSheet[mIndex].offset;
		info.size = mSpriteSheet[mIndex].size;
		info.atlasSize = mSpriteSheet[mIndex].atlasSize;


		cb->Bind(&info);
		cb->SetPipline(eShaderStage::PS);
		//애니메이션 상수버퍼 제작
	}

그리고 나서 픽셀셰이더에서 해당 좌표로 그려주면 된다.

 

float4 main(VSOut Out) : SV_Target
{
    float4 color = float4(1.0f, 0.0f, 1.0f, 1.0f);

    if (animationType == 1) // 2D
    {
        float2 diff = (atlasSize - spriteSize) / 2.0f;
        float2 UV = (leftTop - diff - offset) + (atlasSize * Out.UV);

		// 여백 지워 주는 코드
        if (UV.x < leftTop.x || leftTop.x + spriteSize.x < UV.x
            || UV.y < leftTop.y || leftTop.y + spriteSize.y < UV.y)
        {
            discard;
        }

        color = atlasTexture.Sample(anisotropicSampler, UV);

    }
    else if (animationType == 2) // 3D
    {

    }
    else
    {
        color = triangleTexture.Sample(anisotropicSampler, Out.UV);
    }

    return color;
}