Skip to content

Commit 3d75325

Browse files
photonstormphotonstorm
committed
Added support for the Background Color component values in the WebGL Sprite Batch shader.
1 parent 91ee135 commit 3d75325

2 files changed

Lines changed: 66 additions & 21 deletions

File tree

‎src/components/Color.js‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,20 @@ Phaser.Component.Color = function (gameObject)
2727
this._glTint = { topLeft: 16777215, topRight: 16777215, bottomLeft: 16777215, bottomRight: 16777215 };
2828
this._hasTint = false;
2929

30+
// Between 0 and 255
3031
this._r = 0;
3132
this._g = 0;
3233
this._b = 0;
34+
35+
// Between 0 and 1
3336
this._a = 1;
37+
38+
// String version of RGBA
3439
this._rgba = '';
40+
41+
// 32-bit version of RGBA
42+
this._glBg = this.getColor32(0, 0, 0, 0);
43+
3544
this._hasBackground = false;
3645
};
3746

@@ -105,7 +114,11 @@ Phaser.Component.Color.prototype = {
105114
if (this._hasBackground)
106115
{
107116
this._rgba = 'rgba(' + this._r + ',' + this._g + ',' + this._b + ',' + this._a + ')';
117+
this._glBg = this.getColor32(this._r, this._g, this._b, this._a);
108118
}
119+
120+
// Tint mults
121+
109122
},
110123

111124
setDirty: function ()
@@ -118,6 +131,18 @@ Phaser.Component.Color.prototype = {
118131
this._dirty = true;
119132
},
120133

134+
getColor: function (value)
135+
{
136+
return (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16);
137+
},
138+
139+
getColor32: function (r, g, b, a)
140+
{
141+
a *= 255;
142+
143+
return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0;
144+
},
145+
121146
destroy: function ()
122147
{
123148
this.gameObject = null;
@@ -141,8 +166,7 @@ Object.defineProperties(Phaser.Component.Color.prototype, {
141166
set: function (value)
142167
{
143168
this._tint.topLeft = value;
144-
// this._glTint.topLeft = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16) + (this._worldAlpha * 255 << 24);
145-
this._glTint.topLeft = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16);
169+
this._glTint.topLeft = this.getColor(value);
146170
this.setDirty();
147171
}
148172

@@ -160,8 +184,7 @@ Object.defineProperties(Phaser.Component.Color.prototype, {
160184
set: function (value)
161185
{
162186
this._tint.topRight = value;
163-
// this._glTint.topRight = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16) + (this._worldAlpha * 255 << 24);
164-
this._glTint.topRight = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16);
187+
this._glTint.topRight = this.getColor(value);
165188
this.setDirty();
166189
}
167190

@@ -179,8 +202,7 @@ Object.defineProperties(Phaser.Component.Color.prototype, {
179202
set: function (value)
180203
{
181204
this._tint.bottomLeft = value;
182-
this._glTint.bottomLeft = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16);
183-
// this._glTint.bottomLeft = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16) + (this._worldAlpha * 255 << 24);
205+
this._glTint.bottomLeft = this.getColor(value);
184206
this.setDirty();
185207
}
186208

@@ -198,8 +220,7 @@ Object.defineProperties(Phaser.Component.Color.prototype, {
198220
set: function (value)
199221
{
200222
this._tint.bottomRight = value;
201-
this._glTint.bottomRight = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16);
202-
// this._glTint.bottomRight = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16) + (this._worldAlpha * 255 << 24);
223+
this._glTint.bottomRight = this.getColor(value);
203224
this.setDirty();
204225
}
205226

‎src/renderer/webgl/BatchManager.js‎

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,11 @@ Phaser.Renderer.WebGL.BatchManager = function (renderer)
2727
//
2828
// Position (vec2) = 4 * 2 bytes
2929
// UV (vec2) = 4 * 2 bytes
30-
// Color (float) = 4 bytes
30+
// Tint Color (float) = 4 bytes
31+
// BG Color (float) = 4 bytes
3132
// Texture Index (float) OR tint (float) = 4 bytes
3233

33-
this.vertSize = (4 * 2) + (4 * 2) + (4);
34+
this.vertSize = (4 * 2) + (4 * 2) + (4) + (4);
3435

3536
var numVerts = this.vertSize * this.maxBatchSize * 4;
3637

@@ -92,19 +93,22 @@ Phaser.Renderer.WebGL.BatchManager = function (renderer)
9293
this.vertexSrc = [
9394
'attribute vec2 aVertexPosition;',
9495
'attribute vec2 aTextureCoord;',
95-
'attribute vec4 aColor;',
96+
'attribute vec4 aTintColor;',
97+
'attribute vec4 aBgColor;',
9698

9799
'uniform vec2 projectionVector;',
98100

99101
'varying vec2 vTextureCoord;',
100-
'varying vec4 vColor;',
102+
'varying vec4 vTintColor;',
103+
'varying vec4 vBgColor;',
101104

102105
'const vec2 center = vec2(-1.0, 1.0);',
103106

104107
'void main(void) {',
105108
' gl_Position = vec4((aVertexPosition / projectionVector) + center, 0.0, 1.0);',
106109
' vTextureCoord = aTextureCoord;', // pass the texture coordinate to the fragment shader, the GPU will interpolate the points
107-
' vColor = vec4(aColor.rgb * aColor.a, aColor.a);',
110+
' vTintColor = vec4(aTintColor.rgb * aTintColor.a, aTintColor.a);',
111+
' vBgColor = aBgColor;',
108112
'}'
109113
];
110114

@@ -115,14 +119,20 @@ Phaser.Renderer.WebGL.BatchManager = function (renderer)
115119
*/
116120
this.fragmentSrc = [
117121
'precision mediump float;',
122+
118123
'varying vec2 vTextureCoord;', // the texture coords passed in from the vertex shader
119-
'varying vec4 vColor;', // the color value passed in from the vertex shader (texture color + alpha + tint)
124+
'varying vec4 vTintColor;', // the color value passed in from the vertex shader (texture color + alpha + tint)
125+
'varying vec4 vBgColor;', // the bg color value passed in from the vertex shader
120126
'varying float vTextureIndex;',
127+
121128
'uniform sampler2D uSampler;', // our texture
129+
122130
'const vec4 PINK = vec4(1.0, 0.0, 1.0, 1.0);',
131+
123132
'void main(void) {',
124-
' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', // get the color from the texture
125-
// ' gl_FragColor = PINK;', // debugging
133+
' vec4 pixel = texture2D(uSampler, vTextureCoord) * vTintColor;', // get the color from the texture
134+
' if (pixel.a == 0.0) pixel = vBgColor;', // if texture alpha is zero, use the bg color
135+
' gl_FragColor = pixel;',
126136
'}'
127137
];
128138

@@ -136,7 +146,10 @@ Phaser.Renderer.WebGL.BatchManager = function (renderer)
136146
// this.offsetVector;
137147

138148
// @type {GLint}
139-
this.colorAttribute;
149+
this.aTintColor;
150+
151+
// @type {GLint}
152+
this.aBgColor;
140153

141154
// @type {GLint}
142155
this.aTextureIndex;
@@ -234,8 +247,9 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
234247
// Get and store the attributes
235248
this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
236249
this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord');
237-
this.colorAttribute = gl.getAttribLocation(program, 'aColor');
238250
// this.aTextureIndex = gl.getAttribLocation(program, 'aTextureIndex');
251+
this.aTintColor = gl.getAttribLocation(program, 'aTintColor');
252+
this.aBgColor = gl.getAttribLocation(program, 'aBgColor');
239253

240254
// Get and store the uniforms for the shader
241255
// this part is different for multi-textures
@@ -247,9 +261,12 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
247261
// texture coordinate
248262
gl.enableVertexAttribArray(1);
249263

250-
// color attribute
264+
// tint color attribute
251265
gl.enableVertexAttribArray(2);
252266

267+
// bg color attribute
268+
gl.enableVertexAttribArray(3);
269+
253270
// texture index
254271
// gl.enableVertexAttribArray(3);
255272

@@ -470,6 +487,7 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
470487
positions[i++] = uvs.x0;
471488
positions[i++] = uvs.y0;
472489
colors[i++] = sprite.color._glTint.topLeft + (sprite.color.worldAlpha * 255 << 24);
490+
colors[i++] = sprite.color._glBg;
473491
// positions[i++] = textureIndex;
474492

475493
// Top Right vert (xy, uv, color)
@@ -478,6 +496,7 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
478496
positions[i++] = uvs.x1;
479497
positions[i++] = uvs.y1;
480498
colors[i++] = sprite.color._glTint.topRight + (sprite.color.worldAlpha * 255 << 24);
499+
colors[i++] = sprite.color._glBg;
481500
// positions[i++] = textureIndex;
482501

483502
// Bottom Right vert (xy, uv, color)
@@ -486,6 +505,7 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
486505
positions[i++] = uvs.x2;
487506
positions[i++] = uvs.y2;
488507
colors[i++] = sprite.color._glTint.bottomRight + (sprite.color.worldAlpha * 255 << 24);
508+
colors[i++] = sprite.color._glBg;
489509
// positions[i++] = textureIndex;
490510

491511
// Bottom Left vert (xy, uv, color)
@@ -494,6 +514,7 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
494514
positions[i++] = uvs.x3;
495515
positions[i++] = uvs.y3;
496516
colors[i++] = sprite.color._glTint.bottomLeft + (sprite.color.worldAlpha * 255 << 24);
517+
colors[i++] = sprite.color._glBg;
497518
// positions[i++] = textureIndex;
498519

499520
this.sprites[this.currentBatchSize++] = sprite;
@@ -530,8 +551,11 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
530551
// set the texture coordinate
531552
gl.vertexAttribPointer(this.aTextureCoord, 2, gl.FLOAT, false, this.vertSize, 8);
532553

533-
// color attributes will be interpreted as unsigned bytes and normalized
534-
gl.vertexAttribPointer(this.colorAttribute, 4, gl.UNSIGNED_BYTE, true, this.vertSize, 16);
554+
// tint color attributes will be interpreted as unsigned bytes and normalized
555+
gl.vertexAttribPointer(this.aTintColor, 4, gl.UNSIGNED_BYTE, true, this.vertSize, 16);
556+
557+
// bg color attributes will be interpreted as unsigned bytes and normalized
558+
gl.vertexAttribPointer(this.aBgColor, 4, gl.UNSIGNED_BYTE, true, this.vertSize, 20);
535559

536560
// texture index
537561
// gl.vertexAttribPointer(this.aTextureIndex, 2, gl.FLOAT, false, this.vertSize, 20);

0 commit comments

Comments
 (0)