8000 Optimised size of PIXI.CanvasRenderer.mapBlendModes and started remov… · ITCSsDeveloper/phaser@b9fcb7f · GitHub
Skip to content

Commit b9fcb7f

Browse files
photonstormphotonstorm
committed
Optimised size of PIXI.CanvasRenderer.mapBlendModes and started removal of options object.
1 parent 646380f commit b9fcb7f

2 files changed

Lines changed: 57 additions & 95 deletions

File tree

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,7 @@ If you are an exceptional JavaScript developer and would like to join the Phaser
265265
* Filter.addToWorld allows you to quickly create a Phaser.Image object at the given position and size, with the Filter ready applied to it. This can eliminate lots of duplicate code.
266266
* Tiled 0.13.0 added support for layer data compression when exporting as JSON. This means that any .tmx stored using base64 encoding will start exporting layer data as a base64 encoded string rather than a native array. This update adds in automatic support for this as long as the data isn't compressed. For IE9 support you'll need to use the new polyfill found in the resources folder (thanks @noidexe #2084)
267267
* You can now load single layer Pyxel Edit TileMaps as an atlas (thanks @joshpmcghee #2050)
268+
* Canvas.getSmoothingPrefix will return the vendor prefixed smoothing enabled value from the context if set, otherwise null.
268269

269270
### Updates
270271

@@ -292,6 +293,10 @@ If you are an exceptional JavaScript developer and would like to join the Phaser
292293
* Added useCapture flags to removeEventListener in MSPointer class (thanks @pmcmonagle #2055)
293294
* Under setTimeOut (or when `forceSetTimeOut` was true) the Time was incorrectly setting `Time.timeExpected` causing game updates to lag (thanks @satan6 #2087)
294295

296+
### Pixi Updates
297+
298+
* CanvasRenderer.mapBlendModes optimised to cut down on file size.
299+
295300
For changes in previous releases please see the extensive [Version History](https://github.com/photonstorm/phaser/blob/master/CHANGELOG.md).
296301

297302
![div](http://www.phaser.io/images/github/div.png)

‎src/pixi/renderers/canvas/CanvasRenderer.js‎

Lines changed: 52 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,14 @@
88
*
99
* @class CanvasRenderer
1010
* @constructor
11-
* @param [width=800] {Number} the width of the canvas view
12-
* @param [height=600] {Number} the height of the canvas view
13-
* @param [options] {Object} The optional renderer parameters
14-
* @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional
15-
* @param [options.transparent=false] {Boolean} If the render view is transparent, default false
16-
* @param [options.autoResize=false] {Boolean} If the render view is automatically resized, default false
17-
* @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2
18-
* @param [options.clearBeforeRender=true] {Boolean} This sets if the CanvasRenderer will clear the canvas or not before the new render pass.
11+
* @param game {Phaser.Game} A reference to the Phaser Game instance
1912
*/
20-
PIXI.CanvasRenderer = function(width, height, options)
21-
{
22-
if (options)
23-
{
24-
for (var i in PIXI.defaultRenderOptions)
25-
{
26-
if (options[i] === undefined) options[i] = PIXI.defaultRenderOptions[i];
27-
}
28-
}
29-
else
30-
{
31-
options = PIXI.defaultRenderOptions;
32-
}
13+
PIXI.CanvasRenderer = function (game) {
14+
15+
/**
16+
* @property {Phaser.Game} game - A reference to the Phaser Game instance.
17+
*/
18+
this.game = game;
3319

3420
if (!PIXI.defaultRenderer)
3521
{
@@ -50,7 +36,7 @@ PIXI.CanvasRenderer = function(width, height, options)
5036
* @property resolution
5137
* @type Number
5238
*/
53-
this.resolution = options.resolution;
39+
this.resolution = game.resolution;
5440

5541
/**
5642
* This sets if the CanvasRenderer will clear the canvas or not before the new render pass.
@@ -62,23 +48,23 @@ PIXI.CanvasRenderer = function(width, height, options)
6248
* @type Boolean
6349
* @default
6450
*/
65-
this.clearBeforeRender = options.clearBeforeRender;
51+
this.clearBeforeRender = game.clearBeforeRender;
6652

6753
/**
6854
* Whether the render view is transparent
6955
*
7056
* @property transparent
7157
* @type Boolean
7258
*/
73-
this.transparent = options.transparent;
59+
this.transparent = game.transparent;
7460

7561
/**
7662
* Whether the render view should be resized automatically
7763
*
7864
* @property autoResize
7965
* @type Boolean
8066
*/
81-
this.autoResize = options.autoResize || false;
67+
this.autoResize = false;
8268

8369
/**
8470
* The width of the canvas view
@@ -87,7 +73,7 @@ PIXI.CanvasRenderer = function(width, height, options)
8773
* @type Number
8874
* @default 800
8975
*/
90-
this.width = width || 800;
76+
this.width = game.width * this.resolution;
9177

9278
/**
9379
* The height of the canvas view
@@ -96,18 +82,15 @@ PIXI.CanvasRenderer = function(width, height, options)
9682
* @type Number
9783
* @default 600
9884
*/
99-
this.height = height || 600;
100-
101-
this.width *= this.resolution;
102-
this.height *= this.resolution;
85+
this.height = game.height * this.resolution;
10386

10487
/**
10588
* The canvas element that everything is drawn to.
10689
*
10790
* @property view
10891
* @type HTMLCanvasElement
10992
*/
110-
this.view = options.view || PIXI.CanvasPool.create(this, this.width, this.height);
93+
this.view = game.canvas;
11194

11295
/**
11396
* The canvas 2d context that everything is drawn with
@@ -124,8 +107,9 @@ PIXI.CanvasRenderer = function(width, height, options)
124107
*/
125108
this.refresh = true;
126109

127-
this.view.width = this.width * this.resolution;
128-
this.view.height = this.height * this.resolution;
110+
// This is already done in the Game.setUpRenderer method.
111+
// this.view.width = this.width * this.resolution;
112+
// this.view.height = this.height * this.resolution;
129113

130114
/**
131115
* Internal var.
@@ -151,7 +135,8 @@ PIXI.CanvasRenderer = function(width, height, options)
151135
context: this.context,
152136
maskManager: this.maskManager,
153137
scaleMode: null,
154-
smoothProperty: null,
138+
smoothProperty: Phaser.Canvas.getSmoothingPrefix(this.context),
139+
155140
/**
156141
* If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation.
157142
* Handy for crisp pixel art and speed on legacy devices.
@@ -161,18 +146,8 @@ PIXI.CanvasRenderer = function(width, height, options)
161146

162147
this.mapBlendModes();
163148

164-
this.resize(width, height);
165-
166-
if("imageSmoothingEnabled" in this.context)
167-
this.renderSession.smoothProperty = "imageSmoothingEnabled";
168-
else if("webkitImageSmoothingEnabled" in this.context)
169-
this.renderSession.smoothProperty = "webkitImageSmoothingEnabled";
170-
else if("mozImageSmoothingEnabled" in this.context)
171-
this.renderSession.smoothProperty = "mozImageSmoothingEnabled";
172-
else if("oImageSmoothingEnabled" in this.context)
173-
this.renderSession.smoothProperty = "oImageSmoothingEnabled";
174-
else if ("msImageSmoothingEnabled" in this.context)
175-
this.renderSession.smoothProperty = "msImageSmoothingEnabled";
149+
this.resize(this.width, this.height);
150+
176151
};
177152

178153
// constructor
@@ -188,7 +163,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
188163
{
189164
stage.updateTransform();
190165

191-
this.context.setTransform(1,0,0,1,0,0);
166+
this.context.setTransform(1, 0, 0, 1, 0, 0);
192167

193168
this.context.globalAlpha = 1;
194169

@@ -209,7 +184,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
209184
}
210185
else
211186
{
212-
this.context.fillStyle = stage.backgroundColorString;
187+
this.context.fillStyle = stage._bgColor.rgba;
213188
this.context.fillRect(0, 0, this.width , this.height);
214189
}
215190
}
@@ -255,7 +230,8 @@ PIXI.CanvasRenderer.prototype.resize = function(width, height)
255230
this.view.width = this.width;
256231
this.view.height = this.height;
257232

258-
if (this.autoResize) {
233+
if (this.autoResize)
234+
{
259235
this.view.style.width = this.width / this.resolution + "px";
260236
this.view.style.height = this.height / this.resolution + "px";
261237
}
@@ -283,52 +259,33 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject, cont
283259
* @method mapBlendModes
284260
* @private
285261
*/
286-
PIXI.CanvasRenderer.prototype.mapBlendModes = function()
287-
{
288-
if(!PIXI.blendModesCanvas)
289-
{
290-
PIXI.blendModesCanvas = [];
262+
PIXI.CanvasRenderer.prototype.mapBlendModes = function () {
291263

292-
if(PIXI.canUseNewCanvasBlendModes())
293-
{
294-
PIXI.blendModesCanvas[PIXI.blendModes.NORMAL] = "source-over";
295-
PIXI.blendModesCanvas[PIXI.blendModes.ADD] = "lighter"; //IS THIS OK???
296-
PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "multiply";
297-
PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = "screen";
298-
PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = "overlay";
299-
PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = "darken";
300-
PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = "lighten";
301-
PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "color-dodge";
302-
PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "color-burn";
303-
PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "hard-light";
304-
PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "soft-light";
305-
PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "difference";
306-
PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "exclusion";
307-
PIXI.blendModesCanvas[PIXI.blendModes.HUE] = "hue";
308-
PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "saturation";
309-
PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = "color";
310-
PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "luminosity";
311-
}
312-
else
313-
{
314-
// this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough"
315-
PIXI.blendModesCanvas[PIXI.blendModes.NORMAL] = "source-over";
316-
PIXI.blendModesCanvas[PIXI.blendModes.ADD] = "lighter"; //IS THIS OK???
317-
PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "source-over";
318-
PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = "source-over";
319-
PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = "source-over";
320-
PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = "source-over";
321-
PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = "source-over";
322-
PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "source-over";
323-
PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "source-over";
324-
PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "source-over";
325-
PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "source-over";
326-
PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "source-over";
327-
PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "source-over";
328-
PIXI.blendModesCanvas[PIXI.blendModes.HUE] = "source-over";
329-
PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "source-over";
330-
PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = "source-over";
331-
PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "source-over";
332-
}
264+
if (!PIXI.blendModesCanvas)
265+
{
266+
var b = [];
267+
var modes = PIXI.blendModes;
268+
var useNew = PIXI.canUseNewCanvasBlendModes();
269+
270+
b[modes.NORMAL] = 'source-over';
271+
b[modes.ADD] = 'lighter';
272+
b[modes.MULTIPLY] = (useNew) ? 'multiply' : 'source-over';
273+
b[modes.SCREEN] = (useNew) ? 'screen' : 'source-over';
274+
b[modes.OVERLAY] = (useNew) ? 'overlay' : 'source-over';
275+
b[modes.DARKEN] = (useNew) ? 'darken' : 'source-over';
276+
b[modes.LIGHTEN] = (useNew) ? 'lighten' : 'source-over';
277+
b[modes.COLOR_DODGE] = (useNew) ? 'color-dodge' : 'source-over';
278+
b[modes.COLOR_BURN] = (useNew) ? 'color-burn' : 'source-over';
279+
b[modes.HARD_LIGHT] = (useNew) ? 'hard-light' : 'source-over';
280+
b[modes.SOFT_LIGHT] = (useNew) ? 'soft-light' : 'source-over';
281+
b[modes.DIFFERENCE] = (useNew) ? 'difference' : 'source-over';
282+
b[modes.EXCLUSION] = (useNew) ? 'exclusion' : 'source-over';
283+
b[modes.HUE] = (useNew) ? 'hue' : 'source-over';
284+
b[modes.SATURATION] = (useNew) ? 'saturation' : 'source-over';
285+
b[modes.COLOR] = (useNew) ? 'color' : 'source-over';
286+
b[modes.LUMINOSITY] = (useNew) ? 'luminosity' : 'source-over';
287+
288+
PIXI.blendModesCanvas = b;
333289
}
290+
334291
};

0 commit comments

Comments
 (0)