Skip to content

Warp

Introduction

Warp transition post processing filter.

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

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.