Added cacheAsBitmap to DisplayObject
This commit is contained in:
parent
d62a4aa432
commit
44330fa419
14 changed files with 242 additions and 40 deletions
|
@ -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;
|
||||
|
|
BIN
examples/example 19 - CacheAsBitmap/bunny.png
Normal file
BIN
examples/example 19 - CacheAsBitmap/bunny.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 449 B |
BIN
examples/example 19 - CacheAsBitmap/click.png
Normal file
BIN
examples/example 19 - CacheAsBitmap/click.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
90
examples/example 19 - CacheAsBitmap/index.html
Normal file
90
examples/example 19 - CacheAsBitmap/index.html
Normal 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>
|
BIN
examples/example 19 - CacheAsBitmap/logo_small.png
Normal file
BIN
examples/example 19 - CacheAsBitmap/logo_small.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 7 KiB |
BIN
examples/example 19 - CacheAsBitmap/tinyMaggot.png
Normal file
BIN
examples/example 19 - CacheAsBitmap/tinyMaggot.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.2 KiB |
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 = [];
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue