GUI 애니메이션 만들기

GUI에 애니메이션을 적용할 이미지 추가하기

애니메이션을 적용할 이미지를 GUI에 추가해줍니다.

GUI에 이미지 추가하기

이미지 GUI 기본 설정하기

a. 이미지의 사이즈를 설정해줍니다.

비율이 유지되도록 Maintain AspectRatio를 켜주고, 단위를 퍼센트(%)로 바꾼 후 사이즈를 조정해줍니다.

이미지 사이즈 설정하기

b. 이미지의 시작위치를 설정해줍니다.

Anchor를 통해 이미지의 기준점을 잡아주고 Offset을 조정해줍니다.

이미지 시작위치 설정하기

GUI 애니메이션 TWEEN 스크립트 작성하기

이미지 GUI에 오브젝트(클라이언트) 스크립트를 추가해줍니다. TWEEN을 통해 이미지의 Offset을 변경해줍니다.
offset 객체는 간략하게 본다면 { x : { value : Number }, y : { value : Number } }로 구성되어 있기 때문에 한 축으로만 값을 변경하고 싶다면 ui.offset.y를 TWEEN의 시작객체로 사용해주어야 합니다.

.yoyo()를 사용하기 때문에 GUI 애니메이션 시간은 tween.to(object, duration)에서 duration의 2배가 됩니다. .easing()을 통해 객체의 움직임(보간 방정식)을 변경할 수 있습니다.

TWEEN.Easing.Exponential.InOut

const ui = GUI.getObject('Copy_notification.png(9cf)');
const tween = new TWEEN.Tween(ui.offset.y);
// GUI 애니메이션 시간 조정 가능, 기본은 1000ms
tween.to({ value : 20 });
// .easing()을 통해 움직임(보간 방정식)을 변경할 수 있습니다.
tween.easing(TWEEN.Easing.Exponential.InOut)
.yoyo(true).repeat(1);

특정 이벤트가 발생했을 때 TWEEN 실행시키기

아래는 키보드의 c가 눌렸을 때, TWEEN을 실행해주는 예시입니다.
해당 TWEEN을 실행시키고 싶은 이벤트가 발생했을 때, tween.start()를 사용해주면 됩니다.

// ...
 
function OnKeyDown(event) {
    if(event.code === 'KeyC') { 
        if(tween.isPlaying()) {
            tween.stop();
            ui.offset.y.value = -15 // 초기 위치
        }
        tween.start();
    }
}