Added cacheAsBitmap to DisplayObject

This commit is contained in:
Mat Groves 2014-01-26 12:33:42 +00:00
parent d62a4aa432
commit 44330fa419
14 changed files with 242 additions and 40 deletions

View file

@ -25,6 +25,8 @@
</head>
<body>
<a href="http://www.pixijs.com/" ><img src="logo_small.png" style="position:absolute; right:0px; bottom:10px; z-index:10;"/></a>
<script>
var viewWidth = 800;
@ -126,8 +128,9 @@
for (var i = 0; i < dudeArray.length; i++)
{
var dude = dudeArray[i];
dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.05
dude.direction += dude.turningSpeed * 0.01;
dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.5
dude.turningSpeed += 0.3
dude.direction += Math.sin(dude.turningSpeed) * 0.01;
dude.position.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y);
dude.position.y += Math.cos(dude.direction) * (dude.speed *dude.scale.y );
dude.rotation = -dude.direction + Math.PI;

Binary file not shown.

After

Width:  |  Height:  |  Size: 449 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View file

@ -0,0 +1,90 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Sprite Batch</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
.rendererView {
position: absolute;
display: block;
width: 100%;
height: 100%;
}
</style>
<script src="pixi.js"></script>
<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
<script>
var viewWidth = 800;
var viewHeight = 600;
// Create a pixi renderer
// var renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight);
var renderer = new PIXI.CanvasRenderer(viewWidth, viewHeight);
//renderer.view.className = "rendererView";
// add render view to DOM
document.body.appendChild(renderer.view);
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF);
var temp = new PIXI.DisplayObjectContainer();
var bunny = PIXI.Sprite.fromImage("bunny.png");
var bunny2 = PIXI.Sprite.fromImage("bunny.png");
bunny2.rotation += 1;
bunny2.position.set(30);
temp.addChild(bunny);
temp.addChild(bunny2);
//temp.filters = [new PIXI.BlurFilter()];
stage.addChild(temp);
temp.position.set(300);
stage.click = function(){
//console.log("<>")
// var sprite = new PIXI.Sprite(temp.generateTexture(renderer.renderSession));
temp.cacheAsBitmap = !temp.cacheAsBitmap;
// stage.addChild(sprite);
// sprite.position.x = Math.random() * 800;
// sprite.position.y = Math.random() * 600;
// console.log("!")
};
// create a displacment map
var tick = 0;
requestAnimationFrame(animate);
function animate()
{
temp.rotation += 0.01;
// time to render the state!
renderer.render(stage);
// request another animation frame..
requestAnimationFrame( animate );
}
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

View file

@ -83,7 +83,7 @@ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObj
// if(child.visible) {
// push all interactive bits
if(child.interactive)
if(child._interactive)
{
iParent.interactiveChildren = true;
//child.__iParent = iParent;

View file

@ -181,6 +181,7 @@ PIXI.DisplayObject = function()
this._currentBounds = null;
this._mask = null;
this._cacheAsBitmap = false;
/*
* MOUSE Callbacks
*/
@ -366,6 +367,27 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', {
}
});
Object.defineProperty(PIXI.DisplayObject.prototype, 'cacheAsBitmap', {
get: function() {
return this._cacheAsBitmap;
},
set: function(value) {
if(this._cacheAsBitmap === value)return;
if(value)
{
this._generateCachedSprite();
}
else
{
this._destroyCachedSprite();
}
this._cacheAsBitmap = value;
}
});
/*
* Updates the object transform for rendering
*
@ -385,6 +407,7 @@ PIXI.DisplayObject.prototype.updateTransform = function()
var localTransform = this.localTransform;
var parentTransform = this.parent.worldTransform;
var worldTransform = this.worldTransform;
//console.log(localTransform)
localTransform[0] = this._cr * this.scale.x;
localTransform[1] = -this._sr * this.scale.y;
@ -426,17 +449,7 @@ PIXI.DisplayObject.prototype.getBounds = function()
PIXI.DisplayObject.prototype.getLocalBounds = function()
{
var matrixCache = this.worldTransform;
this.worldTransform = PIXI.identityMatrix;
this.updateTransform();
var bounds = this.getBounds();
this.worldTransform = matrixCache;
return bounds;
return PIXI.EmptyRectangle;
};
PIXI.DisplayObject.prototype.setStageReference = function(stage)
@ -445,6 +458,67 @@ PIXI.DisplayObject.prototype.setStageReference = function(stage)
if(this._interactive)this.stage.dirty = true;
};
PIXI.DisplayObject.prototype.generateTexture = function(renderer)
{
var bounds = this.getLocalBounds();
var renderTexture = new PIXI.RenderTexture(bounds.width | 0, bounds.height | 0, renderer);
renderTexture.render(this);
return renderTexture;
};
PIXI.DisplayObject.prototype._renderCachedSprite = function(renderSession)
{
if(this.dirty)
{
this._generateCachedSprite();
this.dirty = false;
}
if(renderSession.gl)
{
PIXI.Sprite.prototype._renderWebGL.call(this._cachedSprite, renderSession);
}
else
{
PIXI.Sprite.prototype._renderCanvas.call(this._cachedSprite, renderSession);
}
};
PIXI.DisplayObject.prototype._generateCachedSprite = function(renderer)
{
var bounds = this.getLocalBounds();
// console.log(bounds.width);
// console.log(bounds )
// console.log("generate sprite " + this._cachedSprite)
if(!this._cachedSprite)
{
var renderTexture = new PIXI.RenderTexture(bounds.width | 0, bounds.height | 0, renderer);
this._cachedSprite = new PIXI.Sprite(renderTexture);
this._cachedSprite.worldTransform = this.worldTransform;
}
else
{
this._cachedSprite.texture.resize(bounds.width | 0, bounds.height | 0);
}
this._cachedSprite.texture.render(this);
// document.body.appendChild(renderTexture.baseTexture.source)
// this._cachedSprite.buffer.context.restore();
};
PIXI.DisplayObject.prototype._destroyCachedSprite = function()
{
this._cachedSprite.texture.destroy(true);
// console.log("DESTROY")
// let the gc collect the unused sprite
// TODO could be object pooled!
this._cachedSprite = null;
};
PIXI.DisplayObject.prototype._renderWebGL = function(renderSession)
{
// OVERWRITE;

View file

@ -187,6 +187,8 @@ PIXI.DisplayObjectContainer.prototype.updateTransform = function()
PIXI.DisplayObject.prototype.updateTransform.call( this );
if(this._cacheAsBitmap)return;
for(var i=0,j=this.children.length; i<j; i++)
{
this.children[i].updateTransform();
@ -241,6 +243,24 @@ PIXI.DisplayObjectContainer.prototype.getBounds = function()
return bounds;
};
PIXI.DisplayObjectContainer.prototype.getLocalBounds = function()
{
var matrixCache = this.worldTransform;
this.worldTransform = PIXI.identityMatrix;
for(var i=0,j=this.children.length; i<j; i++)
{
this.children[i].updateTransform();
}
var bounds = this.getBounds();
this.worldTransform = matrixCache;
return bounds;
};
PIXI.DisplayObjectContainer.prototype.setStageReference = function(stage)
{
this.stage = stage;
@ -271,6 +291,12 @@ PIXI.DisplayObjectContainer.prototype._renderWebGL = function(renderSession)
{
if(!this.visible || this.alpha <= 0)return;
if(this._cacheAsBitmap)
{
this._renderCachedSprite(renderSession);
return;
}
var i,j;
if(this._mask || this._filters)
@ -315,6 +341,13 @@ PIXI.DisplayObjectContainer.prototype._renderCanvas = function(renderSession)
{
if(this.visible === false || this.alpha === 0)return;
if(this._cacheAsBitmap)
{
this._renderCachedSprite(renderSession);
return;
}
if(this._mask)
{
renderSession.maskManager.pushMask(this._mask, renderSession.context);

View file

@ -319,7 +319,6 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
var transform = this.worldTransform;
// allow for trimming
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
//if smoothingEnabled is supported and we need to change the smoothing property for this texture

View file

@ -183,7 +183,7 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
this.renderDisplayObject( stage, this.projection );
// interaction
if(stage.interactive)
if(stage._interactive)
{
//need to add some events!
if(!stage._interactiveEventsAdded)
@ -226,7 +226,7 @@ PIXI.WebGLRenderer.prototype.renderDisplayObject = function(displayObject, proje
// start the sprite batch
this.spriteBatch.begin(this.renderSession);
// start the filter manager
this.filterManager.begin(this.renderSession, buffer);

View file

@ -13,7 +13,7 @@ PIXI.WebGLSpriteBatch = function(gl)
this.vertSize = 6;
this.size = 10000;//Math.pow(2, 16) / this.vertSize;
this.size = 6000;//Math.pow(2, 16) / this.vertSize;
// console.log(this.size);
//the total number of floats in our batch
@ -83,11 +83,13 @@ PIXI.WebGLSpriteBatch.prototype.end = function()
PIXI.WebGLSpriteBatch.prototype.render = function(sprite)
{
var texture = sprite.texture;
// check texture..
if(sprite.texture.baseTexture !== this.currentBaseTexture || this.currentBatchSize >= this.size)
if(texture.baseTexture !== this.currentBaseTexture || this.currentBatchSize >= this.size)
{
this.flush();
this.currentBaseTexture = sprite.texture.baseTexture;
this.currentBaseTexture = texture.baseTexture;
}
@ -108,8 +110,6 @@ PIXI.WebGLSpriteBatch.prototype.render = function(sprite)
var verticies = this.vertices;
var width = sprite.texture.frame.width;
var height = sprite.texture.frame.height;
// TODO trim??
var aX = sprite.anchor.x;
@ -117,24 +117,22 @@ PIXI.WebGLSpriteBatch.prototype.render = function(sprite)
var w0, w1, h0, h1;
if (sprite.texture.trimmed)
if (texture.trimmed)
{
// if the sprite is trimmed then we need to add the extra space before transforming the sprite coords..
var trim = sprite.texture.trim;
w1 = texture.trim.x - aX * texture.trim.realWidth;
w0 = w1 + texture.frame.width;
w1 = trim.x - aX * trim.realWidth;
w0 = w1 + width;
h1 = trim.y - aY * trim.realHeight;
h0 = h1 + height;
h1 = texture.trim.y - aY * texture.trim.realHeight;
h0 = h1 + texture.frame.height;
}
else
{
w0 = (width ) * (1-aX);
w1 = (width ) * -aX;
w0 = (texture.frame.width ) * (1-aX);
w1 = (texture.frame.width ) * -aX;
h0 = height * (1-aY);
h1 = height * -aY;
h0 = texture.frame.height * (1-aY);
h1 = texture.frame.height * -aY;
}
var index = this.currentBatchSize * 4 * this.vertSize;

View file

@ -63,6 +63,12 @@ PIXI.BaseTexture = function(source, scaleMode)
*/
this.source = source;
//TODO will be used for futer pixi 1.5...
this.id = PIXI.BaseTextureCacheIdGenerator++;
// used for webGL
this._glTextures = [];
if(!source)return;
if(this.source instanceof Image || this.source instanceof HTMLImageElement)
@ -104,11 +110,7 @@ PIXI.BaseTexture = function(source, scaleMode)
this.imageUrl = null;
this._powerOf2 = false;
//TODO will be used for futer pixi 1.5...
this.id = PIXI.BaseTextureCacheIdGenerator++;
// used for webGL
this._glTextures = [];
};

View file

@ -124,7 +124,7 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
//TODO -? create a new one??? dont think so!
var originalWorldTransform = displayObject.worldTransform;
displayObject.worldTransform = PIXI.mat3.create();//this.identityMatrix;
displayObject.worldTransform = PIXI.identityMatrix;//this.identityMatrix;
// modify to flip...
displayObject.worldTransform[4] = -1;
displayObject.worldTransform[5] = this.projection.y * -2;
@ -163,7 +163,8 @@ PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, cl
//console.log("!!")
var children = displayObject.children;
displayObject.worldTransform = PIXI.mat3.create();
var originalWorldTransform = displayObject.worldTransform;
displayObject.worldTransform = PIXI.identityMatrix;
if(position)
{
@ -184,4 +185,6 @@ PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, cl
context.setTransform(1,0,0,1,0,0);
displayObject.worldTransform = originalWorldTransform;
};