pixi.js example 10 Text

diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 0bc8242..04870e9 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -1,7 +1,6 @@ - pixi.js example 10 Text - @@ -40,8 +39,8 @@ var outputSprite = new PIXI.Sprite(currentTexture); // align the sprite - outputSprite.position.x = 800/2; - outputSprite.position.y = 600/2; + outputSprite.position.x = 800 / 2; + outputSprite.position.y = 600 / 2; outputSprite.anchor.x = 0.5; outputSprite.anchor.y = 0.5; @@ -50,8 +49,8 @@ var stuffContainer = new PIXI.DisplayObjectContainer(); - stuffContainer.position.x = 800/2; - stuffContainer.position.y = 600/2 + stuffContainer.position.x = 800 / 2; + stuffContainer.position.y = 600 / 2 stage.addChild(stuffContainer); @@ -82,14 +81,13 @@ // used for spinning! var count = 0; - requestAnimFrame(animate); function animate() { requestAnimFrame( animate ); - for (var i=0; i < items.length; i++) + for (var i = 0; i < items.length; i++) { // rotate each item var item = items[i]; @@ -103,13 +101,12 @@ renderTexture = renderTexture2; renderTexture2 = temp; - // set the new texture outputSprite.setTexture(renderTexture); // twist this up! stuffContainer.rotation -= 0.01 - outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; + outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; // render the stage to the texture // the true clears the texture before content is rendered diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 0bc8242..04870e9 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -1,7 +1,6 @@ - pixi.js example 10 Text - @@ -40,8 +39,8 @@ var outputSprite = new PIXI.Sprite(currentTexture); // align the sprite - outputSprite.position.x = 800/2; - outputSprite.position.y = 600/2; + outputSprite.position.x = 800 / 2; + outputSprite.position.y = 600 / 2; outputSprite.anchor.x = 0.5; outputSprite.anchor.y = 0.5; @@ -50,8 +49,8 @@ var stuffContainer = new PIXI.DisplayObjectContainer(); - stuffContainer.position.x = 800/2; - stuffContainer.position.y = 600/2 + stuffContainer.position.x = 800 / 2; + stuffContainer.position.y = 600 / 2 stage.addChild(stuffContainer); @@ -82,14 +81,13 @@ // used for spinning! var count = 0; - requestAnimFrame(animate); function animate() { requestAnimFrame( animate ); - for (var i=0; i < items.length; i++) + for (var i = 0; i < items.length; i++) { // rotate each item var item = items[i]; @@ -103,13 +101,12 @@ renderTexture = renderTexture2; renderTexture2 = temp; - // set the new texture outputSprite.setTexture(renderTexture); // twist this up! stuffContainer.rotation -= 0.01 - outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; + outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; // render the stage to the texture // the true clears the texture before content is rendered diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 0be15ce..4f36d9f 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -15,15 +15,12 @@ @@ -40,8 +39,8 @@ var outputSprite = new PIXI.Sprite(currentTexture); // align the sprite - outputSprite.position.x = 800/2; - outputSprite.position.y = 600/2; + outputSprite.position.x = 800 / 2; + outputSprite.position.y = 600 / 2; outputSprite.anchor.x = 0.5; outputSprite.anchor.y = 0.5; @@ -50,8 +49,8 @@ var stuffContainer = new PIXI.DisplayObjectContainer(); - stuffContainer.position.x = 800/2; - stuffContainer.position.y = 600/2 + stuffContainer.position.x = 800 / 2; + stuffContainer.position.y = 600 / 2 stage.addChild(stuffContainer); @@ -82,14 +81,13 @@ // used for spinning! var count = 0; - requestAnimFrame(animate); function animate() { requestAnimFrame( animate ); - for (var i=0; i < items.length; i++) + for (var i = 0; i < items.length; i++) { // rotate each item var item = items[i]; @@ -103,13 +101,12 @@ renderTexture = renderTexture2; renderTexture2 = temp; - // set the new texture outputSprite.setTexture(renderTexture); // twist this up! stuffContainer.rotation -= 0.01 - outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; + outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; // render the stage to the texture // the true clears the texture before content is rendered diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 0be15ce..4f36d9f 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -15,15 +15,12 @@ diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 0bc8242..04870e9 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -1,7 +1,6 @@ - pixi.js example 10 Text - @@ -40,8 +39,8 @@ var outputSprite = new PIXI.Sprite(currentTexture); // align the sprite - outputSprite.position.x = 800/2; - outputSprite.position.y = 600/2; + outputSprite.position.x = 800 / 2; + outputSprite.position.y = 600 / 2; outputSprite.anchor.x = 0.5; outputSprite.anchor.y = 0.5; @@ -50,8 +49,8 @@ var stuffContainer = new PIXI.DisplayObjectContainer(); - stuffContainer.position.x = 800/2; - stuffContainer.position.y = 600/2 + stuffContainer.position.x = 800 / 2; + stuffContainer.position.y = 600 / 2 stage.addChild(stuffContainer); @@ -82,14 +81,13 @@ // used for spinning! var count = 0; - requestAnimFrame(animate); function animate() { requestAnimFrame( animate ); - for (var i=0; i < items.length; i++) + for (var i = 0; i < items.length; i++) { // rotate each item var item = items[i]; @@ -103,13 +101,12 @@ renderTexture = renderTexture2; renderTexture2 = temp; - // set the new texture outputSprite.setTexture(renderTexture); // twist this up! stuffContainer.rotation -= 0.01 - outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; + outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; // render the stage to the texture // the true clears the texture before content is rendered diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 0be15ce..4f36d9f 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -15,15 +15,12 @@ diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index 8403dec..bfc07f5 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -34,7 +34,6 @@ 0,0,1,0, 0,0,0,1]; - var filter = new PIXI.ColorMatrixFilter(); var container = new PIXI.DisplayObjectContainer(); @@ -61,13 +60,11 @@ panda.anchor.x = 0.5; panda.anchor.y = 0.5; - container.addChild(panda); stage.addChild(container); // create a renderer instance - renderer.view.style.position = "absolute" renderer.view.style.width = window.innerWidth + "px"; renderer.view.style.height = window.innerHeight + "px"; @@ -76,7 +73,6 @@ // add render view to DOM document.body.appendChild(renderer.view); - stage.filters = [filter]; var count = 0; @@ -94,7 +90,6 @@ { stage.filters = null; } - } /* @@ -119,11 +114,9 @@ help.position.x = 10; stage.addChild(help); - requestAnimFrame(animate); function animate() { - bg.rotation += 0.01; bgFront.rotation -= 0.01; @@ -138,12 +131,10 @@ colorMatrix[1] = Math.sin(count) * 3; colorMatrix[2] = Math.cos(count); colorMatrix[3] = Math.cos(count) * 1.5; - colorMatrix[4] = Math.sin(count/3) * 2; - colorMatrix[5] = Math.sin(count/2); - colorMatrix[6] = Math.sin(count/4); + colorMatrix[4] = Math.sin(count / 3) * 2; + colorMatrix[5] = Math.sin(count / 2); + colorMatrix[6] = Math.sin(count / 4); filter.matrix = colorMatrix; - - renderer.render(stage); requestAnimFrame( animate ); diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 0bc8242..04870e9 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -1,7 +1,6 @@ - pixi.js example 10 Text - @@ -40,8 +39,8 @@ var outputSprite = new PIXI.Sprite(currentTexture); // align the sprite - outputSprite.position.x = 800/2; - outputSprite.position.y = 600/2; + outputSprite.position.x = 800 / 2; + outputSprite.position.y = 600 / 2; outputSprite.anchor.x = 0.5; outputSprite.anchor.y = 0.5; @@ -50,8 +49,8 @@ var stuffContainer = new PIXI.DisplayObjectContainer(); - stuffContainer.position.x = 800/2; - stuffContainer.position.y = 600/2 + stuffContainer.position.x = 800 / 2; + stuffContainer.position.y = 600 / 2 stage.addChild(stuffContainer); @@ -82,14 +81,13 @@ // used for spinning! var count = 0; - requestAnimFrame(animate); function animate() { requestAnimFrame( animate ); - for (var i=0; i < items.length; i++) + for (var i = 0; i < items.length; i++) { // rotate each item var item = items[i]; @@ -103,13 +101,12 @@ renderTexture = renderTexture2; renderTexture2 = temp; - // set the new texture outputSprite.setTexture(renderTexture); // twist this up! stuffContainer.rotation -= 0.01 - outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; + outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; // render the stage to the texture // the true clears the texture before content is rendered diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 0be15ce..4f36d9f 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -15,15 +15,12 @@ diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index 8403dec..bfc07f5 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -34,7 +34,6 @@ 0,0,1,0, 0,0,0,1]; - var filter = new PIXI.ColorMatrixFilter(); var container = new PIXI.DisplayObjectContainer(); @@ -61,13 +60,11 @@ panda.anchor.x = 0.5; panda.anchor.y = 0.5; - container.addChild(panda); stage.addChild(container); // create a renderer instance - renderer.view.style.position = "absolute" renderer.view.style.width = window.innerWidth + "px"; renderer.view.style.height = window.innerHeight + "px"; @@ -76,7 +73,6 @@ // add render view to DOM document.body.appendChild(renderer.view); - stage.filters = [filter]; var count = 0; @@ -94,7 +90,6 @@ { stage.filters = null; } - } /* @@ -119,11 +114,9 @@ help.position.x = 10; stage.addChild(help); - requestAnimFrame(animate); function animate() { - bg.rotation += 0.01; bgFront.rotation -= 0.01; @@ -138,12 +131,10 @@ colorMatrix[1] = Math.sin(count) * 3; colorMatrix[2] = Math.cos(count); colorMatrix[3] = Math.cos(count) * 1.5; - colorMatrix[4] = Math.sin(count/3) * 2; - colorMatrix[5] = Math.sin(count/2); - colorMatrix[6] = Math.sin(count/4); + colorMatrix[4] = Math.sin(count / 3) * 2; + colorMatrix[5] = Math.sin(count / 2); + colorMatrix[6] = Math.sin(count / 4); filter.matrix = colorMatrix; - - renderer.render(stage); requestAnimFrame( animate ); diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index e62ba39..48e3c15 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -45,8 +45,6 @@ // create a new background sprite var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - - // create an array to store a refference to the dude in the pond var dudeArray = []; @@ -55,7 +53,6 @@ for (var i = 0; i < totaldude; i++) { - // create a new Sprite that uses the image name that we just generated as its source var dude = PIXI.Sprite.fromImage("flowerTop.png"); @@ -86,7 +83,6 @@ // finally we push the dude into the dudeArray so it it can be easily accessed later dudeArray.push(dude); - } // create a bounding box box for the little dudes @@ -97,7 +93,6 @@ viewWidth + dudeBoundsPadding * 2, viewHeight + dudeBoundsPadding * 2); - var tick = 0; requestAnimationFrame(animate); @@ -114,18 +109,16 @@ dude.rotation = -dude.direction - Math.PI/2; // wrap the dudes by testing there bounds.. - if(dude.position.x < dudeBounds.x)dude.position.x += dudeBounds.width; - else if(dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.x -= dudeBounds.width + if (dude.position.x < dudeBounds.x)dude.position.x += dudeBounds.width; + else if (dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.x -= dudeBounds.width; - if(dude.position.y < dudeBounds.y)dude.position.y += dudeBounds.height; - else if(dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height + if (dude.position.y < dudeBounds.y)dude.position.y += dudeBounds.height; + else if (dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height; } // increment the ticker tick += 0.1; - - // time to render the stage ! renderer.render(stage); diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 0bc8242..04870e9 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -1,7 +1,6 @@ - pixi.js example 10 Text - @@ -40,8 +39,8 @@ var outputSprite = new PIXI.Sprite(currentTexture); // align the sprite - outputSprite.position.x = 800/2; - outputSprite.position.y = 600/2; + outputSprite.position.x = 800 / 2; + outputSprite.position.y = 600 / 2; outputSprite.anchor.x = 0.5; outputSprite.anchor.y = 0.5; @@ -50,8 +49,8 @@ var stuffContainer = new PIXI.DisplayObjectContainer(); - stuffContainer.position.x = 800/2; - stuffContainer.position.y = 600/2 + stuffContainer.position.x = 800 / 2; + stuffContainer.position.y = 600 / 2 stage.addChild(stuffContainer); @@ -82,14 +81,13 @@ // used for spinning! var count = 0; - requestAnimFrame(animate); function animate() { requestAnimFrame( animate ); - for (var i=0; i < items.length; i++) + for (var i = 0; i < items.length; i++) { // rotate each item var item = items[i]; @@ -103,13 +101,12 @@ renderTexture = renderTexture2; renderTexture2 = temp; - // set the new texture outputSprite.setTexture(renderTexture); // twist this up! stuffContainer.rotation -= 0.01 - outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; + outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; // render the stage to the texture // the true clears the texture before content is rendered diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 0be15ce..4f36d9f 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -15,15 +15,12 @@ diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index 8403dec..bfc07f5 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -34,7 +34,6 @@ 0,0,1,0, 0,0,0,1]; - var filter = new PIXI.ColorMatrixFilter(); var container = new PIXI.DisplayObjectContainer(); @@ -61,13 +60,11 @@ panda.anchor.x = 0.5; panda.anchor.y = 0.5; - container.addChild(panda); stage.addChild(container); // create a renderer instance - renderer.view.style.position = "absolute" renderer.view.style.width = window.innerWidth + "px"; renderer.view.style.height = window.innerHeight + "px"; @@ -76,7 +73,6 @@ // add render view to DOM document.body.appendChild(renderer.view); - stage.filters = [filter]; var count = 0; @@ -94,7 +90,6 @@ { stage.filters = null; } - } /* @@ -119,11 +114,9 @@ help.position.x = 10; stage.addChild(help); - requestAnimFrame(animate); function animate() { - bg.rotation += 0.01; bgFront.rotation -= 0.01; @@ -138,12 +131,10 @@ colorMatrix[1] = Math.sin(count) * 3; colorMatrix[2] = Math.cos(count); colorMatrix[3] = Math.cos(count) * 1.5; - colorMatrix[4] = Math.sin(count/3) * 2; - colorMatrix[5] = Math.sin(count/2); - colorMatrix[6] = Math.sin(count/4); + colorMatrix[4] = Math.sin(count / 3) * 2; + colorMatrix[5] = Math.sin(count / 2); + colorMatrix[6] = Math.sin(count / 4); filter.matrix = colorMatrix; - - renderer.render(stage); requestAnimFrame( animate ); diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index e62ba39..48e3c15 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -45,8 +45,6 @@ // create a new background sprite var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - - // create an array to store a refference to the dude in the pond var dudeArray = []; @@ -55,7 +53,6 @@ for (var i = 0; i < totaldude; i++) { - // create a new Sprite that uses the image name that we just generated as its source var dude = PIXI.Sprite.fromImage("flowerTop.png"); @@ -86,7 +83,6 @@ // finally we push the dude into the dudeArray so it it can be easily accessed later dudeArray.push(dude); - } // create a bounding box box for the little dudes @@ -97,7 +93,6 @@ viewWidth + dudeBoundsPadding * 2, viewHeight + dudeBoundsPadding * 2); - var tick = 0; requestAnimationFrame(animate); @@ -114,18 +109,16 @@ dude.rotation = -dude.direction - Math.PI/2; // wrap the dudes by testing there bounds.. - if(dude.position.x < dudeBounds.x)dude.position.x += dudeBounds.width; - else if(dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.x -= dudeBounds.width + if (dude.position.x < dudeBounds.x)dude.position.x += dudeBounds.width; + else if (dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.x -= dudeBounds.width; - if(dude.position.y < dudeBounds.y)dude.position.y += dudeBounds.height; - else if(dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height + if (dude.position.y < dudeBounds.y)dude.position.y += dudeBounds.height; + else if (dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height; } // increment the ticker tick += 0.1; - - // time to render the stage ! renderer.render(stage); diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index 1a0961d..c6ed4b5 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -48,7 +48,6 @@ for (var i = 0; i < totalDudes; i++) { - // create a new Sprite that uses the image name that we just generated as its source var dude = PIXI.Sprite.fromImage("eggHead.png"); @@ -80,7 +79,6 @@ // finally we push the dude into the dudeArray so it it can be easily accessed later dudeArray.push(dude); - } // create a bounding box box for the little dudes @@ -103,26 +101,24 @@ dude.direction += dude.turningSpeed * 0.01; dude.position.x += Math.sin(dude.direction) * dude.speed; dude.position.y += Math.cos(dude.direction) * dude.speed; - dude.rotation = -dude.direction - Math.PI/2; + dude.rotation = -dude.direction - Math.PI / 2; // wrap the dudes by testing their bounds.. - if(dude.position.x < dudeBounds.x)dude.position.x += dudeBounds.width; - else if(dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.x -= dudeBounds.width + if (dude.position.x < dudeBounds.x)dude.position.x += dudeBounds.width; + else if (dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.x -= dudeBounds.width; - if(dude.position.y < dudeBounds.y)dude.position.y += dudeBounds.height; - else if(dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height + if (dude.position.y < dudeBounds.y)dude.position.y += dudeBounds.height; + else if (dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height; } // increment the ticker tick += 0.1; - - // time to render the state! renderer.render(stage); // request another animation frame.. - requestAnimationFrame( animate ); + requestAnimationFrame(animate); } diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 0bc8242..04870e9 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -1,7 +1,6 @@ - pixi.js example 10 Text - @@ -40,8 +39,8 @@ var outputSprite = new PIXI.Sprite(currentTexture); // align the sprite - outputSprite.position.x = 800/2; - outputSprite.position.y = 600/2; + outputSprite.position.x = 800 / 2; + outputSprite.position.y = 600 / 2; outputSprite.anchor.x = 0.5; outputSprite.anchor.y = 0.5; @@ -50,8 +49,8 @@ var stuffContainer = new PIXI.DisplayObjectContainer(); - stuffContainer.position.x = 800/2; - stuffContainer.position.y = 600/2 + stuffContainer.position.x = 800 / 2; + stuffContainer.position.y = 600 / 2 stage.addChild(stuffContainer); @@ -82,14 +81,13 @@ // used for spinning! var count = 0; - requestAnimFrame(animate); function animate() { requestAnimFrame( animate ); - for (var i=0; i < items.length; i++) + for (var i = 0; i < items.length; i++) { // rotate each item var item = items[i]; @@ -103,13 +101,12 @@ renderTexture = renderTexture2; renderTexture2 = temp; - // set the new texture outputSprite.setTexture(renderTexture); // twist this up! stuffContainer.rotation -= 0.01 - outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; + outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; // render the stage to the texture // the true clears the texture before content is rendered diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 0be15ce..4f36d9f 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -15,15 +15,12 @@ diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index 8403dec..bfc07f5 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -34,7 +34,6 @@ 0,0,1,0, 0,0,0,1]; - var filter = new PIXI.ColorMatrixFilter(); var container = new PIXI.DisplayObjectContainer(); @@ -61,13 +60,11 @@ panda.anchor.x = 0.5; panda.anchor.y = 0.5; - container.addChild(panda); stage.addChild(container); // create a renderer instance - renderer.view.style.position = "absolute" renderer.view.style.width = window.innerWidth + "px"; renderer.view.style.height = window.innerHeight + "px"; @@ -76,7 +73,6 @@ // add render view to DOM document.body.appendChild(renderer.view); - stage.filters = [filter]; var count = 0; @@ -94,7 +90,6 @@ { stage.filters = null; } - } /* @@ -119,11 +114,9 @@ help.position.x = 10; stage.addChild(help); - requestAnimFrame(animate); function animate() { - bg.rotation += 0.01; bgFront.rotation -= 0.01; @@ -138,12 +131,10 @@ colorMatrix[1] = Math.sin(count) * 3; colorMatrix[2] = Math.cos(count); colorMatrix[3] = Math.cos(count) * 1.5; - colorMatrix[4] = Math.sin(count/3) * 2; - colorMatrix[5] = Math.sin(count/2); - colorMatrix[6] = Math.sin(count/4); + colorMatrix[4] = Math.sin(count / 3) * 2; + colorMatrix[5] = Math.sin(count / 2); + colorMatrix[6] = Math.sin(count / 4); filter.matrix = colorMatrix; - - renderer.render(stage); requestAnimFrame( animate ); diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index e62ba39..48e3c15 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -45,8 +45,6 @@ // create a new background sprite var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - - // create an array to store a refference to the dude in the pond var dudeArray = []; @@ -55,7 +53,6 @@ for (var i = 0; i < totaldude; i++) { - // create a new Sprite that uses the image name that we just generated as its source var dude = PIXI.Sprite.fromImage("flowerTop.png"); @@ -86,7 +83,6 @@ // finally we push the dude into the dudeArray so it it can be easily accessed later dudeArray.push(dude); - } // create a bounding box box for the little dudes @@ -97,7 +93,6 @@ viewWidth + dudeBoundsPadding * 2, viewHeight + dudeBoundsPadding * 2); - var tick = 0; requestAnimationFrame(animate); @@ -114,18 +109,16 @@ dude.rotation = -dude.direction - Math.PI/2; // wrap the dudes by testing there bounds.. - if(dude.position.x < dudeBounds.x)dude.position.x += dudeBounds.width; - else if(dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.x -= dudeBounds.width + if (dude.position.x < dudeBounds.x)dude.position.x += dudeBounds.width; + else if (dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.x -= dudeBounds.width; - if(dude.position.y < dudeBounds.y)dude.position.y += dudeBounds.height; - else if(dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height + if (dude.position.y < dudeBounds.y)dude.position.y += dudeBounds.height; + else if (dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height; } // increment the ticker tick += 0.1; - - // time to render the stage ! renderer.render(stage); diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index 1a0961d..c6ed4b5 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -48,7 +48,6 @@ for (var i = 0; i < totalDudes; i++) { - // create a new Sprite that uses the image name that we just generated as its source var dude = PIXI.Sprite.fromImage("eggHead.png"); @@ -80,7 +79,6 @@ // finally we push the dude into the dudeArray so it it can be easily accessed later dudeArray.push(dude); - } // create a bounding box box for the little dudes @@ -103,26 +101,24 @@ dude.direction += dude.turningSpeed * 0.01; dude.position.x += Math.sin(dude.direction) * dude.speed; dude.position.y += Math.cos(dude.direction) * dude.speed; - dude.rotation = -dude.direction - Math.PI/2; + dude.rotation = -dude.direction - Math.PI / 2; // wrap the dudes by testing their bounds.. - if(dude.position.x < dudeBounds.x)dude.position.x += dudeBounds.width; - else if(dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.x -= dudeBounds.width + if (dude.position.x < dudeBounds.x)dude.position.x += dudeBounds.width; + else if (dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.x -= dudeBounds.width; - if(dude.position.y < dudeBounds.y)dude.position.y += dudeBounds.height; - else if(dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height + if (dude.position.y < dudeBounds.y)dude.position.y += dudeBounds.height; + else if (dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height; } // increment the ticker tick += 0.1; - - // time to render the state! renderer.render(stage); // request another animation frame.. - requestAnimationFrame( animate ); + requestAnimationFrame(animate); } diff --git a/examples/example 2 - SpriteSheet/index.html b/examples/example 2 - SpriteSheet/index.html index fe2c8de..7f8fff3 100644 --- a/examples/example 2 - SpriteSheet/index.html +++ b/examples/example 2 - SpriteSheet/index.html @@ -67,7 +67,6 @@ * var texture = PIXI.Texture.fromFrame(frameName); * var alien = new PIXI.Sprite(texture); */ - alien.position.x = Math.random() * 800 - 400; alien.position.y = Math.random() * 600 - 300; alien.anchor.x = 0.5; @@ -78,12 +77,9 @@ // start animating requestAnimFrame(animate); - - } function animate() { - requestAnimFrame(animate); // just for fun, lets rotate mr rabbit a little