Options
All
  • Public
  • Public/Protected
  • All
Menu

Adds post processing support for the engine, can process raw pixel data and manipulate canvas directly.

Sometimes it is necessary to apply an effect to the canvas after the engine has completed its drawing pass. A few reasons to do this might be creating a blur effect, adding a lighting effect, or changing how colors and pixels look.

Basic post processors

To create and use a post processor you just need to implement a class that implements PostProcessor, which has one method PostProcessor.process. Set the out canvas parameter to the final result, using the image pixel data.

Click to read more about ImageData on MDN.

For example:

// simple way to grayscale, a faster way would be to implement using a webgl fragment shader
class GrayscalePostProcessor implements PostProcessor {
  process(image: ImageData, out: CanvasRenderingContext2D) {
     for(let i = 0; i < (image.height * image.width), i+=4){
        // for pixel "i""
        const r = image.data[i+0]; //0-255
        const g = image.data[i+1]; //g
        const b = image.data[i+2]; //b
        image.data[i+3]; //a
        const result = Math.floor((r + g + b) / 3.0) | 0; // only valid on 0-255 integers `| 0` forces int
        image.data[i+0] = result;
        image.data[i+1] = result;
        image.data[i+2] = result;
     }
     // finish processing and write result
     out.putImageData(image, 0, 0);
  }
}

Color Blind Corrector Post Processor

Choosing colors that are friendly to players with color blindness is an important consideration when making a game.

There is a significant portion of the population that has some form of color blindness, and choosing bad colors can make your game unplayable. We have built a post processors that can shift your colors into as more visible range for the 3 most common types of color blindness.

This post processor can correct colors, and simulate color blindness.

It is possible to use this on every game, but the game's performance will suffer measurably. It's better to use it as a helpful tool while developing your game.

Remember, the best practice is to design with color blindness in mind.

Example:

const game = new ex.Engine();

const colorBlindPostProcessor = new ex.ColorBlindCorrector(game, false, ColorBlindness.Protanope);

// post processors evaluate left to right
game.postProcessors.push(colorBlindPostProcessor);
game.start();

Hierarchy

  • PostProcessor

Implemented by

Index

Methods

Methods

process

  • process(image: ImageData, out: CanvasRenderingContext2D): void