Skip to content

Cross-stitching

Introduction

Cross-stitching post processing filter. Reference

  • Author: Rex
  • A post-fx shader effect

Live demos

Usage

Sample code

Install plugin

Load minify file

  • Load plugin (minify file) in preload stage
    scene.load.plugin('rexcrossstitchingpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcrossstitchingpipelineplugin.min.js', true);
    
  • Apply effect
    • Apply effect to game object
      var pipelineInstance = scene.plugins.get('rexcrossstitchingpipelineplugin').add(gameObject, config);
      
    • Apply effect to camera
      var pipelineInstance = scene.plugins.get('rexcrossstitchingpipelineplugin').add(camera, config);
      

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import CrossStitchingPipelinePlugin from 'phaser3-rex-plugins/plugins/crossstitchingpipeline-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexCrossStitchingPipeline',
                plugin: CrossStitchingPipelinePlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Apply effect
    • Apply effect to game object
      var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').add(gameObject, config);
      
    • Apply effect to camera
      var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').add(camera, config);
      

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Add to game config
    import CrossStitchingPostFx from 'phaser3-rex-plugins/plugins/crossstitchingpipeline.js';
    var config = {
        // ...
        pipeline: [CrossStitchingPostFx]
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Apply effect
    • Apply effect to game object
      gameObject.setPostPipeline(CrossStitchingPostFx);
      
    • Apply effect to camera
      camera.setPostPipeline(CrossStitchingPostFx);
      

Apply effect

  • Apply effect to game object. A game object only can add 1 cross-stitching effect.
    var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').add(gameObject, {
        // stitchingWidth: 6,
        // stitchingHeight: 6,
        // brightness: 0,
    
        // name: 'rexCrossStitchingPostFx'
    });
    
    • stitchingWidth, stitchingHeight : Stitching size.
    • brightness : Brightness of stitching edges
  • Apply effect to camera. A camera only can add 1 cross-stitching effect.
    var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').add(camera, config);
    

Remove effect

  • Remove effect from game object
    scene.plugins.get('rexCrossStitchingPipeline').remove(gameObject);
    
  • Remove effect from camera
    scene.plugins.get('rexCrossStitchingPipeline').remove(camera);
    

Get effect

  • Get effect from game object
    var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').get(gameObject)[0];
    // var pipelineInstances = scene.plugins.get('rexCrossStitchingPipeline').get(gameObject);
    
  • Get effect from camera
    var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').get(camera)[0];
    // var pipelineInstances = scene.plugins.get('rexCrossStitchingPipeline').get(camera);
    

Stitching size

  • Get
    var stitchingWidth = pipelineInstance.stitchingWidth;
    var stitchingHeight = pipelineInstance.stitchingHeight;
    
  • Set
    pipelineInstance.stitchingWidth = stitchingWidth;
    pipelineInstance.stitchingHeight = stitchingHeight;
    // pipelineInstance.stitchingWidth += value;
    // pipelineInstance.stitchingHeight += value;
    
    or
    pipelineInstance.setStitchingWidth(stitchingWidth);
    pipelineInstance.setStitchingHeight(stitchingHeight);
    pipelineInstance.setStitchingSize(stitchingWidth, stitchingHeight);
    

Brightness

  • Get
    var brightness = pipelineInstance.brightness;
    
  • Set
    pipelineInstance.brightness = brightness;
    // pipelineInstance.brightness += value;
    
    or
    pipelineInstance.setBrightness(radius);
    
    • brightness : 0(black) ~ 1(white)