Skip to content

Commit 2510bee

Browse files
photonstormphotonstorm
committed
Updating the StateManager so it supports renderToTexture and advanced State configs.
1 parent 8a1dc20 commit 2510bee

6 files changed

Lines changed: 189 additions & 149 deletions

File tree

‎v3/src/boot/CreateRenderer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ var CreateRenderer = function (game)
7979
else
8080
{
8181
game.renderer = new CanvasRenderer(game);
82-
game.context = game.renderer.context;
82+
game.context = game.renderer.gameContext;
8383
}
8484
};
8585

‎v3/src/loader/BaseLoader.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ BaseLoader.prototype = {
6767

6868
start: function ()
6969
{
70-
console.log('BaseLoader start. Files to load:', this.list.size);
70+
console.log(this.state.settings.key, 'BaseLoader start. Files to load:', this.list.size);
7171

7272
if (!this.isReady())
7373
{
@@ -247,7 +247,7 @@ BaseLoader.prototype = {
247247

248248
processComplete: function ()
249249
{
250-
console.log('Loader Complete. Loaded:', this.storage.size, 'Failed:', this.failed.size);
250+
console.log(this.state.settings.key, 'Loader Complete. Loaded:', this.storage.size, 'Failed:', this.failed.size);
251251

252252
this.list.clear();
253253
this.inflight.clear();

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

Lines changed: 96 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,43 @@ var CONST = require('../../const');
22
var DrawImage = require('./utils/DrawImage');
33
var BlitImage = require('./utils/BlitImage');
44
var GetBlendModes = require('./utils/GetBlendModes');
5+
var GetContext = require('../../canvas/GetContext');
56

67
var CanvasRenderer = function (game)
78
{
89
/**
910
* @property {Phaser.Game} game - A reference to the currently running Game.
1011
*/
11-
// Needed?
1212
this.game = game;
1313

1414
// Needed?
1515
this.type = CONST.CANVAS;
1616

17-
// Read all the following from game config (or State config?)
18-
this.clearBeforeRender = true;
19-
20-
this.transparent = false;
21-
22-
this.autoResize = false;
23-
2417
this.drawCount = 0;
2518

19+
// Read all the following from game config (or State config?)
20+
// this.clearBeforeRender = true;
21+
// this.transparent = false;
22+
// this.autoResize = false;
2623
// this.smoothProperty = Phaser.Canvas.getSmoothingPrefix(this.context);
27-
28-
this.roundPixels = false;
24+
// this.roundPixels = false;
2925

3026
this.width = game.config.width * game.config.resolution;
31-
3227
this.height = game.config.height * game.config.resolution;
33-
3428
this.resolution = game.config.resolution;
3529

36-
this.view = game.canvas;
30+
this.gameCanvas = game.canvas;
3731

3832
/**
3933
* The canvas 2d context that everything is drawn with
4034
* @property context
4135
* @type CanvasRenderingContext2D
4236
*/
43-
this.context = this.view.getContext('2d', { alpha: true });
37+
this.gameContext = GetContext(this.gameCanvas);
38+
39+
this.gameConfig = game.config;
40+
41+
this.currentContext = this.gameContext;
4442

4543
// Map to the required function
4644
this.drawImage = DrawImage;
@@ -73,70 +71,31 @@ CanvasRenderer.prototype = {
7371
this.width = width * res;
7472
this.height = height * res;
7573

76-
this.view.width = this.width;
77-
this.view.height = this.height;
74+
this.gameCanvas.width = this.width;
75+
this.gameCanvas.height = this.height;
7876

7977
if (this.autoResize)
8078
{
81-
this.view.style.width = (this.width / res) + 'px';
82-
this.view.style.height = (this.height / res) + 'px';
79+
this.gameCanvas.style.width = (this.width / res) + 'px';
80+
this.gameCanvas.style.height = (this.height / res) + 'px';
8381
}
8482

8583
// if (this.smoothProperty)
8684
// {
87-
// this.context[this.smoothProperty] = (this.scaleMode === ScaleModes.LINEAR);
85+
// this.gameContext[this.smoothProperty] = (this.scaleMode === ScaleModes.LINEAR);
8886
// }
8987
},
9088

91-
// Call at the start of the render loop
92-
preRender: function ()
93-
{
94-
// console.log('%c render start ', 'color: #ffffff; background: #00ff00;');
95-
96-
// Add Pre-render hook
97-
98-
this.drawCount = 0;
99-
100-
var ctx = this.context;
101-
102-
ctx.setTransform(1, 0, 0, 1, 0, 0);
103-
104-
// If the alpha or blend mode didn't change since the last render, then don't set them again (saves 2 ops)
105-
106-
if (this.currentAlpha !== 1)
107-
{
108-
ctx.globalAlpha = 1;
109-
this.currentAlpha = 1;
110-
}
111-
112-
if (this.currentBlendMode !== 0)
113-
{
114-
ctx.globalCompositeOperation = 'source-over';
115-
this.currentBlendMode = 0;
116-
}
117-
118-
this.currentScaleMode = 0;
119-
120-
if (this.clearBeforeRender)
121-
{
122-
ctx.clearRect(0, 0, this.width, this.height);
123-
}
124-
125-
// TEMP
126-
ctx.fillStyle = '#000000';
127-
ctx.fillRect(0, 0, this.width, this.height);
128-
},
129-
13089
resetTransform: function ()
13190
{
132-
this.context.setTransform(1, 0, 0, 1, 0, 0);
91+
this.currentContext.setTransform(1, 0, 0, 1, 0, 0);
13392
},
13493

13594
setBlendMode: function (blendMode)
13695
{
13796
if (this.currentBlendMode !== blendMode)
13897
{
139-
this.context.globalCompositeOperation = blendMode;
98+
this.currentContext.globalCompositeOperation = blendMode;
14099
this.currentBlendMode = blendMode;
141100
}
142101
},
@@ -145,11 +104,35 @@ CanvasRenderer.prototype = {
145104
{
146105
if (this.currentAlpha !== alpha)
147106
{
148-
this.context.globalAlpha = alpha;
107+
this.currentContext.globalAlpha = alpha;
149108
this.currentAlpha = alpha;
150109
}
151110
},
152111

112+
// Call at the start of the render loop
113+
preRender: function ()
114+
{
115+
// console.log('%c render start ', 'color: #ffffff; background: #00ff00;');
116+
117+
var ctx = this.gameContext;
118+
var config = this.gameConfig;
119+
120+
if (config.clearBeforeRender)
121+
{
122+
ctx.clearRect(0, 0, this.width, this.height);
123+
}
124+
125+
if (!config.transparent)
126+
{
127+
ctx.fillStyle = config.backgroundColor;
128+
ctx.fillRect(0, 0, this.width, this.height);
129+
}
130+
131+
// Add Pre-render hook
132+
133+
this.drawCount = 0;
134+
},
135+
153136
/**
154137
* Renders the State.
155138
*
@@ -161,9 +144,46 @@ CanvasRenderer.prototype = {
161144
*/
162145
render: function (state, list, interpolationPercentage)
163146
{
164-
this.drawCount = list.length;
147+
var w = state.sys.width;
148+
var h = state.sys.height;
149+
var ctx = state.sys.context;
150+
var settings = state.sys.settings;
165151

166-
// console.log(this.drawCount);
152+
this.currentContext = ctx;
153+
154+
ctx.setTransform(1, 0, 0, 1, 0, 0);
155+
156+
// If the alpha or blend mode didn't change since the last render, then don't set them again (saves 2 ops)
157+
158+
if (this.currentAlpha !== 1)
159+
{
160+
ctx.globalAlpha = 1;
161+
this.currentAlpha = 1;
162+
}
163+
164+
if (this.currentBlendMode !== 0)
165+
{
166+
ctx.globalCompositeOperation = 'source-over';
167+
this.currentBlendMode = 0;
168+
}
169+
170+
this.currentScaleMode = 0;
171+
172+
if (settings.renderToTexture)
173+
{
174+
if (settings.clearBeforeRender)
175+
{
176+
ctx.clearRect(0, 0, w, h);
177+
}
178+
179+
if (settings.backgroundColor)
180+
{
181+
ctx.fillStyle = settings.backgroundColor;
182+
ctx.fillRect(0, 0, w, h);
183+
}
184+
}
185+
186+
this.drawCount += list.length;
167187

168188
for (var c = 0; c < list.length; c++)
169189
{
@@ -173,7 +193,16 @@ CanvasRenderer.prototype = {
173193
}
174194

175195
// Reset the transform so going into the devs render function the context is ready for use
176-
this.context.setTransform(1, 0, 0, 1, 0, 0);
196+
ctx.setTransform(1, 0, 0, 1, 0, 0);
197+
198+
// Call the State.render function
199+
state.render(ctx, interpolationPercentage);
200+
201+
// Blast it to the Game Canvas (if needed)
202+
if (settings.renderToTexture)
203+
{
204+
this.gameContext.drawImage(state.sys.canvas, 0, 0, w, h, settings.x, settings.y, w, h);
205+
}
177206
},
178207

179208
postRender: function ()
@@ -187,14 +216,14 @@ CanvasRenderer.prototype = {
187216
* Removes everything from the renderer and optionally removes the Canvas DOM element.
188217
*
189218
* @method destroy
190-
* @param [removeView=true] {boolean} Removes the Canvas element from the DOM.
219+
* @param [removegameCanvas=true] {boolean} Removes the Canvas element from the DOM.
191220
*/
192221
destroy: function ()
193222
{
194223
// CanvasPool
195224

196-
this.view = null;
197-
this.context = null;
225+
this.gameCanvas = null;
226+
this.gameContext = null;
198227
}
199228

200229
};

‎v3/src/state/Settings.js‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,26 +25,33 @@ var Settings = {
2525
key: GetObjectValue(config, 'key', ''),
2626
active: GetObjectValue(config, 'active', false),
2727
visible: GetObjectValue(config, 'visible', true),
28-
scaleMode: GetObjectValue(config, 'scaleMode', ScaleModes.DEFAULT),
28+
29+
// Loader payload array
30+
31+
files: GetObjectValue(config, 'files', false),
2932

3033
// -1 means the State Manager will set it to be the Game dimensions
3134

3235
x: GetObjectValue(config, 'x', 0),
3336
y: GetObjectValue(config, 'y', 0),
37+
rotation: GetObjectValue(config, 'rotation', 0),
3438
width: GetObjectValue(config, 'width', -1),
3539
height: GetObjectValue(config, 'height', -1),
3640

37-
// Renderer Settings
41+
// State Render Settings (applies only to this State)
3842

39-
clearBeforeRender: GetObjectValue(config, 'clearBeforeRender', true),
40-
transparent: GetObjectValue(config, 'transparent', false),
41-
autoResize: GetObjectValue(config, 'autoResize', false),
43+
scaleMode: GetObjectValue(config, 'scaleMode', ScaleModes.DEFAULT),
4244
roundPixels: GetObjectValue(config, 'roundPixels', false),
43-
drawToPrimaryCanvas: GetObjectValue(config, 'drawToPrimaryCanvas', false),
4445

45-
// Loader payload array
46+
dirtyRender: GetObjectValue(config, 'dirtyRender', false),
47+
renderToTexture: GetObjectValue(config, 'renderToTexture', false),
48+
49+
// The following only apply if renderToTexture is true
4650

47-
files: GetObjectValue(config, 'files', false)
51+
autoResize: GetObjectValue(config, 'autoResize', false),
52+
transparent: GetObjectValue(config, 'transparent', false),
53+
clearBeforeRender: GetObjectValue(config, 'clearBeforeRender', true),
54+
backgroundColor: GetObjectValue(config, 'backgroundColor', false)
4855

4956
};
5057
},

0 commit comments

Comments
 (0)