Warp

Introduction

Warp transition post processing filter.

• Author: Richard Davey
• A post-fx shader effect

WebGL only

Only work in WebGL render mode.

Usage

Reference

Install plugin

Import class

• Get minify file from github
• Add to game config

  import { WarpPostFX } from './dist/WarpPostFX.js';  // Path to your minify file
  var config = {
      // ...
      pipeline: { WarpPostFX }
      // ...
  };
  var game = new Phaser.Game(config);
  

• Apply effect
  • Apply effect to game object

    gameObject.setPostPipeline(WarpPostFX);
    

  • Apply effect to camera

    camera.setPostPipeline(WarpPostFX);
    

Remove effect

gameObject.removePostPipeline(WarpPostFX); // WarpPostFX class

Get effect

• Get effect from game object

  var pipelineInstance = gameObject.getPostPipeline(WarpPostFX); // WarpPostFX class
  

• Get effect from camera

  var pipelineInstance = camera.getPostPipeline(WarpPostFX); // WarpPostFX class
  

Set texture

pipelineInstance.setTexture(textureKey, resizeMode);

• textureKey : The key of the texture to use.
• resizeMode :
  • 0, or 'stretch' : The target texture is stretched to the size of the source texture.
  • 1, or 'contain' : The target texture is resized to fit the source texture.
  • 2, or 'cover' : The target texture is resized to cover the source texture.

Progress

• Get

  var progress = pipelineInstance.progress;
  

• Set

  pipelineInstance.setProgress(value);  // value: 0~1
  

  or

  pipelineInstance.progress = value;  // value: 0~1
  

Direction

• Get

  var direction = pipelineInstance.direction;  // {x, y}
  

  • Default value is {x:-1, y:1}
• Set

  pipelineInstance.setDirection(x, y);  // x, y : 1, or -1
  

Smoothness

• Get

  var smoothness = pipelineInstance.smoothness;
  

• Set

  pipelineInstance.setSmoothness(value);  // value: 0~1
  

  or

  pipelineInstance.smoothness = value;  // value: 0~1
  

Resize mode

• Get

  var mode = pipelineInstance.resizeMode;
  

• Set

  pipelineInstance.setResizeMode(mode);
  

  • mode :
    • 0, or 'stretch' : The target texture is stretched to the size of the source texture.
    • 1, or 'contain' : The target texture is resized to fit the source texture.
    • 2, or 'cover' : The target texture is resized to cover the source texture.