Skip to content

Commit 26ac8f5

Browse files
photonstormphotonstorm
committed
Moved renderer consts to their own files.
Added CanvasFeatures device tests. Updated Canvas renderer.
1 parent 6615e8b commit 26ac8f5

8 files changed

Lines changed: 152 additions & 70 deletions

File tree

‎v3/src/const.js‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -21,36 +21,6 @@ var CONST = {
2121
RENDER: 5,
2222
SHUTDOWN: 6
2323

24-
},
25-
26-
blendModes: {
27-
28-
NORMAL: 0,
29-
ADD: 1,
30-
MULTIPLY: 2,
31-
SCREEN: 3,
32-
OVERLAY: 4,
33-
DARKEN: 5,
34-
LIGHTEN: 6,
35-
COLOR_DODGE: 7,
36-
COLOR_BURN: 8,
37-
HARD_LIGHT: 9,
38-
SOFT_LIGHT: 10,
39-
DIFFERENCE: 11,
40-
EXCLUSION: 12,
41-
HUE: 13,
42-
SATURATION: 14,
43-
COLOR: 15,
44-
LUMINOSITY: 16
45-
46-
},
47-
48-
scaleModes: {
49-
50-
DEFAULT: 0,
51-
LINEAR: 0,
52-
NEAREST: 1
53-
5424
}
5525

5626
};

‎v3/src/device/CanvasFeatures.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
var CanvasPool = require('../dom/CanvasPool');
2+
3+
var CanvasFeatures = {
4+
5+
supportNewBlendModes: false,
6+
7+
supportInverseAlpha: false
8+
9+
};
10+
11+
function checkBlendMode ()
12+
{
13+
var pngHead = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABAQMAAADD8p2OAAAAA1BMVEX/';
14+
var pngEnd = 'AAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==';
15+
16+
var magenta = new Image();
17+
magenta.src = pngHead + 'AP804Oa6' + pngEnd;
18+
19+
var yellow = new Image();
20+
yellow.src = pngHead + '/wCKxvRF' + pngEnd;
21+
22+
var canvas = CanvasPool.create(this, 6, 1);
23+
var context = canvas.getContext('2d');
24+
25+
context.globalCompositeOperation = 'multiply';
26+
context.drawImage(magenta, 0, 0);
27+
context.drawImage(yellow, 2, 0);
28+
29+
if (!context.getImageData(2, 0, 1, 1))
30+
{
31+
return false;
32+
}
33+
34+
var data = context.getImageData(2, 0, 1, 1).data;
35+
36+
CanvasPool.remove(this);
37+
38+
return (data[0] === 255 && data[1] === 0 && data[2] === 0);
39+
}
40+
41+
function checkInverseAlpha ()
42+
{
43+
var canvas = CanvasPool.create(this, 2, 1);
44+
var context = canvas.getContext('2d');
45+
46+
context.fillStyle = 'rgba(10, 20, 30, 0.5)';
47+
48+
// Draw a single pixel
49+
context.fillRect(0, 0, 1, 1);
50+
51+
// Get the color values
52+
var s1 = context.getImageData(0, 0, 1, 1);
53+
54+
if (s1 === null)
55+
{
56+
return false;
57+
}
58+
59+
// Plot them to x2
60+
context.putImageData(s1, 1, 0);
61+
62+
// Get those values
63+
var s2 = context.getImageData(1, 0, 1, 1);
64+
65+
// Compare and return
66+
return (s2.data[0] === s1.data[0] && s2.data[1] === s1.data[1] && s2.data[2] === s1.data[2] && s2.data[3] === s1.data[3]);
67+
}
68+
69+
function init ()
70+
{
71+
if (document !== undefined)
72+
{
73+
CanvasFeatures.supportNewBlendModes = checkBlendMode();
74+
CanvasFeatures.supportInverseAlpha = checkInverseAlpha();
75+
}
76+
77+
return CanvasFeatures;
78+
}
79+
80+
module.exports = init();

‎v3/src/device/Features.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,6 @@ function checkIsLittleEndian ()
112112

113113
function init ()
114114
{
115-
console.log('Features.init');
116-
117115
Features.canvas = !!window['CanvasRenderingContext2D'] || OS.cocoonJS;
118116

119117
try

‎v3/src/device/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ var Input = require('./Input');
1010
var Audio = require('./Audio');
1111
var Video = require('./Video');
1212
var Fullscreen = require('./Fullscreen');
13+
var CanvasFeatures = require('./CanvasFeatures');
1314

1415
module.exports = {
1516

@@ -19,6 +20,7 @@ module.exports = {
1920
Input: Input,
2021
Audio: Audio,
2122
Video: Video,
22-
Fullscreen: Fullscreen
23+
Fullscreen: Fullscreen,
24+
CanvasFeatures: CanvasFeatures
2325

2426
};

‎v3/src/renderer/BlendModes.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
3+
NORMAL: 0,
4+
ADD: 1,
5+
MULTIPLY: 2,
6+
SCREEN: 3,
7+
OVERLAY: 4,
8+
DARKEN: 5,
9+
LIGHTEN: 6,
10+
COLOR_DODGE: 7,
11+
COLOR_BURN: 8,
12+
HARD_LIGHT: 9,
13+
SOFT_LIGHT: 10,
14+
DIFFERENCE: 11,
15+
EXCLUSION: 12,
16+
HUE: 13,
17+
SATURATION: 14,
18+
COLOR: 15,
19+
LUMINOSITY: 16
20+
21+
};

‎v3/src/renderer/ScaleModes.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
3+
DEFAULT: 0,
4+
LINEAR: 0,
5+
NEAREST: 1
6+
7+
};

‎v3/src/renderer/canvas/CanvasRenderer.js‎

Lines changed: 11 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
var CONST = require('../../const');
12
var DrawImage = require('./utils/DrawImage');
3+
var GetBlendModes = require('./utils/GetBlendModes');
24

35
var CanvasRenderer = function (game)
46
{
@@ -8,7 +10,8 @@ var CanvasRenderer = function (game)
810
// Needed?
911
this.game = game;
1012

11-
// this.type = CONST.CANVAS;
13+
// Needed?
14+
this.type = CONST.CANVAS;
1215

1316
// Read all the following from game config
1417
this.clearBeforeRender = true;
@@ -41,9 +44,7 @@ var CanvasRenderer = function (game)
4144
// Map to the required function
4245
this.drawImage = DrawImage;
4346

44-
var so = 'source-over';
45-
46-
this.blendModes = [ so, 'lighter', so, so, so, so, so, so, so, so, so, so, so, so, so, so, so ];
47+
this.blendModes = GetBlendModes();
4748

4849
this.currentAlpha = 1;
4950
this.currentBlendMode = 0;
@@ -64,38 +65,9 @@ CanvasRenderer.prototype = {
6465

6566
init: function ()
6667
{
67-
this.mapBlendModes();
68-
6968
this.resize(this.width, this.height);
7069
},
7170

72-
/**
73-
* Maps Blend modes to Canvas blend modes.
74-
*
75-
* @method mapBlendModes
76-
* @private
77-
*/
78-
mapBlendModes: function ()
79-
{
80-
// var modes = Phaser.blendModes;
81-
82-
// this.blendModes[modes.MULTIPLY] = 'multiply';
83-
// this.blendModes[modes.SCREEN] = 'screen';
84-
// this.blendModes[modes.OVERLAY] = 'overlay';
85-
// this.blendModes[modes.DARKEN] = 'darken';
86-
// this.blendModes[modes.LIGHTEN] = 'lighten';
87-
// this.blendModes[modes.COLOR_DODGE] = 'color-dodge';
88-
// this.blendModes[modes.COLOR_BURN] = 'color-burn';
89-
// this.blendModes[modes.HARD_LIGHT] = 'hard-light';
90-
// this.blendModes[modes.SOFT_LIGHT] = 'soft-light';
91-
// this.blendModes[modes.DIFFERENCE] = 'difference';
92-
// this.blendModes[modes.EXCLUSION] = 'exclusion';
93-
// this.blendModes[modes.HUE] = 'hue';
94-
// this.blendModes[modes.SATURATION] = 'saturation';
95-
// this.blendModes[modes.COLOR] = 'color';
96-
// this.blendModes[modes.LUMINOSITY] = 'luminosity';
97-
},
98-
9971
resize: function (width, height)
10072
{
10173
var res = this.game.config.resolution;
@@ -131,24 +103,26 @@ CanvasRenderer.prototype = {
131103
{
132104
// console.log('%c render start ', 'color: #ffffff; background: #00ff00;');
133105

106+
var ctx = this.context;
107+
134108
// Add Pre-render hook
135109

136110
// TODO: A State should have the option of having its own canvas to draw to
137111

138112
this.startTime = Date.now();
139113

140-
this.context.setTransform(1, 0, 0, 1, 0, 0);
114+
ctx.setTransform(1, 0, 0, 1, 0, 0);
141115

142116
// If the alpha or blend mode didn't change since the last render, then don't set them again (saves 2 ops)
143117

144118
if (this.currentAlpha !== 1)
145119
{
146-
this.context.globalAlpha = 1;
120+
ctx.globalAlpha = 1;
147121
}
148122

149123
if (this.currentBlendMode !== 0)
150124
{
151-
this.context.globalCompositeOperation = 'source-over';
125+
ctx.globalCompositeOperation = 'source-over';
152126
}
153127

154128
this.currentBlendMode = 0;
@@ -157,7 +131,7 @@ CanvasRenderer.prototype = {
157131

158132
if (this.clearBeforeRender)
159133
{
160-
this.context.clearRect(0, 0, this.width, this.height);
134+
ctx.clearRect(0, 0, this.width, this.height);
161135
}
162136

163137
this.drawCount = 0;

‎v3/src/renderer/canvas/utils/GetBlendModes.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
var modes = require('../../BlendModes');
2+
var CanvasFeatures = require('../../../device/CanvasFeatures');
3+
4+
var GetBlendModes = function ()
5+
{
6+
var output = [];
7+
var useNew = CanvasFeatures.supportNewBlendModes;
8+
9+
output[modes.NORMAL] = 'source-over';
10+
output[modes.ADD] = 'lighter';
11+
output[modes.MULTIPLY] = (useNew) ? 'multiply' : 'source-over';
12+
output[modes.SCREEN] = (useNew) ? 'screen' : 'source-over';
13+
output[modes.OVERLAY] = (useNew) ? 'overlay' : 'source-over';
14+
output[modes.DARKEN] = (useNew) ? 'darken' : 'source-over';
15+
output[modes.LIGHTEN] = (useNew) ? 'lighten' : 'source-over';
16+
output[modes.COLOR_DODGE] = (useNew) ? 'color-dodge' : 'source-over';
17+
output[modes.COLOR_BURN] = (useNew) ? 'color-burn' : 'source-over';
18+
output[modes.HARD_LIGHT] = (useNew) ? 'hard-light' : 'source-over';
19+
output[modes.SOFT_LIGHT] = (useNew) ? 'soft-light' : 'source-over';
20+
output[modes.DIFFERENCE] = (useNew) ? 'difference' : 'source-over';
21+
output[modes.EXCLUSION] = (useNew) ? 'exclusion' : 'source-over';
22+
output[modes.HUE] = (useNew) ? 'hue' : 'source-over';
23+
output[modes.SATURATION] = (useNew) ? 'saturation' : 'source-over';
24+
output[modes.COLOR] = (useNew) ? 'color' : 'source-over';
25+
output[modes.LUMINOSITY] = (useNew) ? 'luminosity' : 'source-over';
26+
27+
return output;
28+
};
29+
30+
module.exports = GetBlendModes;

0 commit comments

Comments
 (0)