mirror of
https://github.com/wassname/phaser.git
synced 2026-09-09 11:28:47 +08:00
Lots of renderTexture updates and examples added
This commit is contained in:
Richard Davey
@@ -25,6 +25,9 @@ Phaser.Graphics = function (game, x, y) {
|
||||
*/
|
||||
this.type = Phaser.GRAPHICS;
|
||||
|
||||
this.position.x = x;
|
||||
this.position.y = y;
|
||||
|
||||
};
|
||||
|
||||
Phaser.Graphics.prototype = Object.create(PIXI.Graphics.prototype);
|
||||
@@ -56,10 +59,14 @@ Phaser.Graphics.prototype.destroy = function() {
|
||||
Phaser.Graphics.prototype.drawPolygon = function (poly) {
|
||||
|
||||
graphics.moveTo(poly.points[0].x, poly.points[0].y);
|
||||
for (var i = 1; i < poly.points.length; i += 1) {
|
||||
|
||||
for (var i = 1; i < poly.points.length; i += 1)
|
||||
{
|
||||
graphics.lineTo(poly.points[i].x, poly.points[i].y);
|
||||
}
|
||||
|
||||
graphics.lineTo(poly.points[0].x, poly.points[0].y);
|
||||
|
||||
}
|
||||
|
||||
Object.defineProperty(Phaser.Graphics.prototype, 'angle', {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
*/
|
||||
|
||||
/**
|
||||
* A dynamic initially blank canvas to which images can be drawn
|
||||
* A RenderTexture is a special texture that allows any displayObject to be rendered to it.
|
||||
* @class Phaser.RenderTexture
|
||||
* @constructor
|
||||
* @param {Phaser.Game} game - Current game instance.
|
||||
@@ -25,7 +25,7 @@ Phaser.RenderTexture = function (game, key, width, height) {
|
||||
*/
|
||||
this.name = key;
|
||||
|
||||
PIXI.EventTarget.call( this );
|
||||
PIXI.EventTarget.call(this);
|
||||
|
||||
/**
|
||||
* @property {number} width - the width.
|
||||
@@ -38,22 +38,22 @@ Phaser.RenderTexture = function (game, key, width, height) {
|
||||
this.height = height || 100;
|
||||
|
||||
/**
|
||||
* I know this has a typo in it, but it's because the PIXI.RenderTexture does and we need to pair-up with it
|
||||
* once they update pixi to fix the typo, we'll fix it here too :)
|
||||
* @property {Description} indetityMatrix - Description.
|
||||
* @property {PIXI.mat3} indetityMatrix - Matrix object.
|
||||
*/
|
||||
this.indetityMatrix = PIXI.mat3.create();
|
||||
|
||||
/**
|
||||
* @property {Description} frame - Description.
|
||||
* @property {PIXI.Rectangle} frame - The frame for this texture.
|
||||
*/
|
||||
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
|
||||
|
||||
/**
|
||||
* @property {Description} type - Description.
|
||||
* @property {number} type - Base Phaser object type.
|
||||
*/
|
||||
this.type = Phaser.RENDERTEXTURE;
|
||||
|
||||
this._tempPoint = { x: 0, y: 0 };
|
||||
|
||||
if (PIXI.gl)
|
||||
{
|
||||
this.initWebGL();
|
||||
@@ -65,5 +65,247 @@ Phaser.RenderTexture = function (game, key, width, height) {
|
||||
|
||||
};
|
||||
|
||||
Phaser.RenderTexture.prototype = Phaser.Utils.extend(true, PIXI.RenderTexture.prototype);
|
||||
Phaser.RenderTexture.prototype.constructor = Phaser.RenderTexture;
|
||||
Phaser.RenderTexture.prototype = Object.create(PIXI.Texture.prototype);
|
||||
Phaser.RenderTexture.prototype.constructor = PIXI.RenderTexture;
|
||||
|
||||
/**
|
||||
* This function will draw the display object to the texture. If the display object is a Group or has children it will
|
||||
* draw all children as well.
|
||||
*
|
||||
* @method render
|
||||
* @param {DisplayObject} displayObject - The display object to render this texture on.
|
||||
* @param {Phaser.Point} [position] - Where to draw the display object.
|
||||
* @param {boolean} [clear=false] - If true the texture will be cleared before the displayObject is drawn.
|
||||
*/
|
||||
Phaser.RenderTexture.prototype.render = function(displayObject, position, clear) {
|
||||
|
||||
if (typeof position === 'undefined') { position = false; }
|
||||
if (typeof clear === 'undefined') { clear = false; }
|
||||
|
||||
if (displayObject instanceof Phaser.Group)
|
||||
{
|
||||
displayObject = displayObject._container;
|
||||
}
|
||||
|
||||
if (PIXI.gl)
|
||||
{
|
||||
this.renderWebGL(displayObject, position, clear);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.renderCanvas(displayObject, position, clear);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* This function will draw the display object to the texture at the given x/y coordinates.
|
||||
* If the display object is a Group or has children it will draw all children as well.
|
||||
*
|
||||
* @method renderXY
|
||||
* @param {DisplayObject} displayObject - The display object to render this texture on.
|
||||
* @param {number} x - The x coordinate to draw the display object at.
|
||||
* @param {number} y - The y coordinate to draw the display object at.
|
||||
* @param {boolean} [clear=false] - If true the texture will be cleared before the displayObject is drawn.
|
||||
*/
|
||||
Phaser.RenderTexture.prototype.renderXY = function(displayObject, x, y, clear) {
|
||||
|
||||
this._tempPoint.x = x;
|
||||
this._tempPoint.y = y;
|
||||
|
||||
this.render(displayObject, this._tempPoint, clear);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the webgl data for this texture
|
||||
*
|
||||
* @method initWebGL
|
||||
* @private
|
||||
*/
|
||||
Phaser.RenderTexture.prototype.initWebGL = function()
|
||||
{
|
||||
var gl = PIXI.gl;
|
||||
this.glFramebuffer = gl.createFramebuffer();
|
||||
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
|
||||
|
||||
this.glFramebuffer.width = this.width;
|
||||
this.glFramebuffer.height = this.height;
|
||||
|
||||
this.baseTexture = new PIXI.BaseTexture();
|
||||
|
||||
this.baseTexture.width = this.width;
|
||||
this.baseTexture.height = this.height;
|
||||
|
||||
this.baseTexture._glTexture = gl.createTexture();
|
||||
gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture);
|
||||
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
|
||||
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
||||
|
||||
this.baseTexture.isRender = true;
|
||||
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
|
||||
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.baseTexture._glTexture, 0);
|
||||
|
||||
// create a projection matrix..
|
||||
this.projection = new PIXI.Point(this.width/2 , -this.height/2);
|
||||
|
||||
// set the correct render function..
|
||||
// this.render = this.renderWebGL;
|
||||
}
|
||||
|
||||
|
||||
Phaser.RenderTexture.prototype.resize = function(width, height)
|
||||
{
|
||||
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
|
||||
if(PIXI.gl)
|
||||
{
|
||||
this.projection.x = this.width/2
|
||||
this.projection.y = -this.height/2;
|
||||
|
||||
var gl = PIXI.gl;
|
||||
gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture);
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
this.frame.width = this.width
|
||||
this.frame.height = this.height;
|
||||
this.renderer.resize(this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the canvas data for this texture
|
||||
*
|
||||
* @method initCanvas
|
||||
* @private
|
||||
*/
|
||||
Phaser.RenderTexture.prototype.initCanvas = function()
|
||||
{
|
||||
this.renderer = new PIXI.CanvasRenderer(this.width, this.height, null, 0);
|
||||
|
||||
this.baseTexture = new PIXI.BaseTexture(this.renderer.view);
|
||||
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
|
||||
|
||||
// this.render = this.renderCanvas;
|
||||
}
|
||||
|
||||
/**
|
||||
* This function will draw the display object to the texture.
|
||||
*
|
||||
* @method renderWebGL
|
||||
* @param displayObject {DisplayObject} The display object to render this texture on
|
||||
* @param clear {Boolean} If true the texture will be cleared before the displayObject is drawn
|
||||
* @private
|
||||
*/
|
||||
Phaser.RenderTexture.prototype.renderWebGL = function(displayObject, position, clear)
|
||||
{
|
||||
var gl = PIXI.gl;
|
||||
|
||||
// enable the alpha color mask..
|
||||
gl.colorMask(true, true, true, true);
|
||||
|
||||
gl.viewport(0, 0, this.width, this.height);
|
||||
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
|
||||
|
||||
if(clear)
|
||||
{
|
||||
gl.clearColor(0,0,0, 0);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
}
|
||||
|
||||
// THIS WILL MESS WITH HIT TESTING!
|
||||
var children = displayObject.children;
|
||||
|
||||
//TODO -? create a new one??? dont think so!
|
||||
var originalWorldTransform = displayObject.worldTransform;
|
||||
displayObject.worldTransform = PIXI.mat3.create();//sthis.indetityMatrix;
|
||||
// modify to flip...
|
||||
displayObject.worldTransform[4] = -1;
|
||||
displayObject.worldTransform[5] = this.projection.y * -2;
|
||||
|
||||
if(position)
|
||||
{
|
||||
displayObject.worldTransform[2] = position.x;
|
||||
displayObject.worldTransform[5] -= position.y;
|
||||
}
|
||||
|
||||
PIXI.visibleCount++;
|
||||
displayObject.vcount = PIXI.visibleCount;
|
||||
|
||||
for(var i=0,j=children.length; i<j; i++)
|
||||
{
|
||||
children[i].updateTransform();
|
||||
}
|
||||
|
||||
var renderGroup = displayObject.__renderGroup;
|
||||
|
||||
if(renderGroup)
|
||||
{
|
||||
if(displayObject == renderGroup.root)
|
||||
{
|
||||
renderGroup.render(this.projection, this.glFramebuffer);
|
||||
}
|
||||
else
|
||||
{
|
||||
renderGroup.renderSpecific(displayObject, this.projection, this.glFramebuffer);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if(!this.renderGroup)this.renderGroup = new PIXI.WebGLRenderGroup(gl);
|
||||
this.renderGroup.setRenderable(displayObject);
|
||||
this.renderGroup.render(this.projection, this.glFramebuffer);
|
||||
}
|
||||
|
||||
displayObject.worldTransform = originalWorldTransform;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* This function will draw the display object to the texture.
|
||||
*
|
||||
* @method renderCanvas
|
||||
* @param displayObject {DisplayObject} The display object to render this texture on
|
||||
* @param clear {Boolean} If true the texture will be cleared before the displayObject is drawn
|
||||
* @private
|
||||
*/
|
||||
Phaser.RenderTexture.prototype.renderCanvas = function(displayObject, position, clear)
|
||||
{
|
||||
var children = displayObject.children;
|
||||
|
||||
displayObject.worldTransform = PIXI.mat3.create();
|
||||
|
||||
if(position)
|
||||
{
|
||||
displayObject.worldTransform[2] = position.x;
|
||||
displayObject.worldTransform[5] = position.y;
|
||||
}
|
||||
|
||||
|
||||
for(var i=0,j=children.length; i<j; i++)
|
||||
{
|
||||
children[i].updateTransform();
|
||||
}
|
||||
|
||||
if(clear)this.renderer.context.clearRect(0,0, this.width, this.height);
|
||||
|
||||
this.renderer.renderDisplayObject(displayObject);
|
||||
|
||||
this.renderer.context.setTransform(1,0,0,1,0,0);
|
||||
|
||||
|
||||
// PIXI.texturesToUpdate.push(this.baseTexture);
|
||||
}
|
||||
|
||||
@@ -352,7 +352,7 @@ Phaser.Sprite.prototype.constructor = Phaser.Sprite;
|
||||
*/
|
||||
Phaser.Sprite.prototype.preUpdate = function() {
|
||||
|
||||
if (!this.exists)
|
||||
if (!this.exists || !this.group.exists)
|
||||
{
|
||||
this.renderOrderID = -1;
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user