-
Notifications
You must be signed in to change notification settings - Fork 7.1k
/
Gradient.js
206 lines (176 loc) · 6.28 KB
/
Gradient.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
/**
* @author Richard Davey <rich@phaser.io>
* @copyright 2013-2024 Phaser Studio Inc.
* @license {@link https://opensource.org/licenses/MIT|MIT License}
*/
var Class = require('../utils/Class');
var Controller = require('./Controller');
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
* @memberof Phaser.FX
* @constructor
* @since 3.60.0
*
* @param {Phaser.GameObjects.GameObject} gameObject - A reference to the Game Object that has this fx.
* @param {number} [color1=0xff0000] - The first gradient color, given as a number value.
* @param {number} [color2=0x00ff00] - The second gradient color, given as a number value.
* @param {number} [alpha=0.2] - The alpha value of the gradient effect.
* @param {number} [fromX=0] - The horizontal position the gradient will start from. This value is normalized, between 0 and 1, and is not in pixels.
* @param {number} [fromY=0] - The vertical position the gradient will start from. This value is normalized, between 0 and 1, and is not in pixels.
* @param {number} [toX=0] - The horizontal position the gradient will end at. This value is normalized, between 0 and 1, and is not in pixels.
* @param {number} [toY=1] - The vertical position the gradient will end at. This value is normalized, between 0 and 1, and is not in pixels.
* @param {number} [size=0] - 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 higher for a more retro chunky effect.
*/
var Gradient = new Class({
Extends: Controller,
initialize:
function Gradient (gameObject, color1, color2, alpha, fromX, fromY, toX, toY, size)
{
if (alpha === undefined) { alpha = 0.2; }
if (fromX === undefined) { fromX = 0; }
if (fromY === undefined) { fromY = 0; }
if (toX === undefined) { toX = 0; }
if (toY === undefined) { toY = 1; }
if (size === undefined) { size = 0; }
Controller.call(this, FX_CONST.GRADIENT, gameObject);
/**
* The alpha value of the gradient effect.
*
* @name Phaser.FX.Gradient#alpha
* @type {number}
* @since 3.60.0
*/
this.alpha = alpha;
/**
* 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.FX.Gradient#size
* @type {number}
* @since 3.60.0
*/
this.size = size;
/**
* The horizontal position the gradient will start from. This value is normalized, between 0 and 1 and is not in pixels.
*
* @name Phaser.FX.Gradient#fromX
* @type {number}
* @since 3.60.0
*/
this.fromX = fromX;
/**
* The vertical position the gradient will start from. This value is normalized, between 0 and 1 and is not in pixels.
*
* @name Phaser.FX.Gradient#fromY
* @type {number}
* @since 3.60.0
*/
this.fromY = fromY;
/**
* The horizontal position the gradient will end. This value is normalized, between 0 and 1 and is not in pixels.
*
* @name Phaser.FX.Gradient#toX
* @type {number}
* @since 3.60.0
*/
this.toX = toX;
/**
* The vertical position the gradient will end. This value is normalized, between 0 and 1 and is not in pixels.
*
* @name Phaser.FX.Gradient#toY
* @type {number}
* @since 3.60.0
*/
this.toY = toY;
/**
* The internal gl color array for the starting color.
*
* @name Phaser.FX.Gradient#glcolor1
* @type {number[]}
* @since 3.60.0
*/
this.glcolor1 = [ 255, 0, 0 ];
/**
* The internal gl color array for the ending color.
*
* @name Phaser.FX.Gradient#glcolor2
* @type {number[]}
* @since 3.60.0
*/
this.glcolor2 = [ 0, 255, 0 ];
if (color1 !== undefined && color1 !== null)
{
this.color1 = color1;
}
if (color2 !== undefined && color2 !== null)
{
this.color2 = color2;
}
},
/**
* The first gradient color, given as a number value.
*
* @name Phaser.FX.Gradient#color1
* @type {number}
* @since 3.60.0
*/
color1: {
get: function ()
{
var color = this.glcolor1;
return (((color[0]) << 16) + ((color[1]) << 8) + (color[2] | 0));
},
set: function (value)
{
var color = this.glcolor1;
color[0] = ((value >> 16) & 0xFF);
color[1] = ((value >> 8) & 0xFF);
color[2] = (value & 0xFF);
}
},
/**
* The second gradient color, given as a number value.
*
* @name Phaser.FX.Gradient#color2
* @type {number}
* @since 3.60.0
*/
color2: {
get: function ()
{
var color = this.glcolor2;
return (((color[0]) << 16) + ((color[1]) << 8) + (color[2] | 0));
},
set: function (value)
{
var color = this.glcolor2;
color[0] = ((value >> 16) & 0xFF);
color[1] = ((value >> 8) & 0xFF);
color[2] = (value & 0xFF);
}
}
});
module.exports = Gradient;