[유니티] 오브젝트와 UI에 gif 이미지 출력

씬 내에서 횡단보도 초록불과 TV의 Static 효과가 보여진다.

 

구현 아이디어?

GIF와 같은 효과를 주기 위해서는 여러장의 이미지를 간단하게 첫 프레임부터 마지막 프레임까지 loop로 하면서 이미지 스프라이트를 를 한장씩 보여주면 된다고 생각하여 구현하였다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
public class GifSprite : MonoBehaviour
{
    //GIF효과를 주기 위한 이미지의 각 프레임들의 스프라이트가 들어가는 공간
    [SerializeField] private Sprite[] mSprites;
    //GIF효과에서 다음 이미지까지의 딜레이 시간을 설정
    [SerializeField] private float mImageDelay;
    //다음 이미지까지 남은 딜레이 시간
    private float mCurrentDelay;
    //현재 mSprites에서 현재 이미지의 인덱스 번호
    private int mCurrentImageID;
 
    //게임 오브젝트의 스프라이트 렌더러 컴포넌트
    private SpriteRenderer mSpriteComp;
    //게임 오브젝트의 스프라이트 이미지 컴포넌트. UI에서 사용할 때 이용한다.
    private Image mImageComp;
 
    //스프라이트 렌더러를 가져와 저장한다.
    private void Awake()
    {
        this.mSpriteComp = GetComponent<SpriteRenderer>();
 
        if (mSpriteComp == null)
        {
            this.mImageComp = GetComponent<Image>();
        }
    }
 
    //오브젝트가 활성화 되면 첫 프레임부터 시작하도록 한다.
    private void OnEnable()
    {
        mCurrentImageID = 0;
        mCurrentDelay = mImageDelay;
 
        if (mSpriteComp != null)
        {
            mSpriteComp.sprite = mSprites[mCurrentImageID];
        }
        else
        {
            mImageComp.sprite = mSprites[mCurrentImageID];
        }
    }
 
    //오브젝트가 활성화되어 Update()가 매 프레임 호출되면 mSprites의 0부터 length-1까지 loop를 돌도록 한다.
    private void Update()
    {
        mCurrentDelay -= Time.deltaTime;
 
        if (mCurrentDelay < 0)
        {
            ++mCurrentImageID;
 
            if (mCurrentImageID == mSprites.Length)
            {
                mCurrentImageID = 0;
            }
 
            if (mSpriteComp != null)
            {
                mSpriteComp.sprite = mSprites[mCurrentImageID];
            }
            else
            {
                mImageComp.sprite = mSprites[mCurrentImageID];
            }
 
            mCurrentDelay = mImageDelay;
        }
    }
}
 

[SerializeField] private Sprite[] mSprites;

• GIF효과를 보여주기 위해 사용되는 이미지들의 각 프레임 스프라이트들을 모두 담는 Sprite 배열이다.
• 온라인이나 별도의 프로그램으로 GIF나 동영상 확장자 파일들을 png나 jpeg등의 이미지로 변환하여 넣는다.
• 인스펙터에서 해당 이미지 스프라이트들을 모두 집어넣는다.

 

[SerializeField] private float mImageDelay;

• GIF효과가 나타날 때 현재 스프라이트에서 다음 스프라이트까지의 걸리는 딜레이 시간을 결정하는 변수이다.
• 인스펙터에서 딜레이 시간을 조정하도록 하였다.

 

private float mCurrentDelay;

• 이미지가 변경된 후 다음 이미지까지의 남은 딜레이 시간을 나타낸다.

 

private int mCurrentImageID;

• mSprites[]의 인덱스 값을 지정하는 변수로 0부터 mSprites - 1 까지 loop를 돌면서 mSprites의 길이를 넘어서면 다시 0부터 시작하도록 현재 위치를 저장한다.

 

private SpriteRenderer mSpriteComp;

• 오브젝트에서 실제로 렌더하는 스프라이트 렌더러 컴포넌트이다.
• mSpriteComp의 sprite 값을 mSprites[mCurrentImageID]로 지속적으로 바꾸면서 GIF효과를 보여준다.
• UI가 아닌 상태에서 사용되는 컴포넌트 변수이다.

 

private Image mImageComp;

• 오브젝트에서 실제로 렌더하는 이미지의 컴포넌트이다.
• mImageComp의 sprite 값을 mSprites[mCurrentImageID]로 지속적으로 바꾸면서 GIF효과를 보여준다.
• UI에서 GIF 효과를 보여줄 때 사용하는 컴포넌트 변수이다.

 

private void Awake()

• 오브젝트의 SpriteRenderer 컴포넌트나 Image 컴포넌트에 담는다.
• UI가 아닌경우 SpriteRenderer를 찾고, UI인경우 Image를 찾는다. 이유는 UI에서 사용하는 이미지 렌더 컴포넌트가 다르기 때문이다.

 

private void OnEnable()

• 오브젝트가 활성화되면 스프라이트트들의 첫번째가 보여지게되고 변수들을 초기화하는 과정을 거친다.

 

private void Update()

• 오브젝트가 활성화 상태일때 Time.deltaTime만큼 지나면서 자연스레 다음 프레임으로 Sprite를 바꾸는 과정을 거친다.
• if(mCurrentImageID == mSprites.Length) 조건문에서 mSprites.Length를 초과하지 않게(인덱스 참조 오류) 0으로부터 다시 시작하도록 한다.
• if (mSpriteComp != null)는 UI에 GIFSprite.cs가 있어 SpriteRenderer컴포넌트가 없고 Image 컴포넌트가 있기때문에 mImageComp 변수의 sprite를 변경한다.

 

씬 내에 UI가 아닌 오브젝트로 배치하기 위해서는 SpriteRenderer가 있는 오브젝트를 생성한 후 여기에서 다룰 GifSprite.cs를 추가해주면 간단하게 사용 준비가 완료된다.

 

UI에서 사용할때도 마찬가지로 간편하게 GifSprite.cs를 넣고 이미지 스프라이트를 추가하고 딜레이를 설정해주면 사용 준비가 완료된다.

 

이미지를 보면 좌측에 TV Static으로 보여지는 GIF효과와 UI에서도 GIF 효과를 볼 수 있다.