jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Implemented texture caching for fromCanvas method

Browse source
This commit is contained in:
Mat Groves 2014-01-23 19:43:07 +00:00
parent 316c1bcf44
commit 6e27b116e7
3 changed files with 140 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

66
bin/pixi.dev.js
View file

@ -1873,11 +1873,10 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
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
// if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) {
// this.scaleMode = displayObject.texture.baseTexture.scaleMode;
// context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR);
//}
if(renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) {
renderSession.scaleMode = this.texture.baseTexture.scaleMode;
context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR);
}
if(this.tint !== 0xFFFFFF)
{
@ -7375,19 +7374,6 @@ PIXI.CanvasRenderer = function(width, height, view, transparent)
* @type Canvas 2d Context
*/
this.context = this.view.getContext( "2d", { alpha: this.transparent } );
//some filter variables
this.smoothProperty = null;
if("imageSmoothingEnabled" in this.context)
this.smoothProperty = "imageSmoothingEnabled";
else if("webkitImageSmoothingEnabled" in this.context)
this.smoothProperty = "webkitImageSmoothingEnabled";
else if("mozImageSmoothingEnabled" in this.context)
this.smoothProperty = "mozImageSmoothingEnabled";
else if("oImageSmoothingEnabled" in this.context)
this.smoothProperty = "oImageSmoothingEnabled";
this.scaleMode = null;
this.refresh = true;
// hack to enable some hardware acceleration!
@ -7399,10 +7385,21 @@ PIXI.CanvasRenderer = function(width, height, view, transparent)
this.maskManager = new PIXI.CanvasMaskManager();
this.renderSession = {};
this.renderSession.context = this.context;
this.renderSession.maskManager = this.maskManager;
this.renderSession = {
context: this.context,
maskManager: this.maskManager,
scaleMode: null,
smoothProperty: null
};
if("imageSmoothingEnabled" in this.context)
this.renderSession.smoothProperty = "imageSmoothingEnabled";
else if("webkitImageSmoothingEnabled" in this.context)
this.renderSession.smoothProperty = "webkitImageSmoothingEnabled";
else if("mozImageSmoothingEnabled" in this.context)
this.renderSession.smoothProperty = "mozImageSmoothingEnabled";
else if("oImageSmoothingEnabled" in this.context)
this.renderSession.smoothProperty = "oImageSmoothingEnabled";
};
// constructor
@ -10510,8 +10507,8 @@ PIXI.BaseTexture = function(source, scaleMode)
/**
* The scale mode to apply when scaling this texture
* @property scaleMode
* @type PIXI.BaseTexture.SCALE_MODE
* @default PIXI.BaseTexture.SCALE_MODE.LINEAR
* @type PIXI.scaleModes
* @default PIXI.scaleModes.LINEAR
*/
this.scaleMode = scaleMode || PIXI.scaleModes.DEFAULT;
@ -10649,6 +10646,8 @@ PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode)
PIXI.TextureCache = {};
PIXI.FrameCache = {};
PIXI.TextureCacheIdGenerator = 0;
/**
* A texture stores the information that represents an image or part of an image. It cannot be added
* to the display list directly. To do this use PIXI.Sprite. If no frame is provided then the whole image is used
@ -10837,8 +10836,21 @@ PIXI.Texture.fromFrame = function(frameId)
*/
PIXI.Texture.fromCanvas = function(canvas, scaleMode)
{
var baseTexture = new PIXI.BaseTexture(canvas, scaleMode);
return new PIXI.Texture(baseTexture);
if(!canvas._pixiId)
{
canvas._pixiId = "canvas_" + PIXI.TextureCacheIdGenerator++;
}
var texture = PIXI.TextureCache[canvas._pixiId];
if(!texture)
{
var baseTexture = new PIXI.BaseTexture(canvas, scaleMode);
texture = new PIXI.Texture(baseTexture);
PIXI.TextureCache[canvas._pixiId] = texture;
}
return texture;
};
@ -10873,8 +10885,6 @@ PIXI.Texture.removeTextureFromCache = function(id)
// this is more for webGL.. it contains updated frames..
PIXI.Texture.frameUpdates = [];
PIXI.Texture.SCALE_MODE = PIXI.BaseTexture.SCALE_MODE;
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/

85
examples/example 1 - Basics/indexTest.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 1</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(400, 300);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame( animate );
// create a texture from an image path
var texture = PIXI.Texture.fromImage("bunny.png");
// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);
// center the sprites anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// move the sprite t the center of the screen
bunny.position.x = 200;
bunny.position.y = 150;
stage.addChild(bunny);
source = {};
source.Canvas = document.createElement("canvas")// $('<canvas></canvas>')[0];
source.Canvas.width = 256; source.Canvas.height = 256;
source.Canvas.context = source.Canvas.getContext('2d');
source.Canvas.context.fillStyle = "#FF0000";
source.Canvas.context.fillRect(0,0,256,256)
//Split Canvas into multiple textures
source.Frames = [];
for(i=0;i<4;i++)
for(ii=0;ii<4;ii++) {
var tex = PIXI.Texture.fromCanvas(source.Canvas);
tex.setFrame({x:ii*32,y:i*32,width:32,height:32});
source.Frames[(ii+(i*4))] = tex;
}
source.Sprite = new PIXI.MovieClip(source.Frames);
source.Sprite.animationSpeed = 0.1;
source.Sprite.currentFrame = 0;
source.Sprite.play();
stage.addChild(source.Sprite);
function animate() {
requestAnimFrame( animate );
// just for fun, lets rotate mr rabbit a little
bunny.rotation += 0.1;
// console.log(stage.getBounds().width);
// render the stage
renderer.render(stage);
}
</script>
</body>
</html>

19
src/pixi/textures/Texture.js
View file

@ -5,6 +5,8 @@
PIXI.TextureCache = {};
PIXI.FrameCache = {};
PIXI.TextureCacheIdGenerator = 0;
/**
* A texture stores the information that represents an image or part of an image. It cannot be added
* to the display list directly. To do this use PIXI.Sprite. If no frame is provided then the whole image is used
@ -193,8 +195,21 @@ PIXI.Texture.fromFrame = function(frameId)
*/
PIXI.Texture.fromCanvas = function(canvas, scaleMode)
{
var baseTexture = new PIXI.BaseTexture(canvas, scaleMode);
return new PIXI.Texture(baseTexture);
if(!canvas._pixiId)
{
canvas._pixiId = "canvas_" + PIXI.TextureCacheIdGenerator++;
}
var texture = PIXI.TextureCache[canvas._pixiId];
if(!texture)
{
var baseTexture = new PIXI.BaseTexture(canvas, scaleMode);
texture = new PIXI.Texture(baseTexture);
PIXI.TextureCache[canvas._pixiId] = texture;
}
return texture;
};