Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-26 22:52:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

More FX documentation finished

Browse source
This commit is contained in:
Richard Davey 2023-03-21 17:57:27 +00:00
parent b89a10c99d
commit ed6287e9a9
17 changed files with 582 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/fx/ColorMatrix.js
View file

@ -10,6 +10,24 @@ var FX_CONST = require('./const');
/**
* @classdesc
* The ColorMatrix FX Controller.
*
* This FX controller manages the color matrix effect for a Game Object.
*
* The color matrix effect is a visual technique that involves manipulating the colors of an image
* or scene using a mathematical matrix. This process can adjust hue, saturation, brightness, and contrast,
* allowing developers to create various stylistic appearances or mood settings within the game.
* Common applications include simulating different lighting conditions, applying color filters,
* or achieving a specific visual style.
*
* A ColorMatrix effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.preFX.addColorMatrix();
* sprite.postFX.addColorMatrix();
* ```
*
* @class ColorMatrix
* @extends Phaser.Display.ColorMatrix

44
src/fx/Displacement.js
View file

@ -10,6 +10,24 @@ var FX_CONST = require('./const');
/**
* @classdesc
* The Displacement FX Controller.
*
* This FX controller manages the displacement effect for a Game Object.
*
* The displacement effect is a visual technique that alters the position of pixels in an image
* or texture based on the values of a displacement map. This effect is used to create the illusion
* of depth, surface irregularities, or distortion in otherwise flat elements. It can be applied to
* characters, objects, or backgrounds to enhance realism, convey movement, or achieve various
* stylistic appearances.
*
* A Displacement effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.preFX.addDisplacement();
* sprite.postFX.addDisplacement();
* ```
*
* @class Displacement
* @extends Phaser.FX.Controller
@ -18,9 +36,9 @@ var FX_CONST = require('./const');
* @since 3.60.0
*
* @param {Phaser.GameObjects.GameObject} gameObject - A reference to the Game Object that has this fx.
* @param {string} [key='__WHITE'] - The unique string-based key of the texture to use for displacement, which must exist in the Texture Manager.
* @param {number} [x=0.005] - The amount of horizontal displacement to apply.
* @param {number} [y=0.005] - The amount of vertical displacement to apply.
* @param {string} [texture='__WHITE'] - The unique string-based key of the texture to use for displacement, which must exist in the Texture Manager.
* @param {number} [x=0.005] - The amount of horizontal displacement to apply. A very small float number, such as 0.005.
* @param {number} [y=0.005] - The amount of vertical displacement to apply. A very small float number, such as 0.005.
*/
var Displacement = new Class({
@ -28,9 +46,9 @@ var Displacement = new Class({
initialize:
function Displacement (gameObject, displacementTexture, x, y)
function Displacement (gameObject, texture, x, y)
{
if (displacementTexture === undefined) { displacementTexture = '__WHITE'; }
if (texture === undefined) { texture = '__WHITE'; }
if (x === undefined) { x = 0.005; }
if (y === undefined) { y = 0.005; }
@ -63,9 +81,21 @@ var Displacement = new Class({
*/
this.glTexture;
this.setTexture(displacementTexture);
this.setTexture(texture);
},
/**
* Sets the Texture to be used for the displacement effect.
*
* You can only use a whole texture, not a frame from a texture atlas or sprite sheet.
*
* @method Phaser.GameObjects.Components.FX#setTexture
* @since 3.60.0
*
* @param {string} [texture='__WHITE'] - The unique string-based key of the texture to use for displacement, which must exist in the Texture Manager.
*
* @return {this} This FX Controller.
*/
setTexture: function (texture)
{
var phaserTexture = this.gameObject.scene.sys.textures.getFrame(texture);
@ -74,6 +104,8 @@ var Displacement = new Class({
{
this.glTexture = phaserTexture.glTexture;
}
return this;
}
});

8
src/fx/Glow.js
View file

@ -14,10 +14,10 @@ var FX_CONST = require('./const');
*
* This FX controller manages the glow effect for a Game Object.
*
* A glow effect allows you to apply a soft, blurred 'glow' around either the outside,
* inside, or both of a Game Object. The color and strength of the glow can be modified.
*
* You can modify most of its properties in real-time to adjust the visual effect.
* The glow effect is a visual technique that creates a soft, luminous halo around game objects,
* characters, or UI elements. This effect is used to emphasize importance, enhance visual appeal,
* or convey a sense of energy, magic, or otherworldly presence. The effect can also be set on
* the inside of the Game Object. The color and strength of the glow can be modified.
*
* A Glow effect is added to a Game Object via the FX component:
*

17
src/fx/Gradient.js
View file

@ -10,6 +10,23 @@ var FX_CONST = require('./const');
/**
* @classdesc
* The Gradient FX Controller.
*
* This FX controller manages the gradient effect for a Game Object.
*
* The gradient overlay effect is a visual technique where a smooth color transition is applied over Game Objects,
* such as sprites or UI components. This effect is used to enhance visual appeal, emphasize depth, or create
* stylistic and atmospheric variations. It can also be utilized to convey information, such as representing
* progress or health status through color changes.
*
* A Gradient effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.preFX.addGradient();
* sprite.postFX.addGradient();
* ```
*
* @class Gradient
* @extends Phaser.FX.Controller

17
src/fx/Pixelate.js
View file

@ -10,6 +10,23 @@ var FX_CONST = require('./const');
/**
* @classdesc
* The Pixelate FX Controller.
*
* This FX controller manages the pixelate effect for a Game Object.
*
* The pixelate effect is a visual technique that deliberately reduces the resolution or detail of an image,
* creating a blocky or mosaic appearance composed of large, visible pixels. This effect can be used for stylistic
* purposes, as a homage to retro gaming, or as a means to obscure certain elements within the game, such as
* during a transition or to censor specific content.
*
* A Pixelate effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.preFX.addPixelate();
* sprite.postFX.addPixelate();
* ```
*
* @class Pixelate
* @extends Phaser.FX.Controller

16
src/fx/Shadow.js
View file

@ -10,6 +10,22 @@ var FX_CONST = require('./const');
/**
* @classdesc
* The Shadow FX Controller.
*
* This FX controller manages the shadow effect for a Game Object.
*
* The shadow effect is a visual technique used to create the illusion of depth and realism by adding darker,
* offset silhouettes or shapes beneath game objects, characters, or environments. These simulated shadows
* help to enhance the visual appeal and immersion, making the 2D game world appear more dynamic and three-dimensional.
*
* A Shadow effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.preFX.addShadow();
* sprite.postFX.addShadow();
* ```
*
* @class Shadow
* @extends Phaser.FX.Controller

17
src/fx/Shine.js
View file

@ -10,6 +10,23 @@ var FX_CONST = require('./const');
/**
* @classdesc
* The Shine FX Controller.
*
* This FX controller manages the shift effect for a Game Object.
*
* The shine effect is a visual technique that simulates the appearance of reflective
* or glossy surfaces by passing a light beam across a Game Object. This effect is used to
* enhance visual appeal, emphasize certain features, and create a sense of depth or
* material properties.
*
* A Shine effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.preFX.addShine();
* sprite.postFX.addShine();
* ```
*
* @class Shine
* @extends Phaser.FX.Controller

16
src/fx/Vignette.js
View file

@ -10,6 +10,22 @@ var FX_CONST = require('./const');
/**
* @classdesc
* The Vignette FX Controller.
*
* This FX controller manages the vignette effect for a Game Object.
*
* The vignette effect is a visual technique where the edges of the screen, or a Game Object, gradually darken or blur,
* creating a frame-like appearance. This effect is used to draw the player's focus towards the central action or subject,
* enhance immersion, and provide a cinematic or artistic quality to the game's visuals.
*
* A Vignette effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.preFX.addVignette();
* sprite.postFX.addVignette();
* ```
*
* @class Vignette
* @extends Phaser.FX.Controller

50
src/gameobjects/components/FX.js
View file

@ -360,6 +360,11 @@ var FX = new Class({
/**
* Adds a Glow effect.
*
* The glow effect is a visual technique that creates a soft, luminous halo around game objects,
* characters, or UI elements. This effect is used to emphasize importance, enhance visual appeal,
* or convey a sense of energy, magic, or otherworldly presence. The effect can also be set on
* the inside of the Game Object. The color and strength of the glow can be modified.
*
* @method Phaser.GameObjects.Components.FX#addGlow
* @since 3.60.0
*
@ -380,6 +385,10 @@ var FX = new Class({
/**
* Adds a Shadow effect.
*
* The shadow effect is a visual technique used to create the illusion of depth and realism by adding darker,
* offset silhouettes or shapes beneath game objects, characters, or environments. These simulated shadows
* help to enhance the visual appeal and immersion, making the 2D game world appear more dynamic and three-dimensional.
*
* @method Phaser.GameObjects.Components.FX#addShadow
* @since 3.60.0
*
@ -401,6 +410,11 @@ var FX = new Class({
/**
* Adds a Pixelate effect.
*
* The pixelate effect is a visual technique that deliberately reduces the resolution or detail of an image,
* creating a blocky or mosaic appearance composed of large, visible pixels. This effect can be used for stylistic
* purposes, as a homage to retro gaming, or as a means to obscure certain elements within the game, such as
* during a transition or to censor specific content.
*
* @method Phaser.GameObjects.Components.FX#addPixelate
* @since 3.60.0
*
@ -416,6 +430,10 @@ var FX = new Class({
/**
* Adds a Vignette effect.
*
* The vignette effect is a visual technique where the edges of the screen, or a Game Object, gradually darken or blur,
* creating a frame-like appearance. This effect is used to draw the player's focus towards the central action or subject,
* enhance immersion, and provide a cinematic or artistic quality to the game's visuals.
*
* @method Phaser.GameObjects.Components.FX#addVignette
* @since 3.60.0
*
@ -434,6 +452,11 @@ var FX = new Class({
/**
* Adds a Shine effect.
*
* The shine effect is a visual technique that simulates the appearance of reflective
* or glossy surfaces by passing a light beam across a Game Object. This effect is used to
* enhance visual appeal, emphasize certain features, and create a sense of depth or
* material properties.
*
* @method Phaser.GameObjects.Components.FX#addShine
* @since 3.60.0
*
@ -477,6 +500,11 @@ var FX = new Class({
/**
* Adds a Gradient effect.
*
* The gradient overlay effect is a visual technique where a smooth color transition is applied over Game Objects,
* such as sprites or UI components. This effect is used to enhance visual appeal, emphasize depth, or create
* stylistic and atmospheric variations. It can also be utilized to convey information, such as representing
* progress or health status through color changes.
*
* @method Phaser.GameObjects.Components.FX#addGradient
* @since 3.60.0
*
@ -524,6 +552,12 @@ var FX = new Class({
/**
* Adds a ColorMatrix effect.
*
* The color matrix effect is a visual technique that involves manipulating the colors of an image
* or scene using a mathematical matrix. This process can adjust hue, saturation, brightness, and contrast,
* allowing developers to create various stylistic appearances or mood settings within the game.
* Common applications include simulating different lighting conditions, applying color filters,
* or achieving a specific visual style.
*
* @method Phaser.GameObjects.Components.FX#addColorMatrix
* @since 3.60.0
*
@ -582,18 +616,24 @@ var FX = new Class({
/**
* Adds a Displacement effect.
*
* The displacement effect is a visual technique that alters the position of pixels in an image
* or texture based on the values of a displacement map. This effect is used to create the illusion
* of depth, surface irregularities, or distortion in otherwise flat elements. It can be applied to
* characters, objects, or backgrounds to enhance realism, convey movement, or achieve various
* stylistic appearances.
*
* @method Phaser.GameObjects.Components.FX#addDisplacement
* @since 3.60.0
*
* @param {string} [key='__WHITE'] - The unique string-based key of the texture to use for displacement, which must exist in the Texture Manager.
* @param {number} [x=0.005] - The amount of horizontal displacement to apply.
* @param {number} [y=0.005] - The amount of vertical displacement to apply.
* @param {string} [texture='__WHITE'] - The unique string-based key of the texture to use for displacement, which must exist in the Texture Manager.
* @param {number} [x=0.005] - The amount of horizontal displacement to apply. A very small float number, such as 0.005.
* @param {number} [y=0.005] - The amount of vertical displacement to apply. A very small float number, such as 0.005.
*
* @return {Phaser.FX.Displacement} The Displacement FX Controller.
*/
addDisplacement: function (displacementTexture, x, y)
addDisplacement: function (texture, x, y)
{
return this.add(new Effects.Displacement(this.gameObject, displacementTexture, x, y));
return this.add(new Effects.Displacement(this.gameObject, texture, x, y));
},
/**

26
src/renderer/webgl/pipelines/fx/ColorMatrixFXPipeline.js
View file

@ -7,6 +7,32 @@
var Class = require('../../../../utils/Class');
var PostFXPipeline = require('../PostFXPipeline');
/**
* @classdesc
* The ColorMatrix FX Pipeline.
*
* The color matrix effect is a visual technique that involves manipulating the colors of an image
* or scene using a mathematical matrix. This process can adjust hue, saturation, brightness, and contrast,
* allowing developers to create various stylistic appearances or mood settings within the game.
* Common applications include simulating different lighting conditions, applying color filters,
* or achieving a specific visual style.
*
* A ColorMatrix effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.postFX.addColorMatrix();
* ```
*
* @class ColorMatrixFXPipeline
* @extends Phaser.Renderer.WebGL.WebGLPipeline
* @memberof Phaser.Renderer.WebGL.Pipelines.FX
* @constructor
* @since 3.60.0
*
* @param {Phaser.Game} game - A reference to the Phaser Game instance.
*/
var ColorMatrixFXPipeline = new Class({
Extends: PostFXPipeline,

49
src/renderer/webgl/pipelines/fx/DisplacementFXPipeline.js
View file

@ -8,6 +8,32 @@ var Class = require('../../../../utils/Class');
var DisplacementFrag = require('../../shaders/FXDisplacement-frag.js');
var PostFXPipeline = require('../PostFXPipeline');
/**
* @classdesc
* The Displacement FX Pipeline.
*
* The displacement effect is a visual technique that alters the position of pixels in an image
* or texture based on the values of a displacement map. This effect is used to create the illusion
* of depth, surface irregularities, or distortion in otherwise flat elements. It can be applied to
* characters, objects, or backgrounds to enhance realism, convey movement, or achieve various
* stylistic appearances.
*
* A Displacement effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.postFX.addDisplacement();
* ```
*
* @class DisplacementFXPipeline
* @extends Phaser.Renderer.WebGL.WebGLPipeline
* @memberof Phaser.Renderer.WebGL.Pipelines.FX
* @constructor
* @since 3.60.0
*
* @param {Phaser.Game} game - A reference to the Phaser Game instance.
*/
var DisplacementFXPipeline = new Class({
Extends: PostFXPipeline,
@ -21,8 +47,31 @@ var DisplacementFXPipeline = new Class({
fragShader: DisplacementFrag
});
/**
* The amount of horizontal displacement to apply.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.DisplacementFXPipeline#x
* @type {number}
* @since 3.60.0
*/
this.x = 0.005;
/**
* The amount of vertical displacement to apply.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.DisplacementFXPipeline#y
* @type {number}
* @since 3.60.0
*/
this.y = 0.005;
/**
* The underlying WebGLTexture used for displacement.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.DisplacementFXPipeline#glTexture
* @type {WebGLTexture}
* @since 3.60.0
*/
this.glTexture;
},

8
src/renderer/webgl/pipelines/fx/GlowFXPipeline.js
View file

@ -14,10 +14,10 @@ var Utils = require('../../Utils');
* @classdesc
* The Glow FX Pipeline.
*
* A glow effect allows you to apply a soft, blurred 'glow' around either the outside,
* inside, or both of a Game Object. The color and strength of the glow can be modified.
*
* You can modify most of its properties in real-time to adjust the visual effect.
* The glow effect is a visual technique that creates a soft, luminous halo around game objects,
* characters, or UI elements. This effect is used to emphasize importance, enhance visual appeal,
* or convey a sense of energy, magic, or otherworldly presence. The effect can also be set on
* the inside of the Game Object. The color and strength of the glow can be modified.
*
* A Glow effect is added to a Game Object via the FX component:
*

90
src/renderer/webgl/pipelines/fx/GradientFXPipeline.js
View file

@ -8,6 +8,31 @@ var Class = require('../../../../utils/Class');
var GradientFrag = require('../../shaders/FXGradient-frag.js');
var PostFXPipeline = require('../PostFXPipeline');
/**
* @classdesc
* The Gradient FX Pipeline.
*
* The gradient overlay effect is a visual technique where a smooth color transition is applied over Game Objects,
* such as sprites or UI components. This effect is used to enhance visual appeal, emphasize depth, or create
* stylistic and atmospheric variations. It can also be utilized to convey information, such as representing
* progress or health status through color changes.
*
* A Gradient effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.postFX.addGradient();
* ```
*
* @class GradientFXPipeline
* @extends Phaser.Renderer.WebGL.WebGLPipeline
* @memberof Phaser.Renderer.WebGL.Pipelines.FX
* @constructor
* @since 3.60.0
*
* @param {Phaser.Game} game - A reference to the Phaser Game instance.
*/
var GradientFXPipeline = new Class({
Extends: PostFXPipeline,
@ -21,16 +46,79 @@ var GradientFXPipeline = new Class({
fragShader: GradientFrag
});
this.size = 0;
/**
* The alpha value of the gradient effect.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.GradientFXPipeline#alpha
* @type {number}
* @since 3.60.0
*/
this.alpha = 0.2;
/**
* Sets how many 'chunks' the gradient is divided in to, as spread over the
* entire height of the texture. Leave this at zero for a smooth gradient,
* or set to a higher number to split the gradient into that many sections, giving
* a more banded 'retro' effect.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.GradientFXPipeline#size
* @type {number}
* @since 3.60.0
*/
this.size = 0;
/**
* The horizontal position the gradient will start from. This value is noralized, between 0 and 1 and is not in pixels.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.GradientFXPipeline#fromX
* @type {number}
* @since 3.60.0
*/
this.fromX = 0;
/**
* The vertical position the gradient will start from. This value is noralized, between 0 and 1 and is not in pixels.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.GradientFXPipeline#fromY
* @type {number}
* @since 3.60.0
*/
this.fromY = 0;
/**
* The horizontal position the gradient will end. This value is noralized, between 0 and 1 and is not in pixels.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.GradientFXPipeline#toX
* @type {number}
* @since 3.60.0
*/
this.toX = 0;
/**
* The vertical position the gradient will end. This value is noralized, between 0 and 1 and is not in pixels.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.GradientFXPipeline#toY
* @type {number}
* @since 3.60.0
*/
this.toY = 1;
/**
* The internal gl color array for the starting color.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.GradientFXPipeline#glcolor1
* @type {number[]}
* @since 3.60.0
*/
this.glcolor1 = [ 255, 0, 0 ];
/**
* The internal gl color array for the ending color.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.GradientFXPipeline#glcolor2
* @type {number[]}
* @since 3.60.0
*/
this.glcolor2 = [ 0, 255, 0 ];
},

32
src/renderer/webgl/pipelines/fx/PixelateFXPipeline.js
View file

@ -8,6 +8,31 @@ var Class = require('../../../../utils/Class');
var PixelateFrag = require('../../shaders/FXPixelate-frag.js');
var PostFXPipeline = require('../PostFXPipeline');
/**
* @classdesc
* The Pixelate FX Pipeline.
*
* The pixelate effect is a visual technique that deliberately reduces the resolution or detail of an image,
* creating a blocky or mosaic appearance composed of large, visible pixels. This effect can be used for stylistic
* purposes, as a homage to retro gaming, or as a means to obscure certain elements within the game, such as
* during a transition or to censor specific content.
*
* A Pixelate effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.postFX.addPixelate();
* ```
*
* @class PixelateFXPipeline
* @extends Phaser.Renderer.WebGL.WebGLPipeline
* @memberof Phaser.Renderer.WebGL.Pipelines.FX
* @constructor
* @since 3.60.0
*
* @param {Phaser.Game} game - A reference to the Phaser Game instance.
*/
var PixelateFXPipeline = new Class({
Extends: PostFXPipeline,
@ -21,6 +46,13 @@ var PixelateFXPipeline = new Class({
fragShader: PixelateFrag
});
/**
* The amount of pixelation to apply.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.PixelateFXPipeline#amount
* @type {number}
* @since 3.60.0
*/
this.amount = 1;
},

85
src/renderer/webgl/pipelines/fx/ShadowFXPipeline.js
View file

@ -8,6 +8,30 @@ var Class = require('../../../../utils/Class');
var ShadowFrag = require('../../shaders/FXShadow-frag.js');
var PostFXPipeline = require('../PostFXPipeline');
/**
* @classdesc
* The Shadow FX Pipeline.
*
* The shadow effect is a visual technique used to create the illusion of depth and realism by adding darker,
* offset silhouettes or shapes beneath game objects, characters, or environments. These simulated shadows
* help to enhance the visual appeal and immersion, making the 2D game world appear more dynamic and three-dimensional.
*
* A Shadow effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.postFX.addShadow();
* ```
*
* @class ShadowFXPipeline
* @extends Phaser.Renderer.WebGL.WebGLPipeline
* @memberof Phaser.Renderer.WebGL.Pipelines.FX
* @constructor
* @since 3.60.0
*
* @param {Phaser.Game} game - A reference to the Phaser Game instance.
*/
var ShadowFXPipeline = new Class({
Extends: PostFXPipeline,
@ -21,12 +45,69 @@ var ShadowFXPipeline = new Class({
fragShader: ShadowFrag
});
/**
* The horizontal offset of the shadow effect.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.ShadowFXPipeline#x
* @type {number}
* @since 3.60.0
*/
this.x = 0;
this.y = 1;
/**
* The vertical offset of the shadow effect.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.ShadowFXPipeline#y
* @type {number}
* @since 3.60.0
*/
this.y = 0;
/**
* The amount of decay for the shadow effect.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.ShadowFXPipeline#decay
* @type {number}
* @since 3.60.0
*/
this.decay = 0.1;
this.power = 1.0;
/**
* The power of the shadow effect.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.ShadowFXPipeline#power
* @type {number}
* @since 3.60.0
*/
this.power = 1;
/**
* The internal gl color array.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.ShadowFXPipeline#glcolor
* @type {number[]}
* @since 3.60.0
*/
this.glcolor = [ 0, 0, 0, 1 ];
/**
* The number of samples that the shadow effect will run for.
*
* This should be an integer with a minimum value of 1 and a maximum of 12.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.ShadowFXPipeline#samples
* @type {number}
* @since 3.60.0
*/
this.samples = 6;
/**
* The intensity of the shadow effect.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.ShadowFXPipeline#intensity
* @type {number}
* @since 3.60.0
*/
this.intensity = 1;
},

56
src/renderer/webgl/pipelines/fx/ShineFXPipeline.js
View file

@ -8,6 +8,31 @@ var Class = require('../../../../utils/Class');
var ShineFrag = require('../../shaders/FXShine-frag.js');
var PostFXPipeline = require('../PostFXPipeline');
/**
* @classdesc
* The Shine FX Pipeline.
*
* The shine effect is a visual technique that simulates the appearance of reflective
* or glossy surfaces by passing a light beam across a Game Object. This effect is used to
* enhance visual appeal, emphasize certain features, and create a sense of depth or
* material properties.
*
* A Shine effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.postFX.addShine();
* ```
*
* @class ShineFXPipeline
* @extends Phaser.Renderer.WebGL.WebGLPipeline
* @memberof Phaser.Renderer.WebGL.Pipelines.FX
* @constructor
* @since 3.60.0
*
* @param {Phaser.Game} game - A reference to the Phaser Game instance.
*/
var ShineFXPipeline = new Class({
Extends: PostFXPipeline,
@ -21,9 +46,40 @@ var ShineFXPipeline = new Class({
fragShader: ShineFrag
});
/**
* The speed of the Shine effect.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.ShineFXPipeline#speed
* @type {number}
* @since 3.60.0
*/
this.speed = 0.5;
/**
* The line width of the Shine effect.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.ShineFXPipeline#lineWidth
* @type {number}
* @since 3.60.0
*/
this.lineWidth = 0.5;
/**
* The gradient of the Shine effect.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.ShineFXPipeline#gradient
* @type {number}
* @since 3.60.0
*/
this.gradient = 3;
/**
* Does this Shine effect reveal or get added to its target?
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.ShineFXPipeline#reveal
* @type {boolean}
* @since 3.60.0
*/
this.reveal = false;
},

55
src/renderer/webgl/pipelines/fx/VignetteFXPipeline.js
View file

@ -8,6 +8,30 @@ var Class = require('../../../../utils/Class');
var VignetteFrag = require('../../shaders/FXVignette-frag.js');
var PostFXPipeline = require('../PostFXPipeline');
/**
* @classdesc
* The Vignette FX Pipeline.
*
* The vignette effect is a visual technique where the edges of the screen, or a Game Object, gradually darken or blur,
* creating a frame-like appearance. This effect is used to draw the player's focus towards the central action or subject,
* enhance immersion, and provide a cinematic or artistic quality to the game's visuals.
*
* A Vignette effect is added to a Game Object via the FX component:
*
* ```js
* const sprite = this.add.sprite();
*
* sprite.postFX.addVignette();
* ```
*
* @class VignetteFXPipeline
* @extends Phaser.Renderer.WebGL.WebGLPipeline
* @memberof Phaser.Renderer.WebGL.Pipelines.FX
* @constructor
* @since 3.60.0
*
* @param {Phaser.Game} game - A reference to the Phaser Game instance.
*/
var VignetteFXPipeline = new Class({
Extends: PostFXPipeline,
@ -21,9 +45,40 @@ var VignetteFXPipeline = new Class({
fragShader: VignetteFrag
});
/**
* The horizontal offset of the vignette effect. This value is normalized to the range 0 to 1.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.VignetteFXPipeline#x
* @type {number}
* @since 3.60.0
*/
this.x = 0.5;
/**
* The vertical offset of the vignette effect. This value is normalized to the range 0 to 1.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.VignetteFXPipeline#y
* @type {number}
* @since 3.60.0
*/
this.y = 0.5;
/**
* The radius of the vignette effect. This value is normalized to the range 0 to 1.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.VignetteFXPipeline#radius
* @type {number}
* @since 3.60.0
*/
this.radius = 0.5;
/**
* The strength of the vignette effect.
*
* @name Phaser.Renderer.WebGL.Pipelines.FX.VignetteFXPipeline#strength
* @type {number}
* @since 3.60.0
*/
this.strength = 0.5;
},