Split

Introduction

Split image into 4 parts.

• Author: Rex
• A post-fx shader effect

WebGL only

Only work in WebGL render mode.

Live demos

• Split

Usage

Sample code

Install plugin

Load minify file

• Load plugin (minify file) in preload stage

  scene.load.plugin('rexsplitpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexsplitpipelineplugin.min.js', true);
  

• Apply effect
  • Apply effect to game object

    var pipelineInstance = scene.plugins.get('rexsplitpipelineplugin').add(gameObject, config);
    

  • Apply effect to camera

    var pipelineInstance = scene.plugins.get('rexsplitpipelineplugin').add(camera, config);
    

Import plugin

• Install rex plugins from npm

  npm i phaser3-rex-plugins
  

• Install plugin in configuration of game

  import SplitPipelinePlugin from 'phaser3-rex-plugins/plugins/splitpipeline-plugin.js';
  var config = {
      // ...
      plugins: {
          global: [{
              key: 'rexSplitPipeline',
              plugin: SplitPipelinePlugin,
              start: true
          },
          // ...
          ]
      }
      // ...
  };
  var game = new Phaser.Game(config);
  

• Apply effect
  • Apply effect to game object

    var pipelineInstance = scene.plugins.get('rexSplitPipeline').add(gameObject, config);
    

  • Apply effect to camera

    var pipelineInstance = scene.plugins.get('rexSplitPipeline').add(camera, config);
    

Import class

• Install rex plugins from npm

  npm i phaser3-rex-plugins
  

• Add to game config

  import SplitPostFx from 'phaser3-rex-plugins/plugins/splitpipeline.js';
  var config = {
      // ...
      pipeline: [SplitPostFx]
      // ...
  };
  var game = new Phaser.Game(config);
  

• Apply effect
  • Apply effect to game object

    gameObject.setPostPipeline(SplitPostFx);
    

  • Apply effect to camera

    camera.setPostPipeline(SplitPostFx);
    

Apply effect

• Apply effect to game object. A game object only can add 1 split effect.

  var pipelineInstance = scene.plugins.get('rexSplitPipeline').add(gameObject, {
      // x: undefined,  // renderer.width / 2
      // y: undefined,  // renderer.height / 2
  
      // width: undefined,
      // left: 0,
      // right: 0,
      // height: undefined,
      // top: 0,
      // bottom: 0,
  
      // angle: undefined,  // Degrees
      // rotation: 0,       // Radian
  
      // shiftEnable: true,
  
      // name: 'rexSplitPostFx'
  });
  

  • x : Vertical split position. Default value is center of render width.
  • y : Horizontal split position. Default value is center of render height.
  • width, height : Vertical/Horizontal split length.
  • left, right : Specify left/right part length of vertical split. Default value is half Vertical split length.
  • top, bottom : Specify top/bottom part length of horizontal split. Default value is half Horizontal split length.
  • angle, rotation : Rotation of split axis. Default value is 0.
  • shiftEnable :
    • true : Shift splitted parts out. Default value.
    • false : Don't shift splitted parts. Equal to apply mask on this image.
• Apply effect to camera. A camera only can add 1 split effect.

  var pipelineInstance = scene.plugins.get('rexSplitPipeline').add(camera, config);
  

Remove effect

• Remove effect from game object

  scene.plugins.get('rexSplitPipeline').remove(gameObject);
  

• Remove effect from camera

  scene.plugins.get('rexSplitPipeline').remove(camera);
  

Get effect

• Get effect from game object

  var pipelineInstance = scene.plugins.get('rexSplitPipeline').get(gameObject)[0];
  // var pipelineInstances = scene.plugins.get('rexSplitPipeline').get(gameObject);
  

• Get effect from camera

  var pipelineInstance = scene.plugins.get('rexSplitPipeline').get(camera)[0];
  // var pipelineInstances = scene.plugins.get('rexSplitPipeline').get(camera);
  

Split position

• Get

  var splitX = pipelineInstance.splitX;
  var splitY = pipelineInstance.splitY;
  

• Set

  pipelineInstance.splitX = splitX;
  pipelineInstance.splitY = splitY;
  

  or

  pipelineInstance.setSplit(x, y);
  

Split at center of render

pipelineInstance.splitAtCenter();
// pipelineInstance.splitAtCenter(width, height);

Split length

• Get

  var splittedWidth = pipelineInstance.splittedWidth;
  var splittedHeight = pipelineInstance.splittedHeight;
  

• Set

  pipelineInstance.splittedWidth = splittedWidth;
  pipelineInstance.splittedHeight = splittedHeight;
  

  or

  pipelineInstance.setSplittedWidth(splittedWidth);
  pipelineInstance.setSplittedHeight(splittedHeight);
  

or specify left/right/top/bottom of split length

• Get

  var left = pipelineInstance.spaceLeft;
  var right = pipelineInstance.spaceRight;
  var top = pipelineInstance.spaceTop;
  var bottom = pipelineInstance.spaceBottom;
  

• Set

  pipelineInstance.spaceLeft = left;
  pipelineInstance.spaceRight = right;
  pipelineInstance.spaceTop = top;
  pipelineInstance.spaceBottom = bottom;
  

  or

  pipelineInstance.setSpace(left, right, top, bottom);
  

Rotation Axis of Split edge

• Get

  var rotation = pipelineInstance.rotation;  // radians
  // var angle = pipelineInstance.angle;     // degrees
  

• Set

  pipelineInstance.rotation = rotation;
  pipelineInstance.rotation += value;
  // pipelineInstance.angle = angle;
  // pipelineInstance.angle += value;
  

  or

  pipelineInstance.setRotation(rotation);
  // pipelineInstance.setAngle(angle);
  

Shift enable

• Get

  var enable = pipelineInstance.shiftEnable;
  

• Set

  pipelineInstance.shiftEnable = enable;
  

  or

  pipelineInstance.setShiftEnable(enable);