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

Merge branch 'dev-filters' into dev

Browse source
This commit is contained in:
Mat Groves 2013-07-02 10:47:05 +01:00
commit b1b2e417a3
38 changed files with 20140 additions and 1301 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/Sprite.js',
'<%= dirs.src %>/display/MovieClip.js',
'<%= dirs.src %>/filters/FilterBlock.js',
'<%= dirs.src %>/text/Text.js',
'<%= dirs.src %>/text/BitmapText.js',
'<%= dirs.src %>/InteractionManager.js',
@ -122,7 +123,8 @@ module.exports = function(grunt) {
'examples/example 10 - Text',
'examples/example 11 - RenderTexture',
'examples/example 12 - Spine',
'examples/example 13 - Graphics'
'examples/example 13 - Graphics',
'examples/example 14 - Masking'
]
},
connect: {

787
bin/pixi.dev.js
View file

File diff suppressed because it is too large Load diff

10
bin/pixi.js
View file

File diff suppressed because one or more lines are too long

787
examples/example 1 - Basics/pixi.js
View file

File diff suppressed because it is too large Load diff

787
examples/example 10 - Text/pixi.js
View file

File diff suppressed because it is too large Load diff

787
examples/example 11 - RenderTexture/pixi.js
View file

File diff suppressed because it is too large Load diff

787
examples/example 12 - Spine/pixi.js
View file

File diff suppressed because it is too large Load diff

787
examples/example 13 - Graphics/pixi.js
View file

File diff suppressed because it is too large Load diff

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

787
examples/example 2 - SpriteSheet/pixi.js
View file

File diff suppressed because it is too large Load diff

98
examples/example 3 - MovieClip/index.html
View file

@ -10,6 +10,9 @@
}
</style>
<script src="pixi.js"></script>
<script src="../../src/pixi/renderers/webgl/WebGLRenderGroup.js"></script>
</head>
<body>
<script>
@ -26,18 +29,24 @@
//begin load
loader.load();
// holder to store aliens
var explosions = [];
var count = 0;
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF);;
var stage = new PIXI.Stage(0xFF0000, true);;
// create a renderer instance.
// renderer = new PIXI.CanvasRenderer(800, 600);
renderer = PIXI.autoDetectRenderer(800, 600);
var graphics = new PIXI.Graphics();
graphics.beginFill(0x0000FF, 1);
graphics.drawRect(0, 0, 800, 600);
stage.addChild(graphics);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
@ -52,37 +61,102 @@
explosionTextures.push(texture);
};
expl = [];
container = new PIXI.DisplayObjectContainer();
//container.addFilter();
stage.addChild(container);
// create a texture from an image path
// add a bunch of aliens
for (var i = 0; i < 50; i++)
for (var i = 0; i < 5; i++)
{
// create an explosion MovieClip
var explosion = new PIXI.MovieClip(explosionTextures);
explosion.position.x = Math.random() * 800;
explosion.position.x = i * 200;//Math.random() * 800;
explosion.position.y = Math.random() * 600;
explosion.anchor.x = 0.5;
explosion.anchor.y = 0.5;
explosion.pivot.x = 100;// 0.5;
explosion.pivot.y = 100;//0.5;
explosion.rotation = Math.random() * Math.PI;
explosion.scale.x = explosion.scale.y = 0.75 + Math.random() * 0.5
explosion.gotoAndPlay(Math.random() * 27);
explosion.interactive = true;
stage.addChild(explosion);
if(i<2)
{
container.addChild(explosion);
}
else
{
stage.addChild(explosion);
}
expl.push(explosion);
explosion.click = function()
{
if(!graphics.filter)
{
graphics.addFilter();
}
else
{
graphics.removeFilter();
}
// this.parent.addChildAt(this, 4);
onRemove();
}
if(i == 0)
{
//runList(container);
}
}
stage.addChildAt(graphics, 2);
// start animating
requestAnimFrame( animate );
runList(stage)
}
function animate() {
function runList(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
}
}
}
function onRemove()
{
runList(stage)
}
function animate() {
requestAnimFrame( animate );
for (var i=0; i < expl.length; i++) {
// expl[i].rotation += 0.3;
};
renderer.render(stage);
}

787
examples/example 3 - MovieClip/pixi.js
View file

File diff suppressed because it is too large Load diff

787
examples/example 4 - Balls/pixi.js
View file

File diff suppressed because it is too large Load diff

787
examples/example 5 - Morph/pixi.js
View file

File diff suppressed because it is too large Load diff

787
examples/example 6 - Interactivity/pixi.js
View file

File diff suppressed because it is too large Load diff

787
examples/example 7 - Transparent Background/pixi.js
View file

File diff suppressed because it is too large Load diff

787
examples/example 8 - Dragging/pixi.js
View file

File diff suppressed because it is too large Load diff

787
examples/example 9 - Tiling Texture/pixi.js
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 length = children.length;
//this.interactiveItems = [];
/// make an interaction tree... {item.__interactiveParent}
for (var i = length-1; i >= 0; i--)
{

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

@ -199,7 +199,6 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'visible', {
PIXI.DisplayObject.prototype.setInteractive = function(interactive)
{
this.interactive = interactive;
}
/**
@ -220,16 +219,61 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', {
}
});
PIXI.DisplayObject.prototype.addFilter = function()
/**
* 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) {
this._mask = value;
if(value)
{
this.addFilter(value)
}
else
{
this.removeFilter();
}
}
});
/*
* private
*/
PIXI.DisplayObject.prototype.addFilter = function(mask)
{
if(this.filter)return;
this.filter = true;
// insert a filter block..
var start = new PIXI.FilterBlock();
var end = new PIXI.FilterBlock();
start.mask = mask;
end.mask = mask;
start.id = end.id = county
county++;
start.first = start.last = this;
end.first = end.last = this;
start.open = true;
/*
*
* and an start filter
* insert start
*
*/
@ -239,23 +283,32 @@ PIXI.DisplayObject.prototype.addFilter = function()
var previousObject;
previousObject = this.first._iPrev;
nextObject = previousObject._iNext;
if(previousObject)
{
nextObject = previousObject._iNext;
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
}
else
{
nextObject = this;
}
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
// now insert the end filter block..
/*
*
* and an end filter
* insert end filter
*
*/
var childFirst = end
var childLast = end
var nextObject = null;
@ -269,18 +322,82 @@ PIXI.DisplayObject.prototype.addFilter = function()
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
this.first = start;
this.last = end;
var updateLast = this;
var prevLast = this.last;
while(updateLast)
{
if(updateLast.last == prevLast)
{
updateLast.last = end;
}
updateLast = updateLast.parent;
}
this.first = start;
// if webGL...
if(this.__renderGroup)
{
this.__renderGroup.addFilterBlocks(start, end);
}
mask.renderable = false;
// TODO need to check if the stage already exists...
}
PIXI.FilterBlock = function()
PIXI.DisplayObject.prototype.removeFilter = function()
{
if(!this.filter)return;
this.filter = false;
// modify the list..
var startBlock = this.first;
var nextObject = startBlock._iNext;
var previousObject = startBlock._iPrev;
if(nextObject)nextObject._iPrev = previousObject;
if(previousObject)previousObject._iNext = nextObject;
this.first = startBlock._iNext;
// remove the end filter
var lastBlock = this.last;
var nextObject = lastBlock._iNext;
var previousObject = lastBlock._iPrev;
if(nextObject)nextObject._iPrev = previousObject;
previousObject._iNext = nextObject;
// this is always true too!
// if(this.last == lastBlock)
//{
var tempLast = lastBlock._iPrev;
// need to make sure the parents last is updated too
var updateLast = this;
while(updateLast.last == lastBlock)
{
updateLast.last = tempLast;
updateLast = updateLast.parent;
if(!updateLast)break;
}
var mask = startBlock.mask
mask.renderable = true;
// if webGL...
if(this.__renderGroup)
{
this.__renderGroup.removeFilterBlocks(startBlock, lastBlock);
}
//}
}
/**

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

@ -85,9 +85,16 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
// console.log(childFirst)
var nextObject;
var previousObject;
previousObject = this.last;
// this could be wrong if there is a filter??
if(this.filter)
{
previousObject = this.last._iPrev;
}
else
{
previousObject = this.last;
}
// if(this.last._iNext)
//console.log( this.last._iNext);
@ -97,7 +104,8 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
//this.last = child.last;
// need to make sure the parents last is updated too
var updateLast = this;
var prevLast = this.last;
var prevLast = previousObject;
while(updateLast)
{
if(updateLast.last == prevLast)
@ -175,8 +183,6 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
}
updateLast = updateLast.parent;
}
}
else if(index == 0)
{
@ -184,7 +190,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
}
else
{
previousObject = this.children[index].last;
previousObject = this.children[index-1].last;
}
nextObject = previousObject._iNext;
@ -210,6 +216,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
this.__renderGroup.addDisplayObjectAndChildren(child);
}
console.log(this.children)
}
else
{
@ -225,9 +232,14 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
*/
PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
{
/*
* this funtion needs to be recoded..
* can be done a lot faster..
*/
return;
// need to fix this function :/
// need to fix this function :/
/*
// TODO I already know this??
var index = this.children.indexOf( child );
var index2 = this.children.indexOf( child2 );
@ -246,7 +258,7 @@ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
this.stage.__addChild(child);
this.stage.__addChild(child2);
}*/
}
// swap the positions..
this.children[index] = child2;
@ -256,7 +268,7 @@ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
else
{
throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this);
}
}*/
}
/**

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.lineWidth = 2;
this.lineColor = "#FF0000";
this.lineWidth = 0;
this.lineColor = "black";
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.lineWidth <= 0)continue;
context.beginPath();
@ -67,12 +66,13 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
}
else if(data.type == PIXI.Graphics.RECT)
{
// TODO - need to be Undefined!
if(data.fillColor)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
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)
@ -80,6 +80,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
context.globalAlpha = data.lineAlpha * worldAlpha;
context.strokeRect(points[0], points[1], points[2], points[3]);
}
}
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();
}
};
}

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

@ -131,6 +131,8 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
var transform;
var context = this.context;
context.globalCompositeOperation = 'source-over';
// one the display object hits this. we can break the loop
var testObject = displayObject.last._iNext;
displayObject = displayObject.first;
@ -192,7 +194,35 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
PIXI.CanvasGraphics.renderGraphics(displayObject, context);
}
else if(displayObject instanceof PIXI.FilterBlock)
{
if(displayObject.open)
{
context.save();
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
{
//context.globalCompositeOperation = 'source-over';
context.restore();
}
}
// count++
displayObject = displayObject._iNext;

1
src/pixi/renderers/webgl/WebGLBatch.js
View file

@ -536,7 +536,6 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
var gl = this.gl;
//TODO optimize this!
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
var shaderProgram = PIXI.shaderProgram;
gl.useProgram(shaderProgram);

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

@ -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.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
// console.log(PIXI.primitiveProgram.vertexPositionAttribute);
//console.log("Color " + PIXI.primitiveProgram.colorAttribute);
// set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
// return to default shader...

192
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
this.root = displayObject;
//displayObject.__renderGroup = this;
this.addDisplayObjectAndChildren(displayObject);
}
@ -48,7 +47,8 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection)
var gl = this.gl;
gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
// TODO remove this by replacing visible with getter setters..
this.checkVisibility(this.root, this.root.visible);
@ -65,7 +65,6 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection)
}
else if(renderable instanceof PIXI.TilingSprite)
{
if(renderable.visible)this.renderTilingSprite(renderable, projection);
}
else if(renderable instanceof PIXI.Strip)
@ -74,12 +73,41 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection)
}
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)
{
/*
* 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);
}
}
}
}
PIXI.WebGLRenderGroup.prototype.handleFilter = function(filter, projection)
{
}
PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection)
{
PIXI.WebGLRenderer.updateTextures();
@ -99,8 +127,18 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
var endIndex;
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;
if(nextRenderable instanceof PIXI.Sprite)
@ -238,7 +276,31 @@ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable)
}
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);
}
}
}
@ -305,6 +367,44 @@ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
this.insertObject(displayObject, previousRenderable, nextRenderable);
}
PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end)
{
start.__renderGroup = this;
end.__renderGroup = this;
/*
* LOOK FOR THE PREVIOUS RENDERABLE
* This part looks for the closest previous sprite that can go into a batch
* It keeps going back until it finds a sprite or the stage
*/
var previousRenderable = start;
while(previousRenderable != this.root)
{
previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
}
this.insertAfter(start, previousRenderable);
/*
* 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 previousRenderable2 = end;
while(previousRenderable2 != this.root)
{
previousRenderable2 = previousRenderable2._iPrev;
if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break;
}
this.insertAfter(end, previousRenderable2);
}
PIXI.WebGLRenderGroup.prototype.removeFilterBlocks = function(start, end)
{
this.removeObject(start);
this.removeObject(end);
}
PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject)
{
if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject);
@ -339,13 +439,13 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayOb
var tempObject = displayObject.first;
var testObject = displayObject.last._iNext;
do
{
tempObject.__renderGroup = this;
if(tempObject.renderable)
{
this.insertObject(tempObject, previousRenderable, nextRenderable);
previousRenderable = tempObject;
}
@ -370,12 +470,14 @@ PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displa
while(displayObject)
}
PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousObject, nextObject)
{
// while looping below THE OBJECT MAY NOT HAVE BEEN ADDED
var previousSprite = previousObject;
var nextSprite = nextObject;
/*
* so now we have the next renderable and the previous renderable
*
@ -444,6 +546,7 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
else
{
// TODO re-word!
nextBatch = nextSprite;
}
}
@ -466,29 +569,84 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
{
this.batchs.push(batch);
}
return;
}
else if(displayObject instanceof PIXI.TilingSprite)
{
// add to a batch!!
this.initTilingSprite(displayObject);
this.batchs.push(displayObject);
// this.batchs.push(displayObject);
}
else if(displayObject instanceof PIXI.Strip)
{
// add to a batch!!
this.initStrip(displayObject);
this.batchs.push(displayObject);
// this.batchs.push(displayObject);
}
else if(displayObject instanceof PIXI.Graphics)
else if(displayObject)// instanceof PIXI.Graphics)
{
//displayObject.initWebGL(this);
// add to a batch!!
//this.initStrip(displayObject);
this.batchs.push(displayObject);
//this.batchs.push(displayObject);
}
this.insertAfter(displayObject, previousSprite);
// insert and SPLIT!
}
PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject)
{
if(displayObject instanceof PIXI.Sprite)
{
var previousBatch = displayObject.batch;
if(previousBatch)
{
// so this object is in a batch!
// is it not? need to split the batch
if(previousBatch.tail == displayObject)
{
// is it tail? insert in to batchs
var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, item);
}
else
{
// TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) //
// THERE IS A SPLIT IN THIS BATCH! //
var splitBatch = previousBatch.split(displayObject.__next);
// COOL!
// add it back into the array
/*
* OOPS!
* seems the new sprite is in the middle of a batch
* lets split it..
*/
var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, item, splitBatch);
}
}
else
{
this.batchs.push(item);
}
}
else
{
var index = this.batchs.indexOf( displayObject );
this.batchs.splice(index+1, 0, item);
}
}
@ -650,7 +808,7 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
gl.uniform2f(PIXI.stripShaderProgram.projectionVector, projection.x, projection.y);
gl.uniform1f(PIXI.stripShaderProgram.alpha, strip.worldAlpha);
/*
if(strip.blendMode == PIXI.blendModes.NORMAL)
{
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
@ -659,7 +817,7 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
{
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
}
*/
if(!strip.dirty)

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", {
alpha: this.transparent,
antialias:true, // SPEED UP??
premultipliedAlpha:false
premultipliedAlpha:false,
stencil:true
});
}
catch (e)
@ -68,6 +69,10 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
this.batch = new PIXI.WebGLBatch(gl);
gl.disable(gl.DEPTH_TEST);
gl.disable(gl.CULL_FACE);
//
gl.enable(gl.BLEND);
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
}
}
}