Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-30 08:31:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added Vignette and BaseFX class

Browse source
This commit is contained in:
Richard Davey 2023-02-13 21:21:18 +00:00
parent 532d5a9375
commit ed1f79e57e
12 changed files with 202 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,9 +4,10 @@
* @license {@link https://opensource.org/licenses/MIT|MIT License}
*/
var Glow = require('../fx/Glow');
var Shadow = require('../fx/Shadow');
var Pixelate = require('../fx/Pixelate');
var Effects = require('../fx/');
// var Shadow = require('../fx/Shadow');
// var Pixelate = require('../fx/Pixelate');
// var Vignette = require('../fx/Vignette');
/**
* Provides methods used for setting the FX values of a Game Object.
@ -151,7 +152,7 @@ var FX = {
addGlowFX: function ()
{
var fx = new Glow(this);
var fx = new Effects.Glow(this);
this.fx.push(fx);
@ -160,7 +161,7 @@ var FX = {
addShadowFX: function ()
{
var fx = new Shadow(this);
var fx = new Effects.Shadow(this);
this.fx.push(fx);
@ -169,7 +170,16 @@ var FX = {
addPixelateFX: function ()
{
var fx = new Pixelate(this);
var fx = new Effects.Pixelate(this);
this.fx.push(fx);
return fx;
},
addVignetteFX: function ()
{
var fx = new Effects.Vignette(this);
this.fx.push(fx);

40
src/gameobjects/fx/BaseFX.js Normal file
View file

@ -0,0 +1,40 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2013-2023 Photon Storm Ltd.
* @license {@link https://opensource.org/licenses/MIT|MIT License}
*/
var Class = require('../../utils/Class');
/**
* @classdesc
*
* @class BaseFX
* @memberof Phaser.GameObjects.FX
* @constructor
* @since 3.60.0
*
* @param {number} type - The FX Type constant.
* @param {Phaser.GameObjects.GameObject} gameObject - A reference to the Game Object that has this fx.
*/
var BaseFX = new Class({
initialize:
function BaseFX (type, gameObject)
{
this.type = type;
this.gameObject = gameObject;
this.active = true;
},
destroy: function ()
{
this.gameObject = null;
}
});
module.exports = BaseFX;

15
src/gameobjects/fx/Glow.js
View file

@ -4,6 +4,7 @@
* @license {@link https://opensource.org/licenses/MIT|MIT License}
*/
var BaseFX = require('./BaseFX');
var Class = require('../../utils/Class');
var FX_CONST = require('./const');
@ -11,6 +12,7 @@ var FX_CONST = require('./const');
* @classdesc
*
* @class Glow
* @extends Phaser.GameObjects.FX.BaseFX
* @memberof Phaser.GameObjects.FX
* @constructor
* @since 3.60.0
@ -19,15 +21,13 @@ var FX_CONST = require('./const');
*/
var Glow = new Class({
Extends: BaseFX,
initialize:
function Glow (gameObject)
{
this.type = FX_CONST.GLOW;
this.gameObject = gameObject;
this.active = true;
BaseFX.call(this, FX_CONST.GLOW, gameObject);
this.distance = 16;
this.outerStrength = 4;
@ -61,11 +61,6 @@ var Glow = new Class({
color[2] = (value & 0xFF) / 255;
}
},
destroy: function ()
{
this.gameObject = null;
}
});

15
src/gameobjects/fx/Pixelate.js
View file

@ -4,6 +4,7 @@
* @license {@link https://opensource.org/licenses/MIT|MIT License}
*/
var BaseFX = require('./BaseFX');
var Class = require('../../utils/Class');
var FX_CONST = require('./const');
@ -11,6 +12,7 @@ var FX_CONST = require('./const');
* @classdesc
*
* @class Pixelate
* @extends Phaser.GameObjects.FX.BaseFX
* @memberof Phaser.GameObjects.FX
* @constructor
* @since 3.60.0
@ -19,22 +21,15 @@ var FX_CONST = require('./const');
*/
var Pixelate = new Class({
Extends: BaseFX,
initialize:
function Pixelate (gameObject)
{
this.type = FX_CONST.PIXELATE;
this.gameObject = gameObject;
this.active = true;
BaseFX.call(this, FX_CONST.PIXELATE, gameObject);
this.amount = 1;
},
destroy: function ()
{
this.gameObject = null;
}
});

15
src/gameobjects/fx/Shadow.js
View file

@ -4,6 +4,7 @@
* @license {@link https://opensource.org/licenses/MIT|MIT License}
*/
var BaseFX = require('./BaseFX');
var Class = require('../../utils/Class');
var FX_CONST = require('./const');
@ -11,6 +12,7 @@ var FX_CONST = require('./const');
* @classdesc
*
* @class Shadow
* @extends Phaser.GameObjects.FX.BaseFX
* @memberof Phaser.GameObjects.FX
* @constructor
* @since 3.60.0
@ -19,15 +21,13 @@ var FX_CONST = require('./const');
*/
var Shadow = new Class({
Extends: BaseFX,
initialize:
function Shadow (gameObject)
{
this.type = FX_CONST.SHADOW;
this.gameObject = gameObject;
this.active = true;
BaseFX.call(this, FX_CONST.SHADOW, gameObject);
this.x = 0;
this.y = 0;
@ -63,11 +63,6 @@ var Shadow = new Class({
color[2] = (value & 0xFF) / 255;
}
},
destroy: function ()
{
this.gameObject = null;
}
});

37
src/gameobjects/fx/Vignette.js Normal file
View file

@ -0,0 +1,37 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2013-2023 Photon Storm Ltd.
* @license {@link https://opensource.org/licenses/MIT|MIT License}
*/
var BaseFX = require('./BaseFX');
var Class = require('../../utils/Class');
var FX_CONST = require('./const');
/**
* @classdesc
*
* @class Vignette
* @extends Phaser.GameObjects.FX.BaseFX
* @memberof Phaser.GameObjects.FX
* @constructor
* @since 3.60.0
*
* @param {Phaser.GameObjects.GameObject} gameObject - A reference to the Game Object that has this fx.
*/
var Vignette = new Class({
Extends: BaseFX,
initialize:
function Vignette (gameObject)
{
BaseFX.call(this, FX_CONST.VIGNETTE, gameObject);
this.strength = 3;
}
});
module.exports = Vignette;

12
src/gameobjects/fx/const.js
View file

@ -34,7 +34,17 @@ var FX_CONST = {
* @const
* @since 3.60.0
*/
PIXELATE: 6
PIXELATE: 6,
/**
* The Vignette FX.
*
* @name Phaser.GameObjects.FX.VIGNETTE
* @type {number}
* @const
* @since 3.60.0
*/
VIGNETTE: 7
};

19
src/gameobjects/fx/index.js Normal file
View file

@ -0,0 +1,19 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2013-2023 Photon Storm Ltd.
* @license {@link https://opensource.org/licenses/MIT|MIT License}
*/
/**
* @namespace Phaser.GameObjects.FX
*/
module.exports = {
BaseFX: require('./BaseFX'),
Glow: require('./Glow'),
Pixelate: require('./Pixelate'),
Shadow: require('./Shadow'),
Vignette: require('./Vignette')
};

2
src/gameobjects/index.js
View file

@ -126,6 +126,8 @@ var GameObjects = {
// WebGL only Game Objects
if (typeof WEBGL_RENDERER)
{
GameObjects.FX = require('./fx');
GameObjects.Shader = require('./shader/Shader');
GameObjects.Mesh = require('./mesh/Mesh');
GameObjects.NineSlice = require('./nineslice/NineSlice');

43
src/renderer/webgl/pipelines/FXPipeline.js
View file

@ -11,6 +11,7 @@ var PixelateFrag = require('../shaders/FXPixelate-frag.js');
var PreFXPipeline = require('./PreFXPipeline');
var ShadowFrag = require('../shaders/FXShadow-frag.js');
var SingleQuadVS = require('../shaders/Single-vert.js');
var VignetteFrag = require('../shaders/FXVignette-frag.js');
/**
* @classdesc
@ -34,7 +35,8 @@ var FXPipeline = new Class({
config.shaders = [
{ name: 'Glow', fragShader: GlowFrag, vertShader: SingleQuadVS },
{ name: 'Shadow', fragShader: ShadowFrag, vertShader: SingleQuadVS },
{ name: 'Pixelate', fragShader: PixelateFrag, vertShader: SingleQuadVS }
{ name: 'Pixelate', fragShader: PixelateFrag, vertShader: SingleQuadVS },
{ name: 'Vignette', fragShader: VignetteFrag, vertShader: SingleQuadVS }
];
PreFXPipeline.call(this, config);
@ -44,13 +46,6 @@ var FXPipeline = new Class({
this.swap;
},
boot: function ()
{
PreFXPipeline.prototype.boot.call(this);
console.log(this.shaders);
},
onDraw: function (target1, target2, target3)
{
this.source = target1;
@ -71,17 +66,22 @@ var FXPipeline = new Class({
switch (fx.type)
{
case FX_CONST.GLOW:
this.onGlowDraw(fx);
this.glow(fx);
drawn = true;
break;
case FX_CONST.SHADOW:
this.onShadowDraw(fx);
this.shadow(fx);
drawn = true;
break;
case FX_CONST.PIXELATE:
this.onPixelateDraw(fx);
this.pixelate(fx);
drawn = true;
break;
case FX_CONST.VIGNETTE:
this.vignette(fx);
drawn = true;
break;
}
@ -97,7 +97,7 @@ var FXPipeline = new Class({
this.drawToGame(this.source);
},
onGlowDraw: function (config)
glow: function (config)
{
var source = this.source;
var target = this.target;
@ -117,7 +117,7 @@ var FXPipeline = new Class({
this.target = source;
},
onShadowDraw: function (config)
shadow: function (config)
{
var source = this.source;
var target = this.target;
@ -137,7 +137,7 @@ var FXPipeline = new Class({
this.target = source;
},
onPixelateDraw: function (config)
pixelate: function (config)
{
var source = this.source;
var target = this.target;
@ -153,6 +153,21 @@ var FXPipeline = new Class({
this.target = source;
},
vignette: function (config)
{
var source = this.source;
var target = this.target;
this.setShader(this.shaders[FX_CONST.VIGNETTE]);
this.set1f('strength', config.strength);
this.copy(source, target);
this.source = target;
this.target = source;
},
// onBloomDraw: function (target1, target2, target3)
// {
// this.manager.copyFrame(target1, target3);

18
src/renderer/webgl/shaders/FXVignette-frag.js Normal file
View file

@ -0,0 +1,18 @@
module.exports = [
'#define SHADER_NAME VIGNETTE_FS',
'',
'precision mediump float;',
'',
'uniform sampler2D uMainSampler;',
'uniform float strength;',
'',
'varying vec2 outTexCoord;',
'',
'void main()',
'{',
' vec2 uv = vec2(outTexCoord + vec2(-0.5, -0.5)) * 2.0;',
'',
' gl_FragColor = texture2D(uMainSampler, outTexCoord) - length(uv * strength);',
'}',
''
].join('\n');

15
src/renderer/webgl/shaders/src/FXVignette.frag Normal file
View file

@ -0,0 +1,15 @@
#define SHADER_NAME VIGNETTE_FS
precision mediump float;
uniform sampler2D uMainSampler;
uniform float strength;
varying vec2 outTexCoord;
void main()
{
vec2 uv = vec2(outTexCoord + vec2(-0.5, -0.5)) * 2.0;
gl_FragColor = texture2D(uMainSampler, outTexCoord) - length(uv * strength);
}