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

Remove trailing whitespace

Browse source
This commit is contained in:
Dr. Kibitz 2013-08-31 23:33:23 -07:00
parent 277af3b0de
commit aecd78d635
55 changed files with 1337 additions and 1337 deletions
Download patch file Download diff file Expand all files Collapse all files

32
README.md
View file

@ -88,16 +88,16 @@ $> grunt
This will create a minified version at bin/pixi.js and a non-minified version at bin/pixi.dev.js.
It also copies the non-minified version to the examples.
It also copies the non-minified version to the examples.
### Current features ###
- WebGL renderer (with automatic smart batching allowing for REALLY fast performance)
- WebGL renderer (with automatic smart batching allowing for REALLY fast performance)
- Canvas renderer (Fastest in town!)
- Full scene graph
- Super easy to use API (similar to the flash display list API)
- Support for texture atlases
- Asset loader / sprite sheet loader
- Full scene graph
- Super easy to use API (similar to the flash display list API)
- Support for texture atlases
- Asset loader / sprite sheet loader
- Auto-detect which renderer should be used
- Full Mouse and Multi-touch Interaction
- Text
@ -120,32 +120,32 @@ It also copies the non-minified version to the examples.
### Usage ###
```javascript
// You can use either PIXI.WebGLRenderer or PIXI.CanvasRenderer
var renderer = new PIXI.WebGLRenderer(800, 600);
var renderer = new PIXI.WebGLRenderer(800, 600);
document.body.appendChild(renderer.view);
var stage = new PIXI.Stage;
var bunnyTexture = PIXI.Texture.fromImage("bunny.png");
var bunny = new PIXI.Sprite(bunnyTexture);
bunny.position.x = 400;
bunny.position.y = 300;
bunny.scale.x = 2;
bunny.scale.y = 2;
stage.addChild(bunny);
requestAnimationFrame(animate);
function animate() {
bunny.rotation += 0.01;
renderer.render(stage);
requestAnimationFrame(animate);
}
```

26
examples/example 1 - Basics/index.html
View file

@ -14,41 +14,41 @@
</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);
function animate() {
requestAnimFrame( animate );
// just for fun, lets rotate mr rabbit a little
bunny.rotation += 0.1;
// render the stage
// render the stage
renderer.render(stage);
}

34
examples/example 10 - Text/index.html
View file

@ -10,8 +10,8 @@
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
@ -38,7 +38,7 @@
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
function runList(item)
{
console.log(">>>>>>>>>")
@ -52,15 +52,15 @@
tmp = tmp._iNext;
console.log(tmp);//.childIndex);
// console.log(tmp);
if(safe > 100)
{
console.log("BREAK")
break
}
}
}
}
function init()
{
var assetsToLoader = ["desyrel.xml"];
@ -72,24 +72,24 @@
loader.onComplete = onAssetsLoaded;
//begin load
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
loader.load();
function onAssetsLoaded()
{
var bitmapFontText = new PIXI.BitmapText("bitmap fonts are\n now supported!", {font: "35px Desyrel", align: "right"});
bitmapFontText.position.x = 620 - bitmapFontText.width - 20;
bitmapFontText.position.y = 20;
runList(bitmapFontText)
stage.addChild(bitmapFontText);
}
// add a shiney background..
var background = PIXI.Sprite.fromImage("textDemoBG.jpg");
@ -101,7 +101,7 @@
document.body.appendChild(renderer.view);
requestAnimFrame(animate);
// create some white text using the Snippet webfont
var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", {font: "35px Snippet", fill: "white", align: "left"});
textSample.position.x = 20;
@ -119,11 +119,11 @@
countingText.position.x = 620 / 2;
countingText.position.y = 320;
countingText.anchor.x = 0.5;
stage.addChild(textSample);
stage.addChild(spinningText);
stage.addChild(countingText);
var count = 0;
var score = 0;
@ -137,16 +137,16 @@
score++;
// update the text...
countingText.setText("COUNT 4EVAR: " + score);
}
// just for fun, lets rotate the text
spinningText.rotation += 0.03;
// render the stage
// render the stage
renderer.render(stage);
}
}
</script>
</body>

60
examples/example 11 - RenderTexture/index.html
View file

@ -9,71 +9,71 @@
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(0x000000);
// create a renderer instance
var renderer = new PIXI.autoDetectRenderer(800, 600);
// 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.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
// OOH! SHINY!
// create two render textures.. these dynamic textures will be used to draw the scene into itself
var renderTexture = new PIXI.RenderTexture(800, 600);
var renderTexture2 = new PIXI.RenderTexture(800, 600);
var currentTexture = renderTexture;
// create a new sprite that uses the render texture we created above
var outputSprite = new PIXI.Sprite(currentTexture);
// align the sprite
outputSprite.position.x = 800/2;
outputSprite.position.y = 600/2;
outputSprite.anchor.x = 0.5;
outputSprite.anchor.y = 0.5;
// add to stage
stage.addChild(outputSprite);
var stuffContainer = new PIXI.DisplayObjectContainer();
stuffContainer.position.x = 800/2;
stuffContainer.position.y = 600/2
stage.addChild(stuffContainer);
// create an array of image ids..
// create an array of image ids..
var fruits = ["spinObj_01.png", "spinObj_02.png",
"spinObj_03.png", "spinObj_04.png",
"spinObj_05.png", "spinObj_06.png",
"spinObj_07.png", "spinObj_08.png"];
// create an array of items
var items = [];
// now create some items and randomly position them in the stuff container
for (var i=0; i < 20; i++)
for (var i=0; i < 20; i++)
{
var item = PIXI.Sprite.fromImage(fruits[i % fruits.length]);
item.position.x = Math.random() * 400 - 200;
item.position.y = Math.random() * 400 - 200;
item.anchor.x = 0.5;
item.anchor.y = 0.5;
stuffContainer.addChild(item);
console.log("_")
items.push(item);
@ -81,40 +81,40 @@
// used for spinning!
var count = 0;
requestAnimFrame(animate);
function animate() {
requestAnimFrame( animate );
for (var i=0; i < items.length; i++)
for (var i=0; i < items.length; i++)
{
// rotate each item
var item = items[i];
item.rotation += 0.1;
};
count += 0.01;
// swap the buffers..
var temp = renderTexture;
renderTexture = renderTexture2;
renderTexture2 = temp;
// set the new texture
outputSprite.setTexture(renderTexture);
// twist this up!
stuffContainer.rotation -= 0.01
outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2;
// render the stage to the texture
// the true clears the texture before content is rendered
renderTexture2.render(stage, new PIXI.Point(0,0), true);
// and finally render the stage
renderer.render(stage);
}

54
examples/example 12 - Spine/index.html
View file

@ -9,72 +9,72 @@
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// create an array of assets to load
var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoader);
// use callback
loader.onComplete = onAssetsLoaded
//begin load
loader.load();
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
// create a renderer instance
var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
// set the canvas width and height to fill the screen
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
function onAssetsLoaded()
{
// create a spine boy
var spineBoy = new PIXI.Spine("data/spineboySpineData.json");
// set the position
spineBoy.position.x = window.innerWidth/2;
spineBoy.position.y = window.innerHeight;
spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400;
// set up the mixes!
spineBoy.stateData.setMixByName("walk", "jump", 0.2);
spineBoy.stateData.setMixByName("jump", "walk", 0.4);
// play animation
spineBoy.state.setAnimationByName("walk", true);
stage.addChild(spineBoy);
stage.click = function()
{
spineBoy.state.setAnimationByName("jump", false);
spineBoy.state.addAnimationByName("walk", true);
}
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = window.innerWidth
logo.scale.x = logo.scale.y = 0.5;
@ -86,9 +86,9 @@
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
}
requestAnimFrame(animate);
function animate() {

56
examples/example 12 - Spine/index_dragon.html
View file

@ -9,61 +9,61 @@
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// create an array of assets to load
var assetsToLoader = ["../../logo_small.png", "data/dragonBones.json", "data/dragonBonesData.json"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoader);
// use callback
loader.onComplete = onAssetsLoaded
//begin load
loader.load();
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
// create a renderer instance
var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
// set the canvas width and height to fill the screen
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
function onAssetsLoaded()
{
var dragon = new PIXI.Spine("data/dragonBonesData.json");
var scale = 1;//window.innerHeight / 700;
dragon.position.x = window.innerWidth/2;
dragon.position.y = window.innerHeight/2 + (450 * scale);
dragon.scale.x = dragon.scale.y = scale
dragon.state.setAnimationByName("flying", true);
stage.addChild(dragon);
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = window.innerWidth
logo.scale.x = logo.scale.y = 0.5;
@ -74,13 +74,13 @@
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
}
requestAnimFrame(animate);
function animate() {

86
examples/example 12 - Spine/index_pixie.html
View file

@ -9,89 +9,89 @@
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// create an array of assets to load
var assetsToLoader = ["../../logo_small.png", "data/PixieSpineData.json", "data/Pixie.json", "data/iP4_BGtile.jpg", "data/iP4_ground.png"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoader);
// use callback
loader.onComplete = onAssetsLoaded;
//begin load
loader.load();
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
// create a renderer instance
var renderer = new PIXI.autoDetectRenderer(1024, 640);
// set the canvas width and height to fill the screen
renderer.view.style.display = "block";
renderer.view.style.width = "100%"
renderer.view.style.height = "100%"
// add render view to DOM
document.body.appendChild(renderer.view);
var postition = 0;
var background;
var background2;
function onAssetsLoaded()
{
background = PIXI.Sprite.fromImage("data/iP4_BGtile.jpg");
background2 = PIXI.Sprite.fromImage("data/iP4_BGtile.jpg");
stage.addChild(background);
stage.addChild(background2);
foreground = PIXI.Sprite.fromImage("data/iP4_ground.png");
foreground2 = PIXI.Sprite.fromImage("data/iP4_ground.png");
stage.addChild(foreground);
stage.addChild(foreground2);
foreground.position.y = foreground2.position.y = 640 - foreground2.height;
var pixie = new PIXI.Spine("data/PixieSpineData.json");
var scale = 0.3;//window.innerHeight / 700;
pixie.position.x = 1024/3;
pixie.position.y = 500
pixie.scale.x = pixie.scale.y = scale
//dragon.state.setAnimationByName("running", true);
stage.addChild(pixie);
pixie.stateData.setMixByName("running", "jump", 0.2);
pixie.stateData.setMixByName("jump", "running", 0.4);
pixie.state.setAnimationByName("running", true);
stage.mousedown = stage.touchstart = function()
{
pixie.state.setAnimationByName("jump", false);
pixie.state.addAnimationByName("running", true);
}
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = 1024
logo.scale.x = logo.scale.y = 0.5;
@ -102,42 +102,42 @@
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
requestAnimFrame(animate);
}
function animate() {
postition += 10;
background.position.x = -(postition * 0.6);
background.position.x %= 1286 * 2;
if(background.position.x<0)background.position.x += 1286 * 2;
background.position.x -= 1286;
background2.position.x = -(postition * 0.6) + 1286;
background2.position.x %= 1286 * 2;
if(background2.position.x<0)background2.position.x += 1286 * 2;
background2.position.x -= 1286;
foreground.position.x = -postition;
foreground.position.x %= 1286 * 2;
if(foreground.position.x<0)foreground.position.x += 1286 * 2;
foreground.position.x -= 1286;
foreground2.position.x = -postition + 1286;
foreground2.position.x %= 1286 * 2;
if(foreground2.position.x<0)foreground2.position.x += 1286 * 2;
foreground2.position.x -= 1286;
requestAnimFrame( animate );
renderer.render(stage);
}

54
examples/example 13 - Graphics/index.html
View file

@ -9,40 +9,40 @@
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.setInteractive(true);
var sprite= PIXI.Sprite.fromImage("spinObj_02.png");
//stage.addChild(sprite);
// create a renderer instance
// the 5the parameter is the anti aliasing
var renderer = PIXI.autoDetectRenderer(620, 380, null, false, true);
// 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.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
var graphics = new PIXI.Graphics();
// set a fill and line style
graphics.beginFill(0xFF3300);
graphics.lineStyle(10, 0xffd900, 1);
// draw a shape
graphics.moveTo(50,50);
graphics.lineTo(250, 50);
@ -51,11 +51,11 @@
graphics.lineTo(50, 220);
graphics.lineTo(50, 50);
graphics.endFill();
// set a fill and line style again
graphics.lineStyle(10, 0xFF0000, 0.8);
graphics.beginFill(0xFF700B, 1);
// draw a second shape
graphics.moveTo(210,300);
graphics.lineTo(450,320);
@ -65,56 +65,56 @@
graphics.lineTo(410,200);
graphics.lineTo(210,300);
graphics.endFill();
// draw a rectangel
graphics.lineStyle(2, 0x0000FF, 1);
graphics.drawRect(50, 250, 100, 100);
// draw a circle
graphics.lineStyle(0);
graphics.beginFill(0xFFFF0B, 0.5);
graphics.drawCircle(470, 200,100);
graphics.lineStyle(20, 0x33FF00);
graphics.moveTo(30,30);
graphics.lineTo(600, 300);
stage.addChild(graphics);
// lets create moving shape
var thing = new PIXI.Graphics();
stage.addChild(thing);
thing.position.x = 620/2;
thing.position.y = 380/2;
var count = 0;
stage.click = stage.tap = function()
{
graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
graphics.moveTo(Math.random() * 620,Math.random() * 380);
graphics.lineTo(Math.random() * 620,Math.random() * 380);
}
requestAnimFrame(animate);
function animate() {
thing.clear();
count += 0.1;
thing.clear();
thing.lineStyle(30, 0xff0000, 1);
thing.beginFill(0xffFF00, 0.5);
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 );

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

@ -9,58 +9,58 @@
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";
@ -72,26 +72,26 @@
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
@ -99,47 +99,47 @@
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);
@ -149,7 +149,7 @@
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 );
}

52
examples/example 14 - Masking/index double mask.html
View file

@ -9,61 +9,61 @@
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 bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
bgFront.anchor.x = 0.5;
bgFront.anchor.y = 0.5;
stage.addChild(bgFront);
// 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 mask1 = new PIXI.Graphics();
mask1.beginFill(0);
mask1.drawRect(0, 0, 100, 100)
bgFront.mask = mask1;
var mask2 = new PIXI.Graphics();
mask2.beginFill(0);
mask2.drawRect(500, 100, 100, 100)
bg.mask = mask2;
bg.mask = mask2;
var count = 0;
stage.click = stage.tap = function()
{
if(!container.filter)
@ -76,40 +76,40 @@
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;
count += 0.1;
renderer.render(stage);
requestAnimFrame( animate );

64
examples/example 14 - Masking/index.html
View file

@ -9,78 +9,78 @@
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)
@ -93,45 +93,45 @@
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);
@ -141,7 +141,7 @@
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 );
}

54
examples/example 2 - SpriteSheet/index.html
View file

@ -13,59 +13,59 @@
</head>
<body>
<script>
// create an array of assets to load
var assetsToLoader = [ "SpriteSheet.json"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoader);
// use callback
loader.onComplete = onAssetsLoaded
//begin load
loader.load();
// holder to store aliens
var aliens = [];
var alienFrames = ["eggHead.png", "flowerTop.png", "helmlok.png", "skully.png"];
var count = 0;
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF);
// create a renderer instance.
renderer = PIXI.autoDetectRenderer(800, 600);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
// create an empty container
var alienContainer = new PIXI.DisplayObjectContainer();
alienContainer.position.x = 400;
alienContainer.position.y = 300;
stage.addChild(alienContainer);
function onAssetsLoaded()
{
// create a texture from an image path
// add a bunch of aliens
for (var i = 0; i < 100; i++)
for (var i = 0; i < 100; i++)
{
var frameName = alienFrames[i % 4];
// create an alien using the frame name..
var alien = PIXI.Sprite.fromFrame(frameName);
/*
* fun fact for the day :)
* another way of doing the above would be
* var texture = PIXI.Texture.fromFrame(frameName);
* var alien = new PIXI.Sprite(texture);
*/
alien.position.x = Math.random() * 800 - 400;
alien.position.y = Math.random() * 600 - 300;
alien.anchor.x = 0.5;
@ -73,30 +73,30 @@
aliens.push(alien);
alienContainer.addChild(alien);
}
// start animating
requestAnimFrame( animate );
}
}
function animate() {
requestAnimFrame( animate );
// just for fun, lets rotate mr rabbit a little
for (var i = 0; i < 100; i++)
for (var i = 0; i < 100; i++)
{
var alien = aliens[i];
alien.rotation += 0.1;
}
count += 0.01;
alienContainer.scale.x = Math.sin(count)
alienContainer.scale.y = Math.sin(count)
alienContainer.rotation += 0.01
// render the stage
// render the stage
renderer.render(stage);
}

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

@ -16,71 +16,71 @@
// create an array of assets to load
var assetsToLoader = [ "SpriteSheet.json"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoader);
// use callback
loader.onComplete = onAssetsLoaded
//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);;
// create a renderer instance.
renderer = PIXI.autoDetectRenderer(800, 600);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
function onAssetsLoaded()
{
// create an array to store the textures
var explosionTextures = [];
for (var i=0; i < 26; i++)
for (var i=0; i < 26; i++)
{
var texture = PIXI.Texture.fromFrame("Explosion_Sequence_A " + (i+1) + ".png");
explosionTextures.push(texture);
};
// create a texture from an image path
// add a bunch of aliens
for (var i = 0; i < 50; i++)
for (var i = 0; i < 50; i++)
{
// create an explosion MovieClip
var explosion = new PIXI.MovieClip(explosionTextures);
explosion.position.x = Math.random() * 800;
explosion.position.y = Math.random() * 600;
explosion.anchor.x = 0.5;
explosion.anchor.y = 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);
stage.addChild(explosion);
}
// start animating
requestAnimFrame( animate );
}
}
function animate() {
requestAnimFrame( animate );
renderer.render(stage);

8
examples/example 4 - Balls/index.html
View file

@ -4,7 +4,7 @@
<title>Pixi Balls by Photon Storm</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0" />
<link rel="stylesheet" href="storm.css">
<link rel="stylesheet" href="storm.css">
<script src="jquery-1.8.3.min.js"></script>
<script src="pixi.js"></script>
</head>
@ -39,7 +39,7 @@
renderer = PIXI.autoDetectRenderer(w, h);
stage = new PIXI.Stage;
document.body.appendChild(renderer.view);
for (var i = 0; i < starCount; i++)
@ -77,10 +77,10 @@
{
w = $(window).width() - 16;
h = $(window).height() - 16;
slideX = w / 2;
slideY = h / 2;
renderer.resize(w, h);
}

6
examples/example 5 - Morph/index.html
View file

@ -4,7 +4,7 @@
<title>Pixi Morph by Photon Storm</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0" />
<link rel="stylesheet" href="storm.css">
<link rel="stylesheet" href="storm.css">
<script src="jquery-1.8.3.min.js"></script>
<script src="pixi.js"></script>
</head>
@ -45,7 +45,7 @@
renderer = PIXI.autoDetectRenderer(w, h);
stage = new PIXI.Stage;
document.body.appendChild(renderer.view);
makeObject(0);
@ -298,7 +298,7 @@
{
w = $(window).width() - 16;
h = $(window).height() - 16;
renderer.resize(w, h);
}

98
examples/example 6 - Interactivity/index.html
View file

@ -8,7 +8,7 @@
padding: 0;
background-color: #000000;
}
#help{
position: absolute;
z-index: 20;
@ -19,71 +19,71 @@
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
// the second parameter is interactivity...
var interactive = true;
var stage = new PIXI.Stage(0x000000, interactive);
// create a renderer instance.
var renderer = PIXI.autoDetectRenderer(620, 400);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame( animate );
// create a background..
var background = PIXI.Sprite.fromImage("button_test_BG.jpg");
// add background to stage..
stage.addChild(background);
// create some textures from an image path
var textureButton = PIXI.Texture.fromImage("button.png");
var textureButtonDown = PIXI.Texture.fromImage("buttonDown.png");
var textureButtonOver = PIXI.Texture.fromImage("buttonOver.png");
var buttons = [];
var buttonPositions = [175,75,
600-145, 75,
600/2 - 20, 400/2 + 10,
175, 400-75,
600-115, 400-95];
for (var i=0; i < 5; i++)
for (var i=0; i < 5; i++)
{
var button = new PIXI.Sprite(textureButton);
button.buttonMode = true;
button.anchor.x = 0.5;
button.anchor.y = 0.5;
button.position.x = buttonPositions[i*2];
button.position.y = buttonPositions[i*2 + 1];
// make the button interactive..
// make the button interactive..
button.interactive = true;
// set the mousedown and touchstart callback..
button.mousedown = button.touchstart = function(data){
this.isdown = true;
this.setTexture(textureButtonDown);
this.alpha = 1;
}
// set the mouseup and touchend callback..
button.mouseup = button.touchend = button.mouseupoutside = button.touchendoutside = function(data){
this.isdown = false;
if(this.isOver)
{
this.setTexture(textureButtonOver);
@ -93,82 +93,82 @@
this.setTexture(textureButton);
}
}
// set the mouseover callback..
button.mouseover = function(data){
this.isOver = true;
if(this.isdown)return
this.setTexture(textureButtonOver)
}
// set the mouseout callback..
button.mouseout = function(data){
this.isOver = false;
if(this.isdown)return
this.setTexture(textureButton)
}
button.click = function(data){
// click!
console.log("CLICK!");
// alert("CLICK!")
}
button.tap = function(data){
// click!
console.log("TAP!!");
//this.alpha = 0.5;
}
// add it to the stage
stage.addChild(button);
// add button to array
buttons.push(button);
};
// set some silly values..
buttons[0].scale.x = 1.2;
buttons[1].scale.y = 1.2;
buttons[2].rotation = Math.PI/10;
buttons[3].scale.x = 0.8;
buttons[3].scale.y = 0.8;
buttons[4].scale.x = 0.8;
buttons[4].scale.y = 1.2;
buttons[4].rotation = Math.PI;
// var button1 =
// var button1 =
function animate() {
requestAnimFrame( animate );
// render the stage
// render the stage
// do a test..
renderer.render(stage);
}
// add a logo!
var pixiLogo = PIXI.Sprite.fromImage("pixi.png");
stage.addChild(pixiLogo);
pixiLogo.position.x = 620 - 56;
pixiLogo.position.y = 400- 32;
pixiLogo.setInteractive(true);
pixiLogo.click = pixiLogo.tap = function(){
var win=window.open("https://github.com/GoodBoyDigital/pixi.js", '_blank');
}
</script>

26
examples/example 7 - Transparent Background/index.html
View file

@ -8,7 +8,7 @@
padding: 0;
background-color: #FFFFFF;
}
.textHolder{
width: 400px;
}
@ -27,43 +27,43 @@
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>
<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, null, true);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
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);
function animate() {
requestAnimFrame( animate );
// just for fun, lets rotate mr rabbit a little
bunny.rotation += 0.1;
// render the stage
// render the stage
renderer.render(stage);
}

46
examples/example 8 - Dragging/index.html
View file

@ -7,9 +7,9 @@
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
.textHolder{
width: 400px;
}
@ -18,52 +18,52 @@
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x97c56e, true);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimFrame( animate );
// create a texture from an image path
var texture = PIXI.Texture.fromImage("bunny.png");
for (var i=0; i < 10; i++)
for (var i=0; i < 10; i++)
{
createBunny(Math.random() * window.innerWidth, Math.random() * window.innerHeight)
};
function createBunny(x, y)
{
// create our little bunny friend..
var bunny = new PIXI.Sprite(texture);
// bunny.width = 300;
// enable the bunny to be interactive.. this will allow it to respond to mouse and touch events
// enable the bunny to be interactive.. this will allow it to respond to mouse and touch events
bunny.interactive = true;
// this button mode will mean the hand cursor appears when you rollover the bunny with your mouse
bunny.buttonMode = true;
// center the bunnys anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// make it a bit bigger, so its easier to touch
bunny.scale.x = bunny.scale.y = 3;
// use the mousedown and touchstart
bunny.mousedown = bunny.touchstart = function(data)
{
// stop the default event...
data.originalEvent.preventDefault();
// store a refference to the data
// The reason for this is because of multitouch
// we want to track the movement of this particular touch
@ -71,7 +71,7 @@
this.alpha = 0.9;
this.dragging = true;
};
// set the events for when the mouse is released or a touch is released
bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data)
{
@ -80,7 +80,7 @@
// set the interaction data to null
this.data = null;
};
// set the callbacks for when the mouse or a touch moves
bunny.mousemove = bunny.touchmove = function(data)
{
@ -92,22 +92,22 @@
this.position.y = newPosition.y;
}
}
// move the sprite to its designated position
bunny.position.x = x;
bunny.position.y = y;
// add it to the stage
stage.addChild(bunny);
}
function animate() {
requestAnimFrame( animate );
// just for fun, lets rotate mr rabbit a little
//stage.interactionManager.update();
// render the stage
// render the stage
renderer.render(stage);
}

30
examples/example 9 - Tiling Texture/index.html
View file

@ -7,9 +7,9 @@
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
.textHolder{
width: 400px;
}
@ -18,47 +18,47 @@
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x97c56e, true);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimFrame( animate );
// create a texture from an image path
var texture = PIXI.Texture.fromImage("p2.jpeg");
// create a tiling sprite..
// requires a texture, width and height
// to work in webGL the texture size must be a power of two
var tilingSprite = new PIXI.TilingSprite(texture, window.innerWidth, window.innerHeight)
var count = 0;
stage.addChild(tilingSprite);
function animate() {
requestAnimFrame( animate );
count += 0.005
tilingSprite.tileScale.x = 2 + Math.sin(count);
tilingSprite.tileScale.y = 2 + Math.cos(count);
tilingSprite.tilePosition.x += 1;
tilingSprite.tilePosition.y += 1;
// just for fun, lets rotate mr rabbit a little
//stage.interactionManager.update();
// render the stage
// render the stage
renderer.render(stage);
}

182
src/pixi/InteractionManager.js
View file

@ -39,7 +39,7 @@ PIXI.InteractionManager = function(stage)
this.touchs = {};
// helpers
this.tempPoint = new PIXI.Point();
//this.tempMatrix = mat3.create();
@ -61,8 +61,8 @@ PIXI.InteractionManager = function(stage)
this.onTouchStart = this.onTouchStart.bind(this);
this.onTouchEnd = this.onTouchEnd.bind(this);
this.onTouchMove = this.onTouchMove.bind(this);
this.last = 0;
}
@ -81,12 +81,12 @@ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObj
{
var children = displayObject.children;
var length = children.length;
/// make an interaction tree... {item.__interactiveParent}
for (var i = length-1; i >= 0; i--)
{
var child = children[i];
// if(child.visible) {
// push all interactive bits
if(child.interactive)
@ -146,7 +146,7 @@ PIXI.InteractionManager.prototype.setTarget = function(target)
PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement)
{
//remove previouse listeners
if( this.interactionDOMElement !== null )
if( this.interactionDOMElement !== null )
{
this.interactionDOMElement.style['-ms-content-zooming'] = '';
this.interactionDOMElement.style['-ms-touch-action'] = '';
@ -162,12 +162,12 @@ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement)
}
if (window.navigator.msPointerEnabled)
if (window.navigator.msPointerEnabled)
{
// time to remove some of that zoom in ja..
domElement.style['-ms-content-zooming'] = 'none';
domElement.style['-ms-touch-action'] = 'none';
// DO some window specific touch!
}
@ -193,7 +193,7 @@ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement)
PIXI.InteractionManager.prototype.update = function()
{
if(!this.target)return;
// frequency of 30fps??
var now = Date.now();
var diff = now - this.last;
@ -201,44 +201,44 @@ PIXI.InteractionManager.prototype.update = function()
if(diff < 1)return;
this.last = now;
//
// ok.. so mouse events??
// yes for now :)
// OPTIMSE - how often to check??
if(this.dirty)
{
this.dirty = false;
var len = this.interactiveItems.length;
for (var i=0; i < len; i++) {
this.interactiveItems[i].interactiveChildren = false;
}
this.interactiveItems = [];
if(this.stage.interactive)this.interactiveItems.push(this.stage);
// go through and collect all the objects that are interactive..
this.collectInteractiveSprite(this.stage, this.stage);
}
// loop through interactive objects!
var length = this.interactiveItems.length;
this.interactionDOMElement.style.cursor = "default";
this.interactionDOMElement.style.cursor = "default";
for (var i = 0; i < length; i++)
{
var item = this.interactiveItems[i];
//if(!item.visible)continue;
// OPTIMISATION - only calculate every time if the mousemove function exists..
// OK so.. does the object have any other interactive functions?
// hit-test the clip!
if(item.mouseover || item.mouseout || item.buttonMode)
{
// ok so there are some functions so lets hit test it..
@ -248,13 +248,13 @@ PIXI.InteractionManager.prototype.update = function()
// loks like there was a hit!
if(item.__hit)
{
if(item.buttonMode) this.interactionDOMElement.style.cursor = "pointer";
if(item.buttonMode) this.interactionDOMElement.style.cursor = "pointer";
if(!item.__isOver)
{
if(item.mouseover)item.mouseover(this.mouse);
item.__isOver = true;
item.__isOver = true;
}
}
else
@ -263,11 +263,11 @@ PIXI.InteractionManager.prototype.update = function()
{
// roll out!
if(item.mouseout)item.mouseout(this.mouse);
item.__isOver = false;
item.__isOver = false;
}
}
}
// --->
}
}
@ -284,18 +284,18 @@ PIXI.InteractionManager.prototype.onMouseMove = function(event)
this.mouse.originalEvent = event || window.event; //IE uses window.event
// TODO optimize by not check EVERY TIME! maybe half as often? //
var rect = this.interactionDOMElement.getBoundingClientRect();
this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width);
this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height);
var length = this.interactiveItems.length;
var global = this.mouse.global;
for (var i = 0; i < length; i++)
{
var item = this.interactiveItems[i];
if(item.mousemove)
{
//call the function!
@ -314,34 +314,34 @@ PIXI.InteractionManager.prototype.onMouseMove = function(event)
PIXI.InteractionManager.prototype.onMouseDown = function(event)
{
this.mouse.originalEvent = event || window.event; //IE uses window.event
// loop through inteaction tree...
// hit test each item! ->
// hit test each item! ->
// get interactive items under point??
//stage.__i
var length = this.interactiveItems.length;
var global = this.mouse.global;
var index = 0;
var parent = this.stage;
// while
// hit test
// while
// hit test
for (var i = 0; i < length; i++)
{
var item = this.interactiveItems[i];
if(item.mousedown || item.click)
{
item.__mouseIsDown = true;
item.__hit = this.hitTest(item, this.mouse);
if(item.__hit)
{
//call the function!
if(item.mousedown)item.mousedown(this.mouse);
item.__isDown = true;
// just the one!
if(!item.interactiveChildren)break;
}
@ -353,18 +353,18 @@ PIXI.InteractionManager.prototype.onMouseDown = function(event)
PIXI.InteractionManager.prototype.onMouseOut = function(event)
{
var length = this.interactiveItems.length;
this.interactionDOMElement.style.cursor = "default";
this.interactionDOMElement.style.cursor = "default";
for (var i = 0; i < length; i++)
{
var item = this.interactiveItems[i];
if(item.__isOver)
{
this.mouse.target = item;
if(item.mouseout)item.mouseout(this.mouse);
item.__isOver = false;
item.__isOver = false;
}
}
}
@ -379,21 +379,21 @@ PIXI.InteractionManager.prototype.onMouseOut = function(event)
PIXI.InteractionManager.prototype.onMouseUp = function(event)
{
this.mouse.originalEvent = event || window.event; //IE uses window.event
var global = this.mouse.global;
var length = this.interactiveItems.length;
var up = false;
for (var i = 0; i < length; i++)
{
var item = this.interactiveItems[i];
if(item.mouseup || item.mouseupoutside || item.click)
{
item.__hit = this.hitTest(item, this.mouse);
if(item.__hit && !up)
{
//call the function!
@ -405,7 +405,7 @@ PIXI.InteractionManager.prototype.onMouseUp = function(event)
{
if(item.click)item.click(this.mouse);
}
if(!item.interactiveChildren)up = true;
}
else
@ -415,8 +415,8 @@ PIXI.InteractionManager.prototype.onMouseUp = function(event)
if(item.mouseupoutside)item.mouseupoutside(this.mouse);
}
}
item.__isDown = false;
item.__isDown = false;
}
}
}
@ -432,7 +432,7 @@ PIXI.InteractionManager.prototype.onMouseUp = function(event)
PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
{
var global = interactionData.global;
if(item.vcount !== PIXI.visibleCount)return false;
var isSprite = (item instanceof PIXI.Sprite),
@ -444,7 +444,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id;
interactionData.target = item;
//a sprite or display object with a hit area defined
if(item.hitArea && item.hitArea.contains) {
if(item.hitArea.contains(x, y)) {
@ -453,7 +453,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
return true;
}
return false;
}
// a sprite with no hitarea defined
@ -463,11 +463,11 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
height = item.texture.frame.height,
x1 = -width * item.anchor.x,
y1;
if(x > x1 && x < x1 + width)
{
y1 = -height * item.anchor.y;
if(y > y1 && y < y1 + height)
{
// set the target property if a hit is true!
@ -478,7 +478,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
}
var length = item.children.length;
for (var i = 0; i < length; i++)
{
var tempItem = item.children[i];
@ -491,7 +491,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
}
}
return false;
return false;
}
/**
@ -505,18 +505,18 @@ PIXI.InteractionManager.prototype.onTouchMove = function(event)
{
var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
for (var i=0; i < changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
var touchData = this.touchs[touchEvent.identifier];
touchData.originalEvent = event || window.event;
// update the touch position
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height);
}
var length = this.interactiveItems.length;
for (var i = 0; i < length; i++)
{
@ -535,38 +535,38 @@ PIXI.InteractionManager.prototype.onTouchMove = function(event)
PIXI.InteractionManager.prototype.onTouchStart = function(event)
{
var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
for (var i=0; i < changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
var touchData = this.pool.pop();
if(!touchData)touchData = new PIXI.InteractionData();
touchData.originalEvent = event || window.event;
this.touchs[touchEvent.identifier] = touchData;
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height);
var length = this.interactiveItems.length;
for (var j = 0; j < length; j++)
{
var item = this.interactiveItems[j];
if(item.touchstart || item.tap)
{
item.__hit = this.hitTest(item, touchData);
if(item.__hit)
{
//call the function!
if(item.touchstart)item.touchstart(touchData);
item.__isDown = true;
item.__touchData = touchData;
if(!item.interactiveChildren)break;
}
}
@ -586,28 +586,28 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
//this.mouse.originalEvent = event || window.event; //IE uses window.event
var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
for (var i=0; i < changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
var touchData = this.touchs[touchEvent.identifier];
var up = false;
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height);
var length = this.interactiveItems.length;
for (var j = 0; j < length; j++)
{
var item = this.interactiveItems[j];
var itemTouchData = item.__touchData; // <-- Here!
item.__hit = this.hitTest(item, touchData);
if(itemTouchData == touchData)
{
// so this one WAS down...
touchData.originalEvent = event || window.event;
// hitTest??
if(item.touchend || item.tap)
{
if(item.__hit && !up)
@ -617,7 +617,7 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
{
if(item.tap)item.tap(touchData);
}
if(!item.interactiveChildren)up = true;
}
else
@ -627,16 +627,16 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
if(item.touchendoutside)item.touchendoutside(touchData);
}
}
item.__isDown = false;
}
item.__touchData = null;
}
else
{
}
}
// remove the touch..
@ -656,11 +656,11 @@ PIXI.InteractionData = function()
/**
* This point stores the global coords of where the touch/mouse event happened
*
* @property global
* @property global
* @type Point
*/
this.global = new PIXI.Point();
// this is here for legacy... but will remove
this.local = new PIXI.Point();
@ -692,7 +692,7 @@ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject)
{
var worldTransform = displayObject.worldTransform;
var global = this.global;
// do a cheeky transform to get the mouse coords;
var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2],
a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5],

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

@ -19,7 +19,7 @@ PIXI.Circle = function(x, y, radius)
* @default 0
*/
this.x = x || 0;
/**
* @property y
* @type Number

6
src/pixi/core/Ellipse.js
View file

@ -20,21 +20,21 @@ PIXI.Ellipse = function(x, y, width, height)
* @default 0
*/
this.x = x || 0;
/**
* @property y
* @type Number
* @default 0
*/
this.y = y || 0;
/**
* @property width
* @type Number
* @default 0
*/
this.width = width || 0;
/**
* @property height
* @type Number

54
src/pixi/core/Matrix.js
View file

@ -27,7 +27,7 @@ PIXI.mat3.create = function()
matrix[6] = 0;
matrix[7] = 0;
matrix[8] = 1;
return matrix;
}
@ -43,7 +43,7 @@ PIXI.mat3.identity = function(matrix)
matrix[6] = 0;
matrix[7] = 0;
matrix[8] = 1;
return matrix;
}
@ -70,35 +70,35 @@ PIXI.mat4.create = function()
matrix[13] = 0;
matrix[14] = 0;
matrix[15] = 1;
return matrix;
}
PIXI.mat3.multiply = function (mat, mat2, dest)
PIXI.mat3.multiply = function (mat, mat2, dest)
{
if (!dest) { dest = mat; }
// Cache the matrix values (makes for huge speed increases!)
var a00 = mat[0], a01 = mat[1], a02 = mat[2],
a10 = mat[3], a11 = mat[4], a12 = mat[5],
a20 = mat[6], a21 = mat[7], a22 = mat[8],
b00 = mat2[0], b01 = mat2[1], b02 = mat2[2],
b10 = mat2[3], b11 = mat2[4], b12 = mat2[5],
b20 = mat2[6], b21 = mat2[7], b22 = mat2[8];
dest[0] = b00 * a00 + b01 * a10 + b02 * a20;
dest[1] = b00 * a01 + b01 * a11 + b02 * a21;
dest[2] = b00 * a02 + b01 * a12 + b02 * a22;
dest[3] = b10 * a00 + b11 * a10 + b12 * a20;
dest[4] = b10 * a01 + b11 * a11 + b12 * a21;
dest[5] = b10 * a02 + b11 * a12 + b12 * a22;
dest[6] = b20 * a00 + b21 * a10 + b22 * a20;
dest[7] = b20 * a01 + b21 * a11 + b22 * a21;
dest[8] = b20 * a02 + b21 * a12 + b22 * a22;
return dest;
}
@ -115,11 +115,11 @@ PIXI.mat3.clone = function(mat)
matrix[6] = mat[6];
matrix[7] = mat[7];
matrix[8] = mat[8];
return matrix;
}
PIXI.mat3.transpose = function (mat, dest)
PIXI.mat3.transpose = function (mat, dest)
{
// If we are transposing ourselves we can skip a few steps but have to cache some values
if (!dest || mat === dest) {
@ -147,30 +147,30 @@ PIXI.mat3.transpose = function (mat, dest)
return dest;
}
PIXI.mat3.toMat4 = function (mat, dest)
PIXI.mat3.toMat4 = function (mat, dest)
{
if (!dest) { dest = PIXI.mat4.create(); }
dest[15] = 1;
dest[14] = 0;
dest[13] = 0;
dest[12] = 0;
dest[11] = 0;
dest[10] = mat[8];
dest[9] = mat[7];
dest[8] = mat[6];
dest[7] = 0;
dest[6] = mat[5];
dest[5] = mat[4];
dest[4] = mat[3];
dest[3] = 0;
dest[2] = mat[2];
dest[1] = mat[1];
dest[0] = mat[0];
return dest;
}
@ -198,19 +198,19 @@ PIXI.mat4.create = function()
matrix[13] = 0;
matrix[14] = 0;
matrix[15] = 1;
return matrix;
}
PIXI.mat4.transpose = function (mat, dest)
PIXI.mat4.transpose = function (mat, dest)
{
// If we are transposing ourselves we can skip a few steps but have to cache some values
if (!dest || mat === dest)
if (!dest || mat === dest)
{
var a01 = mat[1], a02 = mat[2], a03 = mat[3],
a12 = mat[6], a13 = mat[7],
a23 = mat[11];
mat[1] = mat[4];
mat[2] = mat[8];
mat[3] = mat[12];
@ -225,7 +225,7 @@ PIXI.mat4.transpose = function (mat, dest)
mat[14] = a23;
return mat;
}
dest[0] = mat[0];
dest[1] = mat[4];
dest[2] = mat[8];
@ -245,18 +245,18 @@ PIXI.mat4.transpose = function (mat, dest)
return dest;
}
PIXI.mat4.multiply = function (mat, mat2, dest)
PIXI.mat4.multiply = function (mat, mat2, dest)
{
if (!dest) { dest = mat; }
// Cache the matrix values (makes for huge speed increases!)
var a00 = mat[ 0], a01 = mat[ 1], a02 = mat[ 2], a03 = mat[3];
var a10 = mat[ 4], a11 = mat[ 5], a12 = mat[ 6], a13 = mat[7];
var a20 = mat[ 8], a21 = mat[ 9], a22 = mat[10], a23 = mat[11];
var a30 = mat[12], a31 = mat[13], a32 = mat[14], a33 = mat[15];
// Cache only the current line of the second matrix
var b0 = mat2[0], b1 = mat2[1], b2 = mat2[2], b3 = mat2[3];
var b0 = mat2[0], b1 = mat2[1], b2 = mat2[2], b3 = mat2[3];
dest[0] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
dest[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
dest[2] = b0*a02 + b1*a12 + b2*a22 + b3*a32;

6
src/pixi/core/Point.js
View file

@ -6,19 +6,19 @@
* The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis.
*
* @class Point
* @constructor
* @constructor
* @param x {Number} position of the point
* @param y {Number} position of the point
*/
PIXI.Point = function(x, y)
{
/**
* @property x
* @property x
* @type Number
* @default 0
*/
this.x = x || 0;
/**
* @property y
* @type Number

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

@ -6,7 +6,7 @@
* the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height.
*
* @class Rectangle
* @constructor
* @constructor
* @param x {Number} The X coord of the upper-left corner of the rectangle
* @param y {Number} The Y coord of the upper-left corner of the rectangle
* @param width {Number} The overall width of this rectangle
@ -20,21 +20,21 @@ PIXI.Rectangle = function(x, y, width, height)
* @default 0
*/
this.x = x || 0;
/**
* @property y
* @type Number
* @default 0
*/
this.y = y || 0;
/**
* @property width
* @type Number
* @default 0
*/
this.width = width || 0;
/**
* @property height
* @type Number
@ -71,7 +71,7 @@ PIXI.Rectangle.prototype.contains = function(x, y)
if(x >= x1 && x <= x1 + this.width)
{
var y1 = this.y;
if(y >= y1 && y <= y1 + this.height)
{
return true;

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

@ -50,7 +50,7 @@ PIXI.DisplayObject = function()
*
* @property alpha
* @type Number
*/
*/
this.alpha = 1;
/**
@ -58,7 +58,7 @@ PIXI.DisplayObject = function()
*
* @property visible
* @type Boolean
*/
*/
this.visible = true;
/**
@ -67,7 +67,7 @@ PIXI.DisplayObject = function()
*
* @property hitArea
* @type Rectangle|Circle|Ellipse|Polygon
*/
*/
this.hitArea = null;
/**
@ -92,7 +92,7 @@ PIXI.DisplayObject = function()
* @property parent
* @type DisplayObjectContainer
* @readOnly
*/
*/
this.parent = null;
/**
@ -101,7 +101,7 @@ PIXI.DisplayObject = function()
* @property stage
* @type Stage
* @readOnly
*/
*/
this.stage = null;
/**
@ -268,7 +268,7 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', {
},
set: function(value) {
this._interactive = value;
// TODO more to be done here..
// need to sort out a re-crawl!
if(this.stage)this.stage.dirty = true;
@ -288,9 +288,9 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
return this._mask;
},
set: function(value) {
this._mask = value;
if(value)
{
this.addFilter(value)
@ -313,50 +313,50 @@ 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.first = start.last = this;
end.first = end.last = this;
start.open = true;
/*
* insert start
*/
var childFirst = start
var childLast = start
var nextObject;
var previousObject;
previousObject = this.first._iPrev;
if(previousObject)
{
nextObject = previousObject._iNext;
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
previousObject._iNext = childFirst;
}
else
{
nextObject = this;
}
}
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
// now insert the end filter block..
/*
* insert end filter
*/
@ -364,21 +364,21 @@ PIXI.DisplayObject.prototype.addFilter = function(mask)
var childLast = end
var nextObject = null;
var previousObject = null;
previousObject = this.last;
nextObject = previousObject._iNext;
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
previousObject._iNext = childFirst;
var updateLast = this;
var prevLast = this.last;
while(updateLast)
{
@ -388,17 +388,17 @@ PIXI.DisplayObject.prototype.addFilter = function(mask)
}
updateLast = updateLast.parent;
}
this.first = start;
// if webGL...
if(this.__renderGroup)
{
this.__renderGroup.addFilterBlocks(start, end);
}
mask.renderable = false;
}
/*
@ -411,30 +411,30 @@ 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;
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;
previousObject._iNext = nextObject;
// this is always true too!
var tempLast = lastBlock._iPrev;
var tempLast = lastBlock._iPrev;
// need to make sure the parents last is updated too
var updateLast = this;
while(updateLast.last == lastBlock)
@ -443,10 +443,10 @@ PIXI.DisplayObject.prototype.removeFilter = function()
updateLast = updateLast.parent;
if(!updateLast)break;
}
var mask = startBlock.mask
mask.renderable = true;
// if webGL...
if(this.__renderGroup)
{
@ -468,8 +468,8 @@ PIXI.DisplayObject.prototype.updateTransform = function()
this.rotationCache = this.rotation;
this._sr = Math.sin(this.rotation);
this._cr = Math.cos(this.rotation);
}
}
var localTransform = this.localTransform;
var parentTransform = this.parent.worldTransform;
var worldTransform = this.worldTransform;
@ -478,12 +478,12 @@ PIXI.DisplayObject.prototype.updateTransform = function()
localTransform[1] = -this._sr * this.scale.y
localTransform[3] = this._sr * this.scale.x;
localTransform[4] = this._cr * this.scale.y;
// TODO --> do we even need a local matrix???
var px = this.pivot.x;
var py = this.pivot.y;
// Cache the matrix values (makes for huge speed increases!)
var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1],
a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3],
@ -493,7 +493,7 @@ PIXI.DisplayObject.prototype.updateTransform = function()
localTransform[2] = a02
localTransform[5] = a12
worldTransform[0] = b00 * a00 + b01 * a10;
worldTransform[1] = b00 * a01 + b01 * a11;
worldTransform[2] = b00 * a02 + b01 * a12 + b02;
@ -505,7 +505,7 @@ PIXI.DisplayObject.prototype.updateTransform = function()
// because we are using affine transformation, we can optimise the matrix concatenation process.. wooo!
// mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform);
this.worldAlpha = this.alpha * this.parent.worldAlpha;
this.vcount = PIXI.visibleCount;
}

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

@ -7,21 +7,21 @@
* A DisplayObjectContainer represents a collection of display objects.
* It is the base class of all display objects that act as a container for other objects.
*
* @class DisplayObjectContainer
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
*/
PIXI.DisplayObjectContainer = function()
{
PIXI.DisplayObject.call( this );
/**
* [read-only] The of children of this container.
*
* @property children
* @type Array<DisplayObject>
* @readOnly
*/
*/
this.children = [];
}
@ -37,7 +37,7 @@ Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'visible', {
},
set: function(value) {
this._visible = value;
}
});*/
@ -51,18 +51,18 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
{
if(child.parent != undefined)
{
//// COULD BE THIS???
child.parent.removeChild(child);
// return;
}
child.parent = this;
this.children.push(child);
this.children.push(child);
// update the stage refference..
if(this.stage)
{
var tmpChild = child;
@ -71,18 +71,18 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = this.stage;
tmpChild = tmpChild._iNext;
}
}
while(tmpChild)
}
// LINKED LIST //
// modify the list..
var childFirst = child.first
var childLast = child.last;
var nextObject;
var previousObject;
// this could be wrong if there is a filter??
if(this.filter)
{
@ -94,12 +94,12 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
}
nextObject = previousObject._iNext;
// always true in this case
// need to make sure the parents last is updated too
var updateLast = this;
var prevLast = previousObject;
while(updateLast)
{
if(updateLast.last == prevLast)
@ -108,15 +108,15 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
}
updateLast = updateLast.parent;
}
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
previousObject._iNext = childFirst;
// need to remove any render groups..
if(this.__renderGroup)
@ -126,7 +126,7 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
// add them to the new render group..
this.__renderGroup.addDisplayObjectAndChildren(child);
}
}
/**
@ -145,7 +145,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
child.parent.removeChild(child);
}
child.parent = this;
if(this.stage)
{
var tmpChild = child;
@ -157,13 +157,13 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
}
while(tmpChild)
}
// modify the list..
var childFirst = child.first;
var childLast = child.last;
var nextObject;
var previousObject;
if(index == this.children.length)
{
previousObject = this.last;
@ -186,18 +186,18 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
{
previousObject = this.children[index-1].last;
}
nextObject = previousObject._iNext;
// always true in this case
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
previousObject._iNext = childFirst;
this.children.splice(index, 0, child);
// need to remove any render groups..
@ -208,7 +208,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
// add them to the new render group..
this.__renderGroup.addDisplayObjectAndChildren(child);
}
}
else
{
@ -227,21 +227,21 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
{
/*
* this funtion needs to be recoded..
* this funtion needs to be recoded..
* can be done a lot faster..
*/
return;
// need to fix this function :/
/*
// TODO I already know this??
var index = this.children.indexOf( child );
var index2 = this.children.indexOf( child2 );
if ( index !== -1 && index2 !== -1 )
if ( index !== -1 && index2 !== -1 )
{
// cool
/*
if(this.stage)
{
@ -249,15 +249,15 @@ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
// TODO sure there is a nicer way to achieve this!
this.stage.__removeChild(child);
this.stage.__removeChild(child2);
this.stage.__addChild(child);
this.stage.__addChild(child2);
}
// swap the positions..
this.children[index] = child2;
this.children[index2] = child;
}
else
{
@ -292,22 +292,22 @@ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
{
var index = this.children.indexOf( child );
if ( index !== -1 )
if ( index !== -1 )
{
// unlink //
// modify the list..
var childFirst = child.first;
var childLast = child.last;
var nextObject = childLast._iNext;
var previousObject = childFirst._iPrev;
if(nextObject)nextObject._iPrev = previousObject;
previousObject._iNext = nextObject;
previousObject._iNext = nextObject;
if(this.last == childLast)
{
var tempLast = childFirst._iPrev;
var tempLast = childFirst._iPrev;
// need to make sure the parents last is updated too
var updateLast = this;
while(updateLast.last == childLast.last)
@ -317,10 +317,10 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
if(!updateLast)break;
}
}
childLast._iNext = null;
childFirst._iPrev = null;
// update the stage reference..
if(this.stage)
{
@ -330,16 +330,16 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = null;
tmpChild = tmpChild._iNext;
}
}
while(tmpChild)
}
// webGL trim
if(child.__renderGroup)
{
child.__renderGroup.removeDisplayObjectAndChildren(child);
}
child.parent = undefined;
this.children.splice( index, 1 );
}
@ -358,11 +358,11 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
PIXI.DisplayObjectContainer.prototype.updateTransform = function()
{
if(!this.visible)return;
PIXI.DisplayObject.prototype.updateTransform.call( this );
for(var i=0,j=this.children.length; i<j; i++)
{
this.children[i].updateTransform();
this.children[i].updateTransform();
}
}

18
src/pixi/display/MovieClip.js
View file

@ -13,7 +13,7 @@
PIXI.MovieClip = function(textures)
{
PIXI.Sprite.call(this, textures[0]);
/**
* The array of textures that make up the animation
*
@ -21,7 +21,7 @@ PIXI.MovieClip = function(textures)
* @type Array
*/
this.textures = textures;
/**
* The speed that the MovieClip will play at. Higher is faster, lower is slower
*
@ -47,7 +47,7 @@ PIXI.MovieClip = function(textures)
* @type Function
*/
this.onComplete = null;
/**
* [read-only] The index MovieClips current frame (this may not have to be a whole number)
*
@ -56,8 +56,8 @@ PIXI.MovieClip = function(textures)
* @default 0
* @readOnly
*/
this.currentFrame = 0;
this.currentFrame = 0;
/**
* [read-only] Indicates if the MovieClip is currently playing
*
@ -127,13 +127,13 @@ PIXI.MovieClip.prototype.gotoAndPlay = function(frameNumber)
PIXI.MovieClip.prototype.updateTransform = function()
{
PIXI.Sprite.prototype.updateTransform.call(this);
if(!this.playing)return;
this.currentFrame += this.animationSpeed;
var round = (this.currentFrame + 0.5) | 0;
if(this.loop || round < this.textures.length)
{
this.setTexture(this.textures[round % this.textures.length]);

16
src/pixi/display/Sprite.js
View file

@ -22,7 +22,7 @@ PIXI.Sprite = function(texture)
/**
* The anchor sets the origin point of the texture.
* The default is 0,0 this means the textures origin is the top left
* The default is 0,0 this means the textures origin is the top left
* Setting than anchor to 0.5,0.5 means the textures origin is centered
* Setting the anchor to 1,1 would mean the textures origin points will be the bottom right
*
@ -126,9 +126,9 @@ PIXI.Sprite.prototype.setTexture = function(texture)
// stop current texture;
if(this.texture.baseTexture != texture.baseTexture)
{
this.textureChange = true;
this.textureChange = true;
this.texture = texture;
if(this.__renderGroup)
{
this.__renderGroup.updateTexture(this);
@ -138,7 +138,7 @@ PIXI.Sprite.prototype.setTexture = function(texture)
{
this.texture = texture;
}
this.updateFrame = true;
}
@ -152,18 +152,18 @@ PIXI.Sprite.prototype.setTexture = function(texture)
PIXI.Sprite.prototype.onTextureUpdate = function(event)
{
//this.texture.removeEventListener( 'update', this.onTextureUpdateBind );
// so if _width is 0 then width was not set..
if(this._width)this.scale.x = this._width / this.texture.frame.width;
if(this._height)this.scale.y = this._height / this.texture.frame.height;
this.updateFrame = true;
}
// some helper functions..
/**
*
*
* Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId
* The frame ids are created when a Texture packer file has been loaded
*
@ -180,7 +180,7 @@ PIXI.Sprite.fromFrame = function(frameId)
}
/**
*
*
* Helper function that creates a sprite that will contain a texture based on an image url
* If the image is not in the texture cache it will be loaded
*

12
src/pixi/display/Stage.js
View file

@ -88,22 +88,22 @@ PIXI.Stage.prototype.setInteractionDelegate = function(domElement)
*/
PIXI.Stage.prototype.updateTransform = function()
{
this.worldAlpha = 1;
this.worldAlpha = 1;
this.vcount = PIXI.visibleCount;
for(var i=0,j=this.children.length; i<j; i++)
{
this.children[i].updateTransform();
this.children[i].updateTransform();
}
if(this.dirty)
{
this.dirty = false;
// update interactive!
this.interactionManager.dirty = true;
}
if(this.interactive)this.interactionManager.update();
}

4
src/pixi/extras/CustomRenderable.js
View file

@ -6,14 +6,14 @@
/**
* This object is one that will allow you to specify custom rendering functions based on render type
*
* @class CustomRenderable
* @class CustomRenderable
* @extends DisplayObject
* @constructor
*/
PIXI.CustomRenderable = function()
{
PIXI.DisplayObject.call( this );
}
// constructor

86
src/pixi/extras/Rope.js
View file

@ -7,7 +7,7 @@ PIXI.Rope = function(texture, points)
{
PIXI.Strip.call( this, texture );
this.points = points;
try
{
this.verticies = new Float32Array( points.length * 4);
@ -18,12 +18,12 @@ PIXI.Rope = function(texture, points)
catch(error)
{
this.verticies = verticies
this.uvs = uvs
this.colors = colors
this.indices = indices
}
this.refresh();
}
@ -36,99 +36,99 @@ PIXI.Rope.prototype.refresh = function()
{
var points = this.points;
if(points.length < 1)return;
var uvs = this.uvs
var indices = this.indices;
var colors = this.colors;
var lastPoint = points[0];
var nextPoint;
var perp = {x:0, y:0};
var point = points[0];
this.count-=0.2;
uvs[0] = 0
uvs[1] = 1
uvs[2] = 0
uvs[3] = 1
colors[0] = 1;
colors[1] = 1;
indices[0] = 0;
indices[1] = 1;
var total = points.length;
for (var i = 1; i < total; i++)
for (var i = 1; i < total; i++)
{
var point = points[i];
var index = i * 4;
// time to do some smart drawing!
var amount = i/(total-1)
if(i%2)
{
uvs[index] = amount;
uvs[index+1] = 0;
uvs[index+2] = amount
uvs[index+3] = 1
}
else
{
uvs[index] = amount
uvs[index+1] = 0
uvs[index+2] = amount
uvs[index+3] = 1
}
index = i * 2;
colors[index] = 1;
colors[index+1] = 1;
index = i * 2;
indices[index] = index;
indices[index + 1] = index + 1;
lastPoint = point;
}
}
PIXI.Rope.prototype.updateTransform = function()
{
var points = this.points;
if(points.length < 1)return;
var verticies = this.verticies
var verticies = this.verticies
var lastPoint = points[0];
var nextPoint;
var perp = {x:0, y:0};
var point = points[0];
this.count-=0.2;
verticies[0] = point.x + perp.x
verticies[0] = point.x + perp.x
verticies[1] = point.y + perp.y //+ 200
verticies[2] = point.x - perp.x
verticies[2] = point.x - perp.x
verticies[3] = point.y - perp.y//+200
// time to do some smart drawing!
var total = points.length;
for (var i = 1; i < total; i++)
for (var i = 1; i < total; i++)
{
var point = points[i];
var index = i * 4;
if(i < points.length-1)
{
nextPoint = points[i+1];
@ -137,35 +137,35 @@ PIXI.Rope.prototype.updateTransform = function()
{
nextPoint = point
}
perp.y = -(nextPoint.x - lastPoint.x);
perp.x = nextPoint.y - lastPoint.y;
var ratio = (1 - (i / (total-1))) * 10;
if(ratio > 1)ratio = 1;
var perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y);
var num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio;
perp.x /= perpLength;
perp.y /= perpLength;
perp.x *= num;
perp.y *= num;
verticies[index] = point.x + perp.x
verticies[index] = point.x + perp.x
verticies[index+1] = point.y + perp.y
verticies[index+2] = point.x - perp.x
verticies[index+2] = point.x - perp.x
verticies[index+3] = point.y - perp.y
lastPoint = point;
}
PIXI.DisplayObjectContainer.prototype.updateTransform.call( this );
}
PIXI.Rope.prototype.setTexture = function(texture)
{
// stop current texture
// stop current texture
this.texture = texture;
this.updateFrame = true;
}

4
src/pixi/extras/Spine.js
View file

@ -125,9 +125,9 @@ PIXI.Spine.prototype.createSprite = function (slot, descriptor) {
/*
* Awesome JS run time provided by EsotericSoftware
*
*
* https://github.com/EsotericSoftware/spine-runtimes
*
*
*/
var spine = {};

26
src/pixi/extras/Strip.js
View file

@ -7,20 +7,20 @@ PIXI.Strip = function(texture, width, height)
PIXI.DisplayObjectContainer.call( this );
this.texture = texture;
this.blendMode = PIXI.blendModes.NORMAL;
try
{
this.uvs = new Float32Array([0, 1,
1, 1,
1, 0, 0,1]);
this.verticies = new Float32Array([0, 0,
0,0,
0,0, 0,
0, 0]);
this.colors = new Float32Array([1, 1, 1, 1]);
this.indices = new Uint16Array([0, 1, 2, 3]);
}
catch(error)
@ -28,18 +28,18 @@ PIXI.Strip = function(texture, width, height)
this.uvs = [0, 1,
1, 1,
1, 0, 0,1];
this.verticies = [0, 0,
0,0,
0,0, 0,
0, 0];
this.colors = [1, 1, 1, 1];
this.indices = [0, 1, 2, 3];
}
/*
this.uvs = new Float32Array()
this.verticies = new Float32Array()
@ -48,7 +48,7 @@ PIXI.Strip = function(texture, width, height)
*/
this.width = width;
this.height = height;
// load the texture!
if(texture.baseTexture.hasLoaded)
{
@ -61,7 +61,7 @@ PIXI.Strip = function(texture, width, height)
this.onTextureUpdateBind = this.onTextureUpdate.bind(this);
this.texture.addEventListener( 'update', this.onTextureUpdateBind );
}
this.renderable = true;
}
@ -73,8 +73,8 @@ PIXI.Strip.prototype.setTexture = function(texture)
{
//TODO SET THE TEXTURES
//TODO VISIBILITY
// stop current texture
// stop current texture
this.texture = texture;
this.width = texture.frame.width;
this.height = texture.frame.height;

10
src/pixi/extras/TilingSprite.js
View file

@ -45,7 +45,7 @@ PIXI.TilingSprite = function(texture, width, height)
*
* @property tileScale
* @type Point
*/
*/
this.tileScale = new PIXI.Point(1,1);
/**
@ -53,11 +53,11 @@ PIXI.TilingSprite = function(texture, width, height)
*
* @property tilePosition
* @type Point
*/
*/
this.tilePosition = new PIXI.Point(0,0);
this.renderable = true;
this.blendMode = PIXI.blendModes.NORMAL
}
@ -75,8 +75,8 @@ PIXI.TilingSprite.prototype.setTexture = function(texture)
{
//TODO SET THE TEXTURES
//TODO VISIBILITY
// stop current texture
// stop current texture
this.texture = texture;
this.updateFrame = true;
}

8
src/pixi/loaders/AssetLoader.js
View file

@ -54,8 +54,8 @@ PIXI.AssetLoader = function(assetURLs, crossorigin)
"xml": PIXI.BitmapFontLoader,
"fnt": PIXI.BitmapFontLoader
};
};
/**
@ -65,7 +65,7 @@ PIXI.AssetLoader = function(assetURLs, crossorigin)
/**
* Fired when all the assets have loaded
* @event onComplete
* @event onComplete
*/
// constructor
@ -112,7 +112,7 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function()
this.loadCount--;
this.dispatchEvent({type: "onProgress", content: this});
if(this.onProgress) this.onProgress();
if(this.loadCount == 0)
{
this.dispatchEvent({type: "onComplete", content: this});

12
src/pixi/loaders/JsonLoader.js
View file

@ -49,7 +49,7 @@ PIXI.JsonLoader = function (url, crossorigin) {
* @readOnly
*/
this.loaded = false;
};
// constructor
@ -82,7 +82,7 @@ PIXI.JsonLoader.prototype.onJSONLoaded = function () {
if (this.ajaxRequest.readyState == 4) {
if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) {
this.json = JSON.parse(this.ajaxRequest.responseText);
if(this.json.frames)
{
// sprite sheet
@ -90,12 +90,12 @@ PIXI.JsonLoader.prototype.onJSONLoaded = function () {
var textureUrl = this.baseUrl + this.json.meta.image;
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
var frameData = this.json.frames;
this.texture = image.texture.baseTexture;
image.addEventListener("loaded", function (event) {
scope.onLoaded();
});
for (var i in frameData) {
var rect = frameData[i].frame;
if (rect) {
@ -113,9 +113,9 @@ PIXI.JsonLoader.prototype.onJSONLoaded = function () {
}
}
}
image.load();
}
else if(this.json.bones)
{

12
src/pixi/loaders/SpineLoader.js
View file

@ -1,10 +1,10 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
* based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi
*
*
* Awesome JS run time provided by EsotericSoftware
* https://github.com/EsotericSoftware/spine-runtimes
*
*
*/
/**
@ -12,7 +12,7 @@
* To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format
* Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load
* See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source
* You will need to generate a sprite sheet to accompany the spine data
* You will need to generate a sprite sheet to accompany the spine data
* When loaded this class will dispatch a "loaded" event
*
* @class Spine
@ -21,7 +21,7 @@
* @param url {String} The url of the JSON file
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
*/
PIXI.SpineLoader = function(url, crossorigin)
PIXI.SpineLoader = function(url, crossorigin)
{
PIXI.EventTarget.call(this);
@ -59,7 +59,7 @@ PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader;
* @method load
*/
PIXI.SpineLoader.prototype.load = function () {
var scope = this;
var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
jsonLoader.addEventListener("loaded", function (event) {
@ -78,7 +78,7 @@ PIXI.SpineLoader.prototype.load = function () {
PIXI.SpineLoader.prototype.onJSONLoaded = function (event) {
var spineJsonParser = new spine.SkeletonJson();
var skeletonData = spineJsonParser.readSkeletonData(this.json);
PIXI.AnimCache[this.url] = skeletonData;
this.onLoaded();

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

@ -4,18 +4,18 @@
/**
* The Graphics class contains a set of methods that you can use to create primitive shapes and lines.
* The Graphics class contains a set of methods that you can use to create primitive shapes and lines.
* It is important to know that with the webGL renderer only simple polys can be filled at this stage
* Complex polys will not be filled. Heres an example of a complex poly: http://www.goodboydigital.com/wp-content/uploads/2013/06/complexPolygon.png
*
* @class Graphics
* @class Graphics
* @extends DisplayObjectContainer
* @constructor
*/
PIXI.Graphics = function()
{
PIXI.DisplayObjectContainer.call( this );
this.renderable = true;
/**
@ -76,14 +76,14 @@ PIXI.Graphics.prototype.constructor = PIXI.Graphics;
PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
{
if(this.currentPath.points.length == 0)this.graphicsData.pop();
this.lineWidth = lineWidth || 0;
this.lineColor = color || 0;
this.lineAlpha = (alpha == undefined) ? 1 : alpha;
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
this.graphicsData.push(this.currentPath);
}
@ -97,12 +97,12 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
PIXI.Graphics.prototype.moveTo = function(x, y)
{
if(this.currentPath.points.length == 0)this.graphicsData.pop();
this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
this.currentPath.points.push(x, y);
this.graphicsData.push(this.currentPath);
}
@ -158,11 +158,11 @@ PIXI.Graphics.prototype.endFill = function()
PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
{
if(this.currentPath.points.length == 0)this.graphicsData.pop();
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
points:[x, y, width, height], type:PIXI.Graphics.RECT};
this.graphicsData.push(this.currentPath);
this.dirty = true;
}
@ -178,11 +178,11 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
{
if(this.currentPath.points.length == 0)this.graphicsData.pop();
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
points:[x, y, radius, radius], type:PIXI.Graphics.CIRC};
this.graphicsData.push(this.currentPath);
this.dirty = true;
}
@ -199,11 +199,11 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
{
if(this.currentPath.points.length == 0)this.graphicsData.pop();
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
points:[x, y, width, height], type:PIXI.Graphics.ELIP};
this.graphicsData.push(this.currentPath);
this.dirty = true;
}
@ -217,7 +217,7 @@ PIXI.Graphics.prototype.clear = function()
{
this.lineWidth = 0;
this.filling = false;
this.dirty = true;
this.clearDirty = true;
this.graphicsData = [];

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

@ -10,7 +10,7 @@
*/
PIXI.CanvasGraphics = function()
{
}
@ -26,33 +26,33 @@ PIXI.CanvasGraphics = function()
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
var worldAlpha = graphics.worldAlpha;
for (var i=0; i < graphics.graphicsData.length; i++)
for (var i=0; i < graphics.graphicsData.length; i++)
{
var data = graphics.graphicsData[i];
var points = data.points;
context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
context.lineWidth = data.lineWidth;
if(data.type == PIXI.Graphics.POLY)
{
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();
}
if(data.fill)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
@ -73,14 +73,14 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
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]);
}
if(data.lineWidth)
{
context.globalAlpha = data.lineAlpha * worldAlpha;
context.strokeRect(points[0], points[1], points[2], points[3]);
}
}
else if(data.type == PIXI.Graphics.CIRC)
{
@ -88,7 +88,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
context.beginPath();
context.arc(points[0], points[1], points[2],0,2*Math.PI);
context.closePath();
if(data.fill)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
@ -103,19 +103,19 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
}
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
@ -123,15 +123,15 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
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();
if(data.fill)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
@ -144,7 +144,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
context.stroke();
}
}
};
}
@ -160,35 +160,35 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
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++)
for (var i=0; i < 1; i++)
{
var data = graphics.graphicsData[i];
var points = data.points;
if(data.type == PIXI.Graphics.POLY)
{
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)
{
@ -205,18 +205,18 @@ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
}
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
@ -224,7 +224,7 @@ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
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);
@ -232,7 +232,7 @@ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
context.closePath();
}
};
}

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

@ -54,9 +54,9 @@ PIXI.CanvasRenderer = function(width, height, view, transparent)
this.refresh = true;
// hack to enable some hardware acceleration!
//this.view.style["transform"] = "translatez(0)";
this.view.width = this.width;
this.view.height = this.height;
this.view.height = this.height;
this.count = 0;
}
@ -71,25 +71,25 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
*/
PIXI.CanvasRenderer.prototype.render = function(stage)
{
//stage.__childrenAdded = [];
//stage.__childrenRemoved = [];
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
PIXI.visibleCount++;
stage.updateTransform();
// update the background color
if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString;
this.context.setTransform(1,0,0,1,0,0);
this.context.setTransform(1,0,0,1,0,0);
this.context.clearRect(0, 0, this.width, this.height)
this.renderDisplayObject(stage);
//as
// run interaction!
if(stage.interactive)
{
@ -100,14 +100,14 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this);
}
}
// remove frame updates..
if(PIXI.Texture.frameUpdates.length > 0)
{
PIXI.Texture.frameUpdates = [];
}
}
/**
@ -121,7 +121,7 @@ PIXI.CanvasRenderer.prototype.resize = function(width, height)
{
this.width = width;
this.height = height;
this.view.width = width;
this.view.height = height;
}
@ -138,50 +138,50 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
// no loger recurrsive!
var transform;
var context = this.context;
context.globalCompositeOperation = 'source-over';
// one the display object hits this. we can break the loop
// one the display object hits this. we can break the loop
var testObject = displayObject.last._iNext;
displayObject = displayObject.first;
do
do
{
transform = displayObject.worldTransform;
if(!displayObject.visible)
{
displayObject = displayObject.last._iNext;
continue;
}
if(!displayObject.renderable)
{
displayObject = displayObject._iNext;
continue;
}
if(displayObject instanceof PIXI.Sprite)
{
var frame = displayObject.texture.frame;
if(frame && frame.width && frame.height)
{
context.globalAlpha = displayObject.worldAlpha;
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
context.drawImage(displayObject.texture.baseTexture.source,
context.drawImage(displayObject.texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
(displayObject.anchor.x) * -frame.width,
(displayObject.anchor.x) * -frame.width,
(displayObject.anchor.y) * -frame.height,
frame.width,
frame.height);
}
}
}
else if(displayObject instanceof PIXI.Strip)
{
@ -207,19 +207,19 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
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.clip();
displayObject.mask.worldAlpha = cacheAlpha;
}
else
@ -229,12 +229,12 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
}
// count++
displayObject = displayObject._iNext;
}
while(displayObject != testObject)
}
/**
@ -249,26 +249,26 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
var context = this.context;
var verticies = strip.verticies;
var uvs = strip.uvs;
var length = verticies.length/2;
this.count++;
context.beginPath();
for (var i=1; i < length-2; i++)
for (var i=1; i < length-2; i++)
{
// draw some triangles!
var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
};
};
context.fillStyle = "#FF0000";
context.fill();
context.closePath();
@ -284,26 +284,26 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
{
var context = this.context;
context.globalAlpha = sprite.worldAlpha;
if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat");
context.beginPath();
var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale;
// offset
context.scale(tileScale.x,tileScale.y);
context.translate(tilePosition.x, tilePosition.y);
context.fillStyle = sprite.__tilePattern;
context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y);
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}
@ -321,18 +321,18 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
// draw triangles!!
var verticies = strip.verticies;
var uvs = strip.uvs;
var length = verticies.length/2;
this.count++;
for (var i=1; i < length-2; i++)
for (var i=1; i < length-2; i++)
{
// draw some triangles!
var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width;
var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height;
@ -343,10 +343,10 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
context.clip();
// Compute matrix transform
var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
@ -355,16 +355,16 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;
context.transform(delta_a/delta, delta_d/delta,
delta_b/delta, delta_e/delta,
delta_c/delta, delta_f/delta);
context.drawImage(strip.texture.baseTexture.source, 0, 0);
context.restore();
};
}

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

@ -24,7 +24,7 @@ PIXI._getBatch = function(gl)
*/
PIXI._returnBatch = function(batch)
{
batch.clean();
batch.clean();
PIXI._batchs.push(batch);
}
@ -33,7 +33,7 @@ PIXI._returnBatch = function(batch)
*/
PIXI._restoreBatchs = function(gl)
{
for (var i=0; i < PIXI._batchs.length; i++)
for (var i=0; i < PIXI._batchs.length; i++)
{
PIXI._batchs[i].restoreLostContext(gl);
};
@ -54,7 +54,7 @@ PIXI._restoreBatchs = function(gl)
PIXI.WebGLBatch = function(gl)
{
this.gl = gl;
this.size = 0;
this.vertexBuffer = gl.createBuffer();
@ -108,7 +108,7 @@ PIXI.WebGLBatch.prototype.restoreLostContext = function(gl)
* @method init
* @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with
* the same base texture and blend mode will be allowed to be added to this batch
*/
*/
PIXI.WebGLBatch.prototype.init = function(sprite)
{
sprite.batch = this;
@ -128,7 +128,7 @@ PIXI.WebGLBatch.prototype.init = function(sprite)
* @method insertBefore
* @param sprite {Sprite} the sprite to be added
* @param nextSprite {nextSprite} the first sprite will be inserted before this sprite
*/
*/
PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
{
this.size++;
@ -156,7 +156,7 @@ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
* @method insertAfter
* @param sprite {Sprite} the sprite to be added
* @param previousSprite {Sprite} the first sprite will be inserted after this sprite
*/
*/
PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite)
{
this.size++;
@ -184,7 +184,7 @@ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite)
*
* @method remove
* @param sprite {Sprite} the sprite to be removed
*/
*/
PIXI.WebGLBatch.prototype.remove = function(sprite)
{
this.size--;
@ -268,7 +268,7 @@ PIXI.WebGLBatch.prototype.split = function(sprite)
* Merges two batchs together
*
* @method merge
* @param batch {WebGLBatch} the batch that will be merged
* @param batch {WebGLBatch} the batch that will be merged
*/
PIXI.WebGLBatch.prototype.merge = function(batch)
{
@ -325,10 +325,10 @@ PIXI.WebGLBatch.prototype.growBatch = function()
this.dirtyColors = true;
this.indices = new Uint16Array(this.dynamicSize * 6);
this.indices = new Uint16Array(this.dynamicSize * 6);
var length = this.indices.length/6;
for (var i=0; i < length; i++)
for (var i=0; i < length; i++)
{
var index2 = i * 6;
var index3 = i * 4;
@ -381,7 +381,7 @@ PIXI.WebGLBatch.prototype.refresh = function()
this.uvs[index +3] = frame.y / th;
this.uvs[index +4] = (frame.x + frame.width) / tw;
this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +6] = frame.x / tw;
this.uvs[index +7] = (frame.y + frame.height) / th;
@ -443,17 +443,17 @@ PIXI.WebGLBatch.prototype.update = function()
tx = worldTransform[2];
ty = worldTransform[5];
this.verticies[index + 0 ] = a * w1 + c * h1 + tx;
this.verticies[index + 0 ] = a * w1 + c * h1 + tx;
this.verticies[index + 1 ] = d * h1 + b * w1 + ty;
this.verticies[index + 2 ] = a * w0 + c * h1 + tx;
this.verticies[index + 3 ] = d * h1 + b * w0 + ty;
this.verticies[index + 2 ] = a * w0 + c * h1 + tx;
this.verticies[index + 3 ] = d * h1 + b * w0 + ty;
this.verticies[index + 4 ] = a * w0 + c * h0 + tx;
this.verticies[index + 5 ] = d * h0 + b * w0 + ty;
this.verticies[index + 4 ] = a * w0 + c * h0 + tx;
this.verticies[index + 5 ] = d * h0 + b * w0 + ty;
this.verticies[index + 6] = a * w1 + c * h0 + tx;
this.verticies[index + 7] = d * h0 + b * w1 + ty;
this.verticies[index + 6] = a * w1 + c * h0 + tx;
this.verticies[index + 7] = d * h0 + b * w1 + ty;
if(displayObject.updateFrame || displayObject.texture.updateFrame)
{
@ -472,7 +472,7 @@ PIXI.WebGLBatch.prototype.update = function()
this.uvs[index +3] = frame.y / th;
this.uvs[index +4] = (frame.x + frame.width) / tw;
this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +6] = frame.x / tw;
this.uvs[index +7] = (frame.y + frame.height) / th;
@ -522,7 +522,7 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
start = start || 0;
if(end == undefined)end = this.size;
if(this.dirty)
{
this.refresh();

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

@ -9,7 +9,7 @@
*/
PIXI.WebGLGraphics = function()
{
}
/**
@ -24,60 +24,60 @@ PIXI.WebGLGraphics = function()
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
var gl = PIXI.gl;
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
if(graphics.dirty)
{
graphics.dirty = false;
if(graphics.clearDirty)
{
graphics.clearDirty = false;
graphics._webGL.lastIndex = 0;
graphics._webGL.points = [];
graphics._webGL.indices = [];
}
PIXI.WebGLGraphics.updateGraphics(graphics);
}
PIXI.activatePrimitiveShader();
// This could be speeded up fo sure!
var m = PIXI.mat3.clone(graphics.worldTransform);
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.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.primitiveProgram.projectionVector, projection.x, projection.y);
gl.uniform1f(PIXI.primitiveProgram.alpha, graphics.worldAlpha);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
// WHY DOES THIS LINE NEED TO BE THERE???
gl.vertexAttribPointer(PIXI.shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// its not even used.. but need to be set or it breaks?
// only on pc though..
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);
// 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...
PIXI.activateDefaultShader();
}
@ -92,18 +92,18 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
*/
PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++)
for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
{
if(data.points.length>3)
if(data.points.length>3)
PIXI.WebGLGraphics.buildPoly(data, graphics._webGL);
}
if(data.lineWidth > 0)
{
PIXI.WebGLGraphics.buildLine(data, graphics._webGL);
@ -118,18 +118,18 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
PIXI.WebGLGraphics.buildCircle(data, graphics._webGL);
}
};
graphics._webGL.lastIndex = graphics.graphicsData.length;
var gl = PIXI.gl;
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW);
graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW);
}
@ -147,45 +147,45 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
{
// --- //
// need to convert points to a nice regular data
//
//
var rectData = graphicsData.points;
var x = rectData[0];
var y = rectData[1];
var width = rectData[2];
var height = rectData[3];
if(graphicsData.fill)
{
var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var verts = webGLData.points;
var indices = webGLData.indices;
var vertPos = verts.length/6;
// start
verts.push(x, y);
verts.push(r, g, b, alpha);
verts.push(x + width, y);
verts.push(r, g, b, alpha);
verts.push(x , y + height);
verts.push(r, g, b, alpha);
verts.push(x + width, y + height);
verts.push(r, g, b, alpha);
// insert 2 dead triangles..
indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3)
}
if(graphicsData.lineWidth)
{
graphicsData.points = [x, y,
@ -193,10 +193,10 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
x + width, y + height,
x, y + height,
x, y];
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
}
}
/**
@ -212,16 +212,16 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
{
// --- //
// need to convert points to a nice regular data
//
//
var rectData = graphicsData.points;
var x = rectData[0];
var y = rectData[1];
var width = rectData[2];
var height = rectData[3];
var totalSegs = 40;
var seg = (Math.PI * 2) / totalSegs ;
if(graphicsData.fill)
{
var color = HEXtoRGB(graphicsData.fillColor);
@ -230,41 +230,41 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var verts = webGLData.points;
var indices = webGLData.indices;
var vecPos = verts.length/6;
indices.push(vecPos);
for (var i=0; i < totalSegs + 1 ; i++)
for (var i=0; i < totalSegs + 1 ; i++)
{
verts.push(x,y, r, g, b, alpha);
verts.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height,
r, g, b, alpha);
indices.push(vecPos++, vecPos++);
};
indices.push(vecPos-1);
}
if(graphicsData.lineWidth)
{
graphicsData.points = [];
for (var i=0; i < totalSegs + 1; i++)
for (var i=0; i < totalSegs + 1; i++)
{
graphicsData.points.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height)
};
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
}
}
/**
@ -279,89 +279,89 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
{
// TODO OPTIMISE!
var wrap = true;
var points = graphicsData.points;
if(points.length == 0)return;
// get first and last point.. figure out the middle!
var firstPoint = new PIXI.Point( points[0], points[1] );
var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
// if the first point is the last point - goona have issues :)
if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y)
{
points.pop();
points.pop();
lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
points.unshift(midPointX, midPointY);
points.push(midPointX, midPointY)
}
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
var width = graphicsData.lineWidth / 2;
// sort color
var color = HEXtoRGB(graphicsData.lineColor);
var alpha = graphicsData.lineAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
p1x = points[0];
p1y = points[1];
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
for (var i = 1; i < length-1; i++)
{
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
@ -370,91 +370,91 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(p2x - (px-p2x), p2y - (py - p2y));
verts.push(r, g, b, alpha);
}
}
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
p1y = points[(length-2)*2 + 1]
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
for (var i=0; i < indexCount; i++)
for (var i=0; i < indexCount; i++)
{
indices.push(indexStart++);
};
indices.push(indexStart-1);
}
@ -471,25 +471,25 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
{
var points = graphicsData.points;
if(points.length < 6)return;
// get first and last point.. figure out the middle!
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
// sort color
var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
for (var i=0; i < triangles.length; i+=3)
{
indices.push(triangles[i] + vertPos);
indices.push(triangles[i] + vertPos);
@ -497,8 +497,8 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] +vertPos);
indices.push(triangles[i+2] + vertPos);
};
for (var i = 0; i < length; i++)
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
r, g, b, alpha);

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

@ -19,7 +19,7 @@ PIXI.WebGLRenderGroup = function(gl)
{
this.gl = gl;
this.root;
this.backgroundColor;
this.batchs = [];
this.toRemove = [];
@ -33,18 +33,18 @@ PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup;
*
* @method setRenderable
* @param displayObject {DisplayObject}
* @private
* @private
*/
PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
{
// has this changed??
if(this.root)this.removeDisplayObjectAndChildren(this.root);
displayObject.worldVisible = displayObject.visible;
// soooooo //
// to check if any batchs exist already??
// TODO what if its already has an object? should remove it
this.root = displayObject;
this.addDisplayObjectAndChildren(displayObject);
@ -59,26 +59,26 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
PIXI.WebGLRenderGroup.prototype.render = function(projection)
{
PIXI.WebGLRenderer.updateTextures();
var gl = this.gl;
gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
// will render all the elements in the group
var renderable;
for (var i=0; i < this.batchs.length; i++)
for (var i=0; i < this.batchs.length; i++)
{
renderable = this.batchs[i];
if(renderable instanceof PIXI.WebGLBatch)
{
this.batchs[i].render();
continue;
}
// non sprite batch..
var worldVisible = renderable.vcount === PIXI.visibleCount;
@ -102,13 +102,13 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection)
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, true);
gl.stencilFunc(gl.NOTEQUAL,0,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
@ -119,7 +119,7 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection)
}
}
}
}
/**
@ -131,7 +131,7 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection)
*/
PIXI.WebGLRenderGroup.prototype.handleFilter = function(filter, projection)
{
}
/**
@ -145,20 +145,20 @@ PIXI.WebGLRenderGroup.prototype.handleFilter = function(filter, projection)
PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection)
{
PIXI.WebGLRenderer.updateTextures();
var gl = this.gl;
gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
// to do!
// render part of the scene...
var startIndex;
var startBatchIndex;
var endIndex;
var endBatchIndex;
/*
* LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch
@ -172,14 +172,14 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
}
var startBatch = nextRenderable.batch;
if(nextRenderable instanceof PIXI.Sprite)
{
startBatch = nextRenderable.batch;
var head = startBatch.head;
var next = head;
// ok now we have the batch.. need to find the start index!
if(head == nextRenderable)
{
@ -188,7 +188,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
else
{
startIndex = 1;
while(head.__next != nextRenderable)
{
startIndex++;
@ -200,7 +200,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
startBatch = nextRenderable;
}
// Get the LAST renderable object
var lastRenderable = displayObject;
var endBatch;
@ -210,13 +210,13 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
lastItem = lastItem.children[lastItem.children.length-1];
if(lastItem.renderable)lastRenderable = lastItem;
}
if(lastRenderable instanceof PIXI.Sprite)
{
endBatch = lastRenderable.batch;
var head = endBatch.head;
if(head == lastRenderable)
{
endIndex = 0;
@ -224,7 +224,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
else
{
endIndex = 1;
while(head.__next != lastRenderable)
{
endIndex++;
@ -236,9 +236,9 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
endBatch = lastRenderable;
}
// TODO - need to fold this up a bit!
if(startBatch == endBatch)
{
if(startBatch instanceof PIXI.WebGLBatch)
@ -251,11 +251,11 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
}
return;
}
// now we have first and last!
startBatchIndex = this.batchs.indexOf(startBatch);
endBatchIndex = this.batchs.indexOf(endBatch);
// DO the first batch
if(startBatch instanceof PIXI.WebGLBatch)
{
@ -265,12 +265,12 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
this.renderSpecial(startBatch, projection);
}
// DO the middle batchs..
for (var i=startBatchIndex+1; i < endBatchIndex; i++)
for (var i=startBatchIndex+1; i < endBatchIndex; i++)
{
renderable = this.batchs[i];
if(renderable instanceof PIXI.WebGLBatch)
{
this.batchs[i].render();
@ -280,7 +280,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
this.renderSpecial(renderable, projection);
}
}
// DO the last batch..
if(endBatch instanceof PIXI.WebGLBatch)
{
@ -331,13 +331,13 @@ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
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);
// we know this is a render texture so enable alpha too..
gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.NOTEQUAL,0,0xff);
@ -359,11 +359,11 @@ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
*/
PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
{
// TODO definitely can optimse this function..
this.removeObject(displayObject);
/*
* LOOK FOR THE PREVIOUS RENDERABLE
* This part looks for the closest previous sprite that can go into a batch
@ -375,7 +375,7 @@ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
}
/*
* LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch
@ -388,7 +388,7 @@ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
nextRenderable = nextRenderable._iNext;
if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
}
this.insertObject(displayObject, previousRenderable, nextRenderable);
}
@ -416,7 +416,7 @@ PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end)
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
@ -456,20 +456,20 @@ PIXI.WebGLRenderGroup.prototype.removeFilterBlocks = function(start, end)
PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject)
{
if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject);
/*
* 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 = displayObject.first;
while(previousRenderable != this.root.first)
{
previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
}
/*
* LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch
@ -482,22 +482,22 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayOb
nextRenderable = nextRenderable._iNext;
if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
}
// one the display object hits this. we can break the loop
// one the display object hits this. we can break the loop
var tempObject = displayObject.first;
var testObject = displayObject.last._iNext;
do
do
{
tempObject.__renderGroup = this;
if(tempObject.renderable)
{
this.insertObject(tempObject, previousRenderable, nextRenderable);
previousRenderable = tempObject;
}
tempObject = tempObject._iNext;
}
while(tempObject != testObject)
@ -513,10 +513,10 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayOb
PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject)
{
if(displayObject.__renderGroup != this)return;
// var displayObject = displayObject.first;
var lastObject = displayObject.last;
do
do
{
displayObject.__renderGroup = null;
if(displayObject.renderable)this.removeObject(displayObject);
@ -539,16 +539,16 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
// 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
*
*
*/
if(displayObject instanceof PIXI.Sprite)
{
var previousBatch
var nextBatch
if(previousSprite instanceof PIXI.Sprite)
{
previousBatch = previousSprite.batch;
@ -566,13 +566,13 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
// TODO reword!
previousBatch = previousSprite;
}
if(nextSprite)
{
if(nextSprite instanceof PIXI.Sprite)
{
nextBatch = nextSprite.batch;
//batch may not exist if item was added to the display list but not to the webGL
if(nextBatch)
{
@ -588,18 +588,18 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
// THERE IS A SPLIT IN THIS BATCH! //
var splitBatch = previousBatch.split(nextSprite);
// COOL!
// add it back into the array
// add it back into the array
/*
* OOPS!
* seems the new sprite is in the middle of a batch
* lets split it..
* 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);
return;
}
}
@ -608,21 +608,21 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
else
{
// TODO re-word!
nextBatch = nextSprite;
}
}
/*
* looks like it does not belong to any batch!
* but is also not intersecting one..
* time to create anew one!
*/
var batch = PIXI.WebGLRenderer.getBatch();
batch.init(displayObject);
if(previousBatch) // if this is invalid it means
if(previousBatch) // if this is invalid it means
{
var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, batch);
@ -631,16 +631,16 @@ 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);
}
else if(displayObject instanceof PIXI.Strip)
{
@ -651,14 +651,14 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
else if(displayObject)// instanceof PIXI.Graphics)
{
//displayObject.initWebGL(this);
// add to a batch!!
//this.initStrip(displayObject);
//this.batchs.push(displayObject);
}
this.insertAfter(displayObject, previousSprite);
// insert and SPLIT!
}
@ -676,31 +676,31 @@ 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
// 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
// add it back into the array
/*
* OOPS!
* seems the new sprite is in the middle of a batch
* lets split it..
* lets split it..
*/
var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, item, splitBatch);
@ -729,25 +729,25 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
{
// loop through children..
// display object //
// add a child from the render group..
// remove it and all its children!
//displayObject.cacheVisible = false;//displayObject.visible;
/*
* removing is a lot quicker..
*
*
*/
var batchToRemove;
if(displayObject instanceof PIXI.Sprite)
{
// should always have a batch!
var batch = displayObject.batch;
if(!batch)return; // this means the display list has been altered befre rendering
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch;
@ -757,15 +757,15 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
{
batchToRemove = displayObject;
}
/*
* Looks like there is somthing that needs removing!
*/
if(batchToRemove)
if(batchToRemove)
{
var index = this.batchs.indexOf( batchToRemove );
if(index == -1)return;// this means it was added then removed before rendered
// ok so.. check to see if you adjacent batchs should be joined.
// TODO may optimise?
if(index == 0 || index == this.batchs.length-1)
@ -773,24 +773,24 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
// wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
return;
}
if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch)
{
if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode)
{
//console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
}
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
}
@ -808,26 +808,26 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
var gl = this.gl;
// make the texture tilable..
sprite.verticies = new Float32Array([0, 0,
sprite.width, 0,
sprite.width, sprite.height,
0, sprite.height]);
sprite.uvs = new Float32Array([0, 0,
1, 0,
1, 1,
0, 1]);
sprite.colors = new Float32Array([1,1,1,1]);
sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]);
sprite._vertexBuffer = gl.createBuffer();
sprite._indexBuffer = gl.createBuffer();
sprite._uvBuffer = gl.createBuffer();
sprite._colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW);
@ -839,7 +839,7 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW);
// return ( (x > 0) && ((x & (x - 1)) == 0) );
if(sprite.texture.baseTexture._glTexture)
@ -872,14 +872,14 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
//PIXI.mat4.transpose(mat4Real);
//PIXI.mat4.multiply(projectionMatrix, mat4Real, mat4Real )
gl.useProgram(PIXI.stripShaderProgram);
var m = PIXI.mat3.clone(strip.worldTransform);
PIXI.mat3.transpose(m);
// set the matrix transform for the
// set the matrix transform for the
gl.uniformMatrix3fv(PIXI.stripShaderProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.stripShaderProgram.projectionVector, projection.x, projection.y);
gl.uniform1f(PIXI.stripShaderProgram.alpha, strip.worldAlpha);
@ -894,25 +894,25 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
}
*/
if(!strip.dirty)
{
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
}
@ -922,28 +922,28 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
}
//console.log(gl.TRIANGLE_STRIP);
gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0);
gl.useProgram(PIXI.shaderProgram);
}
@ -959,31 +959,31 @@ PIXI.WebGLRenderGroup.prototype.renderTilingSprite = function(sprite, projection
{
var gl = this.gl;
var shaderProgram = PIXI.shaderProgram;
var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale;
var offsetX = tilePosition.x/sprite.texture.baseTexture.width;
var offsetY = tilePosition.y/sprite.texture.baseTexture.height;
var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x;
var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y;
sprite.uvs[0] = 0 - offsetX;
sprite.uvs[1] = 0 - offsetY;
sprite.uvs[2] = (1 * scaleX) -offsetX;
sprite.uvs[3] = 0 - offsetY;
sprite.uvs[4] = (1 *scaleX) - offsetX;
sprite.uvs[5] = (1 *scaleY) - offsetY;
sprite.uvs[6] = 0 - offsetX;
sprite.uvs[7] = (1 *scaleY) - offsetY;
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs)
this.renderStrip(sprite, projectionMatrix);
}
@ -999,12 +999,12 @@ PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
// build the strip!
var gl = this.gl;
var shaderProgram = this.shaderProgram;
strip._vertexBuffer = gl.createBuffer();
strip._indexBuffer = gl.createBuffer();
strip._uvBuffer = gl.createBuffer();
strip._colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW);
@ -1014,7 +1014,7 @@ PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
}

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

@ -21,7 +21,7 @@ PIXI.gl;
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent=false {Boolean} the transparency of the render view, default false
* @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment)
*
*
*/
PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
{
@ -32,27 +32,27 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
this.width = width || 800;
this.height = height || 600;
this.view = view || document.createElement( 'canvas' );
this.view = view || document.createElement( 'canvas' );
this.view.width = this.width;
this.view.height = this.height;
// deal with losing context..
// deal with losing context..
var scope = this;
this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false)
this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false)
this.batchs = [];
try
try
{
PIXI.gl = this.gl = this.view.getContext("experimental-webgl", {
PIXI.gl = this.gl = this.view.getContext("experimental-webgl", {
alpha: this.transparent,
antialias:!!antialias, // SPEED UP??
premultipliedAlpha:false,
stencil:true
});
}
catch (e)
}
catch (e)
{
throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
}
@ -71,7 +71,7 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
gl.disable(gl.CULL_FACE);
gl.enable(gl.BLEND);
gl.colorMask(true, true, true, this.transparent);
gl.colorMask(true, true, true, this.transparent);
PIXI.projection = new PIXI.Point(400, 300);
@ -90,7 +90,7 @@ PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
* @static
* @method getBatch
* @return {WebGLBatch}
* @private
* @private
*/
PIXI.WebGLRenderer.getBatch = function()
{
@ -114,7 +114,7 @@ PIXI.WebGLRenderer.getBatch = function()
*/
PIXI.WebGLRenderer.returnBatch = function(batch)
{
batch.clean();
batch.clean();
PIXI._batchs.push(batch);
}
@ -127,8 +127,8 @@ PIXI.WebGLRenderer.returnBatch = function(batch)
PIXI.WebGLRenderer.prototype.render = function(stage)
{
if(this.contextLost)return;
// if rendering a new stage clear the batchs..
if(this.__stage !== stage)
{
@ -137,8 +137,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
this.__stage = stage;
this.stageRenderGroup.setRenderable(stage);
}
// TODO not needed now...
// TODO not needed now...
// update children if need be
// best to remove first!
/*for (var i=0; i < stage.__childrenRemoved.length; i++)
@ -147,29 +147,29 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
if(group)group.removeDisplayObject(stage.__childrenRemoved[i]);
}*/
// update any textures
// update any textures
PIXI.WebGLRenderer.updateTextures();
// update the scene graph
// update the scene graph
PIXI.visibleCount++;
stage.updateTransform();
var gl = this.gl;
// -- Does this need to be set every frame? -- //
gl.colorMask(true, true, true, this.transparent);
gl.viewport(0, 0, this.width, this.height);
gl.colorMask(true, true, true, this.transparent);
gl.viewport(0, 0, this.width, this.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);
gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);
gl.clear(gl.COLOR_BUFFER_BIT);
// HACK TO TEST
this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
this.stageRenderGroup.render(PIXI.projection);
// interaction
// run interaction!
if(stage.interactive)
@ -181,15 +181,15 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this);
}
}
// after rendering lets confirm all frames that have been uodated..
if(PIXI.Texture.frameUpdates.length > 0)
{
for (var i=0; i < PIXI.Texture.frameUpdates.length; i++)
for (var i=0; i < PIXI.Texture.frameUpdates.length; i++)
{
PIXI.Texture.frameUpdates[i].updateFrame = false;
};
PIXI.Texture.frameUpdates = [];
}
}
@ -222,7 +222,7 @@ PIXI.WebGLRenderer.updateTexture = function(texture)
{
//TODO break this out into a texture manager...
var gl = PIXI.gl;
if(!texture._glTexture)
{
texture._glTexture = gl.createTexture();
@ -288,7 +288,7 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
this.view.width = width;
this.view.height = height;
this.gl.viewport(0, 0, this.width, this.height);
this.gl.viewport(0, 0, this.width, this.height);
//var projectionMatrix = this.projectionMatrix;
@ -323,20 +323,20 @@ PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
*/
PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
{
this.gl = this.view.getContext("experimental-webgl", {
this.gl = this.view.getContext("experimental-webgl", {
alpha: true
});
this.initShaders();
this.initShaders();
for(var key in PIXI.TextureCache)
for(var key in PIXI.TextureCache)
{
var texture = PIXI.TextureCache[key].baseTexture;
texture._glTexture = null;
PIXI.WebGLRenderer.updateTexture(texture);
};
for (var i=0; i < this.batchs.length; i++)
for (var i=0; i < this.batchs.length; i++)
{
this.batchs[i].restoreLostContext(this.gl)//
this.batchs[i].dirty = true;

46
src/pixi/renderers/webgl/WebGLShaders.js
View file

@ -24,7 +24,7 @@ PIXI.shaderVertexSrc = [
"attribute vec2 aTextureCoord;",
"attribute float aColor;",
//"uniform mat4 uMVMatrix;",
"uniform vec2 projectionVector;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
@ -96,30 +96,30 @@ PIXI.primitiveShaderVertexSrc = [
"}"
];
PIXI.initPrimitiveShader = function()
PIXI.initPrimitiveShader = function()
{
var gl = PIXI.gl;
var shaderProgram = PIXI.compileProgram(PIXI.primitiveShaderVertexSrc, PIXI.primitiveShaderFragmentSrc)
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix");
shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha");
PIXI.primitiveProgram = shaderProgram;
}
PIXI.initDefaultShader = function()
PIXI.initDefaultShader = function()
{
var gl = this.gl;
var shaderProgram = PIXI.compileProgram(PIXI.shaderVertexSrc, PIXI.shaderFragmentSrc)
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
@ -129,15 +129,15 @@ PIXI.initDefaultShader = function()
// shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
PIXI.shaderProgram = shaderProgram;
}
PIXI.initDefaultStripShader = function()
PIXI.initDefaultStripShader = function()
{
var gl = this.gl;
var shaderProgram = PIXI.compileProgram(PIXI.stripShaderVertexSrc, PIXI.stripShaderFragmentSrc)
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
@ -149,9 +149,9 @@ PIXI.initDefaultStripShader = function()
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
PIXI.stripShaderProgram = shaderProgram;
}
@ -186,9 +186,9 @@ PIXI.compileProgram = function(vertexSrc, fragmentSrc)
var gl = PIXI.gl;
var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc);
var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
@ -198,34 +198,34 @@ PIXI.compileProgram = function(vertexSrc, fragmentSrc)
}
return shaderProgram;
}
}
PIXI.activateDefaultShader = function()
{
var gl = PIXI.gl;
var shaderProgram = PIXI.shaderProgram;
gl.useProgram(shaderProgram);
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
gl.enableVertexAttribArray(shaderProgram.colorAttribute);
}
PIXI.activatePrimitiveShader = function()
{
var gl = PIXI.gl;
gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
gl.useProgram(PIXI.primitiveProgram);
gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute);
}
}

6
src/pixi/text/BitmapText.js
View file

@ -4,7 +4,7 @@
/**
* A Text Object will create a line(s) of text using bitmap font. To split a line you can use "\n", "\r" or "\r\n"
* You can generate the fnt files using
* You can generate the fnt files using
* http://www.angelcode.com/products/bmfont/ for windows or
* http://www.bmglyph.com/ for mac.
*
@ -94,7 +94,7 @@ PIXI.BitmapText.prototype.updateText = function()
prevCharCode = null;
continue;
}
var charData = data.chars[charCode];
if(!charData) continue;
@ -157,7 +157,7 @@ PIXI.BitmapText.prototype.updateTransform = function()
this.dirty = false;
}
PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
};

42
src/pixi/text/Text.js
View file

@ -26,7 +26,7 @@ PIXI.Text = function(text, style)
this.setText(text);
this.setStyle(style);
this.updateText();
this.dirty = false;
};
@ -83,9 +83,9 @@ PIXI.Sprite.prototype.setText = function(text)
PIXI.Text.prototype.updateText = function()
{
this.context.font = this.style.font;
var outputText = this.text;
// word wrap
// preserve original text
if(this.style.wordWrap)outputText = this.wordWrap(this.text);
@ -103,7 +103,7 @@ PIXI.Text.prototype.updateText = function()
maxLineWidth = Math.max(maxLineWidth, lineWidth);
}
this.canvas.width = maxLineWidth + this.style.strokeThickness;
//calculate text height
var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness;
this.canvas.height = lineHeight * lines.length;
@ -111,7 +111,7 @@ PIXI.Text.prototype.updateText = function()
//set canvas text styles
this.context.fillStyle = this.style.fill;
this.context.font = this.style.font;
this.context.strokeStyle = this.style.stroke;
this.context.lineWidth = this.style.strokeThickness;
@ -121,7 +121,7 @@ PIXI.Text.prototype.updateText = function()
for (i = 0; i < lines.length; i++)
{
var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
if(this.style.align == "right")
{
linePosition.x += maxLineWidth - lineWidths[i];
@ -141,7 +141,7 @@ PIXI.Text.prototype.updateText = function()
this.context.fillText(lines[i], linePosition.x, linePosition.y);
}
}
this.updateTexture();
};
@ -157,10 +157,10 @@ PIXI.Text.prototype.updateTexture = function()
this.texture.baseTexture.height = this.canvas.height;
this.texture.frame.width = this.canvas.width;
this.texture.frame.height = this.canvas.height;
this._width = this.canvas.width;
this._height = this.canvas.height;
PIXI.texturesToUpdate.push(this.texture.baseTexture);
};
@ -174,10 +174,10 @@ PIXI.Text.prototype.updateTransform = function()
{
if(this.dirty)
{
this.updateText();
this.updateText();
this.dirty = false;
}
PIXI.Sprite.prototype.updateTransform.call(this);
};
@ -189,12 +189,12 @@ PIXI.Text.prototype.updateTransform = function()
* @param fontStyle {Object}
* @private
*/
PIXI.Text.prototype.determineFontHeight = function(fontStyle)
PIXI.Text.prototype.determineFontHeight = function(fontStyle)
{
// build a little reference dictionary so if the font style has been used return a
// cached version...
var result = PIXI.Text.heightCache[fontStyle];
if(!result)
{
var body = document.getElementsByTagName("body")[0];
@ -203,13 +203,13 @@ PIXI.Text.prototype.determineFontHeight = function(fontStyle)
dummy.appendChild(dummyText);
dummy.setAttribute("style", fontStyle + ';position:absolute;top:0;left:0');
body.appendChild(dummy);
result = dummy.offsetHeight;
PIXI.Text.heightCache[fontStyle] = result;
body.removeChild(dummy);
}
return result;
};
@ -229,7 +229,7 @@ PIXI.Text.prototype.wordWrap = function(text)
if(p == start) {
return 1;
}
if(ctx.measureText(text.substring(0,p)).width <= wrapWidth)
{
if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth)
@ -246,7 +246,7 @@ PIXI.Text.prototype.wordWrap = function(text)
return arguments.callee(ctx, text, start, p, wrapWidth);
}
};
var lineWrap = function(ctx, text, wrapWidth)
{
if(ctx.measureText(text).width <= wrapWidth || text.length < 1)
@ -256,14 +256,14 @@ PIXI.Text.prototype.wordWrap = function(text)
var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth);
return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth);
};
var result = "";
var lines = text.split("\n");
for (var i = 0; i < lines.length; i++)
{
result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n";
}
return result;
};
@ -279,7 +279,7 @@ PIXI.Text.prototype.destroy = function(destroyTexture)
{
this.texture.destroy();
}
};
PIXI.Text.heightCache = {};

12
src/pixi/textures/BaseTexture.js
View file

@ -62,19 +62,19 @@ PIXI.BaseTexture = function(source)
this.hasLoaded = true;
this.width = this.source.width;
this.height = this.source.height;
PIXI.texturesToUpdate.push(this);
}
else
{
var scope = this;
this.source.onload = function(){
scope.hasLoaded = true;
scope.width = scope.source.width;
scope.height = scope.source.height;
// add it to somewhere...
PIXI.texturesToUpdate.push(scope);
scope.dispatchEvent( { type: 'loaded', content: scope } );
@ -87,7 +87,7 @@ PIXI.BaseTexture = function(source)
this.hasLoaded = true;
this.width = this.source.width;
this.height = this.source.height;
PIXI.texturesToUpdate.push(this);
}
@ -127,7 +127,7 @@ PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin)
{
// new Image() breaks tex loading in some versions of Chrome.
// See https://code.google.com/p/chromium/issues/detail?id=238071
var image = new Image();//document.createElement('img');
var image = new Image();//document.createElement('img');
if (crossorigin)
{
image.crossOrigin = '';

48
src/pixi/textures/RenderTexture.js
View file

@ -5,11 +5,11 @@
/**
A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it.
__Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded.
Otherwise black rectangles will be drawn instead.
__Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded.
Otherwise black rectangles will be drawn instead.
RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example:
var renderTexture = new PIXI.RenderTexture(800, 600);
var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
sprite.position.x = 800/2;
@ -39,7 +39,7 @@ PIXI.RenderTexture = function(width, height)
this.indetityMatrix = PIXI.mat3.create();
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
if(PIXI.gl)
{
@ -68,7 +68,7 @@ PIXI.RenderTexture.prototype.initWebGL = function()
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
this.glFramebuffer.width = this.width;
this.glFramebuffer.height = this.height;
this.glFramebuffer.height = this.height;
this.baseTexture = new PIXI.BaseTexture();
@ -96,7 +96,7 @@ PIXI.RenderTexture.prototype.initWebGL = function()
// set the correct render function..
this.render = this.renderWebGL;
}
@ -105,19 +105,19 @@ PIXI.RenderTexture.prototype.resize = function(width, height)
this.width = width;
this.height = height;
if(PIXI.gl)
{
this.projection.x = this.width/2
this.projection.y = this.height/2;
var gl = PIXI.gl;
gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
}
else
{
this.frame.width = this.width
this.frame.height = this.height;
this.renderer.resize(this.width, this.height);
@ -153,15 +153,15 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
var gl = PIXI.gl;
// enable the alpha color mask..
gl.colorMask(true, true, true, true);
gl.colorMask(true, true, true, true);
gl.viewport(0, 0, this.width, this.height);
gl.viewport(0, 0, this.width, this.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
if(clear)
{
gl.clearColor(0,0,0, 0);
gl.clearColor(0,0,0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
@ -175,19 +175,19 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
displayObject.worldTransform[4] = -1;
displayObject.worldTransform[5] = this.projection.y * 2;
if(position)
{
displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] -= position.y;
}
PIXI.visibleCount++;
displayObject.vcount = PIXI.visibleCount;
for(var i=0,j=children.length; i<j; i++)
{
children[i].updateTransform();
children[i].updateTransform();
}
var renderGroup = displayObject.__renderGroup;
@ -227,25 +227,25 @@ PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, cl
var children = displayObject.children;
displayObject.worldTransform = PIXI.mat3.create();
if(position)
{
displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] = position.y;
}
for(var i=0,j=children.length; i<j; i++)
{
children[i].updateTransform();
children[i].updateTransform();
}
if(clear)this.renderer.context.clearRect(0,0, this.width, this.height);
this.renderer.renderDisplayObject(displayObject);
this.renderer.context.setTransform(1,0,0,1,0,0);
this.renderer.context.setTransform(1,0,0,1,0,0);
// PIXI.texturesToUpdate.push(this.baseTexture);
}

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

@ -58,7 +58,7 @@ PIXI.Texture = function(baseTexture, frame)
{
if(this.noFrame)frame = new PIXI.Rectangle(0,0, baseTexture.width, baseTexture.height);
//console.log(frame)
this.setFrame(frame);
}
else
@ -137,13 +137,13 @@ PIXI.Texture.prototype.setFrame = function(frame)
PIXI.Texture.fromImage = function(imageUrl, crossorigin)
{
var texture = PIXI.TextureCache[imageUrl];
if(!texture)
{
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture;
}
return texture;
}
@ -193,7 +193,7 @@ PIXI.Texture.addTextureToCache = function(texture, id)
}
/**
* Remove a texture from the textureCache.
* Remove a texture from the textureCache.
*
* @static
* @method removeTextureFromCache

2
src/pixi/utils/Detector.js
View file

@ -14,7 +14,7 @@
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent=false {Boolean} the transparency of the render view, default false
* @param antialias=false {Boolean} sets antialias (only applicable in webGL chrome at the moment)
*
*
* antialias
*/
PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias)

14
src/pixi/utils/EventTarget.js
View file

@ -18,14 +18,14 @@
PIXI.EventTarget = function () {
var listeners = {};
this.addEventListener = this.on = function ( type, listener ) {
if ( listeners[ type ] === undefined ) {
listeners[ type ] = [];
}
if ( listeners[ type ].indexOf( listener ) === - 1 ) {
@ -40,13 +40,13 @@ PIXI.EventTarget = function () {
if ( !listeners[ event.type ] || !listeners[ event.type ].length ) {
return;
}
for(var i = 0, l = listeners[ event.type ].length; i < l; i++) {
listeners[ event.type ][ i ]( event );
}
};

26
src/pixi/utils/Polyk.js
View file

@ -2,7 +2,7 @@
PolyK library
url: http://polyk.ivank.net
Released under MIT licence.
Copyright (c) 2012 Ivan Kuckir
Permission is hereby granted, free of charge, to any person
@ -26,8 +26,8 @@
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
This is an amazing lib!
This is an amazing lib!
slightly modified by mat groves (matgroves.com);
*/
@ -43,13 +43,13 @@ PIXI.PolyK = {};
PIXI.PolyK.Triangulate = function(p)
{
var sign = true;
var n = p.length>>1;
if(n<3) return [];
var tgs = [];
var avl = [];
for(var i=0; i<n; i++) avl.push(i);
var i = 0;
var al = n;
while(al > 3)
@ -57,11 +57,11 @@ PIXI.PolyK.Triangulate = function(p)
var i0 = avl[(i+0)%al];
var i1 = avl[(i+1)%al];
var i2 = avl[(i+2)%al];
var ax = p[2*i0], ay = p[2*i0+1];
var bx = p[2*i1], by = p[2*i1+1];
var cx = p[2*i2], cy = p[2*i2+1];
var earFound = false;
if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign))
{
@ -80,7 +80,7 @@ PIXI.PolyK.Triangulate = function(p)
al--;
i = 0;
}
else if(i++ > 3*al)
else if(i++ > 3*al)
{
// need to flip flip reverse it!
// reset!
@ -89,17 +89,17 @@ PIXI.PolyK.Triangulate = function(p)
var tgs = [];
avl = [];
for(var i=0; i<n; i++) avl.push(i);
i = 0;
al = n;
sign = false;
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
}
}
tgs.push(avl[0], avl[1], avl[2]);
@ -121,13 +121,13 @@ PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy)
var v1y = by-ay;
var v2x = px-ax;
var v2y = py-ay;
var dot00 = v0x*v0x+v0y*v0y;
var dot01 = v0x*v1x+v0y*v1y;
var dot02 = v0x*v2x+v0y*v2y;
var dot11 = v1x*v1x+v1y*v1y;
var dot12 = v1x*v2x+v1y*v2y;
var invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
var v = (dot00 * dot12 - dot01 * dot02) * invDenom;

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

@ -19,7 +19,7 @@ var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
@ -27,7 +27,7 @@ if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
@ -60,19 +60,19 @@ if (typeof Function.prototype.bind != 'function') {
var slice = Array.prototype.slice;
return function (thisArg) {
var target = this, boundArgs = slice.call(arguments, 1);
if (typeof target != 'function') throw new TypeError();
function bound() {
var args = boundArgs.concat(slice.call(arguments));
target.apply(this instanceof bound ? this : thisArg, args);
}
bound.prototype = (function F(proto) {
proto && (F.prototype = proto);
if (!(this instanceof F)) return new F;
if (!(this instanceof F)) return new F;
})(target.prototype);
return bound;
};
})();
@ -87,7 +87,7 @@ if (typeof Function.prototype.bind != 'function') {
var AjaxRequest = PIXI.AjaxRequest = function()
{
var activexmodes = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
if (window.ActiveXObject)
{ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
for (var i=0; i<activexmodes.length; i++)
@ -120,20 +120,20 @@ PIXI.runList = function(item)
var safe = 0;
var tmp = item.first;
console.log(tmp);
while(tmp._iNext)
{
safe++;
tmp = tmp._iNext;
console.log(tmp);
// console.log(tmp);
if(safe > 100)
{
console.log("BREAK")
break
}
}
}
}