[유니티 Unity] 유니티에서 움직이는 이미지(.gif) 넣기

움직이는 이미지를 UI상에서 적용하기 위해서는 이미지를 스프라이트 시트로 만들어 주어야한다.

원래는 이미지 스프라이트를 애니메이션 클립으로 만들어서 루프 시키다가 너무 비효율적인거 같아서 

방법을 찾다가 다음 방법으로 쉽게 만들 수 있어서 작성해보았다.

 

 

---

1. 움직이는 이미지 스프라이트 시트로 만들기

 

 

아래 사이트를 이용하면 움직이는 이미지를 스프라이트 형식으로 변형이 가능하다 

 

 

https://ezgif.com/

Animated GIF editor and GIF maker

 

비디오를 이미지 스프라이트로 만들어야 할 경우,

Video를 gif 형식으로 바꿔주고 gif 형식을 Img sprite형식으로 바꾸어주어야한다.

 

 

 

위 사이트에 들어가서 VIdo to Gif 버튼을 눌러서 다음과 같은 화면이 나오게 한후에 

원하는 비디오를 파일 선택안에 넣어주고 Convert to GIF! 버튼을 눌러준다

 

 

 

 

버튼을 누르고나면 아래쪽에 GIF의 결과를 확인할 수 있다 

그리고 Save를 눌러주면 다음과 같이 GIF이 저장되는 것을 확인 할 수 있다.

 

 

gif형식에서 Img Sprite형식으로 변형하자

 

 

 

 

Video 형식을 gif형식으로 바꾼것과 마찬가지로

이번에는 Split -> Gif To Sprite sheet에서 변형을 원하는 git이미지를 선택하고 

Upload를 해준다.

 

 

 

 

업로드 하면 다음과 같이 형성할 스프라이트를 어떻게 생성 할 지 설정하는 창이 나온다 

 

이 때 frames 이 자연수의 곱으로 나오는 수가 좋다고 한다.

프레임이 17같은 소수라면 Unity안에서 끊겨서 보이게 된다고 한다.

 

일단 나의 이미지는 34프레임이라서 그대로 사용 해본다 

 

이미지는 Custom grid 형식(배열 형식)으로 설정하고 

Columns로 이미지의 가로의 수를 설정한다. 

 

 

 

 

 

2. 이미지 형식 변경 / 새로운 머티리얼을 생성하고 적용하기

 

 

이제 유니티로 돌아가서 만들어진 gif 파일을 넣어주고 gif의 형식을 sprite형식으로 변경해준다.

 

그런 다음 새로운  머티리얼을 생성하여 머티리얼의 Shader를 Unlit/Texture로 변경하고 

Sprite형식의 이미지를 texture안에 넣어준다.

 

 

 

3. Particle System 생성하기 

 

 

하이어라키에 빈 Particle System을 생성해준다

 

 

새로운 파티클 시스템을 생성했으면 Particle system 에 머티리얼(Material)을 넣어준다

 

 

파티클 시스템 설정 부분에 Texture Sheet Animation이 있는데

Tiles X(가로), Y(세로) 라고 보고 생성한 이미지의 가로 세로 장수를 입력 해준다.

스프라이트 시트의 가로 세로 이미지 장수를 적는다.

 

 

적고 나면 이미지가 하나씩 분리되서 파티클안에서 보여지는 것을 확인 할 수 있다.

 

마지막으로 파티클 이벤트 Start Speed가 기본값이 5로 되어있는데 0으로 변경해주면

여기 저기 돌아다니던 이미지가 한 곳에 있게 된다.

 

Start Speed가 0이 되면

 

이제 가로로 퍼져있는 이미지를 한곳에 모으려면

파티클 시스템 설정에 Shape가 기본값으로 체크가 되어있느데

이부분을 비활성화 하면  이미지가 한 곳에 모여있다

 

 

 

그 다음 Emission - Rate Over Time을 1로 맞추어 줘야한다

Rate Over Time은 시간 단위당 방출되는 파티클의 수이다.

이걸 하지 않으면 이미지가 이상하게 나오는 것을 확인 할 수 있다.

Rate Over Time을 1로 맞췄을 때

이렇게 하고나면 이미지가 중간에 멈춘다.

이부분을 해결하기 위해서 Start Lifetime의 기본값이 10으로 되어있는데 

이미지의 길이에 따라서 StartLifeTime을 조절해주면 된다

 

왼쪽 이미지는 LifeTime을 1초로 했을 때이고 오른쪽은 LifeTime을 2초로 했을때 이다.

 

 

Texture Sheet Animation의 Cycles을 2로 바꾸면 이미지를 두번 반복하는 방법도 있다고함

생각보다 움짤을 만들일이 많아서 작성해보았다.

 

 

 

 

 

참조: https://gall.dcinside.com/mgallery/board/view/?id=vr&no=236198