Tiling Texture fixed to allow any size texture

also accepts sprite sheet frame.
This commit is contained in:
Mat Groves 2014-01-05 21:56:33 +00:00
parent b3677ea452
commit e7205ad115
5 changed files with 176 additions and 32 deletions

View file

@ -5324,7 +5324,6 @@ PIXI.updateWebGLTexture = function(texture, gl)
};
/**
* Handles a lost webgl context
*
@ -5715,7 +5714,7 @@ PIXI.WebGLSpriteBatch.prototype.render = function(sprite)
PIXI.WebGLSpriteBatch.prototype.renderTilingSprite = function(tilingSprite)
{
var texture = tilingSprite.texture;
var texture = tilingSprite.tilingTexture;
if(texture.baseTexture !== this.currentBaseTexture || this.currentBatchSize >= this.size)
{
@ -5739,8 +5738,8 @@ PIXI.WebGLSpriteBatch.prototype.renderTilingSprite = function(tilingSprite)
var offsetX = tilingSprite.tilePosition.x/texture.baseTexture.width;
var offsetY = tilingSprite.tilePosition.y/texture.baseTexture.height;
var scaleX = (tilingSprite.width / texture.baseTexture.width) / tilingSprite.tileScale.x;
var scaleY = (tilingSprite.height / texture.baseTexture.height) / tilingSprite.tileScale.y;
var scaleX = (tilingSprite.width / texture.baseTexture.width) / (tilingSprite.tileScale.x * tilingSprite.tileScaleOffset.x);
var scaleY = (tilingSprite.height / texture.baseTexture.height) / (tilingSprite.tileScale.y * tilingSprite.tileScaleOffset.y);
uvs[0] = 0 - offsetX;
uvs[1] = 0 - offsetY;
@ -7819,8 +7818,6 @@ PIXI.TilingSprite = function(texture, width, height)
this.width = width || 100;
this.height = height || 100;
texture.baseTexture._powerOf2 = true;
/**
* The scaling of the image that is being tiled
*
@ -7829,6 +7826,9 @@ PIXI.TilingSprite = function(texture, width, height)
*/
this.tileScale = new PIXI.Point(1,1);
this.tileScaleOffset = new PIXI.Point(1,1);
/**
* The offset position of the image that is being tiled
*
@ -7882,9 +7882,9 @@ Object.defineProperty(PIXI.TilingSprite.prototype, 'height', {
PIXI.TilingSprite.prototype.onTextureUpdate = function()
{
// so if _width is 0 then width was not set..
//if(this._width)this.scale.x = this._width / this.texture.frame.width;
//if(this._height)this.scale.y = this._height / this.texture.frame.height;
// alert(this._width)
//console.log("HI MUM")
this.updateFrame = true;
};
@ -7910,8 +7910,8 @@ PIXI.TilingSprite.prototype._renderWebGL = function(renderSession)
renderSession.filterManager.pushFilter(this._filterBlock);
}
renderSession.spriteBatch.renderTilingSprite(this);
if(!this.tilingTexture)this.generateTilingTexture(true);
else renderSession.spriteBatch.renderTilingSprite(this);
// simple render children!
for(i=0,j=this.children.length; i<j; i++)
@ -7928,7 +7928,8 @@ PIXI.TilingSprite.prototype._renderWebGL = function(renderSession)
}
else
{
renderSession.spriteBatch.renderTilingSprite(this);
if(!this.tilingTexture)this.generateTilingTexture(true);
else renderSession.spriteBatch.renderTilingSprite(this);
// simple render children!
for(i=0,j=this.children.length; i<j; i++)
@ -7938,6 +7939,7 @@ PIXI.TilingSprite.prototype._renderWebGL = function(renderSession)
}
};
PIXI.TilingSprite.prototype._renderCanvas = function(renderSession)
{
if(this.visible === false || this.alpha === 0)return;
@ -7955,7 +7957,15 @@ PIXI.TilingSprite.prototype._renderCanvas = function(renderSession)
if(!this.__tilePattern)
this.__tilePattern = context.createPattern(this.texture.baseTexture.source, 'repeat');
{
this.generateTilingTexture(false);
if(this.tilingTexture)
{
this.__tilePattern = context.createPattern(this.tilingTexture.baseTexture.source, 'repeat');
}
}
// check blend mode
if(this.blendMode !== renderSession.currentBlendMode)
@ -7968,7 +7978,7 @@ PIXI.TilingSprite.prototype._renderCanvas = function(renderSession)
var tilePosition = this.tilePosition;
var tileScale = this.tileScale;
// console.log(tileScale.x)
// offset
context.scale(tileScale.x,tileScale.y);
context.translate(tilePosition.x, tilePosition.y);
@ -8054,6 +8064,68 @@ PIXI.TilingSprite.prototype.getBounds = function()
return bounds;
};
PIXI.TilingSprite.prototype.generateTilingTexture = function(forcePowerOfTwo)
{
var texture = this.texture;
if(!texture.baseTexture.hasLoaded)return;
var baseTexture = texture.baseTexture;
var frame = texture.frame;
var targetWidth, targetHeight;
// check that the frame is the same size as the base texture.
var isFrame = frame.width !== baseTexture.width || frame.height !== baseTexture.height;
this.tilingTexture = texture;
var newTextureRequired = false;
if(!forcePowerOfTwo)
{
if(isFrame)
{
targetWidth = frame.width;
targetHeight = frame.height;
newTextureRequired = true;
}
}
else
{
targetWidth = PIXI.getNextPowerOfTwo(texture.frame.width);
targetHeight = PIXI.getNextPowerOfTwo(texture.frame.height);
if(frame.width !== targetWidth && frame.height !== targetHeight)newTextureRequired = true;
}
if(newTextureRequired)
{
var canvasBuffer = new PIXI.CanvasBuffer(targetWidth, targetHeight);
canvasBuffer.context.drawImage(texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
0,
0,
targetWidth,
targetHeight);
this.tilingTexture = PIXI.Texture.fromCanvas(canvasBuffer.canvas);
this.tileScaleOffset.x = frame.width / targetWidth;
this.tileScaleOffset.y = frame.height / targetHeight;
}
this.tilingTexture.baseTexture._powerOf2 = true;
};
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
* based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi