From 0b4a80c8672450c4f6cdc971ff26682094bfc0e8 Mon Sep 17 00:00:00 2001 From: eonarheim Date: Sat, 2 Jan 2016 21:45:11 -0600 Subject: [PATCH 1/4] Update post processing documentation --- src/engine/Engine.ts | 2 + src/engine/PostProcessing/IPostProcessor.ts | 64 +++++++++++++++++++++ 2 files changed, 66 insertions(+) diff --git a/src/engine/Engine.ts b/src/engine/Engine.ts index f181c1b15..5d936444e 100644 --- a/src/engine/Engine.ts +++ b/src/engine/Engine.ts @@ -80,6 +80,7 @@ * - [[Sound|Working with Sounds]] * - [[SpriteSheet|Working with SpriteSheets]] * - [[Animation|Working with Animations]] + * - [[TileMap|Working with TileMaps]] * * ## Effects and Particles * @@ -88,6 +89,7 @@ * * - [[Effects|Sprite Effects]] * - [[ParticleEmitter|Particle Emitters]] + * - [[IPostProcessor|Post Processors]] * * ## Math * diff --git a/src/engine/PostProcessing/IPostProcessor.ts b/src/engine/PostProcessing/IPostProcessor.ts index ce6f73afa..6e3b07ed3 100644 --- a/src/engine/PostProcessing/IPostProcessor.ts +++ b/src/engine/PostProcessing/IPostProcessor.ts @@ -1,4 +1,68 @@  module ex { + + /** + * Post Processors + * + * 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, or lighting effects, or maybe changing how colors and pixels look. + * + * ## Basic post procesors + * + * To create and use a post processor you just need to implement a class that implements [[IPostProcessor]], which has one method + * [[IPostProcessor.process]]. Set the `out` canvas parameter to the final result, using the `image` pixel data. + * + * Click to read more about [[https://developer.mozilla.org/en-US/docs/Web/API/ImageData|ImageData]] on MDN. + * + * For example: + * ```typescript + * // simple way to grayscale, a faster way would be to implement using a webgl fragment shader + * class GrayscalePostProcessor implements IPostProcessor { + * process(image: ImageData, out: CanvasRenderingContext2D) { + * for(var i = 0; i < (image.height * image.width), i+=4){ + * // for pixel "i"" + * var r = image.data[i+0]; //0-255 + * var g = image.data[i+1]; //g + * var b = image.data[i+2]; //b + * image.data[i+3]; //a + * var 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 + * + * One common thing to look out for when building games is that the colors you choose are color blind friendly. 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 procesors that can shift your colors into as more visible range for the 3 most common types of color blindness. + * + * - [[ColorBlindness.Protanope|Protanope]] + * - [[ColorBlindness.Deuteranope|Protanope]] + * - [[ColorBlindess.Tritanope|Protanope]] + * + * This post processor can correct colors, and simulate color blindness. It is possible to use this on every game, but you will take a + * performance hit, remember it is best practice to design with color blindness in mind. + * + * Example: + * ```typescript + * + * var game = new Engine(); + * + * var colorBlindPostProcessor = new ColorBlindCorrector(game, false, ColorBlindness.Protanope); + * + * // post processors evaluate left to right + * game.postProcessors.push(colorBlindPostProcessor); + * game.start(); + * + * ``` + * + */ export interface IPostProcessor { process(image: ImageData, out: CanvasRenderingContext2D): void; } From 8121819dcbc5ce6db85998fdce87a34cf18fbd5b Mon Sep 17 00:00:00 2001 From: eonarheim Date: Sat, 2 Jan 2016 22:00:21 -0600 Subject: [PATCH 2/4] Update post processor documentation --- .../PostProcessing/ColorBlindCorrector.ts | 22 ++++++++++++++++++- src/engine/PostProcessing/IPostProcessor.ts | 11 +++++----- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/engine/PostProcessing/ColorBlindCorrector.ts b/src/engine/PostProcessing/ColorBlindCorrector.ts index fed24edb6..374143c3e 100644 --- a/src/engine/PostProcessing/ColorBlindCorrector.ts +++ b/src/engine/PostProcessing/ColorBlindCorrector.ts @@ -13,7 +13,27 @@ module ex { Tritanope } - // Color correction algorithm originally sourced from http://www.daltonize.org/ + + /** + * This post processor can correct colors, and simulate color blindness. It is possible to use this on every game, but you will take a + * performance hit, remember it is best practice to design with color blindness in mind. + * + * Color correction algorithm originally sourced from http://www.daltonize.org/ + * + * Example: + * ```typescript + * + * var game = new ex.Engine(); + * + * var colorBlindPostProcessor = new ex.ColorBlindCorrector(game, false, ColorBlindness.Protanope); + * + * // post processors evaluate left to right + * game.postProcessors.push(colorBlindPostProcessor); + * game.start(); + * + * ``` + * + */ export class ColorBlindCorrector implements IPostProcessor { private _vertexShader = diff --git a/src/engine/PostProcessing/IPostProcessor.ts b/src/engine/PostProcessing/IPostProcessor.ts index 6e3b07ed3..3e46c7973 100644 --- a/src/engine/PostProcessing/IPostProcessor.ts +++ b/src/engine/PostProcessing/IPostProcessor.ts @@ -40,11 +40,12 @@ * * One common thing to look out for when building games is that the colors you choose are color blind friendly. 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 procesors that can shift your colors into as more visible range for the 3 most common types of color blindness. + * a post procesors that can shift your colors into as more visible range for the 3 most common types of + * [[https://en.wikipedia.org/wiki/Color_blindness|color blindness]]. * * - [[ColorBlindness.Protanope|Protanope]] - * - [[ColorBlindness.Deuteranope|Protanope]] - * - [[ColorBlindess.Tritanope|Protanope]] + * - [[ColorBlindness.Deuteranope|Deuteranope]] + * - [[ColorBlindness.Tritanope|Tritanope]] * * This post processor can correct colors, and simulate color blindness. It is possible to use this on every game, but you will take a * performance hit, remember it is best practice to design with color blindness in mind. @@ -52,9 +53,9 @@ * Example: * ```typescript * - * var game = new Engine(); + * var game = new ex.Engine(); * - * var colorBlindPostProcessor = new ColorBlindCorrector(game, false, ColorBlindness.Protanope); + * var colorBlindPostProcessor = new ex.ColorBlindCorrector(game, false, ColorBlindness.Protanope); * * // post processors evaluate left to right * game.postProcessors.push(colorBlindPostProcessor); From ef97da8240fa1836f42fc0434cf66eb1d46a85f8 Mon Sep 17 00:00:00 2001 From: Josh Edeen Date: Sat, 2 Jan 2016 22:45:07 -0600 Subject: [PATCH 3/4] documentation cleanup --- src/engine/PostProcessing/ColorBlindCorrector.ts | 5 +++-- src/engine/PostProcessing/IPostProcessor.ts | 11 ++++++----- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/engine/PostProcessing/ColorBlindCorrector.ts b/src/engine/PostProcessing/ColorBlindCorrector.ts index 374143c3e..5c3e7478f 100644 --- a/src/engine/PostProcessing/ColorBlindCorrector.ts +++ b/src/engine/PostProcessing/ColorBlindCorrector.ts @@ -15,8 +15,9 @@ module ex { /** - * This post processor can correct colors, and simulate color blindness. It is possible to use this on every game, but you will take a - * performance hit, remember it is best practice to design with color blindness in mind. + * 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. * * Color correction algorithm originally sourced from http://www.daltonize.org/ * diff --git a/src/engine/PostProcessing/IPostProcessor.ts b/src/engine/PostProcessing/IPostProcessor.ts index 3e46c7973..6e89be6b9 100644 --- a/src/engine/PostProcessing/IPostProcessor.ts +++ b/src/engine/PostProcessing/IPostProcessor.ts @@ -4,7 +4,7 @@ * Post Processors * * 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, or lighting effects, or maybe changing how colors and pixels look. + * this might be creating a blur effect, adding a lighting effect, or changing how colors and pixels look. * * ## Basic post procesors * @@ -38,8 +38,8 @@ * * ## Color Blind Corrector Post Processor * - * One common thing to look out for when building games is that the colors you choose are color blind friendly. 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 + * 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 procesors that can shift your colors into as more visible range for the 3 most common types of * [[https://en.wikipedia.org/wiki/Color_blindness|color blindness]]. * @@ -47,8 +47,9 @@ * - [[ColorBlindness.Deuteranope|Deuteranope]] * - [[ColorBlindness.Tritanope|Tritanope]] * - * This post processor can correct colors, and simulate color blindness. It is possible to use this on every game, but you will take a - * performance hit, remember it is best practice to design with color blindness in mind. + * 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: * ```typescript From 7f901594aafa6c564f93fe893fd112a7800d6250 Mon Sep 17 00:00:00 2001 From: Josh Edeen Date: Sun, 3 Jan 2016 00:26:45 -0600 Subject: [PATCH 4/4] correcting line lengths --- src/engine/PostProcessing/ColorBlindCorrector.ts | 3 ++- src/engine/PostProcessing/IPostProcessor.ts | 8 +++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/engine/PostProcessing/ColorBlindCorrector.ts b/src/engine/PostProcessing/ColorBlindCorrector.ts index 5c3e7478f..b5a406993 100644 --- a/src/engine/PostProcessing/ColorBlindCorrector.ts +++ b/src/engine/PostProcessing/ColorBlindCorrector.ts @@ -15,7 +15,8 @@ module ex { /** - * This post processor can correct colors and simulate color blindness. It is possible to use this on every game, but the game's performance + * 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. * diff --git a/src/engine/PostProcessing/IPostProcessor.ts b/src/engine/PostProcessing/IPostProcessor.ts index 6e89be6b9..f3fa9aadf 100644 --- a/src/engine/PostProcessing/IPostProcessor.ts +++ b/src/engine/PostProcessing/IPostProcessor.ts @@ -38,8 +38,9 @@ * * ## 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 + * 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 procesors that can shift your colors into as more visible range for the 3 most common types of * [[https://en.wikipedia.org/wiki/Color_blindness|color blindness]]. * @@ -47,7 +48,8 @@ * - [[ColorBlindness.Deuteranope|Deuteranope]] * - [[ColorBlindness.Tritanope|Tritanope]] * - * This post processor can correct colors, and simulate color blindness. It is possible to use this on every game, but the game's performance + * 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. *