diff --git a/docs/docs/shader-dissolve.md b/docs/docs/shader-dissolve.md index 2f641f2609..00ecc59177 100644 --- a/docs/docs/shader-dissolve.md +++ b/docs/docs/shader-dissolve.md @@ -96,7 +96,7 @@ Dissolve transition post processing filter. ([Reference](https://github.com/ykob ### Apply effect -- Apply effect to game object. A game object only can add 1 gray-scale effect. +- Apply effect to game object. A game object only can add 1 dissolve effect. ```javascript var pipelineInstance = scene.plugins.get('rexDissolvePipeline').add(gameObject, { // toTexture: textureKey, @@ -125,7 +125,7 @@ Dissolve transition post processing filter. ([Reference](https://github.com/ykob - `undefined` : A random value. - `fromEdgeStart`, `fromEdgeWidth` : Dissolve edge start, edge width of from-texture (texture of game object, or render result of camera). - `toEdgeStart`, `toEdgeWidth` : Reveal edge start, edge width of to-texture. -- Apply effect to camera. A camera only can add 1 gray-scale effect. +- Apply effect to camera. A camera only can add 1 dissolve effect. ```javascript var pipelineInstance = scene.plugins.get('rexDissolvePipeline').add(camera, config); ``` diff --git a/examples/shader-dissolve/camera-postfx.bat b/examples/shader-dissolve/camera-postfx.bat new file mode 100644 index 0000000000..f81b16967c --- /dev/null +++ b/examples/shader-dissolve/camera-postfx.bat @@ -0,0 +1,5 @@ +@echo off +set main=./examples/shader-dissolve/camera-postfx.js +cd .. +cd .. +npm run watch \ No newline at end of file diff --git a/examples/shader-dissolve/camera-postfx.js b/examples/shader-dissolve/camera-postfx.js new file mode 100644 index 0000000000..d1d8d6c367 --- /dev/null +++ b/examples/shader-dissolve/camera-postfx.js @@ -0,0 +1,107 @@ +import phaser from 'phaser/src/phaser.js'; +import DissolvePipelinePlugin from '../../plugins/dissolvepipeline-plugin.js'; + +var DissolveMainCamera = function (scene, duration) { + var postFxPlugin = scene.plugins.get('rexDissolvePipelinePlugin'); + var mainCamera = scene.cameras.main; + + var postFxPipeline = postFxPlugin.add(mainCamera, { + }); + + scene.tweens.add({ + targets: postFxPipeline, + progress: 1, + ease: 'Quad', // 'Cubic', 'Elastic', 'Bounce', 'Back' + duration: duration, + repeat: 0, // -1: infinity + yoyo: false + }) + .on('complete', function () { + postFxPlugin.remove(mainCamera); + }) +} + +class SceneA extends Phaser.Scene { + constructor() { + super({ + key: 'SceneA' + }) + } + + preload() { + this.load.image('classroom', 'assets/images/backgrounds/classroom.png'); + } + + create() { + console.log('Create SceneA'); + this.add.image(400, 300, 'classroom'); + + this.input.on('pointerdown', function () { + this.scene.transition({ + target: 'SceneB', + duration: 2000, + moveBelow: true, + + onStart(fromScene, toScene, duration) { + DissolveMainCamera(fromScene, duration); + } + }); + }, this) + } + + update() { + } +} + +class SceneB extends Phaser.Scene { + constructor() { + super({ + key: 'SceneB' + }) + } + + preload() { + this.load.image('road', 'assets/images/backgrounds/road.png'); + } + + create() { + console.log('Create SceneB'); + this.add.image(400, 300, 'road'); + + this.input.on('pointerdown', function () { + this.scene.transition({ + target: 'SceneA', + duration: 2000, + moveBelow: true, + + onStart(fromScene, toScene, duration) { + DissolveMainCamera(fromScene, duration); + } + }); + }, this) + } + + update() { + } +} + +var config = { + type: Phaser.AUTO, + parent: 'phaser-example', + width: 800, + height: 600, + scale: { + mode: Phaser.Scale.FIT, + autoCenter: Phaser.Scale.CENTER_BOTH, + }, + scene: [SceneA, SceneB], + plugins: { + global: [{ + key: 'rexDissolvePipelinePlugin', + plugin: DissolvePipelinePlugin, + start: true + }] + } +}; + +var game = new Phaser.Game(config); \ No newline at end of file