TWEEN

angular 에서 phaser의 tween 사용법

Ease funciton 참조 Tween task 참조;

Phaser 3.x 에서의 기본 사용법

this.tweens.add({
  targets: gameObject,
  ..........
  x: 1,
    // x: '+=1',
    // x: '-=1',
    // x: '*=1',
    // x: '/=1',
    // x: 'random(0.25, 0.75)',
    // x: 'int(10, 100)',
    // x: [100, 300, 200, 600],
    // x: { from: 0, to: 1 },
    // x: { start: 0, to: 1 },  
    // x: { start: value0, from: value1, to: value2 },  
    // x: {
    //      getActive: function (target, key, value, targetIndex, totalTargets, tween) { return newValue; },
    //      getStart: function (target, key, value, targetIndex, totalTargets, tween) { return newValue; },
    //      getEnd: function (target, key, value, targetIndex, totalTargets, tween) { return newValue; }
    // },
  scaleX: 1, // X scale
  scaleY: 1,  // Y scale
  ..........
  ease: 'Sine.easeInOut',
  easeParams: null,

 

  duration: 300, // tweens 실행 시간 (0.3초)
  delay: 50, // delay : 어느정도 후에 실행할 것인가?
  repeat: -1, // -1 은 무한대로 반복, 1, 2, 3.... 횟수

  // delay between tween and yoyo
  hold: 0,
  yoyo: true // 끝난위치에서 처음으로, 처음에서 끝난 위치로
  
});

이벤트 리스너를 추가할 시

this.tweens.add({
  targets: cardObject,
  scaleX: 0.01,
  ease: 'Linear',
  duration: 300,
  repeat: 0,
  yoyo: false,
  onActive: () => {},
  onUpdate: (tween, target, key, current, previous, param) => {},
  onUpdateParams: [],

  onStart: () => { 
    // 시작할때 이벤트
   },
  onComplete: () => { 
    // 완료시 이벤트
  },
  // yoyo 관련
  flipX: false,
  flipY: false,
  onYoyo: (tween, target, key, current, previous, param) => { 
    // yoyo가 반복될때 이벤트
  },
  onYoyoParams: [],

  // repeat  관련
  onRepeat: (tween, target, key, current, previous, param) => { 
    // repeat 될때 이벤트
  },
  onRepeatParams: [],
  // delay to next pass
  repeatDelay: 0,
  // delay to next pass
  repeatDelay: 0,
});

참조로 phaser 2.x 를 phaser 3.x로 변경한 모습니다.

• 2.x

  let tween = this.add.tween(gem);
  tween.from({
    y: gem.y - this.BOARD_HEIGHT
  }, 500, Phaser.Math.Easing.Bounce.Out);
  tween.onComplete.add(() => {
    gem.isSettled = true;
  });
  tween.start();

• 3.x

this.tweens.add({
  targets: gem,
  y: {from: gem.y - this.BOARD_HEIGHT, to: gem.y},
  ease: Phaser.Easing.Bounce.Out,
  duration: 500,
  onComplete: () => {gem.isSettled = true;}
});

• Linear : Phaser.Math.Easing.Linear
• Phaser.Math.Easing.Quadratic.InOut

import * as Phaser from 'phaser';

export class GameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'main' });
  }

  private preload () {
  }

  public create () {
    const Square: any = this.add.rectangle(0, 0, 75, 75, 0x64c8a5);
    this.tweens.add({
      targets: Square,
      rotation: (Math.PI / 180) * 45 * 5,
      ease: 'Sine.easeInOut',
      duration: 1000,
      x: 500,
      y: 500,
      scaleX: -11,
    });
  }

  override update () {
  }
}

다양한 예제

chain

연속적인 모션을 처리할때 유용하다.

var chain = scene.tweens.chain({
  targets: null,
  tweens: [
      {
          // targets: gameObject,
          alpha: 1,            
          ease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'
          duration: 1000,
          repeat: 0,            // -1: infinity
          yoyo: false
      },        
      // ... 계속적인 tween 추가
  ],

  delay: 0,
  completeDelay: 0,
  loop: 0,  // repeat: 0,
  repeatDelay: 0,
  paused: false,
  persist: true,
  // callbackScope: this,
})

깜박거림

this.tweens.add({
  targets: swapList[1],
  alpha: 0,
  ease: Phaser.Math.Easing.Linear,
  duration: 300,
  repeat: 2,
  yoyo: true
});

count

숫자 카운트를 자연스럽게 올릴때 사용

private addCounter(from: number, to: number) {
  this._game.tweens.addCounter({
    from: from,
    to: to,
    ease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'
    duration: 500,
    repeat: 0,            // -1: infinity
    yoyo: false,
    onUpdate: (tween: any, targets: any, key: any, current: any, previous: any, param: any) => {
      this._score.text = parseInt(tween.getValue());
    }
  });
}