Skip to content

Commit d77f39a

Browse files
TadejZupancicTadejZupancic
authored
Update RenderTexture.js
1 parent 9ceb184 commit d77f39a

1 file changed

Lines changed: 114 additions & 52 deletions

File tree

‎src/gameobjects/rendertexture/RenderTexture.js‎

Lines changed: 114 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ var UUID = require('../../utils/string/UUID');
4848
* @param {number} [y=0] - The vertical position of this Game Object in the world.
4949
* @param {integer} [width=32] - The width of the Render Texture.
5050
* @param {integer} [height=32] - The height of the Render Texture.
51+
* @property {string} [key] - The texture key to make the RenderTexture from.
52+
* @property {string} [frame] - the frame to make the RenderTexture from.
5153
*/
5254
var RenderTexture = new Class({
5355

@@ -74,7 +76,7 @@ var RenderTexture = new Class({
7476

7577
initialize:
7678

77-
function RenderTexture (scene, x, y, width, height)
79+
function RenderTexture (scene, x, y, width, height, key, frame)
7880
{
7981
if (x === undefined) { x = 0; }
8082
if (y === undefined) { y = 0; }
@@ -129,16 +131,7 @@ var RenderTexture = new Class({
129131
* @type {HTMLCanvasElement}
130132
* @since 3.2.0
131133
*/
132-
this.canvas = CanvasPool.create2D(this, width, height);
133-
134-
/**
135-
* A reference to the Rendering Context belonging to the Canvas Element this Render Texture is drawing to.
136-
*
137-
* @name Phaser.GameObjects.RenderTexture#context
138-
* @type {CanvasRenderingContext2D}
139-
* @since 3.2.0
140-
*/
141-
this.context = this.canvas.getContext('2d');
134+
this.canvas = null;
142135

143136
/**
144137
* A reference to the GL Frame Buffer this Render Texture is drawing to.
@@ -150,6 +143,15 @@ var RenderTexture = new Class({
150143
*/
151144
this.framebuffer = null;
152145

146+
/**
147+
* Is this Render Texture dirty or not? If not it won't spend time clearing or filling itself.
148+
*
149+
* @name Phaser.GameObjects.RenderTexture#dirty
150+
* @type {boolean}
151+
* @since 3.12.0
152+
*/
153+
this.dirty = false;
154+
153155
/**
154156
* The internal crop data object, as used by `setCrop` and passed to the `Frame.setCropUVs` method.
155157
*
@@ -167,7 +169,7 @@ var RenderTexture = new Class({
167169
* @type {Phaser.Textures.Texture}
168170
* @since 3.12.0
169171
*/
170-
this.texture = scene.sys.textures.addCanvas(UUID(), this.canvas);
172+
this.texture = null;
171173

172174
/**
173175
* The Frame corresponding to this Render Texture.
@@ -176,8 +178,8 @@ var RenderTexture = new Class({
176178
* @type {Phaser.Textures.Frame}
177179
* @since 3.12.0
178180
*/
179-
this.frame = this.texture.get();
180-
181+
this.frame = null;
182+
181183
/**
182184
* Internal saved texture flag.
183185
*
@@ -188,6 +190,42 @@ var RenderTexture = new Class({
188190
*/
189191
this._saved = false;
190192

193+
if (key === undefined)
194+
{
195+
this.canvas = CanvasPool.create2D(this, width, height);
196+
197+
// Create a new Texture for this Text object
198+
this.texture = scene.sys.textures.addCanvas(UUID(), this.canvas);
199+
200+
// Get the frame
201+
this.frame = this.texture.get();
202+
}
203+
else
204+
{
205+
this.texture = scene.sys.textures.get(key);
206+
207+
// Get the frame
208+
if (frame === undefined) { frame = '__BASE'; }
209+
this.frame = this.texture.get(frame);
210+
211+
this.canvas = this.frame.source.image;
212+
this._saved = true;
213+
214+
this.dirty = true;
215+
216+
this.width = this.frame.cutWidth;
217+
this.height = this.frame.cutHeight;
218+
}
219+
220+
/**
221+
* A reference to the Rendering Context belonging to the Canvas Element this Render Texture is drawing to.
222+
*
223+
* @name Phaser.GameObjects.RenderTexture#context
224+
* @type {CanvasRenderingContext2D}
225+
* @since 3.2.0
226+
*/
227+
this.context = this.canvas.getContext('2d');
228+
191229
/**
192230
* An internal Camera that can be used to move around the Render Texture.
193231
* Control it just like you would any Scene Camera. The difference is that it only impacts the placement of what
@@ -199,15 +237,6 @@ var RenderTexture = new Class({
199237
*/
200238
this.camera = new Camera(0, 0, width, height);
201239

202-
/**
203-
* Is this Render Texture dirty or not? If not it won't spend time clearing or filling itself.
204-
*
205-
* @name Phaser.GameObjects.RenderTexture#dirty
206-
* @type {boolean}
207-
* @since 3.12.0
208-
*/
209-
this.dirty = false;
210-
211240
/**
212241
* A reference to the WebGL Rendering Context.
213242
*
@@ -236,7 +265,7 @@ var RenderTexture = new Class({
236265
this.camera.setScene(scene);
237266

238267
this.setPosition(x, y);
239-
this.setSize(width, height);
268+
if (key === undefined) { this.setSize(width, height); }
240269
this.setOrigin(0, 0);
241270
this.initPipeline();
242271
},
@@ -280,31 +309,45 @@ var RenderTexture = new Class({
280309

281310
if (width !== this.width || height !== this.height)
282311
{
283-
this.canvas.width = width;
284-
this.canvas.height = height;
285-
286-
if (this.gl)
312+
313+
if (this.frame.name === '__BASE') // resize the texture
287314
{
288-
var gl = this.gl;
289315

290-
this.renderer.deleteTexture(this.frame.source.glTexture);
291-
this.renderer.deleteFramebuffer(this.framebuffer);
316+
this.canvas.width = width;
317+
this.canvas.height = height;
292318

293-
this.frame.source.glTexture = this.renderer.createTexture2D(0, gl.NEAREST, gl.NEAREST, gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE, gl.RGBA, null, width, height, false);
294-
this.framebuffer = this.renderer.createFramebuffer(width, height, this.frame.source.glTexture, false);
319+
if (this.gl)
320+
{
321+
var gl = this.gl;
295322

296-
this.frame.glTexture = this.frame.source.glTexture;
297-
}
323+
this.renderer.deleteTexture(this.frame.source.glTexture);
324+
this.renderer.deleteFramebuffer(this.framebuffer);
298325

299-
this.frame.source.width = width;
300-
this.frame.source.height = height;
326+
this.frame.source.glTexture = this.renderer.createTexture2D(0, gl.NEAREST, gl.NEAREST, gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE, gl.RGBA, null, width, height, false);
327+
this.framebuffer = this.renderer.createFramebuffer(width, height, this.frame.source.glTexture, false);
301328

302-
this.camera.setSize(width, height);
329+
this.frame.glTexture = this.frame.source.glTexture;
330+
}
303331

304-
this.frame.setSize(width, height);
332+
this.frame.source.width = width;
333+
this.frame.source.height = height;
305334

306-
this.width = width;
307-
this.height = height;
335+
this.camera.setSize(width, height);
336+
337+
this.frame.setSize(width, height);
338+
339+
this.width = width;
340+
this.height = height;
341+
342+
}
343+
}
344+
else // resize the frame
345+
{
346+
var baseFrame = this.texture.getSourceImage();
347+
if (this.frame.cutX + width > baseFrame.width) { width = baseFrame.width - this.frame.cutX; }
348+
if (this.frame.cutY + height > baseFrame.height) { height = baseFrame.height - this.frame.cutY; }
349+
350+
this.frame.setSize(width, height, this.frame.cutX, this.frame.cutY);
308351
}
309352

310353
return this;
@@ -395,9 +438,13 @@ var RenderTexture = new Class({
395438
*
396439
* @return {this} This Render Texture instance.
397440
*/
398-
fill: function (rgb, alpha)
441+
fill: function (rgb, alpha, x, y, width, height)
399442
{
400443
if (alpha === undefined) { alpha = 1; }
444+
if (x === undefined) { x = 0; }
445+
if (y === undefined) { y = 0; }
446+
if (width === undefined) { width = this.frame.cutWidth; }
447+
if (height === undefined) { height = this.frame.cutHeight; }
401448

402449
var ur = ((rgb >> 16)|0) & 0xff;
403450
var ug = ((rgb >> 8)|0) & 0xff;
@@ -409,16 +456,26 @@ var RenderTexture = new Class({
409456

410457
var gl = this.gl;
411458

459+
if (width !== this.frame.source.width || height !== this.frame.source.height)
460+
{
461+
gl.scissor(x + this.frame.cutX, y + this.frame.cutY, width, height);
462+
}
463+
412464
gl.clearColor(ur / 255.0, ug / 255.0, ub / 255.0, alpha);
413465

414466
gl.clear(gl.COLOR_BUFFER_BIT);
467+
468+
if (width !== this.frame.source.width || height !== this.frame.source.height)
469+
{
470+
gl.scissor(0, 0, this.frame.source.width, this.frame.source.height);
471+
}
415472

416473
this.renderer.setFramebuffer(null);
417474
}
418475
else
419476
{
420-
this.context.fillStyle = 'rgb(' + ur + ',' + ug + ',' + ub + ')';
421-
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
477+
this.context.fillStyle = 'rgba(' + ur + ',' + ug + ',' + ub + ',' + alpha + ')';
478+
this.context.fillRect(x + this.frame.cutX, y + this.frame.cutY, width, height);
422479
}
423480

424481
return this;
@@ -442,8 +499,13 @@ var RenderTexture = new Class({
442499

443500
var gl = this.gl;
444501

502+
if (this.frame.cutWidth !== this.canvas.width || this.frame.cutHeight !== this.canvas.height)
503+
{
504+
gl.scissor(this.frame.cutX, this.frame.cutY, this.frame.cutWidth, this.frame.cutHeight);
505+
}
506+
445507
gl.clearColor(0, 0, 0, 0);
446-
508+
447509
gl.clear(gl.COLOR_BUFFER_BIT);
448510

449511
this.renderer.setFramebuffer(null);
@@ -454,7 +516,7 @@ var RenderTexture = new Class({
454516

455517
ctx.save();
456518
ctx.setTransform(1, 0, 0, 1, 0, 0);
457-
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
519+
ctx.clearRect(this.frame.cutX, this.frame.cutY, this.frame.cutWidth, this.frame.cutHeight);
458520
ctx.restore();
459521
}
460522

@@ -544,9 +606,9 @@ var RenderTexture = new Class({
544606

545607
var pipeline = this.pipeline;
546608

547-
pipeline.projOrtho(0, this.width, 0, this.height, -1000.0, 1000.0);
609+
pipeline.projOrtho(0, this.texture.width, 0, this.texture.height, -1000.0, 1000.0);
548610

549-
this.batchList(entries, x, y, alpha, tint);
611+
this.batchList(entries, x + this.frame.cutX, y + this.frame.cutY, alpha, tint);
550612

551613
pipeline.flush();
552614

@@ -558,7 +620,7 @@ var RenderTexture = new Class({
558620
{
559621
this.renderer.setContext(this.context);
560622

561-
this.batchList(entries, x, y, alpha, tint);
623+
this.batchList(entries, x + this.frame.cutX, y + this.frame.cutY, alpha, tint);
562624

563625
this.renderer.setContext();
564626
}
@@ -626,9 +688,9 @@ var RenderTexture = new Class({
626688

627689
var pipeline = this.pipeline;
628690

629-
pipeline.projOrtho(0, this.width, 0, this.height, -1000.0, 1000.0);
691+
pipeline.projOrtho(0, this.texture.width, 0, this.texture.height, -1000.0, 1000.0);
630692

631-
pipeline.batchTextureFrame(textureFrame, x, y, tint, alpha, this.camera.matrix, null);
693+
pipeline.batchTextureFrame(textureFrame, x + this.frame.cutX, y + this.frame.cutY, tint, alpha, this.camera.matrix, null);
632694

633695
pipeline.flush();
634696

@@ -638,7 +700,7 @@ var RenderTexture = new Class({
638700
}
639701
else
640702
{
641-
this.batchTextureFrame(textureFrame, x, y, alpha, tint);
703+
this.batchTextureFrame(textureFrame, x + this.frame.cutX, y + this.frame.cutY, alpha, tint);
642704
}
643705

644706
this.dirty = true;

0 commit comments

Comments
 (0)