Phaser Tween Chain 가이드

목차

1. 트윈 체인이란?
2. 기본 사용법
3. 주요 활용 사례
4. 트윈 체인 제어
5. 주의사항

트윈 체인이란?

트윈 체인은 Phaser에서 제공하는 연속적인 애니메이션 시스템입니다. 여러 개의 트윈을 순차적으로 실행할 수 있으며, 각 트윈마다 다른 속성과 효과를 적용할 수 있습니다.

기본 사용법

기본 구조

this.tweens.chain({
    tweens: [
        {
            targets: gameObject,
            x: 400,
            duration: 1000,
            ease: 'Power1'
        },
        {
            targets: gameObject,
            y: 300,
            duration: 800,
            ease: 'Bounce'
        }
    ]
});

주요 속성

• targets: 애니메이션을 적용할 대상 객체
• duration: 애니메이션 지속 시간 (밀리초)
• ease: 이징 함수 (애니메이션 가속도)
• delay: 시작 전 대기 시간
• repeat: 반복 횟수
• yoyo: 역방향 재생 여부

---

주요 활용 사례

1. UI 애니메이션

// 버튼 클릭 효과
this.tweens.chain({
    tweens: [
        {
            targets: button,
            scale: 0.9,
            duration: 100
        },
        {
            targets: button,
            scale: 1.1,
            duration: 200
        },
        {
            targets: button,
            scale: 1,
            duration: 100
        }
    ]
});

2. 캐릭터 모션

// 점프 모션
this.tweens.chain({
    tweens: [
        {
            targets: character,
            y: '-=100',
            duration: 400,
            ease: 'Power1.easeOut'
        },
        {
            targets: character,
            duration: 100
        },
        {
            targets: character,
            y: '+=100',
            duration: 300,
            ease: 'Bounce.easeOut'
        }
    ]
});

3. 보상/획득 이펙트

// 아이템 획득 효과
this.tweens.chain({
    tweens: [
        {
            targets: item,
            scale: { from: 0, to: 1.2 },
            alpha: { from: 0, to: 1 },
            duration: 300
        },
        {
            targets: itemGlow,
            alpha: { from: 0, to: 0.8 },
            scale: { from: 1, to: 1.5 },
            duration: 400,
            yoyo: true
        },
        {
            targets: [item, itemGlow],
            y: '-=50',
            alpha: 0,
            duration: 500
        }
    ]
});

---

트윈 체인의 제어

기본 구현

export class GameScene extends Phaser.Scene {
    private chainTween: Phaser.Tweens.TweenChain;

    create() {
        // 트윈 체인 생성
        this.chainTween = this.tweens.chain({
            tweens: [...],
            paused: true // 생성 시 일시정지
        });
    }

    // 제어 메서드들
    private pauseChain(): void {
        if (this.chainTween) {
            this.chainTween.pause();
        }
    }

    private resumeChain(): void {
        if (this.chainTween) {
            this.chainTween.resume();
        }
    }

    private stopChain(): void {
        if (this.chainTween) {
            this.chainTween.stop();
        }
    }

    private restartChain(): void {
        if (this.chainTween) {
            this.chainTween.restart();
        }
    }

    private seekChain(progress: number): void {
        if (this.chainTween) {
            this.chainTween.seek(progress);
        }
    }
}

상태 확인

// 진행 상태 확인
private checkTweenStatus(): void {
    if (this.chainTween) {
        console.log('Is Playing:', this.chainTween.isPlaying());
        console.log('Progress:', this.chainTween.progress);
        console.log('Total Duration:', this.chainTween.totalDuration);
    }
}

주의사항

1. 트윈 체인 생성 시 고려사항
   • paused: true 옵션으로 생성하면 자동 시작하지 않음
   • 체인 제어를 위해서는 반드시 참조를 저장해야 함
2. 제어 관련 주의사항
   • stop()으로 중단된 트윈은 resume()으로 재개할 수 없음
   • 중단된 트윈은 restart()로만 다시 시작 가능
   • seek()는 0-1 사이의 값을 사용 (전체 진행도)
3. 성능 고려사항
   • 너무 많은 트윈 체인을 동시에 실행하면 성능 저하 발생 가능
   • 사용하지 않는 트윈 체인은 반드시 destroy() 호출하여 정리
4. 메모리 관리
   • 씬 전환 시 실행 중인 트윈 체인 정리 필요
   • 참조된 객체들이 제거되기 전에 트윈 체인도 정리해야 함