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

2020-09-13Phaser3,Phaser3 Tween

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

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

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

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

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にしてあります。

Tweenでフェードイン部分のコード

  • target:対象のオブジェクト(targetObj)
  • alpha:最終的な透過度(1)
  • duration:アニメーション時間(3000ミリ秒)
  • ease:アニメーションの動作(Power2)
this.tweens.add({
	targets: targetObj,
	alpha: 1,
	duration: 3000,
	ease: 'Power2'
}, this);

2020-09-13Phaser3,Phaser3 Tween

Posted by Yousuke.U