【Phaser】Tweenを使ったフェードアウトとフェードインの実装

2019-04-08PhaserPhaserアニメーション

Phaser 3のTweenを使ったフェードアウトとフェードインを実装する方法です

Tweenを使ったフェードアウトの実装サンプル

See the Pen Phaser 3 Tween FadeOut by yochans (@yochans) on CodePen.

targetObjをtargetに指定してフェードアウトを実装しているサンプルです

//Scene A
class SceneA extends Phaser.Scene {

  constructor (){
          super({ key: 'SceneA' });
   }

  create(){
    
    let targetObj = this.add.text(150, 70, 'Target Object').setFontSize(30).setFontFamily("Arial").setOrigin(0.5).setInteractive();
    
    let fadeOut = this.add.text(150, 130, 'Fade Out!').setFontSize(20).setFontFamily("Arial").setOrigin(0.5).setInteractive();
    
    fadeOut.on('pointerdown', function (pointer) {
      
        this.tweens.add({
          targets: targetObj,
          alpha: 0,
          duration: 300,
          ease: 'Power2'
        }, this);
    
     }, this);
   }
};


//config
let config = {
  type: Phaser.AUTO,
  parent: 'canvas',
  width: 300,
  height: 200,
  scene: [ SceneA ]
};

//game
let game = new Phaser.Game(config);

Tweenでフェードアウト部分

target:対象のオブジェクト(targetObj)
alpha:最終的な透過度(0)
duration:アニメーション時間(3000ミリ秒)
ease:アニメーションの動作(Power2)

        this.tweens.add({
          targets: targetObj,
          alpha: 0,
          duration: 3000,
          ease: 'Power2'
        }, this);

Tweenを使ったフェードインの実装サンプル

See the Pen Phaser 3 Tween FadeIn by yochans (@yochans) on CodePen.

サンプルでは、targetObjの初期値をsetAlpha()を使って0にしてあります

//Scene A
class SceneA extends Phaser.Scene {

  constructor (){
          super({ key: 'SceneA' });
   }

  create(){
    
    let targetObj = this.add.text(150, 70, 'Target Object').setFontSize(30).setFontFamily("Arial").setOrigin(0.5).setAlpha(0);
    
    let fadeOut = this.add.text(150, 130, 'Fade In!').setFontSize(20).setFontFamily("Arial").setOrigin(0.5).setInteractive();
    
    fadeOut.on('pointerdown', function (pointer) {
      
        this.tweens.add({
          targets: targetObj,
          alpha: 1,
          duration: 3000,
          ease: 'Power2'
        }, this);
    
     }, this);
   }
};


//config
let config = {
  type: Phaser.AUTO,
  parent: 'canvas',
  width: 300,
  height: 200,
  scene: [ SceneA ]
};

//game
let game = new Phaser.Game(config);

Tweenでフェードイン部分

target:対象のオブジェクト(targetObj)
alpha:最終的な透過度(1)
duration:アニメーション時間(3000ミリ秒)
ease:アニメーションの動作(Power2)

        this.tweens.add({
          targets: targetObj,
          alpha: 1,
          duration: 3000,
          ease: 'Power2'
        }, this);

2019-04-08PhaserPhaserアニメーション

Posted by Yousuke.U