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

Maskin added to pixi.js

Browse source 
example updated
This commit is contained in:
Mat Groves 2013-07-01 21:22:16 +01:00
parent 74e0ccc517
commit 6b2d5f26ca
22 changed files with 10030 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Gruntfile.js
View file

@ -21,6 +21,7 @@ module.exports = function(grunt) {
'<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/DisplayObjectContainer.js',
'<%= dirs.src %>/display/Sprite.js', '<%= dirs.src %>/display/Sprite.js',
'<%= dirs.src %>/display/MovieClip.js', '<%= dirs.src %>/display/MovieClip.js',
'<%= dirs.src %>/filters/FilterBlock.js',
'<%= dirs.src %>/text/Text.js', '<%= dirs.src %>/text/Text.js',
'<%= dirs.src %>/text/BitmapText.js', '<%= dirs.src %>/text/BitmapText.js',
'<%= dirs.src %>/InteractionManager.js', '<%= dirs.src %>/InteractionManager.js',
@ -122,7 +123,8 @@ module.exports = function(grunt) {
'examples/example 10 - Text', 'examples/example 10 - Text',
'examples/example 11 - RenderTexture', 'examples/example 11 - RenderTexture',
'examples/example 12 - Spine', 'examples/example 12 - Spine',
'examples/example 13 - Graphics' 'examples/example 13 - Graphics',
'examples/example 14 - Masking'
] ]
}, },
connect: { connect: {

BIN
examples/example 14 - Masking/BGrotate.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 136 KiB

160
examples/example 14 - Masking/Copy of index.html Normal file
View file

@ -0,0 +1,160 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 14 - Masking</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
stage.interactive = true;
var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
bg.anchor.x = 0.5;
bg.anchor.y = 0.5;
bg.position.x = 620/2;
bg.position.y = 380/2;
stage.addChild(bg);
var container = new PIXI.DisplayObjectContainer();
container.position.x = 620/2;
container.position.y = 380/2;
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
bgFront.anchor.x = 0.5;
bgFront.anchor.y = 0.5;
container.addChild(bgFront);
var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
light2.anchor.x = 0.5;
light2.anchor.y = 0.5;
container.addChild(light2);
var light1 = PIXI.Sprite.fromImage("LightRotate1.png");
light1.anchor.x = 0.5;
light1.anchor.y = 0.5;
container.addChild(light1);
var panda = PIXI.Sprite.fromImage("panda.png");
panda.anchor.x = 0.5;
panda.anchor.y = 0.5;
container.addChild(panda);
stage.addChild(container);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(620, 380);
// set the canvas width and height to fill the screen
// renderer.view.style.width = window.innerWidth + "px";
//renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.position = "absolute"
renderer.view.style.marginLeft = "-310px";
renderer.view.style.marginTop = "-190px";
renderer.view.style.top = "50%";
renderer.view.style.left = "50%";
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
// lets create moving shape
var thing = new PIXI.Graphics();
stage.addChild(thing);
thing.position.x = 620/2;
thing.position.y = 380/2;
thing.lineStyle(0);
container.addFilter(thing);
var count = 0;
stage.click = stage.tap = function()
{
if(!container.filter)
{
container.addFilter(thing);
PIXI.runList(stage);
}
else
{
container.removeFilter(thing);
}
}
/*
* Add a pixi Logo!
*/
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = 620
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 320
logo.interactive = true;
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
var help = new PIXI.Text("Click to turn masking on / off.", {font:"bold 12pt Arial", fill:"white"});
help.position.y = 350;
help.position.x = 10;
stage.addChild(help);
requestAnimFrame(animate);
function animate() {
// thing.clear();
bg.rotation += 0.01;
bgFront.rotation -= 0.01;
light1.rotation += 0.02;
light2.rotation += 0.01;
panda.scale.x = 1 + Math.sin(count) * 0.04;
panda.scale.y = 1 + Math.cos(count) * 0.04;
count += 0.1;
thing.clear();
thing.lineStyle(5, 0x16f1ff, 1);
thing.beginFill(0x8bc5ff, 0.4);
thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count)* 20);
thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count)* 20);
thing.lineTo(-120 + Math.cos(count)* 20, 100 + Math.sin(count)* 20);
thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
thing.rotation = count * 0.1;
renderer.render(stage);
requestAnimFrame( animate );
}
</script>
</body>
</html>

BIN
examples/example 14 - Masking/LightRotate1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 209 KiB

BIN
examples/example 14 - Masking/LightRotate2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 169 KiB

BIN
examples/example 14 - Masking/SceneRotate.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 111 KiB

152
examples/example 14 - Masking/index.html Normal file
View file

@ -0,0 +1,152 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 14 - Masking</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
stage.interactive = true;
var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
bg.anchor.x = 0.5;
bg.anchor.y = 0.5;
bg.position.x = 620/2;
bg.position.y = 380/2;
stage.addChild(bg);
var container = new PIXI.DisplayObjectContainer();
container.position.x = 620/2;
container.position.y = 380/2;
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
bgFront.anchor.x = 0.5;
bgFront.anchor.y = 0.5;
container.addChild(bgFront);
var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
light2.anchor.x = 0.5;
light2.anchor.y = 0.5;
container.addChild(light2);
var light1 = PIXI.Sprite.fromImage("LightRotate1.png");
light1.anchor.x = 0.5;
light1.anchor.y = 0.5;
container.addChild(light1);
var panda = PIXI.Sprite.fromImage("panda.png");
panda.anchor.x = 0.5;
panda.anchor.y = 0.5;
container.addChild(panda);
stage.addChild(container);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(620, 380);
renderer.view.style.position = "absolute"
renderer.view.style.marginLeft = "-310px";
renderer.view.style.marginTop = "-190px";
renderer.view.style.top = "50%";
renderer.view.style.left = "50%";
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
// lets create moving shape
var thing = new PIXI.Graphics();
stage.addChild(thing);
thing.position.x = 620/2;
thing.position.y = 380/2;
thing.lineStyle(0);
container.mask = thing;
var count = 0;
stage.click = stage.tap = function()
{
if(!container.filter)
{
container.mask = thing;
PIXI.runList(stage);
}
else
{
container.mask = null;
}
}
/*
* Add a pixi Logo!
*/
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = 620
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 320
logo.interactive = true;
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
var help = new PIXI.Text("Click to turn masking on / off.", {font:"bold 12pt Arial", fill:"white"});
help.position.y = 350;
help.position.x = 10;
stage.addChild(help);
requestAnimFrame(animate);
function animate() {
bg.rotation += 0.01;
bgFront.rotation -= 0.01;
light1.rotation += 0.02;
light2.rotation += 0.01;
panda.scale.x = 1 + Math.sin(count) * 0.04;
panda.scale.y = 1 + Math.cos(count) * 0.04;
count += 0.1;
thing.clear();
thing.lineStyle(5, 0x16f1ff, 1);
thing.beginFill(0x8bc5ff, 0.4);
thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count)* 20);
thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count)* 20);
thing.lineTo(-120 + Math.cos(count)* 20, 100 + Math.sin(count)* 20);
thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
thing.rotation = count * 0.1;
renderer.render(stage);
requestAnimFrame( animate );
}
</script>
</body>
</html>

BIN
examples/example 14 - Masking/panda.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 68 KiB

9442
examples/example 14 - Masking/pixi.js Normal file
View file

File diff suppressed because it is too large Load diff

1
src/pixi/InteractionManager.js
View file

@ -57,7 +57,6 @@ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObj
var children = displayObject.children; var children = displayObject.children;
var length = children.length; var length = children.length;
//this.interactiveItems = [];
/// make an interaction tree... {item.__interactiveParent} /// make an interaction tree... {item.__interactiveParent}
for (var i = length-1; i >= 0; i--) for (var i = length-1; i >= 0; i--)
{ {

2
src/pixi/core/Rectangle.js
View file

@ -57,7 +57,7 @@ PIXI.Rectangle.prototype.clone = function()
* @param y {Number} The Y coord of the point to test * @param y {Number} The Y coord of the point to test
* @return if the x/y coords are within this polygon * @return if the x/y coords are within this polygon
*/ */
PIXI.Rectangle.contains = function(x, y) PIXI.Rectangle.prototype.contains = function(x, y)
{ {
if(this.width <= 0 || this.height <= 0) if(this.width <= 0 || this.height <= 0)
return false; return false;

57
src/pixi/display/DisplayObject.js
View file

@ -199,7 +199,6 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'visible', {
PIXI.DisplayObject.prototype.setInteractive = function(interactive) PIXI.DisplayObject.prototype.setInteractive = function(interactive)
{ {
this.interactive = interactive; this.interactive = interactive;
} }
/** /**
@ -220,17 +219,49 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', {
} }
}); });
county = 0; /**
* Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it.
* In PIXI a regular mask must be a PIXI.Ggraphics object. This allows for much faster masking in canvas as it utilises shape clipping.
* To remove a mask, set this property to null.
* @property mask
* @type PIXI.Graphics
*/
Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
get: function() {
return this._mask;
},
set: function(value) {
PIXI.DisplayObject.prototype.addFilter = function() this._mask = value;
if(value)
{
this.addFilter(value)
}
else
{
this.removeFilter();
}
}
});
/*
* private
*/
PIXI.DisplayObject.prototype.addFilter = function(mask)
{ {
if(this.filter)return; if(this.filter)return;
this.filter = true; this.filter = true;
// insert a filter block.. // insert a filter block..
var start = new PIXI.FilterBlock(); var start = new PIXI.FilterBlock();
var end = new PIXI.FilterBlock(); var end = new PIXI.FilterBlock();
start.mask = mask;
end.mask = mask;
start.id = end.id = county start.id = end.id = county
county++; county++;
@ -242,7 +273,7 @@ PIXI.DisplayObject.prototype.addFilter = function()
/* /*
* *
* and an start filter * insert start
* *
*/ */
@ -275,7 +306,7 @@ PIXI.DisplayObject.prototype.addFilter = function()
/* /*
* *
* and an end filter * insert end filter
* *
*/ */
var childFirst = end var childFirst = end
@ -309,13 +340,14 @@ PIXI.DisplayObject.prototype.addFilter = function()
this.first = start; this.first = start;
// TODO need to check if the stage already exists...
// if webGL... // if webGL...
if(this.__renderGroup) if(this.__renderGroup)
{ {
this.__renderGroup.addFilterBlocks(start, end); this.__renderGroup.addFilterBlocks(start, end);
} }
mask.renderable = false;
} }
PIXI.DisplayObject.prototype.removeFilter = function() PIXI.DisplayObject.prototype.removeFilter = function()
@ -335,8 +367,6 @@ PIXI.DisplayObject.prototype.removeFilter = function()
this.first = startBlock._iNext; this.first = startBlock._iNext;
// this will NEVER be true!
// remove the end filter // remove the end filter
var lastBlock = this.last; var lastBlock = this.last;
@ -359,6 +389,9 @@ PIXI.DisplayObject.prototype.removeFilter = function()
if(!updateLast)break; if(!updateLast)break;
} }
var mask = startBlock.mask
mask.renderable = true;
// if webGL... // if webGL...
if(this.__renderGroup) if(this.__renderGroup)
{ {
@ -367,12 +400,6 @@ PIXI.DisplayObject.prototype.removeFilter = function()
//} //}
} }
PIXI.FilterBlock = function()
{
this.visible = true;
this.renderable = true;
}
/** /**
* @private * @private
*/ */

5
src/pixi/display/DisplayObjectContainer.js
View file

@ -183,8 +183,6 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
} }
updateLast = updateLast.parent; updateLast = updateLast.parent;
} }
} }
else if(index == 0) else if(index == 0)
{ {
@ -192,7 +190,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
} }
else else
{ {
previousObject = this.children[index].last; previousObject = this.children[index-1].last;
} }
nextObject = previousObject._iNext; nextObject = previousObject._iNext;
@ -218,6 +216,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
this.__renderGroup.addDisplayObjectAndChildren(child); this.__renderGroup.addDisplayObjectAndChildren(child);
} }
console.log(this.children)
} }
else else
{ {

13
src/pixi/filters/FilterBlock.js Normal file
View file

@ -0,0 +1,13 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.FilterBlock = function(mask)
{
this.graphics = mask
this.visible = true;
this.renderable = true;
}

12
src/pixi/filters/MaskFilter.js Normal file
View file

@ -0,0 +1,12 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.MaskFilter = function(graphics)
{
// the graphics data that will be used for filtering
this.graphics;
}

4
src/pixi/primitives/Graphics.js
View file

@ -19,8 +19,8 @@ PIXI.Graphics = function()
this.fillAlpha = 1; this.fillAlpha = 1;
this.lineWidth = 2; this.lineWidth = 0;
this.lineColor = "#FF0000"; this.lineColor = "black";
this.graphicsData = []; this.graphicsData = [];

93
src/pixi/renderers/canvas/CanvasGraphics.js
View file

@ -35,7 +35,6 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
if(data.type == PIXI.Graphics.POLY) if(data.type == PIXI.Graphics.POLY)
{ {
//if(data.lineWidth <= 0)continue; //if(data.lineWidth <= 0)continue;
context.beginPath(); context.beginPath();
@ -67,12 +66,13 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
} }
else if(data.type == PIXI.Graphics.RECT) else if(data.type == PIXI.Graphics.RECT)
{ {
// TODO - need to be Undefined! // TODO - need to be Undefined!
if(data.fillColor) if(data.fillColor)
{ {
context.globalAlpha = data.fillAlpha * worldAlpha; context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fillRect(points[0], points[1], points[2], points[3]); context.rect(points[0], points[1], points[2], points[3]);
} }
if(data.lineWidth) if(data.lineWidth)
@ -80,6 +80,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
context.globalAlpha = data.lineAlpha * worldAlpha; context.globalAlpha = data.lineAlpha * worldAlpha;
context.strokeRect(points[0], points[1], points[2], points[3]); context.strokeRect(points[0], points[1], points[2], points[3]);
} }
} }
else if(data.type == PIXI.Graphics.CIRC) else if(data.type == PIXI.Graphics.CIRC)
{ {
@ -144,6 +145,94 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
} }
} }
};
}
/*
* @private
* @static
* @method renderGraphicsMask
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
{
var worldAlpha = graphics.worldAlpha;
var len = graphics.graphicsData.length;
if(len > 1)
{
len = 1;
console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object")
}
for (var i=0; i < 1; i++)
{
var data = graphics.graphicsData[i];
var points = data.points;
if(data.type == PIXI.Graphics.POLY)
{
//if(data.lineWidth <= 0)continue;
context.beginPath();
context.moveTo(points[0], points[1]);
for (var j=1; j < points.length/2; j++)
{
context.lineTo(points[j * 2], points[j * 2 + 1]);
}
// if the first and last point are the same close the path - much neater :)
if(points[0] == points[points.length-2] && points[1] == points[points.length-1])
{
context.closePath();
}
}
else if(data.type == PIXI.Graphics.RECT)
{
context.beginPath();
context.rect(points[0], points[1], points[2], points[3]);
context.closePath();
}
else if(data.type == PIXI.Graphics.CIRC)
{
// TODO - need to be Undefined!
context.beginPath();
context.arc(points[0], points[1], points[2],0,2*Math.PI);
context.closePath();
}
else if(data.type == PIXI.Graphics.ELIP)
{
// elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var elipseData = data.points;
var w = elipseData[2] * 2;
var h = elipseData[3] * 2;
var x = elipseData[0] - w/2;
var y = elipseData[1] - h/2;
context.beginPath();
var kappa = .5522848,
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
context.moveTo(x, ym);
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
context.closePath();
}
}; };
} }

21
src/pixi/renderers/canvas/CanvasRenderer.js
View file

@ -198,12 +198,29 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
{ {
if(displayObject.open) if(displayObject.open)
{ {
context.save();
context.globalCompositeOperation = 'lighter'; var cacheAlpha = displayObject.mask.alpha;
var maskTransform = displayObject.mask.worldTransform;
context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5])
displayObject.mask.worldAlpha = 0.5;
context.worldAlpha = 0;
PIXI.CanvasGraphics.renderGraphicsMask(displayObject.mask, context);
// context.fillStyle = 0xFF0000;
// context.fillRect(0, 0, 200, 200);
context.clip();
displayObject.mask.worldAlpha = cacheAlpha;
//context.globalCompositeOperation = 'lighter';
} }
else else
{ {
context.globalCompositeOperation = 'source-over'; //context.globalCompositeOperation = 'source-over';
context.restore();
} }
} }
// count++ // count++

6
src/pixi/renderers/webgl/WebGLGraphics.js
View file

@ -48,7 +48,7 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
PIXI.mat3.transpose(m); PIXI.mat3.transpose(m);
// set the matrix transform for the // set the matrix transform for the
// gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m); gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m);
@ -66,13 +66,9 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
gl.vertexAttribPointer(PIXI.primitiveProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(PIXI.primitiveProgram.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); gl.vertexAttribPointer(PIXI.primitiveProgram.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
// console.log(PIXI.primitiveProgram.vertexPositionAttribute);
//console.log("Color " + PIXI.primitiveProgram.colorAttribute);
// set the index buffer! // set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
// return to default shader... // return to default shader...

87
src/pixi/renderers/webgl/WebGLRenderGroup.js
View file

@ -37,7 +37,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
// TODO what if its already has an object? should remove it // TODO what if its already has an object? should remove it
this.root = displayObject; this.root = displayObject;
//displayObject.__renderGroup = this;
this.addDisplayObjectAndChildren(displayObject); this.addDisplayObjectAndChildren(displayObject);
} }
@ -74,24 +73,38 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection)
} }
else if(renderable instanceof PIXI.Graphics) else if(renderable instanceof PIXI.Graphics)
{ {
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable, projection);//, projectionMatrix); if(renderable.visible && renderable.renderable) PIXI.WebGLGraphics.renderGraphics(renderable, projection);//, projectionMatrix);
} }
else if(renderable instanceof PIXI.FilterBlock) else if(renderable instanceof PIXI.FilterBlock)
{ {
/*
* for now only masks are supported..
*/
if(renderable.open) if(renderable.open)
{ {
// console.log(renderable.id + " open " + i) gl.enable(gl.STENCIL_TEST);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
gl.colorMask(false, false, false, false);
gl.stencilFunc(gl.ALWAYS,1,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE);
PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection);
gl.colorMask(true, true, true, false);
gl.stencilFunc(gl.NOTEQUAL,0,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
} }
else else
{ {
//console.log(renderable.id + "close " + i) gl.disable(gl.STENCIL_TEST);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); }
}
}
} }
}
} PIXI.WebGLRenderGroup.prototype.handleFilter = function(filter, projection)
{
} }
@ -114,8 +127,18 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
var endIndex; var endIndex;
var endBatchIndex; var endBatchIndex;
// get NEXT Renderable! /*
var nextRenderable = displayObject.renderable ? displayObject : this.getNextRenderable(displayObject); * LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch
* it keeps looking until it finds a sprite or gets to the end of the display
* scene graph
*/
var nextRenderable = displayObject.last;
while(nextRenderable._iNext)
{
nextRenderable = nextRenderable._iNext;
if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
}
var startBatch = nextRenderable.batch; var startBatch = nextRenderable.batch;
if(nextRenderable instanceof PIXI.Sprite) if(nextRenderable instanceof PIXI.Sprite)
@ -253,7 +276,31 @@ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable)
} }
else if(renderable instanceof PIXI.Graphics) else if(renderable instanceof PIXI.Graphics)
{ {
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix); if(renderable.visible && renderable.renderable) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
}
else if(renderable instanceof PIXI.FilterBlock)
{
/*
* for now only masks are supported..
*/
if(renderable.open)
{
gl.enable(gl.STENCIL_TEST);
gl.colorMask(false, false, false, false);
gl.stencilFunc(gl.ALWAYS,1,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE);
PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection);
gl.colorMask(true, true, true, false);
gl.stencilFunc(gl.NOTEQUAL,0,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
}
else
{
gl.disable(gl.STENCIL_TEST);
}
} }
} }
@ -500,22 +547,6 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
{ {
// TODO re-word! // TODO re-word!
// THERE IS A SPLIT IN THIS BATCH! //
var splitBatch = previousBatch.split(nextSprite);
// COOL!
// add it back into the array
/*
* OOPS!
* seems the new sprite is in the middle of a batch
* lets split it..
*/
var batch = PIXI.WebGLRenderer.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
this.batchs.splice(index+1, 0, batch, splitBatch);
nextBatch = nextSprite; nextBatch = nextSprite;
} }
} }

7
src/pixi/renderers/webgl/WebGLRenderer.js
View file

@ -48,7 +48,8 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { PIXI.gl = this.gl = this.view.getContext("experimental-webgl", {
alpha: this.transparent, alpha: this.transparent,
antialias:true, // SPEED UP?? antialias:true, // SPEED UP??
premultipliedAlpha:false premultipliedAlpha:false,
stencil:true
}); });
} }
catch (e) catch (e)
@ -68,6 +69,10 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
this.batch = new PIXI.WebGLBatch(gl); this.batch = new PIXI.WebGLBatch(gl);
gl.disable(gl.DEPTH_TEST); gl.disable(gl.DEPTH_TEST);
gl.disable(gl.CULL_FACE); gl.disable(gl.CULL_FACE);
//
gl.enable(gl.BLEND); gl.enable(gl.BLEND);
gl.colorMask(true, true, true, this.transparent); gl.colorMask(true, true, true, this.transparent);

27
src/pixi/utils/Utils.js
View file

@ -87,7 +87,32 @@ var AjaxRequest = PIXI.AjaxRequest = function()
} }
} }
/*
* DEBUGGING ONLY
*/
PIXI.runList = function(item)
{
console.log(">>>>>>>>>")
console.log("_")
var safe = 0;
var tmp = item.first;
console.log(tmp);
while(tmp._iNext)
{
safe++;
// console.log(tmp.childIndex + tmp);
tmp = tmp._iNext;
console.log(tmp);//.childIndex);
// console.log(tmp);
if(safe > 100)
{
console.log("BREAK")
break
}
}
}