[Godot engine] Texture Button에 AnimatedTexture 설정 하기

Texture Button에 AnimatedTexture 설정 하기

Godot engine에서 TextureButton에는 다양한 texture들을 사용할 수 있다.

이 많은 texture format들 중, AnimatedTexture를 사용하는 방법을 알아 보자. AnimatedTexture는 몇장의 그림을 연속적으로 변경하면서 보여주면서 animation 효과를 주는 texture다.

우선 사용할 그림들을 준비 한다. 간단하게 text 이미지의 높이를 조절한 그림들을 준비 했다.

준비한 그림들은 godot editor에 미리 resource로 import 해 준다. res:// 아래에 images 라는 폴더를 생성하고 drag&drop 으로 옮기면 godot editor가 자동으로 import 한다.

Scene 에 TextureButton node를 추가 한다.

방금 추가한 TextureButton을 선택 하고, 우측 Inspector 영역에서 Textures항목을 펼친다. 항목을 펼치면, 다양한 상황에 따라 texture를 설정 할 수 있다. 버튼의 텍스트가 평상시에도 계속 움직이게 하고 싶으니까, Normal 인 경우에 AnimatedTexture를 설정 하도록 한다. 만일, 다른 상황에서 다른 animation 효과를 주고 싶으면 상황에 맞는 곳에 설정을 해 주면 된다.

Normal 옆에 [empty] drop box를 선택하면 여러가지 Texture를 선택 할 수 있는데, 이때, New AnimatedTexture를 선택 한다.

버튼 이미지가 5개지만, 이미지는 버튼이 점점 작아지는 그림이 5개이므로 버튼이 작아졌다 다시 커지는 움직임을 만들려면, 총 8 프레임이 필요 하다. 따라서, Frames 항목을 8로 설정 한다. Frames 항목의 숫자를 늘리면 숫자만큼 Frame 0, Frame 1... 이런 식으로 Frame 항목이 늘어 난다.

각각의 Frame 을 열면, Texture와 Delay Sec을 설정 할 수 있는데, Texture에는 그 프레임에서 사용할 texture 를 설정 할 수 있고, Delay Sec는 그 frame에서 어느 정도의 시간 만큼 시간을 지연 시킬 것 인가를 초 단위로 설정 할 수 있다. (초 단위지만 정수가 아닌 실수를 설정 할 수 있다)

이제, 각각의 Frame의 Texture영역에 아까 import 해 둔 image를 지정 하면 된다. 이때, 간단히 drag & drop으로 지정 할 수 있다.

frame들의 이미지를 지정 한 후, Fps를 조정 해서 움직이는 속도를 조정 하고, 시작 frame의 delay를 지정 해서 잠깐씩 멈추는 효과도 지정 해 본다.

이제 실행 해 보면 Animation 효과가 적용된 버튼을 볼 수 있다.