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

2019-03-132020-09-13Phaser 3 Tween,Phaser 3

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);