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. 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 ### ### 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!) - Canvas renderer (Fastest in town!)
- Full scene graph - Full scene graph
- Super easy to use API (similar to the flash display list API) - Super easy to use API (similar to the flash display list API)
- Support for texture atlases - Support for texture atlases
- Asset loader / sprite sheet loader - Asset loader / sprite sheet loader
- Auto-detect which renderer should be used - Auto-detect which renderer should be used
- Full Mouse and Multi-touch Interaction - Full Mouse and Multi-touch Interaction
- Text - Text
@ -120,32 +120,32 @@ It also copies the non-minified version to the examples.
### Usage ### ### Usage ###
```javascript ```javascript
// You can use either PIXI.WebGLRenderer or PIXI.CanvasRenderer // 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); document.body.appendChild(renderer.view);
var stage = new PIXI.Stage; var stage = new PIXI.Stage;
var bunnyTexture = PIXI.Texture.fromImage("bunny.png"); var bunnyTexture = PIXI.Texture.fromImage("bunny.png");
var bunny = new PIXI.Sprite(bunnyTexture); var bunny = new PIXI.Sprite(bunnyTexture);
bunny.position.x = 400; bunny.position.x = 400;
bunny.position.y = 300; bunny.position.y = 300;
bunny.scale.x = 2; bunny.scale.x = 2;
bunny.scale.y = 2; bunny.scale.y = 2;
stage.addChild(bunny); stage.addChild(bunny);
requestAnimationFrame(animate); requestAnimationFrame(animate);
function animate() { function animate() {
bunny.rotation += 0.01; bunny.rotation += 0.01;
renderer.render(stage); renderer.render(stage);
requestAnimationFrame(animate); requestAnimationFrame(animate);
} }
``` ```

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

@ -14,41 +14,41 @@
</head> </head>
<body> <body>
<script> <script>
// create an new instance of a pixi stage // create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99); var stage = new PIXI.Stage(0x66FF99);
// create a renderer instance // create a renderer instance
var renderer = PIXI.autoDetectRenderer(400, 300); var renderer = PIXI.autoDetectRenderer(400, 300);
// add the renderer view element to the DOM // add the renderer view element to the DOM
document.body.appendChild(renderer.view); document.body.appendChild(renderer.view);
requestAnimFrame( animate ); requestAnimFrame( animate );
// create a texture from an image path // create a texture from an image path
var texture = PIXI.Texture.fromImage("bunny.png"); var texture = PIXI.Texture.fromImage("bunny.png");
// create a new Sprite using the texture // create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture); var bunny = new PIXI.Sprite(texture);
// center the sprites anchor point // center the sprites anchor point
bunny.anchor.x = 0.5; bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5; bunny.anchor.y = 0.5;
// move the sprite t the center of the screen // move the sprite t the center of the screen
bunny.position.x = 200; bunny.position.x = 200;
bunny.position.y = 150; bunny.position.y = 150;
stage.addChild(bunny); stage.addChild(bunny);
function animate() { function animate() {
requestAnimFrame( animate ); requestAnimFrame( animate );
// just for fun, lets rotate mr rabbit a little // just for fun, lets rotate mr rabbit a little
bunny.rotation += 0.1; bunny.rotation += 0.1;
// render the stage // render the stage
renderer.render(stage); renderer.render(stage);
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -9,61 +9,61 @@
background-color: #000000; background-color: #000000;
} }
</style> </style>
<script src="pixi.js"></script> <script src="pixi.js"></script>
</head> </head>
<body> <body>
<script> <script>
// create an new instance of a pixi stage // create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true); var stage = new PIXI.Stage(0xFFFFFF, true);
stage.interactive = true; stage.interactive = true;
var bg = PIXI.Sprite.fromImage("BGrotate.jpg"); var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
bg.anchor.x = 0.5; bg.anchor.x = 0.5;
bg.anchor.y = 0.5; bg.anchor.y = 0.5;
bg.position.x = 620/2; bg.position.x = 620/2;
bg.position.y = 380/2; bg.position.y = 380/2;
stage.addChild(bg); stage.addChild(bg);
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
bgFront.anchor.x = 0.5; bgFront.anchor.x = 0.5;
bgFront.anchor.y = 0.5; bgFront.anchor.y = 0.5;
stage.addChild(bgFront); stage.addChild(bgFront);
// create a renderer instance // create a renderer instance
var renderer = PIXI.autoDetectRenderer(620, 380); var renderer = PIXI.autoDetectRenderer(620, 380);
renderer.view.style.position = "absolute" renderer.view.style.position = "absolute"
renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginLeft = "-310px";
renderer.view.style.marginTop = "-190px"; renderer.view.style.marginTop = "-190px";
renderer.view.style.top = "50%"; renderer.view.style.top = "50%";
renderer.view.style.left = "50%"; renderer.view.style.left = "50%";
renderer.view.style.display = "block"; renderer.view.style.display = "block";
// add render view to DOM // add render view to DOM
document.body.appendChild(renderer.view); document.body.appendChild(renderer.view);
// lets create moving shape // lets create moving shape
var mask1 = new PIXI.Graphics(); var mask1 = new PIXI.Graphics();
mask1.beginFill(0); mask1.beginFill(0);
mask1.drawRect(0, 0, 100, 100) mask1.drawRect(0, 0, 100, 100)
bgFront.mask = mask1; bgFront.mask = mask1;
var mask2 = new PIXI.Graphics(); var mask2 = new PIXI.Graphics();
mask2.beginFill(0); mask2.beginFill(0);
mask2.drawRect(500, 100, 100, 100) mask2.drawRect(500, 100, 100, 100)
bg.mask = mask2; bg.mask = mask2;
var count = 0; var count = 0;
stage.click = stage.tap = function() stage.click = stage.tap = function()
{ {
if(!container.filter) if(!container.filter)
@ -76,40 +76,40 @@
container.mask = null; container.mask = null;
} }
} }
/* /*
* Add a pixi Logo! * Add a pixi Logo!
*/ */
var logo = PIXI.Sprite.fromImage("../../logo_small.png") var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo); stage.addChild(logo);
logo.anchor.x = 1; logo.anchor.x = 1;
logo.position.x = 620 logo.position.x = 620
logo.scale.x = logo.scale.y = 0.5; logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 320 logo.position.y = 320
logo.interactive = true; logo.interactive = true;
logo.buttonMode = true; logo.buttonMode = true;
logo.click = logo.tap = function() logo.click = logo.tap = function()
{ {
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank") 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"}); var help = new PIXI.Text("Click to turn masking on / off.", {font:"bold 12pt Arial", fill:"white"});
help.position.y = 350; help.position.y = 350;
help.position.x = 10; help.position.x = 10;
stage.addChild(help); stage.addChild(help);
requestAnimFrame(animate); requestAnimFrame(animate);
function animate() { function animate() {
bg.rotation += 0.01; bg.rotation += 0.01;
bgFront.rotation -= 0.01; bgFront.rotation -= 0.01;
count += 0.1; count += 0.1;
renderer.render(stage); renderer.render(stage);
requestAnimFrame( animate ); requestAnimFrame( animate );

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -8,7 +8,7 @@
padding: 0; padding: 0;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.textHolder{ .textHolder{
width: 400px; 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
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>
<script> <script>
// create an new instance of a pixi stage // create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99); var stage = new PIXI.Stage(0x66FF99);
// create a renderer instance // create a renderer instance
var renderer = PIXI.autoDetectRenderer(400, 300, null, true); var renderer = PIXI.autoDetectRenderer(400, 300, null, true);
// add the renderer view element to the DOM // add the renderer view element to the DOM
document.body.appendChild(renderer.view); document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute"; renderer.view.style.position = "absolute";
renderer.view.style.top = "0px"; renderer.view.style.top = "0px";
renderer.view.style.left = "0px"; renderer.view.style.left = "0px";
requestAnimFrame( animate ); requestAnimFrame( animate );
// create a texture from an image path // create a texture from an image path
var texture = PIXI.Texture.fromImage("bunny.png"); var texture = PIXI.Texture.fromImage("bunny.png");
// create a new Sprite using the texture // create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture); var bunny = new PIXI.Sprite(texture);
// center the sprites anchor point // center the sprites anchor point
bunny.anchor.x = 0.5; bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5; bunny.anchor.y = 0.5;
// move the sprite t the center of the screen // move the sprite t the center of the screen
bunny.position.x = 200; bunny.position.x = 200;
bunny.position.y = 150; bunny.position.y = 150;
stage.addChild(bunny); stage.addChild(bunny);
function animate() { function animate() {
requestAnimFrame( animate ); requestAnimFrame( animate );
// just for fun, lets rotate mr rabbit a little // just for fun, lets rotate mr rabbit a little
bunny.rotation += 0.1; bunny.rotation += 0.1;
// render the stage // render the stage
renderer.render(stage); renderer.render(stage);
} }

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

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

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

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

182
src/pixi/InteractionManager.js
View file

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

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

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

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

@ -27,7 +27,7 @@ PIXI.mat3.create = function()
matrix[6] = 0; matrix[6] = 0;
matrix[7] = 0; matrix[7] = 0;
matrix[8] = 1; matrix[8] = 1;
return matrix; return matrix;
} }
@ -43,7 +43,7 @@ PIXI.mat3.identity = function(matrix)
matrix[6] = 0; matrix[6] = 0;
matrix[7] = 0; matrix[7] = 0;
matrix[8] = 1; matrix[8] = 1;
return matrix; return matrix;
} }
@ -70,35 +70,35 @@ PIXI.mat4.create = function()
matrix[13] = 0; matrix[13] = 0;
matrix[14] = 0; matrix[14] = 0;
matrix[15] = 1; matrix[15] = 1;
return matrix; return matrix;
} }
PIXI.mat3.multiply = function (mat, mat2, dest) PIXI.mat3.multiply = function (mat, mat2, dest)
{ {
if (!dest) { dest = mat; } if (!dest) { dest = mat; }
// Cache the matrix values (makes for huge speed increases!) // Cache the matrix values (makes for huge speed increases!)
var a00 = mat[0], a01 = mat[1], a02 = mat[2], var a00 = mat[0], a01 = mat[1], a02 = mat[2],
a10 = mat[3], a11 = mat[4], a12 = mat[5], a10 = mat[3], a11 = mat[4], a12 = mat[5],
a20 = mat[6], a21 = mat[7], a22 = mat[8], a20 = mat[6], a21 = mat[7], a22 = mat[8],
b00 = mat2[0], b01 = mat2[1], b02 = mat2[2], b00 = mat2[0], b01 = mat2[1], b02 = mat2[2],
b10 = mat2[3], b11 = mat2[4], b12 = mat2[5], b10 = mat2[3], b11 = mat2[4], b12 = mat2[5],
b20 = mat2[6], b21 = mat2[7], b22 = mat2[8]; b20 = mat2[6], b21 = mat2[7], b22 = mat2[8];
dest[0] = b00 * a00 + b01 * a10 + b02 * a20; dest[0] = b00 * a00 + b01 * a10 + b02 * a20;
dest[1] = b00 * a01 + b01 * a11 + b02 * a21; dest[1] = b00 * a01 + b01 * a11 + b02 * a21;
dest[2] = b00 * a02 + b01 * a12 + b02 * a22; dest[2] = b00 * a02 + b01 * a12 + b02 * a22;
dest[3] = b10 * a00 + b11 * a10 + b12 * a20; dest[3] = b10 * a00 + b11 * a10 + b12 * a20;
dest[4] = b10 * a01 + b11 * a11 + b12 * a21; dest[4] = b10 * a01 + b11 * a11 + b12 * a21;
dest[5] = b10 * a02 + b11 * a12 + b12 * a22; dest[5] = b10 * a02 + b11 * a12 + b12 * a22;
dest[6] = b20 * a00 + b21 * a10 + b22 * a20; dest[6] = b20 * a00 + b21 * a10 + b22 * a20;
dest[7] = b20 * a01 + b21 * a11 + b22 * a21; dest[7] = b20 * a01 + b21 * a11 + b22 * a21;
dest[8] = b20 * a02 + b21 * a12 + b22 * a22; dest[8] = b20 * a02 + b21 * a12 + b22 * a22;
return dest; return dest;
} }
@ -115,11 +115,11 @@ PIXI.mat3.clone = function(mat)
matrix[6] = mat[6]; matrix[6] = mat[6];
matrix[7] = mat[7]; matrix[7] = mat[7];
matrix[8] = mat[8]; matrix[8] = mat[8];
return matrix; 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 we are transposing ourselves we can skip a few steps but have to cache some values
if (!dest || mat === dest) { if (!dest || mat === dest) {
@ -147,30 +147,30 @@ PIXI.mat3.transpose = function (mat, dest)
return dest; return dest;
} }
PIXI.mat3.toMat4 = function (mat, dest) PIXI.mat3.toMat4 = function (mat, dest)
{ {
if (!dest) { dest = PIXI.mat4.create(); } if (!dest) { dest = PIXI.mat4.create(); }
dest[15] = 1; dest[15] = 1;
dest[14] = 0; dest[14] = 0;
dest[13] = 0; dest[13] = 0;
dest[12] = 0; dest[12] = 0;
dest[11] = 0; dest[11] = 0;
dest[10] = mat[8]; dest[10] = mat[8];
dest[9] = mat[7]; dest[9] = mat[7];
dest[8] = mat[6]; dest[8] = mat[6];
dest[7] = 0; dest[7] = 0;
dest[6] = mat[5]; dest[6] = mat[5];
dest[5] = mat[4]; dest[5] = mat[4];
dest[4] = mat[3]; dest[4] = mat[3];
dest[3] = 0; dest[3] = 0;
dest[2] = mat[2]; dest[2] = mat[2];
dest[1] = mat[1]; dest[1] = mat[1];
dest[0] = mat[0]; dest[0] = mat[0];
return dest; return dest;
} }
@ -198,19 +198,19 @@ PIXI.mat4.create = function()
matrix[13] = 0; matrix[13] = 0;
matrix[14] = 0; matrix[14] = 0;
matrix[15] = 1; matrix[15] = 1;
return matrix; 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 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], var a01 = mat[1], a02 = mat[2], a03 = mat[3],
a12 = mat[6], a13 = mat[7], a12 = mat[6], a13 = mat[7],
a23 = mat[11]; a23 = mat[11];
mat[1] = mat[4]; mat[1] = mat[4];
mat[2] = mat[8]; mat[2] = mat[8];
mat[3] = mat[12]; mat[3] = mat[12];
@ -225,7 +225,7 @@ PIXI.mat4.transpose = function (mat, dest)
mat[14] = a23; mat[14] = a23;
return mat; return mat;
} }
dest[0] = mat[0]; dest[0] = mat[0];
dest[1] = mat[4]; dest[1] = mat[4];
dest[2] = mat[8]; dest[2] = mat[8];
@ -245,18 +245,18 @@ PIXI.mat4.transpose = function (mat, dest)
return dest; return dest;
} }
PIXI.mat4.multiply = function (mat, mat2, dest) PIXI.mat4.multiply = function (mat, mat2, dest)
{ {
if (!dest) { dest = mat; } if (!dest) { dest = mat; }
// Cache the matrix values (makes for huge speed increases!) // Cache the matrix values (makes for huge speed increases!)
var a00 = mat[ 0], a01 = mat[ 1], a02 = mat[ 2], a03 = mat[3]; 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 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 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]; var a30 = mat[12], a31 = mat[13], a32 = mat[14], a33 = mat[15];
// Cache only the current line of the second matrix // 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[0] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
dest[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31; dest[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
dest[2] = b0*a02 + b1*a12 + b2*a22 + b3*a32; 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. * 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 * @class Point
* @constructor * @constructor
* @param x {Number} position of the point * @param x {Number} position of the point
* @param y {Number} position of the point * @param y {Number} position of the point
*/ */
PIXI.Point = function(x, y) PIXI.Point = function(x, y)
{ {
/** /**
* @property x * @property x
* @type Number * @type Number
* @default 0 * @default 0
*/ */
this.x = x || 0; this.x = x || 0;
/** /**
* @property y * @property y
* @type Number * @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. * 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 * @class Rectangle
* @constructor * @constructor
* @param x {Number} The X coord of the upper-left corner of the rectangle * @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 y {Number} The Y coord of the upper-left corner of the rectangle
* @param width {Number} The overall width of this rectangle * @param width {Number} The overall width of this rectangle
@ -20,21 +20,21 @@ PIXI.Rectangle = function(x, y, width, height)
* @default 0 * @default 0
*/ */
this.x = x || 0; this.x = x || 0;
/** /**
* @property y * @property y
* @type Number * @type Number
* @default 0 * @default 0
*/ */
this.y = y || 0; this.y = y || 0;
/** /**
* @property width * @property width
* @type Number * @type Number
* @default 0 * @default 0
*/ */
this.width = width || 0; this.width = width || 0;
/** /**
* @property height * @property height
* @type Number * @type Number
@ -71,7 +71,7 @@ PIXI.Rectangle.prototype.contains = function(x, y)
if(x >= x1 && x <= x1 + this.width) if(x >= x1 && x <= x1 + this.width)
{ {
var y1 = this.y; var y1 = this.y;
if(y >= y1 && y <= y1 + this.height) if(y >= y1 && y <= y1 + this.height)
{ {
return true; return true;

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

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

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

@ -7,21 +7,21 @@
* A DisplayObjectContainer represents a collection of display objects. * 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. * It is the base class of all display objects that act as a container for other objects.
* *
* @class DisplayObjectContainer * @class DisplayObjectContainer
* @extends DisplayObject * @extends DisplayObject
* @constructor * @constructor
*/ */
PIXI.DisplayObjectContainer = function() PIXI.DisplayObjectContainer = function()
{ {
PIXI.DisplayObject.call( this ); PIXI.DisplayObject.call( this );
/** /**
* [read-only] The of children of this container. * [read-only] The of children of this container.
* *
* @property children * @property children
* @type Array<DisplayObject> * @type Array<DisplayObject>
* @readOnly * @readOnly
*/ */
this.children = []; this.children = [];
} }
@ -37,7 +37,7 @@ Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'visible', {
}, },
set: function(value) { set: function(value) {
this._visible = value; this._visible = value;
} }
});*/ });*/
@ -51,18 +51,18 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
{ {
if(child.parent != undefined) if(child.parent != undefined)
{ {
//// COULD BE THIS??? //// COULD BE THIS???
child.parent.removeChild(child); child.parent.removeChild(child);
// return; // return;
} }
child.parent = this; child.parent = this;
this.children.push(child); this.children.push(child);
// update the stage refference.. // update the stage refference..
if(this.stage) if(this.stage)
{ {
var tmpChild = child; var tmpChild = child;
@ -71,18 +71,18 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
if(tmpChild.interactive)this.stage.dirty = true; if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = this.stage; tmpChild.stage = this.stage;
tmpChild = tmpChild._iNext; tmpChild = tmpChild._iNext;
} }
while(tmpChild) while(tmpChild)
} }
// LINKED LIST // // LINKED LIST //
// modify the list.. // modify the list..
var childFirst = child.first var childFirst = child.first
var childLast = child.last; var childLast = child.last;
var nextObject; var nextObject;
var previousObject; var previousObject;
// this could be wrong if there is a filter?? // this could be wrong if there is a filter??
if(this.filter) if(this.filter)
{ {
@ -94,12 +94,12 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
} }
nextObject = previousObject._iNext; nextObject = previousObject._iNext;
// always true in this case // always true in this case
// need to make sure the parents last is updated too // need to make sure the parents last is updated too
var updateLast = this; var updateLast = this;
var prevLast = previousObject; var prevLast = previousObject;
while(updateLast) while(updateLast)
{ {
if(updateLast.last == prevLast) if(updateLast.last == prevLast)
@ -108,15 +108,15 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
} }
updateLast = updateLast.parent; updateLast = updateLast.parent;
} }
if(nextObject) if(nextObject)
{ {
nextObject._iPrev = childLast; nextObject._iPrev = childLast;
childLast._iNext = nextObject; childLast._iNext = nextObject;
} }
childFirst._iPrev = previousObject; childFirst._iPrev = previousObject;
previousObject._iNext = childFirst; previousObject._iNext = childFirst;
// need to remove any render groups.. // need to remove any render groups..
if(this.__renderGroup) if(this.__renderGroup)
@ -126,7 +126,7 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
// add them to the new render group.. // add them to the new render group..
this.__renderGroup.addDisplayObjectAndChildren(child); this.__renderGroup.addDisplayObjectAndChildren(child);
} }
} }
/** /**
@ -145,7 +145,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
child.parent.removeChild(child); child.parent.removeChild(child);
} }
child.parent = this; child.parent = this;
if(this.stage) if(this.stage)
{ {
var tmpChild = child; var tmpChild = child;
@ -157,13 +157,13 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
} }
while(tmpChild) while(tmpChild)
} }
// modify the list.. // modify the list..
var childFirst = child.first; var childFirst = child.first;
var childLast = child.last; var childLast = child.last;
var nextObject; var nextObject;
var previousObject; var previousObject;
if(index == this.children.length) if(index == this.children.length)
{ {
previousObject = this.last; previousObject = this.last;
@ -186,18 +186,18 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
{ {
previousObject = this.children[index-1].last; previousObject = this.children[index-1].last;
} }
nextObject = previousObject._iNext; nextObject = previousObject._iNext;
// always true in this case // always true in this case
if(nextObject) if(nextObject)
{ {
nextObject._iPrev = childLast; nextObject._iPrev = childLast;
childLast._iNext = nextObject; childLast._iNext = nextObject;
} }
childFirst._iPrev = previousObject; childFirst._iPrev = previousObject;
previousObject._iNext = childFirst; previousObject._iNext = childFirst;
this.children.splice(index, 0, child); this.children.splice(index, 0, child);
// need to remove any render groups.. // need to remove any render groups..
@ -208,7 +208,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
// add them to the new render group.. // add them to the new render group..
this.__renderGroup.addDisplayObjectAndChildren(child); this.__renderGroup.addDisplayObjectAndChildren(child);
} }
} }
else else
{ {
@ -227,21 +227,21 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) 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.. * can be done a lot faster..
*/ */
return; return;
// need to fix this function :/ // need to fix this function :/
/* /*
// TODO I already know this?? // TODO I already know this??
var index = this.children.indexOf( child ); var index = this.children.indexOf( child );
var index2 = this.children.indexOf( child2 ); var index2 = this.children.indexOf( child2 );
if ( index !== -1 && index2 !== -1 ) if ( index !== -1 && index2 !== -1 )
{ {
// cool // cool
/* /*
if(this.stage) if(this.stage)
{ {
@ -249,15 +249,15 @@ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
// TODO sure there is a nicer way to achieve this! // TODO sure there is a nicer way to achieve this!
this.stage.__removeChild(child); this.stage.__removeChild(child);
this.stage.__removeChild(child2); this.stage.__removeChild(child2);
this.stage.__addChild(child); this.stage.__addChild(child);
this.stage.__addChild(child2); this.stage.__addChild(child2);
} }
// swap the positions.. // swap the positions..
this.children[index] = child2; this.children[index] = child2;
this.children[index2] = child; this.children[index2] = child;
} }
else else
{ {
@ -292,22 +292,22 @@ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
PIXI.DisplayObjectContainer.prototype.removeChild = function(child) PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
{ {
var index = this.children.indexOf( child ); var index = this.children.indexOf( child );
if ( index !== -1 ) if ( index !== -1 )
{ {
// unlink // // unlink //
// modify the list.. // modify the list..
var childFirst = child.first; var childFirst = child.first;
var childLast = child.last; var childLast = child.last;
var nextObject = childLast._iNext; var nextObject = childLast._iNext;
var previousObject = childFirst._iPrev; var previousObject = childFirst._iPrev;
if(nextObject)nextObject._iPrev = previousObject; if(nextObject)nextObject._iPrev = previousObject;
previousObject._iNext = nextObject; previousObject._iNext = nextObject;
if(this.last == childLast) if(this.last == childLast)
{ {
var tempLast = childFirst._iPrev; var tempLast = childFirst._iPrev;
// need to make sure the parents last is updated too // need to make sure the parents last is updated too
var updateLast = this; var updateLast = this;
while(updateLast.last == childLast.last) while(updateLast.last == childLast.last)
@ -317,10 +317,10 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
if(!updateLast)break; if(!updateLast)break;
} }
} }
childLast._iNext = null; childLast._iNext = null;
childFirst._iPrev = null; childFirst._iPrev = null;
// update the stage reference.. // update the stage reference..
if(this.stage) if(this.stage)
{ {
@ -330,16 +330,16 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
if(tmpChild.interactive)this.stage.dirty = true; if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = null; tmpChild.stage = null;
tmpChild = tmpChild._iNext; tmpChild = tmpChild._iNext;
} }
while(tmpChild) while(tmpChild)
} }
// webGL trim // webGL trim
if(child.__renderGroup) if(child.__renderGroup)
{ {
child.__renderGroup.removeDisplayObjectAndChildren(child); child.__renderGroup.removeDisplayObjectAndChildren(child);
} }
child.parent = undefined; child.parent = undefined;
this.children.splice( index, 1 ); this.children.splice( index, 1 );
} }
@ -358,11 +358,11 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
PIXI.DisplayObjectContainer.prototype.updateTransform = function() PIXI.DisplayObjectContainer.prototype.updateTransform = function()
{ {
if(!this.visible)return; if(!this.visible)return;
PIXI.DisplayObject.prototype.updateTransform.call( this ); PIXI.DisplayObject.prototype.updateTransform.call( this );
for(var i=0,j=this.children.length; i<j; i++) 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.MovieClip = function(textures)
{ {
PIXI.Sprite.call(this, textures[0]); PIXI.Sprite.call(this, textures[0]);
/** /**
* The array of textures that make up the animation * The array of textures that make up the animation
* *
@ -21,7 +21,7 @@ PIXI.MovieClip = function(textures)
* @type Array * @type Array
*/ */
this.textures = textures; this.textures = textures;
/** /**
* The speed that the MovieClip will play at. Higher is faster, lower is slower * The speed that the MovieClip will play at. Higher is faster, lower is slower
* *
@ -47,7 +47,7 @@ PIXI.MovieClip = function(textures)
* @type Function * @type Function
*/ */
this.onComplete = null; this.onComplete = null;
/** /**
* [read-only] The index MovieClips current frame (this may not have to be a whole number) * [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 * @default 0
* @readOnly * @readOnly
*/ */
this.currentFrame = 0; this.currentFrame = 0;
/** /**
* [read-only] Indicates if the MovieClip is currently playing * [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.MovieClip.prototype.updateTransform = function()
{ {
PIXI.Sprite.prototype.updateTransform.call(this); PIXI.Sprite.prototype.updateTransform.call(this);
if(!this.playing)return; if(!this.playing)return;
this.currentFrame += this.animationSpeed; this.currentFrame += this.animationSpeed;
var round = (this.currentFrame + 0.5) | 0; var round = (this.currentFrame + 0.5) | 0;
if(this.loop || round < this.textures.length) if(this.loop || round < this.textures.length)
{ {
this.setTexture(this.textures[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 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 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 * 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; // stop current texture;
if(this.texture.baseTexture != texture.baseTexture) if(this.texture.baseTexture != texture.baseTexture)
{ {
this.textureChange = true; this.textureChange = true;
this.texture = texture; this.texture = texture;
if(this.__renderGroup) if(this.__renderGroup)
{ {
this.__renderGroup.updateTexture(this); this.__renderGroup.updateTexture(this);
@ -138,7 +138,7 @@ PIXI.Sprite.prototype.setTexture = function(texture)
{ {
this.texture = texture; this.texture = texture;
} }
this.updateFrame = true; this.updateFrame = true;
} }
@ -152,18 +152,18 @@ PIXI.Sprite.prototype.setTexture = function(texture)
PIXI.Sprite.prototype.onTextureUpdate = function(event) PIXI.Sprite.prototype.onTextureUpdate = function(event)
{ {
//this.texture.removeEventListener( 'update', this.onTextureUpdateBind ); //this.texture.removeEventListener( 'update', this.onTextureUpdateBind );
// so if _width is 0 then width was not set.. // so if _width is 0 then width was not set..
if(this._width)this.scale.x = this._width / this.texture.frame.width; if(this._width)this.scale.x = this._width / this.texture.frame.width;
if(this._height)this.scale.y = this._height / this.texture.frame.height; if(this._height)this.scale.y = this._height / this.texture.frame.height;
this.updateFrame = true; this.updateFrame = true;
} }
// some helper functions.. // some helper functions..
/** /**
* *
* Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId * 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 * 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 * 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 * 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() PIXI.Stage.prototype.updateTransform = function()
{ {
this.worldAlpha = 1; this.worldAlpha = 1;
this.vcount = PIXI.visibleCount; this.vcount = PIXI.visibleCount;
for(var i=0,j=this.children.length; i<j; i++) for(var i=0,j=this.children.length; i<j; i++)
{ {
this.children[i].updateTransform(); this.children[i].updateTransform();
} }
if(this.dirty) if(this.dirty)
{ {
this.dirty = false; this.dirty = false;
// update interactive! // update interactive!
this.interactionManager.dirty = true; this.interactionManager.dirty = true;
} }
if(this.interactive)this.interactionManager.update(); 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 * This object is one that will allow you to specify custom rendering functions based on render type
* *
* @class CustomRenderable * @class CustomRenderable
* @extends DisplayObject * @extends DisplayObject
* @constructor * @constructor
*/ */
PIXI.CustomRenderable = function() PIXI.CustomRenderable = function()
{ {
PIXI.DisplayObject.call( this ); PIXI.DisplayObject.call( this );
} }
// constructor // constructor

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

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

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

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

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

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

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

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

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

@ -1,10 +1,10 @@
/** /**
* @author Mat Groves http://matgroves.com/ @Doormat23 * @author Mat Groves http://matgroves.com/ @Doormat23
* based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi
* *
* Awesome JS run time provided by EsotericSoftware * Awesome JS run time provided by EsotericSoftware
* https://github.com/EsotericSoftware/spine-runtimes * 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 * 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 * 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 * 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 * When loaded this class will dispatch a "loaded" event
* *
* @class Spine * @class Spine
@ -21,7 +21,7 @@
* @param url {String} The url of the JSON file * @param url {String} The url of the JSON file
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
*/ */
PIXI.SpineLoader = function(url, crossorigin) PIXI.SpineLoader = function(url, crossorigin)
{ {
PIXI.EventTarget.call(this); PIXI.EventTarget.call(this);
@ -59,7 +59,7 @@ PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader;
* @method load * @method load
*/ */
PIXI.SpineLoader.prototype.load = function () { PIXI.SpineLoader.prototype.load = function () {
var scope = this; var scope = this;
var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
jsonLoader.addEventListener("loaded", function (event) { jsonLoader.addEventListener("loaded", function (event) {
@ -78,7 +78,7 @@ PIXI.SpineLoader.prototype.load = function () {
PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { PIXI.SpineLoader.prototype.onJSONLoaded = function (event) {
var spineJsonParser = new spine.SkeletonJson(); var spineJsonParser = new spine.SkeletonJson();
var skeletonData = spineJsonParser.readSkeletonData(this.json); var skeletonData = spineJsonParser.readSkeletonData(this.json);
PIXI.AnimCache[this.url] = skeletonData; PIXI.AnimCache[this.url] = skeletonData;
this.onLoaded(); 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 * 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 * 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 * @extends DisplayObjectContainer
* @constructor * @constructor
*/ */
PIXI.Graphics = function() PIXI.Graphics = function()
{ {
PIXI.DisplayObjectContainer.call( this ); PIXI.DisplayObjectContainer.call( this );
this.renderable = true; this.renderable = true;
/** /**
@ -76,14 +76,14 @@ PIXI.Graphics.prototype.constructor = PIXI.Graphics;
PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha) PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
{ {
if(this.currentPath.points.length == 0)this.graphicsData.pop(); if(this.currentPath.points.length == 0)this.graphicsData.pop();
this.lineWidth = lineWidth || 0; this.lineWidth = lineWidth || 0;
this.lineColor = color || 0; this.lineColor = color || 0;
this.lineAlpha = (alpha == undefined) ? 1 : alpha; 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}; fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
this.graphicsData.push(this.currentPath); this.graphicsData.push(this.currentPath);
} }
@ -97,12 +97,12 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
PIXI.Graphics.prototype.moveTo = function(x, y) PIXI.Graphics.prototype.moveTo = function(x, y)
{ {
if(this.currentPath.points.length == 0)this.graphicsData.pop(); 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}; fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
this.currentPath.points.push(x, y); this.currentPath.points.push(x, y);
this.graphicsData.push(this.currentPath); this.graphicsData.push(this.currentPath);
} }
@ -158,11 +158,11 @@ PIXI.Graphics.prototype.endFill = function()
PIXI.Graphics.prototype.drawRect = function( x, y, width, height ) PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
{ {
if(this.currentPath.points.length == 0)this.graphicsData.pop(); if(this.currentPath.points.length == 0)this.graphicsData.pop();
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, fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
points:[x, y, width, height], type:PIXI.Graphics.RECT}; points:[x, y, width, height], type:PIXI.Graphics.RECT};
this.graphicsData.push(this.currentPath); this.graphicsData.push(this.currentPath);
this.dirty = true; this.dirty = true;
} }
@ -178,11 +178,11 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
PIXI.Graphics.prototype.drawCircle = function( x, y, radius) PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
{ {
if(this.currentPath.points.length == 0)this.graphicsData.pop(); if(this.currentPath.points.length == 0)this.graphicsData.pop();
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, fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
points:[x, y, radius, radius], type:PIXI.Graphics.CIRC}; points:[x, y, radius, radius], type:PIXI.Graphics.CIRC};
this.graphicsData.push(this.currentPath); this.graphicsData.push(this.currentPath);
this.dirty = true; this.dirty = true;
} }
@ -199,11 +199,11 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
PIXI.Graphics.prototype.drawElipse = function( x, y, width, height) PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
{ {
if(this.currentPath.points.length == 0)this.graphicsData.pop(); if(this.currentPath.points.length == 0)this.graphicsData.pop();
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, fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
points:[x, y, width, height], type:PIXI.Graphics.ELIP}; points:[x, y, width, height], type:PIXI.Graphics.ELIP};
this.graphicsData.push(this.currentPath); this.graphicsData.push(this.currentPath);
this.dirty = true; this.dirty = true;
} }
@ -217,7 +217,7 @@ PIXI.Graphics.prototype.clear = function()
{ {
this.lineWidth = 0; this.lineWidth = 0;
this.filling = false; this.filling = false;
this.dirty = true; this.dirty = true;
this.clearDirty = true; this.clearDirty = true;
this.graphicsData = []; this.graphicsData = [];

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

@ -10,7 +10,7 @@
*/ */
PIXI.CanvasGraphics = function() PIXI.CanvasGraphics = function()
{ {
} }
@ -26,33 +26,33 @@ PIXI.CanvasGraphics = function()
PIXI.CanvasGraphics.renderGraphics = function(graphics, context) PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{ {
var worldAlpha = graphics.worldAlpha; 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 data = graphics.graphicsData[i];
var points = data.points; var points = data.points;
context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
context.lineWidth = data.lineWidth; context.lineWidth = data.lineWidth;
if(data.type == PIXI.Graphics.POLY) if(data.type == PIXI.Graphics.POLY)
{ {
context.beginPath(); context.beginPath();
context.moveTo(points[0], points[1]); context.moveTo(points[0], points[1]);
for (var j=1; j < points.length/2; j++) for (var j=1; j < points.length/2; j++)
{ {
context.lineTo(points[j * 2], points[j * 2 + 1]); context.lineTo(points[j * 2], points[j * 2 + 1]);
} }
// if the first and last point are the same close the path - much neater :) // 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]) if(points[0] == points[points.length-2] && points[1] == points[points.length-1])
{ {
context.closePath(); context.closePath();
} }
if(data.fill) if(data.fill)
{ {
context.globalAlpha = data.fillAlpha * worldAlpha; context.globalAlpha = data.fillAlpha * worldAlpha;
@ -73,14 +73,14 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
context.globalAlpha = data.fillAlpha * worldAlpha; context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fillRect(points[0], points[1], points[2], points[3]); context.fillRect(points[0], points[1], points[2], points[3]);
} }
if(data.lineWidth) if(data.lineWidth)
{ {
context.globalAlpha = data.lineAlpha * worldAlpha; context.globalAlpha = data.lineAlpha * worldAlpha;
context.strokeRect(points[0], points[1], points[2], points[3]); context.strokeRect(points[0], points[1], points[2], points[3]);
} }
} }
else if(data.type == PIXI.Graphics.CIRC) else if(data.type == PIXI.Graphics.CIRC)
{ {
@ -88,7 +88,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
context.beginPath(); context.beginPath();
context.arc(points[0], points[1], points[2],0,2*Math.PI); context.arc(points[0], points[1], points[2],0,2*Math.PI);
context.closePath(); context.closePath();
if(data.fill) if(data.fill)
{ {
context.globalAlpha = data.fillAlpha * worldAlpha; context.globalAlpha = data.fillAlpha * worldAlpha;
@ -103,19 +103,19 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
} }
else if(data.type == PIXI.Graphics.ELIP) else if(data.type == PIXI.Graphics.ELIP)
{ {
// elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var elipseData = data.points; var elipseData = data.points;
var w = elipseData[2] * 2; var w = elipseData[2] * 2;
var h = elipseData[3] * 2; var h = elipseData[3] * 2;
var x = elipseData[0] - w/2; var x = elipseData[0] - w/2;
var y = elipseData[1] - h/2; var y = elipseData[1] - h/2;
context.beginPath(); context.beginPath();
var kappa = .5522848, var kappa = .5522848,
ox = (w / 2) * kappa, // control point offset horizontal ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical oy = (h / 2) * kappa, // control point offset vertical
@ -123,15 +123,15 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
ye = y + h, // y-end ye = y + h, // y-end
xm = x + w / 2, // x-middle xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle ym = y + h / 2; // y-middle
context.moveTo(x, ym); context.moveTo(x, ym);
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
context.closePath(); context.closePath();
if(data.fill) if(data.fill)
{ {
context.globalAlpha = data.fillAlpha * worldAlpha; context.globalAlpha = data.fillAlpha * worldAlpha;
@ -144,7 +144,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
context.stroke(); context.stroke();
} }
} }
}; };
} }
@ -160,35 +160,35 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
{ {
var worldAlpha = graphics.worldAlpha; var worldAlpha = graphics.worldAlpha;
var len = graphics.graphicsData.length; var len = graphics.graphicsData.length;
if(len > 1) if(len > 1)
{ {
len = 1; len = 1;
console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") 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 data = graphics.graphicsData[i];
var points = data.points; var points = data.points;
if(data.type == PIXI.Graphics.POLY) if(data.type == PIXI.Graphics.POLY)
{ {
context.beginPath(); context.beginPath();
context.moveTo(points[0], points[1]); context.moveTo(points[0], points[1]);
for (var j=1; j < points.length/2; j++) for (var j=1; j < points.length/2; j++)
{ {
context.lineTo(points[j * 2], points[j * 2 + 1]); context.lineTo(points[j * 2], points[j * 2 + 1]);
} }
// if the first and last point are the same close the path - much neater :) // 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]) if(points[0] == points[points.length-2] && points[1] == points[points.length-1])
{ {
context.closePath(); context.closePath();
} }
} }
else if(data.type == PIXI.Graphics.RECT) else if(data.type == PIXI.Graphics.RECT)
{ {
@ -205,18 +205,18 @@ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
} }
else if(data.type == PIXI.Graphics.ELIP) else if(data.type == PIXI.Graphics.ELIP)
{ {
// elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var elipseData = data.points; var elipseData = data.points;
var w = elipseData[2] * 2; var w = elipseData[2] * 2;
var h = elipseData[3] * 2; var h = elipseData[3] * 2;
var x = elipseData[0] - w/2; var x = elipseData[0] - w/2;
var y = elipseData[1] - h/2; var y = elipseData[1] - h/2;
context.beginPath(); context.beginPath();
var kappa = .5522848, var kappa = .5522848,
ox = (w / 2) * kappa, // control point offset horizontal ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical oy = (h / 2) * kappa, // control point offset vertical
@ -224,7 +224,7 @@ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
ye = y + h, // y-end ye = y + h, // y-end
xm = x + w / 2, // x-middle xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle ym = y + h / 2; // y-middle
context.moveTo(x, ym); context.moveTo(x, ym);
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); 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.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
context.closePath(); 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; this.refresh = true;
// hack to enable some hardware acceleration! // hack to enable some hardware acceleration!
//this.view.style["transform"] = "translatez(0)"; //this.view.style["transform"] = "translatez(0)";
this.view.width = this.width; this.view.width = this.width;
this.view.height = this.height; this.view.height = this.height;
this.count = 0; this.count = 0;
} }
@ -71,25 +71,25 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
*/ */
PIXI.CanvasRenderer.prototype.render = function(stage) PIXI.CanvasRenderer.prototype.render = function(stage)
{ {
//stage.__childrenAdded = []; //stage.__childrenAdded = [];
//stage.__childrenRemoved = []; //stage.__childrenRemoved = [];
// update textures if need be // update textures if need be
PIXI.texturesToUpdate = []; PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = []; PIXI.texturesToDestroy = [];
PIXI.visibleCount++; PIXI.visibleCount++;
stage.updateTransform(); stage.updateTransform();
// update the background color // update the background color
if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; 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.context.clearRect(0, 0, this.width, this.height)
this.renderDisplayObject(stage); this.renderDisplayObject(stage);
//as //as
// run interaction! // run interaction!
if(stage.interactive) if(stage.interactive)
{ {
@ -100,14 +100,14 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this); stage.interactionManager.setTarget(this);
} }
} }
// remove frame updates.. // remove frame updates..
if(PIXI.Texture.frameUpdates.length > 0) if(PIXI.Texture.frameUpdates.length > 0)
{ {
PIXI.Texture.frameUpdates = []; PIXI.Texture.frameUpdates = [];
} }
} }
/** /**
@ -121,7 +121,7 @@ PIXI.CanvasRenderer.prototype.resize = function(width, height)
{ {
this.width = width; this.width = width;
this.height = height; this.height = height;
this.view.width = width; this.view.width = width;
this.view.height = height; this.view.height = height;
} }
@ -138,50 +138,50 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
// no loger recurrsive! // no loger recurrsive!
var transform; var transform;
var context = this.context; var context = this.context;
context.globalCompositeOperation = 'source-over'; 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; var testObject = displayObject.last._iNext;
displayObject = displayObject.first; displayObject = displayObject.first;
do do
{ {
transform = displayObject.worldTransform; transform = displayObject.worldTransform;
if(!displayObject.visible) if(!displayObject.visible)
{ {
displayObject = displayObject.last._iNext; displayObject = displayObject.last._iNext;
continue; continue;
} }
if(!displayObject.renderable) if(!displayObject.renderable)
{ {
displayObject = displayObject._iNext; displayObject = displayObject._iNext;
continue; continue;
} }
if(displayObject instanceof PIXI.Sprite) if(displayObject instanceof PIXI.Sprite)
{ {
var frame = displayObject.texture.frame; var frame = displayObject.texture.frame;
if(frame && frame.width && frame.height) if(frame && frame.width && frame.height)
{ {
context.globalAlpha = displayObject.worldAlpha; context.globalAlpha = displayObject.worldAlpha;
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); 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.x,
frame.y, frame.y,
frame.width, frame.width,
frame.height, frame.height,
(displayObject.anchor.x) * -frame.width, (displayObject.anchor.x) * -frame.width,
(displayObject.anchor.y) * -frame.height, (displayObject.anchor.y) * -frame.height,
frame.width, frame.width,
frame.height); frame.height);
} }
} }
else if(displayObject instanceof PIXI.Strip) else if(displayObject instanceof PIXI.Strip)
{ {
@ -207,19 +207,19 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
if(displayObject.open) if(displayObject.open)
{ {
context.save(); context.save();
var cacheAlpha = displayObject.mask.alpha; var cacheAlpha = displayObject.mask.alpha;
var maskTransform = displayObject.mask.worldTransform; var maskTransform = displayObject.mask.worldTransform;
context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5])
displayObject.mask.worldAlpha = 0.5; displayObject.mask.worldAlpha = 0.5;
context.worldAlpha = 0; context.worldAlpha = 0;
PIXI.CanvasGraphics.renderGraphicsMask(displayObject.mask, context); PIXI.CanvasGraphics.renderGraphicsMask(displayObject.mask, context);
context.clip(); context.clip();
displayObject.mask.worldAlpha = cacheAlpha; displayObject.mask.worldAlpha = cacheAlpha;
} }
else else
@ -229,12 +229,12 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
} }
// count++ // count++
displayObject = displayObject._iNext; displayObject = displayObject._iNext;
} }
while(displayObject != testObject) while(displayObject != testObject)
} }
/** /**
@ -249,26 +249,26 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
var context = this.context; var context = this.context;
var verticies = strip.verticies; var verticies = strip.verticies;
var uvs = strip.uvs; var uvs = strip.uvs;
var length = verticies.length/2; var length = verticies.length/2;
this.count++; this.count++;
context.beginPath(); context.beginPath();
for (var i=1; i < length-2; i++) for (var i=1; i < length-2; i++)
{ {
// draw some triangles! // draw some triangles!
var index = i*2; var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; 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 y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
context.moveTo(x0, y0); context.moveTo(x0, y0);
context.lineTo(x1, y1); context.lineTo(x1, y1);
context.lineTo(x2, y2); context.lineTo(x2, y2);
}; };
context.fillStyle = "#FF0000"; context.fillStyle = "#FF0000";
context.fill(); context.fill();
context.closePath(); context.closePath();
@ -284,26 +284,26 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
{ {
var context = this.context; var context = this.context;
context.globalAlpha = sprite.worldAlpha; context.globalAlpha = sprite.worldAlpha;
if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat");
context.beginPath(); context.beginPath();
var tilePosition = sprite.tilePosition; var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale; var tileScale = sprite.tileScale;
// offset // offset
context.scale(tileScale.x,tileScale.y); context.scale(tileScale.x,tileScale.y);
context.translate(tilePosition.x, tilePosition.y); context.translate(tilePosition.x, tilePosition.y);
context.fillStyle = sprite.__tilePattern; context.fillStyle = sprite.__tilePattern;
context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y);
context.scale(1/tileScale.x, 1/tileScale.y); context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y); context.translate(-tilePosition.x, -tilePosition.y);
context.closePath(); context.closePath();
} }
@ -321,18 +321,18 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
// draw triangles!! // draw triangles!!
var verticies = strip.verticies; var verticies = strip.verticies;
var uvs = strip.uvs; var uvs = strip.uvs;
var length = verticies.length/2; var length = verticies.length/2;
this.count++; this.count++;
for (var i=1; i < length-2; i++) for (var i=1; i < length-2; i++)
{ {
// draw some triangles! // draw some triangles!
var index = i*2; var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; 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 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 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; 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(x1, y1);
context.lineTo(x2, y2); context.lineTo(x2, y2);
context.closePath(); context.closePath();
context.clip(); context.clip();
// Compute matrix transform // Compute matrix transform
var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; 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; 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_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_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; 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, context.transform(delta_a/delta, delta_d/delta,
delta_b/delta, delta_e/delta, delta_b/delta, delta_e/delta,
delta_c/delta, delta_f/delta); delta_c/delta, delta_f/delta);
context.drawImage(strip.texture.baseTexture.source, 0, 0); context.drawImage(strip.texture.baseTexture.source, 0, 0);
context.restore(); context.restore();
}; };
} }

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

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

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

@ -9,7 +9,7 @@
*/ */
PIXI.WebGLGraphics = function() PIXI.WebGLGraphics = function()
{ {
} }
/** /**
@ -24,60 +24,60 @@ PIXI.WebGLGraphics = function()
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{ {
var gl = PIXI.gl; 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(), buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()}; indexBuffer:gl.createBuffer()};
if(graphics.dirty) if(graphics.dirty)
{ {
graphics.dirty = false; graphics.dirty = false;
if(graphics.clearDirty) if(graphics.clearDirty)
{ {
graphics.clearDirty = false; graphics.clearDirty = false;
graphics._webGL.lastIndex = 0; graphics._webGL.lastIndex = 0;
graphics._webGL.points = []; graphics._webGL.points = [];
graphics._webGL.indices = []; graphics._webGL.indices = [];
} }
PIXI.WebGLGraphics.updateGraphics(graphics); PIXI.WebGLGraphics.updateGraphics(graphics);
} }
PIXI.activatePrimitiveShader(); PIXI.activatePrimitiveShader();
// This could be speeded up fo sure! // This could be speeded up fo sure!
var m = PIXI.mat3.clone(graphics.worldTransform); var m = PIXI.mat3.clone(graphics.worldTransform);
PIXI.mat3.transpose(m); PIXI.mat3.transpose(m);
// set the matrix transform for the // set the matrix transform for the
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m); gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.primitiveProgram.projectionVector, projection.x, projection.y); gl.uniform2f(PIXI.primitiveProgram.projectionVector, projection.x, projection.y);
gl.uniform1f(PIXI.primitiveProgram.alpha, graphics.worldAlpha); gl.uniform1f(PIXI.primitiveProgram.alpha, graphics.worldAlpha);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
// WHY DOES THIS LINE NEED TO BE THERE??? // WHY DOES THIS LINE NEED TO BE THERE???
gl.vertexAttribPointer(PIXI.shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(PIXI.shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// its not even used.. but need to be set or it breaks? // its not even used.. but need to be set or it breaks?
// only on pc though.. // only on pc though..
gl.vertexAttribPointer(PIXI.primitiveProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(PIXI.primitiveProgram.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); gl.vertexAttribPointer(PIXI.primitiveProgram.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
// set the index buffer! // set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
// return to default shader... // return to default shader...
PIXI.activateDefaultShader(); PIXI.activateDefaultShader();
} }
@ -92,18 +92,18 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
*/ */
PIXI.WebGLGraphics.updateGraphics = function(graphics) 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]; var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY) if(data.type == PIXI.Graphics.POLY)
{ {
if(data.fill) if(data.fill)
{ {
if(data.points.length>3) if(data.points.length>3)
PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); PIXI.WebGLGraphics.buildPoly(data, graphics._webGL);
} }
if(data.lineWidth > 0) if(data.lineWidth > 0)
{ {
PIXI.WebGLGraphics.buildLine(data, graphics._webGL); PIXI.WebGLGraphics.buildLine(data, graphics._webGL);
@ -118,18 +118,18 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); PIXI.WebGLGraphics.buildCircle(data, graphics._webGL);
} }
}; };
graphics._webGL.lastIndex = graphics.graphicsData.length; graphics._webGL.lastIndex = graphics.graphicsData.length;
var gl = PIXI.gl; var gl = PIXI.gl;
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW);
graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); 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 // need to convert points to a nice regular data
// //
var rectData = graphicsData.points; var rectData = graphicsData.points;
var x = rectData[0]; var x = rectData[0];
var y = rectData[1]; var y = rectData[1];
var width = rectData[2]; var width = rectData[2];
var height = rectData[3]; var height = rectData[3];
if(graphicsData.fill) if(graphicsData.fill)
{ {
var color = HEXtoRGB(graphicsData.fillColor); var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha; var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha; var r = color[0] * alpha;
var g = color[1] * alpha; var g = color[1] * alpha;
var b = color[2] * alpha; var b = color[2] * alpha;
var verts = webGLData.points; var verts = webGLData.points;
var indices = webGLData.indices; var indices = webGLData.indices;
var vertPos = verts.length/6; var vertPos = verts.length/6;
// start // start
verts.push(x, y); verts.push(x, y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(x + width, y); verts.push(x + width, y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(x , y + height); verts.push(x , y + height);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(x + width, y + height); verts.push(x + width, y + height);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
// insert 2 dead triangles.. // insert 2 dead triangles..
indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3)
} }
if(graphicsData.lineWidth) if(graphicsData.lineWidth)
{ {
graphicsData.points = [x, y, graphicsData.points = [x, y,
@ -193,10 +193,10 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
x + width, y + height, x + width, y + height,
x, y + height, x, y + height,
x, y]; x, y];
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
} }
} }
/** /**
@ -212,16 +212,16 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
{ {
// --- // // --- //
// need to convert points to a nice regular data // need to convert points to a nice regular data
// //
var rectData = graphicsData.points; var rectData = graphicsData.points;
var x = rectData[0]; var x = rectData[0];
var y = rectData[1]; var y = rectData[1];
var width = rectData[2]; var width = rectData[2];
var height = rectData[3]; var height = rectData[3];
var totalSegs = 40; var totalSegs = 40;
var seg = (Math.PI * 2) / totalSegs ; var seg = (Math.PI * 2) / totalSegs ;
if(graphicsData.fill) if(graphicsData.fill)
{ {
var color = HEXtoRGB(graphicsData.fillColor); var color = HEXtoRGB(graphicsData.fillColor);
@ -230,41 +230,41 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
var r = color[0] * alpha; var r = color[0] * alpha;
var g = color[1] * alpha; var g = color[1] * alpha;
var b = color[2] * alpha; var b = color[2] * alpha;
var verts = webGLData.points; var verts = webGLData.points;
var indices = webGLData.indices; var indices = webGLData.indices;
var vecPos = verts.length/6; var vecPos = verts.length/6;
indices.push(vecPos); 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,y, r, g, b, alpha);
verts.push(x + Math.sin(seg * i) * width, verts.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height, y + Math.cos(seg * i) * height,
r, g, b, alpha); r, g, b, alpha);
indices.push(vecPos++, vecPos++); indices.push(vecPos++, vecPos++);
}; };
indices.push(vecPos-1); indices.push(vecPos-1);
} }
if(graphicsData.lineWidth) if(graphicsData.lineWidth)
{ {
graphicsData.points = []; 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, graphicsData.points.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height) y + Math.cos(seg * i) * height)
}; };
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
} }
} }
/** /**
@ -279,89 +279,89 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
{ {
// TODO OPTIMISE! // TODO OPTIMISE!
var wrap = true; var wrap = true;
var points = graphicsData.points; var points = graphicsData.points;
if(points.length == 0)return; if(points.length == 0)return;
// get first and last point.. figure out the middle! // get first and last point.. figure out the middle!
var firstPoint = new PIXI.Point( points[0], points[1] ); var firstPoint = new PIXI.Point( points[0], points[1] );
var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 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 the first point is the last point - goona have issues :)
if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y)
{ {
points.pop(); points.pop();
points.pop(); points.pop();
lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
points.unshift(midPointX, midPointY); points.unshift(midPointX, midPointY);
points.push(midPointX, midPointY) points.push(midPointX, midPointY)
} }
var verts = webGLData.points; var verts = webGLData.points;
var indices = webGLData.indices; var indices = webGLData.indices;
var length = points.length / 2; var length = points.length / 2;
var indexCount = points.length; var indexCount = points.length;
var indexStart = verts.length/6; var indexStart = verts.length/6;
// DRAW the Line // DRAW the Line
var width = graphicsData.lineWidth / 2; var width = graphicsData.lineWidth / 2;
// sort color // sort color
var color = HEXtoRGB(graphicsData.lineColor); var color = HEXtoRGB(graphicsData.lineColor);
var alpha = graphicsData.lineAlpha; var alpha = graphicsData.lineAlpha;
var r = color[0] * alpha; var r = color[0] * alpha;
var g = color[1] * alpha; var g = color[1] * alpha;
var b = color[2] * alpha; var b = color[2] * alpha;
var p1x, p1y, p2x, p2y, p3x, p3y; var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy; var ipx, ipy;
var a1, b1, c1, a2, b2, c2; var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist; var denom, pdist, dist;
p1x = points[0]; p1x = points[0];
p1y = points[1]; p1y = points[1];
p2x = points[2]; p2x = points[2];
p2y = points[3]; p2y = points[3];
perpx = -(p1y - p2y); perpx = -(p1y - p2y);
perpy = p1x - p2x; perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy); dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist; perpx /= dist;
perpy /= dist; perpy /= dist;
perpx *= width; perpx *= width;
perpy *= width; perpy *= width;
// start // start
verts.push(p1x - perpx , p1y - perpy, verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha); r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy, verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha); 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]; p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1]; p1y = points[(i-1)*2 + 1];
p2x = points[(i)*2] p2x = points[(i)*2]
p2y = points[(i)*2 + 1] p2y = points[(i)*2 + 1]
p3x = points[(i+1)*2]; p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1]; p3y = points[(i+1)*2 + 1];
perpx = -(p1y - p2y); perpx = -(p1y - p2y);
perpy = p1x - p2x; perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy); dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist; perpx /= dist;
perpy /= dist; perpy /= dist;
@ -370,91 +370,91 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
perp2x = -(p2y - p3y); perp2x = -(p2y - p3y);
perp2y = p2x - p3x; perp2y = p2x - p3x;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist; perp2x /= dist;
perp2y /= dist; perp2y /= dist;
perp2x *= width; perp2x *= width;
perp2y *= width; perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y); a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x); b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y); a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x); b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1; denom = a1*b2 - a2*b1;
if (denom == 0) { if (denom == 0) {
denom+=1; denom+=1;
} }
px = (b1*c2 - b2*c1)/denom; px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom; py = (a2*c1 - a1*c2)/denom;
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140) if(pdist > 140 * 140)
{ {
perp3x = perpx - perp2x; perp3x = perpx - perp2x;
perp3y = perpy - perp2y; perp3y = perpy - perp2y;
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist; perp3x /= dist;
perp3y /= dist; perp3y /= dist;
perp3x *= width; perp3x *= width;
perp3y *= width; perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y); verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(p2x + perp3x, p2y +perp3y); verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(p2x - perp3x, p2y -perp3y); verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
indexCount++; indexCount++;
} }
else else
{ {
verts.push(px , py); verts.push(px , py);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(p2x - (px-p2x), p2y - (py - p2y));
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
} }
} }
p1x = points[(length-2)*2] p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1] p1y = points[(length-2)*2 + 1]
p2x = points[(length-1)*2] p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1] p2y = points[(length-1)*2 + 1]
perpx = -(p1y - p2y) perpx = -(p1y - p2y)
perpy = p1x - p2x; perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy); dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist; perpx /= dist;
perpy /= dist; perpy /= dist;
perpx *= width; perpx *= width;
perpy *= width; perpy *= width;
verts.push(p2x - perpx , p2y - perpy) verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(p2x + perpx , p2y + perpy) verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
indices.push(indexStart); indices.push(indexStart);
for (var i=0; i < indexCount; i++) for (var i=0; i < indexCount; i++)
{ {
indices.push(indexStart++); indices.push(indexStart++);
}; };
indices.push(indexStart-1); indices.push(indexStart-1);
} }
@ -471,25 +471,25 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
{ {
var points = graphicsData.points; var points = graphicsData.points;
if(points.length < 6)return; if(points.length < 6)return;
// get first and last point.. figure out the middle! // get first and last point.. figure out the middle!
var verts = webGLData.points; var verts = webGLData.points;
var indices = webGLData.indices; var indices = webGLData.indices;
var length = points.length / 2; var length = points.length / 2;
// sort color // sort color
var color = HEXtoRGB(graphicsData.fillColor); var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha; var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha; var r = color[0] * alpha;
var g = color[1] * alpha; var g = color[1] * alpha;
var b = color[2] * alpha; var b = color[2] * alpha;
var triangles = PIXI.PolyK.Triangulate(points); var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6; 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);
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);
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], verts.push(points[i * 2], points[i * 2 + 1],
r, g, b, alpha); 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.gl = gl;
this.root; this.root;
this.backgroundColor; this.backgroundColor;
this.batchs = []; this.batchs = [];
this.toRemove = []; this.toRemove = [];
@ -33,18 +33,18 @@ PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup;
* *
* @method setRenderable * @method setRenderable
* @param displayObject {DisplayObject} * @param displayObject {DisplayObject}
* @private * @private
*/ */
PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
{ {
// has this changed?? // has this changed??
if(this.root)this.removeDisplayObjectAndChildren(this.root); if(this.root)this.removeDisplayObjectAndChildren(this.root);
displayObject.worldVisible = displayObject.visible; displayObject.worldVisible = displayObject.visible;
// soooooo // // soooooo //
// to check if any batchs exist already?? // to check if any batchs exist already??
// TODO what if its already has an object? should remove it // TODO what if its already has an object? should remove it
this.root = displayObject; this.root = displayObject;
this.addDisplayObjectAndChildren(displayObject); this.addDisplayObjectAndChildren(displayObject);
@ -59,26 +59,26 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
PIXI.WebGLRenderGroup.prototype.render = function(projection) PIXI.WebGLRenderGroup.prototype.render = function(projection)
{ {
PIXI.WebGLRenderer.updateTextures(); PIXI.WebGLRenderer.updateTextures();
var gl = this.gl; var gl = this.gl;
gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y); gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
// will render all the elements in the group // will render all the elements in the group
var renderable; var renderable;
for (var i=0; i < this.batchs.length; i++) for (var i=0; i < this.batchs.length; i++)
{ {
renderable = this.batchs[i]; renderable = this.batchs[i];
if(renderable instanceof PIXI.WebGLBatch) if(renderable instanceof PIXI.WebGLBatch)
{ {
this.batchs[i].render(); this.batchs[i].render();
continue; continue;
} }
// non sprite batch.. // non sprite batch..
var worldVisible = renderable.vcount === PIXI.visibleCount; var worldVisible = renderable.vcount === PIXI.visibleCount;
@ -102,13 +102,13 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection)
if(renderable.open) if(renderable.open)
{ {
gl.enable(gl.STENCIL_TEST); gl.enable(gl.STENCIL_TEST);
gl.colorMask(false, false, false, false); gl.colorMask(false, false, false, false);
gl.stencilFunc(gl.ALWAYS,1,0xff); gl.stencilFunc(gl.ALWAYS,1,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE); gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE);
PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection); PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection);
gl.colorMask(true, true, true, true); gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.NOTEQUAL,0,0xff); gl.stencilFunc(gl.NOTEQUAL,0,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); 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) 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.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection)
{ {
PIXI.WebGLRenderer.updateTextures(); PIXI.WebGLRenderer.updateTextures();
var gl = this.gl; var gl = this.gl;
gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y); gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
// to do! // to do!
// render part of the scene... // render part of the scene...
var startIndex; var startIndex;
var startBatchIndex; var startBatchIndex;
var endIndex; var endIndex;
var endBatchIndex; var endBatchIndex;
/* /*
* LOOK FOR THE NEXT SPRITE * LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch * 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; if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
} }
var startBatch = nextRenderable.batch; var startBatch = nextRenderable.batch;
if(nextRenderable instanceof PIXI.Sprite) if(nextRenderable instanceof PIXI.Sprite)
{ {
startBatch = nextRenderable.batch; startBatch = nextRenderable.batch;
var head = startBatch.head; var head = startBatch.head;
var next = head; var next = head;
// ok now we have the batch.. need to find the start index! // ok now we have the batch.. need to find the start index!
if(head == nextRenderable) if(head == nextRenderable)
{ {
@ -188,7 +188,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
else else
{ {
startIndex = 1; startIndex = 1;
while(head.__next != nextRenderable) while(head.__next != nextRenderable)
{ {
startIndex++; startIndex++;
@ -200,7 +200,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{ {
startBatch = nextRenderable; startBatch = nextRenderable;
} }
// Get the LAST renderable object // Get the LAST renderable object
var lastRenderable = displayObject; var lastRenderable = displayObject;
var endBatch; var endBatch;
@ -210,13 +210,13 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
lastItem = lastItem.children[lastItem.children.length-1]; lastItem = lastItem.children[lastItem.children.length-1];
if(lastItem.renderable)lastRenderable = lastItem; if(lastItem.renderable)lastRenderable = lastItem;
} }
if(lastRenderable instanceof PIXI.Sprite) if(lastRenderable instanceof PIXI.Sprite)
{ {
endBatch = lastRenderable.batch; endBatch = lastRenderable.batch;
var head = endBatch.head; var head = endBatch.head;
if(head == lastRenderable) if(head == lastRenderable)
{ {
endIndex = 0; endIndex = 0;
@ -224,7 +224,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
else else
{ {
endIndex = 1; endIndex = 1;
while(head.__next != lastRenderable) while(head.__next != lastRenderable)
{ {
endIndex++; endIndex++;
@ -236,9 +236,9 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{ {
endBatch = lastRenderable; endBatch = lastRenderable;
} }
// TODO - need to fold this up a bit! // TODO - need to fold this up a bit!
if(startBatch == endBatch) if(startBatch == endBatch)
{ {
if(startBatch instanceof PIXI.WebGLBatch) if(startBatch instanceof PIXI.WebGLBatch)
@ -251,11 +251,11 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
} }
return; return;
} }
// now we have first and last! // now we have first and last!
startBatchIndex = this.batchs.indexOf(startBatch); startBatchIndex = this.batchs.indexOf(startBatch);
endBatchIndex = this.batchs.indexOf(endBatch); endBatchIndex = this.batchs.indexOf(endBatch);
// DO the first batch // DO the first batch
if(startBatch instanceof PIXI.WebGLBatch) if(startBatch instanceof PIXI.WebGLBatch)
{ {
@ -265,12 +265,12 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{ {
this.renderSpecial(startBatch, projection); this.renderSpecial(startBatch, projection);
} }
// DO the middle batchs.. // DO the middle batchs..
for (var i=startBatchIndex+1; i < endBatchIndex; i++) for (var i=startBatchIndex+1; i < endBatchIndex; i++)
{ {
renderable = this.batchs[i]; renderable = this.batchs[i];
if(renderable instanceof PIXI.WebGLBatch) if(renderable instanceof PIXI.WebGLBatch)
{ {
this.batchs[i].render(); this.batchs[i].render();
@ -280,7 +280,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
this.renderSpecial(renderable, projection); this.renderSpecial(renderable, projection);
} }
} }
// DO the last batch.. // DO the last batch..
if(endBatch instanceof PIXI.WebGLBatch) if(endBatch instanceof PIXI.WebGLBatch)
{ {
@ -331,13 +331,13 @@ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
if(renderable.open) if(renderable.open)
{ {
gl.enable(gl.STENCIL_TEST); gl.enable(gl.STENCIL_TEST);
gl.colorMask(false, false, false, false); gl.colorMask(false, false, false, false);
gl.stencilFunc(gl.ALWAYS,1,0xff); gl.stencilFunc(gl.ALWAYS,1,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE); gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE);
PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection); PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection);
// we know this is a render texture so enable alpha too.. // we know this is a render texture so enable alpha too..
gl.colorMask(true, true, true, true); gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.NOTEQUAL,0,0xff); gl.stencilFunc(gl.NOTEQUAL,0,0xff);
@ -359,11 +359,11 @@ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
*/ */
PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
{ {
// TODO definitely can optimse this function.. // TODO definitely can optimse this function..
this.removeObject(displayObject); this.removeObject(displayObject);
/* /*
* LOOK FOR THE PREVIOUS RENDERABLE * LOOK FOR THE PREVIOUS RENDERABLE
* This part looks for the closest previous sprite that can go into a batch * 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; previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break; if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
} }
/* /*
* LOOK FOR THE NEXT SPRITE * LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch * 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; nextRenderable = nextRenderable._iNext;
if(nextRenderable.renderable && nextRenderable.__renderGroup)break; if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
} }
this.insertObject(displayObject, previousRenderable, nextRenderable); this.insertObject(displayObject, previousRenderable, nextRenderable);
} }
@ -416,7 +416,7 @@ PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end)
if(previousRenderable.renderable && previousRenderable.__renderGroup)break; if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
} }
this.insertAfter(start, previousRenderable); this.insertAfter(start, previousRenderable);
/* /*
* LOOK FOR THE NEXT SPRITE * LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch * 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) PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject)
{ {
if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject);
/* /*
* LOOK FOR THE PREVIOUS RENDERABLE * LOOK FOR THE PREVIOUS RENDERABLE
* This part looks for the closest previous sprite that can go into a batch * 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 * It keeps going back until it finds a sprite or the stage
*/ */
var previousRenderable = displayObject.first; var previousRenderable = displayObject.first;
while(previousRenderable != this.root.first) while(previousRenderable != this.root.first)
{ {
previousRenderable = previousRenderable._iPrev; previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break; if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
} }
/* /*
* LOOK FOR THE NEXT SPRITE * LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch * 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; nextRenderable = nextRenderable._iNext;
if(nextRenderable.renderable && nextRenderable.__renderGroup)break; 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 tempObject = displayObject.first;
var testObject = displayObject.last._iNext; var testObject = displayObject.last._iNext;
do do
{ {
tempObject.__renderGroup = this; tempObject.__renderGroup = this;
if(tempObject.renderable) if(tempObject.renderable)
{ {
this.insertObject(tempObject, previousRenderable, nextRenderable); this.insertObject(tempObject, previousRenderable, nextRenderable);
previousRenderable = tempObject; previousRenderable = tempObject;
} }
tempObject = tempObject._iNext; tempObject = tempObject._iNext;
} }
while(tempObject != testObject) while(tempObject != testObject)
@ -513,10 +513,10 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayOb
PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject)
{ {
if(displayObject.__renderGroup != this)return; if(displayObject.__renderGroup != this)return;
// var displayObject = displayObject.first; // var displayObject = displayObject.first;
var lastObject = displayObject.last; var lastObject = displayObject.last;
do do
{ {
displayObject.__renderGroup = null; displayObject.__renderGroup = null;
if(displayObject.renderable)this.removeObject(displayObject); 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 // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED
var previousSprite = previousObject; var previousSprite = previousObject;
var nextSprite = nextObject; var nextSprite = nextObject;
/* /*
* so now we have the next renderable and the previous renderable * so now we have the next renderable and the previous renderable
* *
*/ */
if(displayObject instanceof PIXI.Sprite) if(displayObject instanceof PIXI.Sprite)
{ {
var previousBatch var previousBatch
var nextBatch var nextBatch
if(previousSprite instanceof PIXI.Sprite) if(previousSprite instanceof PIXI.Sprite)
{ {
previousBatch = previousSprite.batch; previousBatch = previousSprite.batch;
@ -566,13 +566,13 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
// TODO reword! // TODO reword!
previousBatch = previousSprite; previousBatch = previousSprite;
} }
if(nextSprite) if(nextSprite)
{ {
if(nextSprite instanceof PIXI.Sprite) if(nextSprite instanceof PIXI.Sprite)
{ {
nextBatch = nextSprite.batch; nextBatch = nextSprite.batch;
//batch may not exist if item was added to the display list but not to the webGL //batch may not exist if item was added to the display list but not to the webGL
if(nextBatch) if(nextBatch)
{ {
@ -588,18 +588,18 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
// THERE IS A SPLIT IN THIS BATCH! // // THERE IS A SPLIT IN THIS BATCH! //
var splitBatch = previousBatch.split(nextSprite); var splitBatch = previousBatch.split(nextSprite);
// COOL! // COOL!
// add it back into the array // add it back into the array
/* /*
* OOPS! * OOPS!
* seems the new sprite is in the middle of a batch * seems the new sprite is in the middle of a batch
* lets split it.. * lets split it..
*/ */
var batch = PIXI.WebGLRenderer.getBatch(); var batch = PIXI.WebGLRenderer.getBatch();
var index = this.batchs.indexOf( previousBatch ); var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject); batch.init(displayObject);
this.batchs.splice(index+1, 0, batch, splitBatch); this.batchs.splice(index+1, 0, batch, splitBatch);
return; return;
} }
} }
@ -608,21 +608,21 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
else else
{ {
// TODO re-word! // TODO re-word!
nextBatch = nextSprite; nextBatch = nextSprite;
} }
} }
/* /*
* looks like it does not belong to any batch! * looks like it does not belong to any batch!
* but is also not intersecting one.. * but is also not intersecting one..
* time to create anew one! * time to create anew one!
*/ */
var batch = PIXI.WebGLRenderer.getBatch(); var batch = PIXI.WebGLRenderer.getBatch();
batch.init(displayObject); 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 ); var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, batch); this.batchs.splice(index+1, 0, batch);
@ -631,16 +631,16 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
{ {
this.batchs.push(batch); this.batchs.push(batch);
} }
return; return;
} }
else if(displayObject instanceof PIXI.TilingSprite) else if(displayObject instanceof PIXI.TilingSprite)
{ {
// add to a batch!! // add to a batch!!
this.initTilingSprite(displayObject); this.initTilingSprite(displayObject);
// this.batchs.push(displayObject); // this.batchs.push(displayObject);
} }
else if(displayObject instanceof PIXI.Strip) else if(displayObject instanceof PIXI.Strip)
{ {
@ -651,14 +651,14 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
else if(displayObject)// instanceof PIXI.Graphics) else if(displayObject)// instanceof PIXI.Graphics)
{ {
//displayObject.initWebGL(this); //displayObject.initWebGL(this);
// add to a batch!! // add to a batch!!
//this.initStrip(displayObject); //this.initStrip(displayObject);
//this.batchs.push(displayObject); //this.batchs.push(displayObject);
} }
this.insertAfter(displayObject, previousSprite); this.insertAfter(displayObject, previousSprite);
// insert and SPLIT! // insert and SPLIT!
} }
@ -676,31 +676,31 @@ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject)
if(displayObject instanceof PIXI.Sprite) if(displayObject instanceof PIXI.Sprite)
{ {
var previousBatch = displayObject.batch; var previousBatch = displayObject.batch;
if(previousBatch) if(previousBatch)
{ {
// so this object is in a batch! // so this object is in a batch!
// is it not? need to split the batch // is it not? need to split the batch
if(previousBatch.tail == displayObject) if(previousBatch.tail == displayObject)
{ {
// is it tail? insert in to batchs // is it tail? insert in to batchs
var index = this.batchs.indexOf( previousBatch ); var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, item); this.batchs.splice(index+1, 0, item);
} }
else else
{ {
// TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) //
// THERE IS A SPLIT IN THIS BATCH! // // THERE IS A SPLIT IN THIS BATCH! //
var splitBatch = previousBatch.split(displayObject.__next); var splitBatch = previousBatch.split(displayObject.__next);
// COOL! // COOL!
// add it back into the array // add it back into the array
/* /*
* OOPS! * OOPS!
* seems the new sprite is in the middle of a batch * seems the new sprite is in the middle of a batch
* lets split it.. * lets split it..
*/ */
var index = this.batchs.indexOf( previousBatch ); var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, item, splitBatch); this.batchs.splice(index+1, 0, item, splitBatch);
@ -729,25 +729,25 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
{ {
// loop through children.. // loop through children..
// display object // // display object //
// add a child from the render group.. // add a child from the render group..
// remove it and all its children! // remove it and all its children!
//displayObject.cacheVisible = false;//displayObject.visible; //displayObject.cacheVisible = false;//displayObject.visible;
/* /*
* removing is a lot quicker.. * removing is a lot quicker..
* *
*/ */
var batchToRemove; var batchToRemove;
if(displayObject instanceof PIXI.Sprite) if(displayObject instanceof PIXI.Sprite)
{ {
// should always have a batch! // should always have a batch!
var batch = displayObject.batch; var batch = displayObject.batch;
if(!batch)return; // this means the display list has been altered befre rendering if(!batch)return; // this means the display list has been altered befre rendering
batch.remove(displayObject); batch.remove(displayObject);
if(batch.size==0) if(batch.size==0)
{ {
batchToRemove = batch; batchToRemove = batch;
@ -757,15 +757,15 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
{ {
batchToRemove = displayObject; batchToRemove = displayObject;
} }
/* /*
* Looks like there is somthing that needs removing! * Looks like there is somthing that needs removing!
*/ */
if(batchToRemove) if(batchToRemove)
{ {
var index = this.batchs.indexOf( batchToRemove ); var index = this.batchs.indexOf( batchToRemove );
if(index == -1)return;// this means it was added then removed before rendered 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. // ok so.. check to see if you adjacent batchs should be joined.
// TODO may optimise? // TODO may optimise?
if(index == 0 || index == this.batchs.length-1) 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! // wha - eva! just get of the empty batch!
this.batchs.splice(index, 1); this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
return; return;
} }
if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) 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) if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode)
{ {
//console.log("MERGE") //console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]); this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2); this.batchs.splice(index, 2);
return; return;
} }
} }
this.batchs.splice(index, 1); this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
} }
@ -808,26 +808,26 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
var gl = this.gl; var gl = this.gl;
// make the texture tilable.. // make the texture tilable..
sprite.verticies = new Float32Array([0, 0, sprite.verticies = new Float32Array([0, 0,
sprite.width, 0, sprite.width, 0,
sprite.width, sprite.height, sprite.width, sprite.height,
0, sprite.height]); 0, sprite.height]);
sprite.uvs = new Float32Array([0, 0, sprite.uvs = new Float32Array([0, 0,
1, 0, 1, 0,
1, 1, 1, 1,
0, 1]); 0, 1]);
sprite.colors = new Float32Array([1,1,1,1]); sprite.colors = new Float32Array([1,1,1,1]);
sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]);
sprite._vertexBuffer = gl.createBuffer(); sprite._vertexBuffer = gl.createBuffer();
sprite._indexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer();
sprite._uvBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer();
sprite._colorBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); 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.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW);
// return ( (x > 0) && ((x & (x - 1)) == 0) ); // return ( (x > 0) && ((x & (x - 1)) == 0) );
if(sprite.texture.baseTexture._glTexture) if(sprite.texture.baseTexture._glTexture)
@ -872,14 +872,14 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
//PIXI.mat4.transpose(mat4Real); //PIXI.mat4.transpose(mat4Real);
//PIXI.mat4.multiply(projectionMatrix, mat4Real, mat4Real ) //PIXI.mat4.multiply(projectionMatrix, mat4Real, mat4Real )
gl.useProgram(PIXI.stripShaderProgram); gl.useProgram(PIXI.stripShaderProgram);
var m = PIXI.mat3.clone(strip.worldTransform); var m = PIXI.mat3.clone(strip.worldTransform);
PIXI.mat3.transpose(m); PIXI.mat3.transpose(m);
// set the matrix transform for the // set the matrix transform for the
gl.uniformMatrix3fv(PIXI.stripShaderProgram.translationMatrix, false, m); gl.uniformMatrix3fv(PIXI.stripShaderProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.stripShaderProgram.projectionVector, projection.x, projection.y); gl.uniform2f(PIXI.stripShaderProgram.projectionVector, projection.x, projection.y);
gl.uniform1f(PIXI.stripShaderProgram.alpha, strip.worldAlpha); 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); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
} }
*/ */
if(!strip.dirty) if(!strip.dirty)
{ {
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// update the uvs // update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0); gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload! // dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); 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.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// update the uvs // update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0); gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload! // dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
} }
//console.log(gl.TRIANGLE_STRIP); //console.log(gl.TRIANGLE_STRIP);
gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0);
gl.useProgram(PIXI.shaderProgram); gl.useProgram(PIXI.shaderProgram);
} }
@ -959,31 +959,31 @@ PIXI.WebGLRenderGroup.prototype.renderTilingSprite = function(sprite, projection
{ {
var gl = this.gl; var gl = this.gl;
var shaderProgram = PIXI.shaderProgram; var shaderProgram = PIXI.shaderProgram;
var tilePosition = sprite.tilePosition; var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale; var tileScale = sprite.tileScale;
var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetX = tilePosition.x/sprite.texture.baseTexture.width;
var offsetY = tilePosition.y/sprite.texture.baseTexture.height; var offsetY = tilePosition.y/sprite.texture.baseTexture.height;
var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x;
var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y;
sprite.uvs[0] = 0 - offsetX; sprite.uvs[0] = 0 - offsetX;
sprite.uvs[1] = 0 - offsetY; sprite.uvs[1] = 0 - offsetY;
sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[2] = (1 * scaleX) -offsetX;
sprite.uvs[3] = 0 - offsetY; sprite.uvs[3] = 0 - offsetY;
sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[4] = (1 *scaleX) - offsetX;
sprite.uvs[5] = (1 *scaleY) - offsetY; sprite.uvs[5] = (1 *scaleY) - offsetY;
sprite.uvs[6] = 0 - offsetX; sprite.uvs[6] = 0 - offsetX;
sprite.uvs[7] = (1 *scaleY) - offsetY; sprite.uvs[7] = (1 *scaleY) - offsetY;
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs)
this.renderStrip(sprite, projectionMatrix); this.renderStrip(sprite, projectionMatrix);
} }
@ -999,12 +999,12 @@ PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
// build the strip! // build the strip!
var gl = this.gl; var gl = this.gl;
var shaderProgram = this.shaderProgram; var shaderProgram = this.shaderProgram;
strip._vertexBuffer = gl.createBuffer(); strip._vertexBuffer = gl.createBuffer();
strip._indexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer();
strip._uvBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer();
strip._colorBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); 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.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); 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 view {Canvas} the canvas to use as a view, optional
* @param transparent=false {Boolean} the transparency of the render view, default false * @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) * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment)
* *
*/ */
PIXI.WebGLRenderer = function(width, height, view, transparent, antialias) 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.width = width || 800;
this.height = height || 600; this.height = height || 600;
this.view = view || document.createElement( 'canvas' ); this.view = view || document.createElement( 'canvas' );
this.view.width = this.width; this.view.width = this.width;
this.view.height = this.height; this.view.height = this.height;
// deal with losing context.. // deal with losing context..
var scope = this; var scope = this;
this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false)
this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false)
this.batchs = []; 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, alpha: this.transparent,
antialias:!!antialias, // SPEED UP?? antialias:!!antialias, // SPEED UP??
premultipliedAlpha:false, premultipliedAlpha:false,
stencil:true stencil:true
}); });
} }
catch (e) catch (e)
{ {
throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); 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.disable(gl.CULL_FACE);
gl.enable(gl.BLEND); gl.enable(gl.BLEND);
gl.colorMask(true, true, true, this.transparent); gl.colorMask(true, true, true, this.transparent);
PIXI.projection = new PIXI.Point(400, 300); PIXI.projection = new PIXI.Point(400, 300);
@ -90,7 +90,7 @@ PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
* @static * @static
* @method getBatch * @method getBatch
* @return {WebGLBatch} * @return {WebGLBatch}
* @private * @private
*/ */
PIXI.WebGLRenderer.getBatch = function() PIXI.WebGLRenderer.getBatch = function()
{ {
@ -114,7 +114,7 @@ PIXI.WebGLRenderer.getBatch = function()
*/ */
PIXI.WebGLRenderer.returnBatch = function(batch) PIXI.WebGLRenderer.returnBatch = function(batch)
{ {
batch.clean(); batch.clean();
PIXI._batchs.push(batch); PIXI._batchs.push(batch);
} }
@ -127,8 +127,8 @@ PIXI.WebGLRenderer.returnBatch = function(batch)
PIXI.WebGLRenderer.prototype.render = function(stage) PIXI.WebGLRenderer.prototype.render = function(stage)
{ {
if(this.contextLost)return; if(this.contextLost)return;
// if rendering a new stage clear the batchs.. // if rendering a new stage clear the batchs..
if(this.__stage !== stage) if(this.__stage !== stage)
{ {
@ -137,8 +137,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
this.__stage = stage; this.__stage = stage;
this.stageRenderGroup.setRenderable(stage); this.stageRenderGroup.setRenderable(stage);
} }
// TODO not needed now... // TODO not needed now...
// update children if need be // update children if need be
// best to remove first! // best to remove first!
/*for (var i=0; i < stage.__childrenRemoved.length; i++) /*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]); if(group)group.removeDisplayObject(stage.__childrenRemoved[i]);
}*/ }*/
// update any textures // update any textures
PIXI.WebGLRenderer.updateTextures(); PIXI.WebGLRenderer.updateTextures();
// update the scene graph // update the scene graph
PIXI.visibleCount++; PIXI.visibleCount++;
stage.updateTransform(); stage.updateTransform();
var gl = this.gl; var gl = this.gl;
// -- Does this need to be set every frame? -- // // -- Does this need to be set every frame? -- //
gl.colorMask(true, true, true, this.transparent); gl.colorMask(true, true, true, this.transparent);
gl.viewport(0, 0, this.width, this.height); gl.viewport(0, 0, this.width, this.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, null); 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); gl.clear(gl.COLOR_BUFFER_BIT);
// HACK TO TEST // HACK TO TEST
this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit; this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
this.stageRenderGroup.render(PIXI.projection); this.stageRenderGroup.render(PIXI.projection);
// interaction // interaction
// run interaction! // run interaction!
if(stage.interactive) if(stage.interactive)
@ -181,15 +181,15 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this); stage.interactionManager.setTarget(this);
} }
} }
// after rendering lets confirm all frames that have been uodated.. // after rendering lets confirm all frames that have been uodated..
if(PIXI.Texture.frameUpdates.length > 0) 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[i].updateFrame = false;
}; };
PIXI.Texture.frameUpdates = []; PIXI.Texture.frameUpdates = [];
} }
} }
@ -222,7 +222,7 @@ PIXI.WebGLRenderer.updateTexture = function(texture)
{ {
//TODO break this out into a texture manager... //TODO break this out into a texture manager...
var gl = PIXI.gl; var gl = PIXI.gl;
if(!texture._glTexture) if(!texture._glTexture)
{ {
texture._glTexture = gl.createTexture(); texture._glTexture = gl.createTexture();
@ -288,7 +288,7 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
this.view.width = width; this.view.width = width;
this.view.height = height; 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; //var projectionMatrix = this.projectionMatrix;
@ -323,20 +323,20 @@ PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
*/ */
PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
{ {
this.gl = this.view.getContext("experimental-webgl", { this.gl = this.view.getContext("experimental-webgl", {
alpha: true alpha: true
}); });
this.initShaders(); this.initShaders();
for(var key in PIXI.TextureCache) for(var key in PIXI.TextureCache)
{ {
var texture = PIXI.TextureCache[key].baseTexture; var texture = PIXI.TextureCache[key].baseTexture;
texture._glTexture = null; texture._glTexture = null;
PIXI.WebGLRenderer.updateTexture(texture); 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].restoreLostContext(this.gl)//
this.batchs[i].dirty = true; this.batchs[i].dirty = true;

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

@ -24,7 +24,7 @@ PIXI.shaderVertexSrc = [
"attribute vec2 aTextureCoord;", "attribute vec2 aTextureCoord;",
"attribute float aColor;", "attribute float aColor;",
//"uniform mat4 uMVMatrix;", //"uniform mat4 uMVMatrix;",
"uniform vec2 projectionVector;", "uniform vec2 projectionVector;",
"varying vec2 vTextureCoord;", "varying vec2 vTextureCoord;",
"varying float vColor;", "varying float vColor;",
@ -96,30 +96,30 @@ PIXI.primitiveShaderVertexSrc = [
"}" "}"
]; ];
PIXI.initPrimitiveShader = function() PIXI.initPrimitiveShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
var shaderProgram = PIXI.compileProgram(PIXI.primitiveShaderVertexSrc, PIXI.primitiveShaderFragmentSrc) var shaderProgram = PIXI.compileProgram(PIXI.primitiveShaderVertexSrc, PIXI.primitiveShaderFragmentSrc)
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor"); shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector"); shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix"); shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix");
shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha"); shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha");
PIXI.primitiveProgram = shaderProgram; PIXI.primitiveProgram = shaderProgram;
} }
PIXI.initDefaultShader = function() PIXI.initDefaultShader = function()
{ {
var gl = this.gl; var gl = this.gl;
var shaderProgram = PIXI.compileProgram(PIXI.shaderVertexSrc, PIXI.shaderFragmentSrc) var shaderProgram = PIXI.compileProgram(PIXI.shaderVertexSrc, PIXI.shaderFragmentSrc)
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
@ -129,15 +129,15 @@ PIXI.initDefaultShader = function()
// shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"); // shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler"); shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
PIXI.shaderProgram = shaderProgram; PIXI.shaderProgram = shaderProgram;
} }
PIXI.initDefaultStripShader = function() PIXI.initDefaultStripShader = function()
{ {
var gl = this.gl; var gl = this.gl;
var shaderProgram = PIXI.compileProgram(PIXI.stripShaderVertexSrc, PIXI.stripShaderFragmentSrc) var shaderProgram = PIXI.compileProgram(PIXI.stripShaderVertexSrc, PIXI.stripShaderFragmentSrc)
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
@ -149,9 +149,9 @@ PIXI.initDefaultStripShader = function()
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor"); shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector"); shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler"); shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
PIXI.stripShaderProgram = shaderProgram; PIXI.stripShaderProgram = shaderProgram;
} }
@ -186,9 +186,9 @@ PIXI.compileProgram = function(vertexSrc, fragmentSrc)
var gl = PIXI.gl; var gl = PIXI.gl;
var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc);
var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc); var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc);
var shaderProgram = gl.createProgram(); var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader); gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram); gl.linkProgram(shaderProgram);
@ -198,34 +198,34 @@ PIXI.compileProgram = function(vertexSrc, fragmentSrc)
} }
return shaderProgram; return shaderProgram;
} }
PIXI.activateDefaultShader = function() PIXI.activateDefaultShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
var shaderProgram = PIXI.shaderProgram; var shaderProgram = PIXI.shaderProgram;
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute); gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
gl.enableVertexAttribArray(shaderProgram.colorAttribute); gl.enableVertexAttribArray(shaderProgram.colorAttribute);
} }
PIXI.activatePrimitiveShader = function() PIXI.activatePrimitiveShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute); gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute); gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
gl.useProgram(PIXI.primitiveProgram); gl.useProgram(PIXI.primitiveProgram);
gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute); gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute); 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" * 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.angelcode.com/products/bmfont/ for windows or
* http://www.bmglyph.com/ for mac. * http://www.bmglyph.com/ for mac.
* *
@ -94,7 +94,7 @@ PIXI.BitmapText.prototype.updateText = function()
prevCharCode = null; prevCharCode = null;
continue; continue;
} }
var charData = data.chars[charCode]; var charData = data.chars[charCode];
if(!charData) continue; if(!charData) continue;
@ -157,7 +157,7 @@ PIXI.BitmapText.prototype.updateTransform = function()
this.dirty = false; this.dirty = false;
} }
PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); 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.setText(text);
this.setStyle(style); this.setStyle(style);
this.updateText(); this.updateText();
this.dirty = false; this.dirty = false;
}; };
@ -83,9 +83,9 @@ PIXI.Sprite.prototype.setText = function(text)
PIXI.Text.prototype.updateText = function() PIXI.Text.prototype.updateText = function()
{ {
this.context.font = this.style.font; this.context.font = this.style.font;
var outputText = this.text; var outputText = this.text;
// word wrap // word wrap
// preserve original text // preserve original text
if(this.style.wordWrap)outputText = this.wordWrap(this.text); if(this.style.wordWrap)outputText = this.wordWrap(this.text);
@ -103,7 +103,7 @@ PIXI.Text.prototype.updateText = function()
maxLineWidth = Math.max(maxLineWidth, lineWidth); maxLineWidth = Math.max(maxLineWidth, lineWidth);
} }
this.canvas.width = maxLineWidth + this.style.strokeThickness; this.canvas.width = maxLineWidth + this.style.strokeThickness;
//calculate text height //calculate text height
var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness;
this.canvas.height = lineHeight * lines.length; this.canvas.height = lineHeight * lines.length;
@ -111,7 +111,7 @@ PIXI.Text.prototype.updateText = function()
//set canvas text styles //set canvas text styles
this.context.fillStyle = this.style.fill; this.context.fillStyle = this.style.fill;
this.context.font = this.style.font; this.context.font = this.style.font;
this.context.strokeStyle = this.style.stroke; this.context.strokeStyle = this.style.stroke;
this.context.lineWidth = this.style.strokeThickness; this.context.lineWidth = this.style.strokeThickness;
@ -121,7 +121,7 @@ PIXI.Text.prototype.updateText = function()
for (i = 0; i < lines.length; i++) for (i = 0; i < lines.length; i++)
{ {
var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
if(this.style.align == "right") if(this.style.align == "right")
{ {
linePosition.x += maxLineWidth - lineWidths[i]; linePosition.x += maxLineWidth - lineWidths[i];
@ -141,7 +141,7 @@ PIXI.Text.prototype.updateText = function()
this.context.fillText(lines[i], linePosition.x, linePosition.y); this.context.fillText(lines[i], linePosition.x, linePosition.y);
} }
} }
this.updateTexture(); this.updateTexture();
}; };
@ -157,10 +157,10 @@ PIXI.Text.prototype.updateTexture = function()
this.texture.baseTexture.height = this.canvas.height; this.texture.baseTexture.height = this.canvas.height;
this.texture.frame.width = this.canvas.width; this.texture.frame.width = this.canvas.width;
this.texture.frame.height = this.canvas.height; this.texture.frame.height = this.canvas.height;
this._width = this.canvas.width; this._width = this.canvas.width;
this._height = this.canvas.height; this._height = this.canvas.height;
PIXI.texturesToUpdate.push(this.texture.baseTexture); PIXI.texturesToUpdate.push(this.texture.baseTexture);
}; };
@ -174,10 +174,10 @@ PIXI.Text.prototype.updateTransform = function()
{ {
if(this.dirty) if(this.dirty)
{ {
this.updateText(); this.updateText();
this.dirty = false; this.dirty = false;
} }
PIXI.Sprite.prototype.updateTransform.call(this); PIXI.Sprite.prototype.updateTransform.call(this);
}; };
@ -189,12 +189,12 @@ PIXI.Text.prototype.updateTransform = function()
* @param fontStyle {Object} * @param fontStyle {Object}
* @private * @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 // build a little reference dictionary so if the font style has been used return a
// cached version... // cached version...
var result = PIXI.Text.heightCache[fontStyle]; var result = PIXI.Text.heightCache[fontStyle];
if(!result) if(!result)
{ {
var body = document.getElementsByTagName("body")[0]; var body = document.getElementsByTagName("body")[0];
@ -203,13 +203,13 @@ PIXI.Text.prototype.determineFontHeight = function(fontStyle)
dummy.appendChild(dummyText); dummy.appendChild(dummyText);
dummy.setAttribute("style", fontStyle + ';position:absolute;top:0;left:0'); dummy.setAttribute("style", fontStyle + ';position:absolute;top:0;left:0');
body.appendChild(dummy); body.appendChild(dummy);
result = dummy.offsetHeight; result = dummy.offsetHeight;
PIXI.Text.heightCache[fontStyle] = result; PIXI.Text.heightCache[fontStyle] = result;
body.removeChild(dummy); body.removeChild(dummy);
} }
return result; return result;
}; };
@ -229,7 +229,7 @@ PIXI.Text.prototype.wordWrap = function(text)
if(p == start) { if(p == start) {
return 1; return 1;
} }
if(ctx.measureText(text.substring(0,p)).width <= wrapWidth) if(ctx.measureText(text.substring(0,p)).width <= wrapWidth)
{ {
if(ctx.measureText(text.substring(0,p+1)).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); return arguments.callee(ctx, text, start, p, wrapWidth);
} }
}; };
var lineWrap = function(ctx, text, wrapWidth) var lineWrap = function(ctx, text, wrapWidth)
{ {
if(ctx.measureText(text).width <= wrapWidth || text.length < 1) 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); var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth);
return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth); return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth);
}; };
var result = ""; var result = "";
var lines = text.split("\n"); var lines = text.split("\n");
for (var i = 0; i < lines.length; i++) for (var i = 0; i < lines.length; i++)
{ {
result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n"; result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n";
} }
return result; return result;
}; };
@ -279,7 +279,7 @@ PIXI.Text.prototype.destroy = function(destroyTexture)
{ {
this.texture.destroy(); this.texture.destroy();
} }
}; };
PIXI.Text.heightCache = {}; PIXI.Text.heightCache = {};

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

@ -62,19 +62,19 @@ PIXI.BaseTexture = function(source)
this.hasLoaded = true; this.hasLoaded = true;
this.width = this.source.width; this.width = this.source.width;
this.height = this.source.height; this.height = this.source.height;
PIXI.texturesToUpdate.push(this); PIXI.texturesToUpdate.push(this);
} }
else else
{ {
var scope = this; var scope = this;
this.source.onload = function(){ this.source.onload = function(){
scope.hasLoaded = true; scope.hasLoaded = true;
scope.width = scope.source.width; scope.width = scope.source.width;
scope.height = scope.source.height; scope.height = scope.source.height;
// add it to somewhere... // add it to somewhere...
PIXI.texturesToUpdate.push(scope); PIXI.texturesToUpdate.push(scope);
scope.dispatchEvent( { type: 'loaded', content: scope } ); scope.dispatchEvent( { type: 'loaded', content: scope } );
@ -87,7 +87,7 @@ PIXI.BaseTexture = function(source)
this.hasLoaded = true; this.hasLoaded = true;
this.width = this.source.width; this.width = this.source.width;
this.height = this.source.height; this.height = this.source.height;
PIXI.texturesToUpdate.push(this); PIXI.texturesToUpdate.push(this);
} }
@ -127,7 +127,7 @@ PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin)
{ {
// new Image() breaks tex loading in some versions of Chrome. // new Image() breaks tex loading in some versions of Chrome.
// See https://code.google.com/p/chromium/issues/detail?id=238071 // 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) if (crossorigin)
{ {
image.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. 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. __Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded.
Otherwise black rectangles will be drawn instead. 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: 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 renderTexture = new PIXI.RenderTexture(800, 600);
var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
sprite.position.x = 800/2; sprite.position.x = 800/2;
@ -39,7 +39,7 @@ PIXI.RenderTexture = function(width, height)
this.indetityMatrix = PIXI.mat3.create(); 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) if(PIXI.gl)
{ {
@ -68,7 +68,7 @@ PIXI.RenderTexture.prototype.initWebGL = function()
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
this.glFramebuffer.width = this.width; this.glFramebuffer.width = this.width;
this.glFramebuffer.height = this.height; this.glFramebuffer.height = this.height;
this.baseTexture = new PIXI.BaseTexture(); this.baseTexture = new PIXI.BaseTexture();
@ -96,7 +96,7 @@ PIXI.RenderTexture.prototype.initWebGL = function()
// set the correct render function.. // set the correct render function..
this.render = this.renderWebGL; this.render = this.renderWebGL;
} }
@ -105,19 +105,19 @@ PIXI.RenderTexture.prototype.resize = function(width, height)
this.width = width; this.width = width;
this.height = height; this.height = height;
if(PIXI.gl) if(PIXI.gl)
{ {
this.projection.x = this.width/2 this.projection.x = this.width/2
this.projection.y = this.height/2; this.projection.y = this.height/2;
var gl = PIXI.gl; var gl = PIXI.gl;
gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture); 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); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
} }
else else
{ {
this.frame.width = this.width this.frame.width = this.width
this.frame.height = this.height; this.frame.height = this.height;
this.renderer.resize(this.width, 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; var gl = PIXI.gl;
// enable the alpha color mask.. // 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 ); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
if(clear) if(clear)
{ {
gl.clearColor(0,0,0, 0); gl.clearColor(0,0,0, 0);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
} }
@ -175,19 +175,19 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
displayObject.worldTransform[4] = -1; displayObject.worldTransform[4] = -1;
displayObject.worldTransform[5] = this.projection.y * 2; displayObject.worldTransform[5] = this.projection.y * 2;
if(position) if(position)
{ {
displayObject.worldTransform[2] = position.x; displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] -= position.y; displayObject.worldTransform[5] -= position.y;
} }
PIXI.visibleCount++; PIXI.visibleCount++;
displayObject.vcount = PIXI.visibleCount; displayObject.vcount = PIXI.visibleCount;
for(var i=0,j=children.length; i<j; i++) for(var i=0,j=children.length; i<j; i++)
{ {
children[i].updateTransform(); children[i].updateTransform();
} }
var renderGroup = displayObject.__renderGroup; var renderGroup = displayObject.__renderGroup;
@ -227,25 +227,25 @@ PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, cl
var children = displayObject.children; var children = displayObject.children;
displayObject.worldTransform = PIXI.mat3.create(); displayObject.worldTransform = PIXI.mat3.create();
if(position) if(position)
{ {
displayObject.worldTransform[2] = position.x; displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] = position.y; displayObject.worldTransform[5] = position.y;
} }
for(var i=0,j=children.length; i<j; i++) 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); if(clear)this.renderer.context.clearRect(0,0, this.width, this.height);
this.renderer.renderDisplayObject(displayObject); 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); // 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); if(this.noFrame)frame = new PIXI.Rectangle(0,0, baseTexture.width, baseTexture.height);
//console.log(frame) //console.log(frame)
this.setFrame(frame); this.setFrame(frame);
} }
else else
@ -137,13 +137,13 @@ PIXI.Texture.prototype.setFrame = function(frame)
PIXI.Texture.fromImage = function(imageUrl, crossorigin) PIXI.Texture.fromImage = function(imageUrl, crossorigin)
{ {
var texture = PIXI.TextureCache[imageUrl]; var texture = PIXI.TextureCache[imageUrl];
if(!texture) if(!texture)
{ {
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin)); texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture; PIXI.TextureCache[imageUrl] = texture;
} }
return 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 * @static
* @method removeTextureFromCache * @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 view {Canvas} the canvas to use as a view, optional
* @param transparent=false {Boolean} the transparency of the render view, default false * @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) * @param antialias=false {Boolean} sets antialias (only applicable in webGL chrome at the moment)
* *
* antialias * antialias
*/ */
PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias) PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias)

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

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

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

@ -2,7 +2,7 @@
PolyK library PolyK library
url: http://polyk.ivank.net url: http://polyk.ivank.net
Released under MIT licence. Released under MIT licence.
Copyright (c) 2012 Ivan Kuckir Copyright (c) 2012 Ivan Kuckir
Permission is hereby granted, free of charge, to any person 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 FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE. OTHER DEALINGS IN THE SOFTWARE.
This is an amazing lib! This is an amazing lib!
slightly modified by mat groves (matgroves.com); slightly modified by mat groves (matgroves.com);
*/ */
@ -43,13 +43,13 @@ PIXI.PolyK = {};
PIXI.PolyK.Triangulate = function(p) PIXI.PolyK.Triangulate = function(p)
{ {
var sign = true; var sign = true;
var n = p.length>>1; var n = p.length>>1;
if(n<3) return []; if(n<3) return [];
var tgs = []; var tgs = [];
var avl = []; var avl = [];
for(var i=0; i<n; i++) avl.push(i); for(var i=0; i<n; i++) avl.push(i);
var i = 0; var i = 0;
var al = n; var al = n;
while(al > 3) while(al > 3)
@ -57,11 +57,11 @@ PIXI.PolyK.Triangulate = function(p)
var i0 = avl[(i+0)%al]; var i0 = avl[(i+0)%al];
var i1 = avl[(i+1)%al]; var i1 = avl[(i+1)%al];
var i2 = avl[(i+2)%al]; var i2 = avl[(i+2)%al];
var ax = p[2*i0], ay = p[2*i0+1]; var ax = p[2*i0], ay = p[2*i0+1];
var bx = p[2*i1], by = p[2*i1+1]; var bx = p[2*i1], by = p[2*i1+1];
var cx = p[2*i2], cy = p[2*i2+1]; var cx = p[2*i2], cy = p[2*i2+1];
var earFound = false; var earFound = false;
if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign)) if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign))
{ {
@ -80,7 +80,7 @@ PIXI.PolyK.Triangulate = function(p)
al--; al--;
i = 0; i = 0;
} }
else if(i++ > 3*al) else if(i++ > 3*al)
{ {
// need to flip flip reverse it! // need to flip flip reverse it!
// reset! // reset!
@ -89,17 +89,17 @@ PIXI.PolyK.Triangulate = function(p)
var tgs = []; var tgs = [];
avl = []; avl = [];
for(var i=0; i<n; i++) avl.push(i); for(var i=0; i<n; i++) avl.push(i);
i = 0; i = 0;
al = n; al = n;
sign = false; sign = false;
} }
else else
{ {
console.log("PIXI Warning: shape too complex to fill") console.log("PIXI Warning: shape too complex to fill")
return []; return [];
} }
} }
} }
tgs.push(avl[0], avl[1], avl[2]); 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 v1y = by-ay;
var v2x = px-ax; var v2x = px-ax;
var v2y = py-ay; var v2y = py-ay;
var dot00 = v0x*v0x+v0y*v0y; var dot00 = v0x*v0x+v0y*v0y;
var dot01 = v0x*v1x+v0y*v1y; var dot01 = v0x*v1x+v0y*v1y;
var dot02 = v0x*v2x+v0y*v2y; var dot02 = v0x*v2x+v0y*v2y;
var dot11 = v1x*v1x+v1y*v1y; var dot11 = v1x*v1x+v1y*v1y;
var dot12 = v1x*v2x+v1y*v2y; var dot12 = v1x*v2x+v1y*v2y;
var invDenom = 1 / (dot00 * dot11 - dot01 * dot01); var invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
var u = (dot11 * dot02 - dot01 * dot12) * invDenom; var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
var v = (dot00 * dot12 - dot01 * dot02) * 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']; var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame']; || window[vendors[x]+'CancelRequestAnimationFrame'];
} }
@ -27,7 +27,7 @@ if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) { window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime(); var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 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); timeToCall);
lastTime = currTime + timeToCall; lastTime = currTime + timeToCall;
return id; return id;
@ -60,19 +60,19 @@ if (typeof Function.prototype.bind != 'function') {
var slice = Array.prototype.slice; var slice = Array.prototype.slice;
return function (thisArg) { return function (thisArg) {
var target = this, boundArgs = slice.call(arguments, 1); var target = this, boundArgs = slice.call(arguments, 1);
if (typeof target != 'function') throw new TypeError(); if (typeof target != 'function') throw new TypeError();
function bound() { function bound() {
var args = boundArgs.concat(slice.call(arguments)); var args = boundArgs.concat(slice.call(arguments));
target.apply(this instanceof bound ? this : thisArg, args); target.apply(this instanceof bound ? this : thisArg, args);
} }
bound.prototype = (function F(proto) { bound.prototype = (function F(proto) {
proto && (F.prototype = proto); proto && (F.prototype = proto);
if (!(this instanceof F)) return new F; if (!(this instanceof F)) return new F;
})(target.prototype); })(target.prototype);
return bound; return bound;
}; };
})(); })();
@ -87,7 +87,7 @@ if (typeof Function.prototype.bind != 'function') {
var AjaxRequest = PIXI.AjaxRequest = 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 var activexmodes = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
if (window.ActiveXObject) if (window.ActiveXObject)
{ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) { //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
for (var i=0; i<activexmodes.length; i++) for (var i=0; i<activexmodes.length; i++)
@ -120,20 +120,20 @@ PIXI.runList = function(item)
var safe = 0; var safe = 0;
var tmp = item.first; var tmp = item.first;
console.log(tmp); console.log(tmp);
while(tmp._iNext) while(tmp._iNext)
{ {
safe++; safe++;
tmp = tmp._iNext; tmp = tmp._iNext;
console.log(tmp); console.log(tmp);
// console.log(tmp); // console.log(tmp);
if(safe > 100) if(safe > 100)
{ {
console.log("BREAK") console.log("BREAK")
break break
} }
} }
} }