diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 277e3b4..23fae9a 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -35,25 +35,6 @@ s.parentNode.insertBefore(wf, s); })(); - function runList(item) - { - console.log("_"); - var safe = 0; - var tmp = item; - while(tmp._iNext) - { - safe++; - tmp = tmp._iNext; - console.log(tmp); - - if(safe > 100) - { - console.log("BREAK"); - break; - } - } - } - function init() { var assetsToLoader = ["desyrel.xml"]; @@ -76,8 +57,6 @@ bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20; bitmapFontText.position.y = 20; - runList(bitmapFontText); - stage.addChild(bitmapFontText); } diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 277e3b4..23fae9a 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -35,25 +35,6 @@ s.parentNode.insertBefore(wf, s); })(); - function runList(item) - { - console.log("_"); - var safe = 0; - var tmp = item; - while(tmp._iNext) - { - safe++; - tmp = tmp._iNext; - console.log(tmp); - - if(safe > 100) - { - console.log("BREAK"); - break; - } - } - } - function init() { var assetsToLoader = ["desyrel.xml"]; @@ -76,8 +57,6 @@ bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20; bitmapFontText.position.y = 20; - runList(bitmapFontText); - stage.addChild(bitmapFontText); } diff --git a/examples/example 11 - RenderTexture/index.html b/examples/example 11 - RenderTexture/index.html index 1bfb10d..88a7396 100644 --- a/examples/example 11 - RenderTexture/index.html +++ b/examples/example 11 - RenderTexture/index.html @@ -8,6 +8,13 @@ padding: 0; background-color: #000000; } + + .rendererView { + position: absolute; + display: block; + width: 100%; + height: 100%; + } @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 277e3b4..23fae9a 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -35,25 +35,6 @@ s.parentNode.insertBefore(wf, s); })(); - function runList(item) - { - console.log("_"); - var safe = 0; - var tmp = item; - while(tmp._iNext) - { - safe++; - tmp = tmp._iNext; - console.log(tmp); - - if(safe > 100) - { - console.log("BREAK"); - break; - } - } - } - function init() { var assetsToLoader = ["desyrel.xml"]; @@ -76,8 +57,6 @@ bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20; bitmapFontText.position.y = 20; - runList(bitmapFontText); - stage.addChild(bitmapFontText); } diff --git a/examples/example 11 - RenderTexture/index.html b/examples/example 11 - RenderTexture/index.html index 1bfb10d..88a7396 100644 --- a/examples/example 11 - RenderTexture/index.html +++ b/examples/example 11 - RenderTexture/index.html @@ -8,6 +8,13 @@ padding: 0; background-color: #000000; } + + .rendererView { + position: absolute; + display: block; + width: 100%; + height: 100%; + } @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 277e3b4..23fae9a 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -35,25 +35,6 @@ s.parentNode.insertBefore(wf, s); })(); - function runList(item) - { - console.log("_"); - var safe = 0; - var tmp = item; - while(tmp._iNext) - { - safe++; - tmp = tmp._iNext; - console.log(tmp); - - if(safe > 100) - { - console.log("BREAK"); - break; - } - } - } - function init() { var assetsToLoader = ["desyrel.xml"]; @@ -76,8 +57,6 @@ bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20; bitmapFontText.position.y = 20; - runList(bitmapFontText); - stage.addChild(bitmapFontText); } diff --git a/examples/example 11 - RenderTexture/index.html b/examples/example 11 - RenderTexture/index.html index 1bfb10d..88a7396 100644 --- a/examples/example 11 - RenderTexture/index.html +++ b/examples/example 11 - RenderTexture/index.html @@ -8,6 +8,13 @@ padding: 0; background-color: #000000; } + + .rendererView { + position: absolute; + display: block; + width: 100%; + height: 100%; + } @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 277e3b4..23fae9a 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -35,25 +35,6 @@ s.parentNode.insertBefore(wf, s); })(); - function runList(item) - { - console.log("_"); - var safe = 0; - var tmp = item; - while(tmp._iNext) - { - safe++; - tmp = tmp._iNext; - console.log(tmp); - - if(safe > 100) - { - console.log("BREAK"); - break; - } - } - } - function init() { var assetsToLoader = ["desyrel.xml"]; @@ -76,8 +57,6 @@ bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20; bitmapFontText.position.y = 20; - runList(bitmapFontText); - stage.addChild(bitmapFontText); } diff --git a/examples/example 11 - RenderTexture/index.html b/examples/example 11 - RenderTexture/index.html index 1bfb10d..88a7396 100644 --- a/examples/example 11 - RenderTexture/index.html +++ b/examples/example 11 - RenderTexture/index.html @@ -8,6 +8,13 @@ padding: 0; background-color: #000000; } + + .rendererView { + position: absolute; + display: block; + width: 100%; + height: 100%; + } @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 277e3b4..23fae9a 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -35,25 +35,6 @@ s.parentNode.insertBefore(wf, s); })(); - function runList(item) - { - console.log("_"); - var safe = 0; - var tmp = item; - while(tmp._iNext) - { - safe++; - tmp = tmp._iNext; - console.log(tmp); - - if(safe > 100) - { - console.log("BREAK"); - break; - } - } - } - function init() { var assetsToLoader = ["desyrel.xml"]; @@ -76,8 +57,6 @@ bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20; bitmapFontText.position.y = 20; - runList(bitmapFontText); - stage.addChild(bitmapFontText); } diff --git a/examples/example 11 - RenderTexture/index.html b/examples/example 11 - RenderTexture/index.html index 1bfb10d..88a7396 100644 --- a/examples/example 11 - RenderTexture/index.html +++ b/examples/example 11 - RenderTexture/index.html @@ -8,6 +8,13 @@ padding: 0; background-color: #000000; } + + .rendererView { + position: absolute; + display: block; + width: 100%; + height: 100%; + } @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 277e3b4..23fae9a 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -35,25 +35,6 @@ s.parentNode.insertBefore(wf, s); })(); - function runList(item) - { - console.log("_"); - var safe = 0; - var tmp = item; - while(tmp._iNext) - { - safe++; - tmp = tmp._iNext; - console.log(tmp); - - if(safe > 100) - { - console.log("BREAK"); - break; - } - } - } - function init() { var assetsToLoader = ["desyrel.xml"]; @@ -76,8 +57,6 @@ bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20; bitmapFontText.position.y = 20; - runList(bitmapFontText); - stage.addChild(bitmapFontText); } diff --git a/examples/example 11 - RenderTexture/index.html b/examples/example 11 - RenderTexture/index.html index 1bfb10d..88a7396 100644 --- a/examples/example 11 - RenderTexture/index.html +++ b/examples/example 11 - RenderTexture/index.html @@ -8,6 +8,13 @@ padding: 0; background-color: #000000; } + + .rendererView { + position: absolute; + display: block; + width: 100%; + height: 100%; + } @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index caa18ea..5bb21a8 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -43,7 +43,7 @@ var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - // create an array to store a refference to the dude in the pond + // create an array to store a reference to the dudes in the pond var dudeArray = []; var totaldude = 20; diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 277e3b4..23fae9a 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -35,25 +35,6 @@ s.parentNode.insertBefore(wf, s); })(); - function runList(item) - { - console.log("_"); - var safe = 0; - var tmp = item; - while(tmp._iNext) - { - safe++; - tmp = tmp._iNext; - console.log(tmp); - - if(safe > 100) - { - console.log("BREAK"); - break; - } - } - } - function init() { var assetsToLoader = ["desyrel.xml"]; @@ -76,8 +57,6 @@ bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20; bitmapFontText.position.y = 20; - runList(bitmapFontText); - stage.addChild(bitmapFontText); } diff --git a/examples/example 11 - RenderTexture/index.html b/examples/example 11 - RenderTexture/index.html index 1bfb10d..88a7396 100644 --- a/examples/example 11 - RenderTexture/index.html +++ b/examples/example 11 - RenderTexture/index.html @@ -8,6 +8,13 @@ padding: 0; background-color: #000000; } + + .rendererView { + position: absolute; + display: block; + width: 100%; + height: 100%; + } @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index caa18ea..5bb21a8 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -43,7 +43,7 @@ var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - // create an array to store a refference to the dude in the pond + // create an array to store a reference to the dudes in the pond var dudeArray = []; var totaldude = 20; diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index c6283ca..f051fd1 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -88,8 +88,8 @@ var tick = 0; requestAnimationFrame(animate); - function animate() - { + function animate() { + // iterate through the dude and update the positiond for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 277e3b4..23fae9a 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -35,25 +35,6 @@ s.parentNode.insertBefore(wf, s); })(); - function runList(item) - { - console.log("_"); - var safe = 0; - var tmp = item; - while(tmp._iNext) - { - safe++; - tmp = tmp._iNext; - console.log(tmp); - - if(safe > 100) - { - console.log("BREAK"); - break; - } - } - } - function init() { var assetsToLoader = ["desyrel.xml"]; @@ -76,8 +57,6 @@ bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20; bitmapFontText.position.y = 20; - runList(bitmapFontText); - stage.addChild(bitmapFontText); } diff --git a/examples/example 11 - RenderTexture/index.html b/examples/example 11 - RenderTexture/index.html index 1bfb10d..88a7396 100644 --- a/examples/example 11 - RenderTexture/index.html +++ b/examples/example 11 - RenderTexture/index.html @@ -8,6 +8,13 @@ padding: 0; background-color: #000000; } + + .rendererView { + position: absolute; + display: block; + width: 100%; + height: 100%; + } @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index caa18ea..5bb21a8 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -43,7 +43,7 @@ var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - // create an array to store a refference to the dude in the pond + // create an array to store a reference to the dudes in the pond var dudeArray = []; var totaldude = 20; diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index c6283ca..f051fd1 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -88,8 +88,8 @@ var tick = 0; requestAnimationFrame(animate); - function animate() - { + function animate() { + // iterate through the dude and update the positiond for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 18 - Batch/index.html b/examples/example 18 - Batch/index.html index 60adc93..ce7c542 100644 --- a/examples/example 18 - Batch/index.html +++ b/examples/example 18 - Batch/index.html @@ -46,9 +46,10 @@ var dudeArray = []; var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; + for (var i = 0; i < totalDudes; i++) { - // create a new Sprite that uses the image name that we just generated as its source + // create a new Sprite var dude = PIXI.Sprite.fromImage("tinyMaggot.png"); dude.tint = Math.random() * 0xE8D4CD; @@ -91,8 +92,8 @@ viewHeight + dudeBoundsPadding * 2); var tick = 0; - function animate() - { + function animate() { + // iterate through the dude and update the position for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 277e3b4..23fae9a 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -35,25 +35,6 @@ s.parentNode.insertBefore(wf, s); })(); - function runList(item) - { - console.log("_"); - var safe = 0; - var tmp = item; - while(tmp._iNext) - { - safe++; - tmp = tmp._iNext; - console.log(tmp); - - if(safe > 100) - { - console.log("BREAK"); - break; - } - } - } - function init() { var assetsToLoader = ["desyrel.xml"]; @@ -76,8 +57,6 @@ bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20; bitmapFontText.position.y = 20; - runList(bitmapFontText); - stage.addChild(bitmapFontText); } diff --git a/examples/example 11 - RenderTexture/index.html b/examples/example 11 - RenderTexture/index.html index 1bfb10d..88a7396 100644 --- a/examples/example 11 - RenderTexture/index.html +++ b/examples/example 11 - RenderTexture/index.html @@ -8,6 +8,13 @@ padding: 0; background-color: #000000; } + + .rendererView { + position: absolute; + display: block; + width: 100%; + height: 100%; + } @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index caa18ea..5bb21a8 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -43,7 +43,7 @@ var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - // create an array to store a refference to the dude in the pond + // create an array to store a reference to the dudes in the pond var dudeArray = []; var totaldude = 20; diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index c6283ca..f051fd1 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -88,8 +88,8 @@ var tick = 0; requestAnimationFrame(animate); - function animate() - { + function animate() { + // iterate through the dude and update the positiond for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 18 - Batch/index.html b/examples/example 18 - Batch/index.html index 60adc93..ce7c542 100644 --- a/examples/example 18 - Batch/index.html +++ b/examples/example 18 - Batch/index.html @@ -46,9 +46,10 @@ var dudeArray = []; var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; + for (var i = 0; i < totalDudes; i++) { - // create a new Sprite that uses the image name that we just generated as its source + // create a new Sprite var dude = PIXI.Sprite.fromImage("tinyMaggot.png"); dude.tint = Math.random() * 0xE8D4CD; @@ -91,8 +92,8 @@ viewHeight + dudeBoundsPadding * 2); var tick = 0; - function animate() - { + function animate() { + // iterate through the dude and update the position for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 19 - CacheAsBitmap/index.html b/examples/example 19 - CacheAsBitmap/index.html index 67ec466..ca82cdc 100644 --- a/examples/example 19 - CacheAsBitmap/index.html +++ b/examples/example 19 - CacheAsBitmap/index.html @@ -13,16 +13,16 @@
@@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index caa18ea..5bb21a8 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -43,7 +43,7 @@ var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - // create an array to store a refference to the dude in the pond + // create an array to store a reference to the dudes in the pond var dudeArray = []; var totaldude = 20; diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index c6283ca..f051fd1 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -88,8 +88,8 @@ var tick = 0; requestAnimationFrame(animate); - function animate() - { + function animate() { + // iterate through the dude and update the positiond for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 18 - Batch/index.html b/examples/example 18 - Batch/index.html index 60adc93..ce7c542 100644 --- a/examples/example 18 - Batch/index.html +++ b/examples/example 18 - Batch/index.html @@ -46,9 +46,10 @@ var dudeArray = []; var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; + for (var i = 0; i < totalDudes; i++) { - // create a new Sprite that uses the image name that we just generated as its source + // create a new Sprite var dude = PIXI.Sprite.fromImage("tinyMaggot.png"); dude.tint = Math.random() * 0xE8D4CD; @@ -91,8 +92,8 @@ viewHeight + dudeBoundsPadding * 2); var tick = 0; - function animate() - { + function animate() { + // iterate through the dude and update the position for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 19 - CacheAsBitmap/index.html b/examples/example 19 - CacheAsBitmap/index.html index 67ec466..ca82cdc 100644 --- a/examples/example 19 - CacheAsBitmap/index.html +++ b/examples/example 19 - CacheAsBitmap/index.html @@ -13,16 +13,16 @@ @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index caa18ea..5bb21a8 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -43,7 +43,7 @@ var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - // create an array to store a refference to the dude in the pond + // create an array to store a reference to the dudes in the pond var dudeArray = []; var totaldude = 20; diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index c6283ca..f051fd1 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -88,8 +88,8 @@ var tick = 0; requestAnimationFrame(animate); - function animate() - { + function animate() { + // iterate through the dude and update the positiond for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 18 - Batch/index.html b/examples/example 18 - Batch/index.html index 60adc93..ce7c542 100644 --- a/examples/example 18 - Batch/index.html +++ b/examples/example 18 - Batch/index.html @@ -46,9 +46,10 @@ var dudeArray = []; var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; + for (var i = 0; i < totalDudes; i++) { - // create a new Sprite that uses the image name that we just generated as its source + // create a new Sprite var dude = PIXI.Sprite.fromImage("tinyMaggot.png"); dude.tint = Math.random() * 0xE8D4CD; @@ -91,8 +92,8 @@ viewHeight + dudeBoundsPadding * 2); var tick = 0; - function animate() - { + function animate() { + // iterate through the dude and update the position for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 19 - CacheAsBitmap/index.html b/examples/example 19 - CacheAsBitmap/index.html index 67ec466..ca82cdc 100644 --- a/examples/example 19 - CacheAsBitmap/index.html +++ b/examples/example 19 - CacheAsBitmap/index.html @@ -13,16 +13,16 @@ - @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index caa18ea..5bb21a8 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -43,7 +43,7 @@ var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - // create an array to store a refference to the dude in the pond + // create an array to store a reference to the dudes in the pond var dudeArray = []; var totaldude = 20; diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index c6283ca..f051fd1 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -88,8 +88,8 @@ var tick = 0; requestAnimationFrame(animate); - function animate() - { + function animate() { + // iterate through the dude and update the positiond for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 18 - Batch/index.html b/examples/example 18 - Batch/index.html index 60adc93..ce7c542 100644 --- a/examples/example 18 - Batch/index.html +++ b/examples/example 18 - Batch/index.html @@ -46,9 +46,10 @@ var dudeArray = []; var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; + for (var i = 0; i < totalDudes; i++) { - // create a new Sprite that uses the image name that we just generated as its source + // create a new Sprite var dude = PIXI.Sprite.fromImage("tinyMaggot.png"); dude.tint = Math.random() * 0xE8D4CD; @@ -91,8 +92,8 @@ viewHeight + dudeBoundsPadding * 2); var tick = 0; - function animate() - { + function animate() { + // iterate through the dude and update the position for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 19 - CacheAsBitmap/index.html b/examples/example 19 - CacheAsBitmap/index.html index 67ec466..ca82cdc 100644 --- a/examples/example 19 - CacheAsBitmap/index.html +++ b/examples/example 19 - CacheAsBitmap/index.html @@ -13,16 +13,16 @@ - @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index caa18ea..5bb21a8 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -43,7 +43,7 @@ var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - // create an array to store a refference to the dude in the pond + // create an array to store a reference to the dudes in the pond var dudeArray = []; var totaldude = 20; diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index c6283ca..f051fd1 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -88,8 +88,8 @@ var tick = 0; requestAnimationFrame(animate); - function animate() - { + function animate() { + // iterate through the dude and update the positiond for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 18 - Batch/index.html b/examples/example 18 - Batch/index.html index 60adc93..ce7c542 100644 --- a/examples/example 18 - Batch/index.html +++ b/examples/example 18 - Batch/index.html @@ -46,9 +46,10 @@ var dudeArray = []; var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; + for (var i = 0; i < totalDudes; i++) { - // create a new Sprite that uses the image name that we just generated as its source + // create a new Sprite var dude = PIXI.Sprite.fromImage("tinyMaggot.png"); dude.tint = Math.random() * 0xE8D4CD; @@ -91,8 +92,8 @@ viewHeight + dudeBoundsPadding * 2); var tick = 0; - function animate() - { + function animate() { + // iterate through the dude and update the position for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 19 - CacheAsBitmap/index.html b/examples/example 19 - CacheAsBitmap/index.html index 67ec466..ca82cdc 100644 --- a/examples/example 19 - CacheAsBitmap/index.html +++ b/examples/example 19 - CacheAsBitmap/index.html @@ -13,16 +13,16 @@ - - @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index caa18ea..5bb21a8 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -43,7 +43,7 @@ var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - // create an array to store a refference to the dude in the pond + // create an array to store a reference to the dudes in the pond var dudeArray = []; var totaldude = 20; diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index c6283ca..f051fd1 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -88,8 +88,8 @@ var tick = 0; requestAnimationFrame(animate); - function animate() - { + function animate() { + // iterate through the dude and update the positiond for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 18 - Batch/index.html b/examples/example 18 - Batch/index.html index 60adc93..ce7c542 100644 --- a/examples/example 18 - Batch/index.html +++ b/examples/example 18 - Batch/index.html @@ -46,9 +46,10 @@ var dudeArray = []; var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; + for (var i = 0; i < totalDudes; i++) { - // create a new Sprite that uses the image name that we just generated as its source + // create a new Sprite var dude = PIXI.Sprite.fromImage("tinyMaggot.png"); dude.tint = Math.random() * 0xE8D4CD; @@ -91,8 +92,8 @@ viewHeight + dudeBoundsPadding * 2); var tick = 0; - function animate() - { + function animate() { + // iterate through the dude and update the position for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 19 - CacheAsBitmap/index.html b/examples/example 19 - CacheAsBitmap/index.html index 67ec466..ca82cdc 100644 --- a/examples/example 19 - CacheAsBitmap/index.html +++ b/examples/example 19 - CacheAsBitmap/index.html @@ -13,16 +13,16 @@ - - @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index caa18ea..5bb21a8 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -43,7 +43,7 @@ var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - // create an array to store a refference to the dude in the pond + // create an array to store a reference to the dudes in the pond var dudeArray = []; var totaldude = 20; diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index c6283ca..f051fd1 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -88,8 +88,8 @@ var tick = 0; requestAnimationFrame(animate); - function animate() - { + function animate() { + // iterate through the dude and update the positiond for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 18 - Batch/index.html b/examples/example 18 - Batch/index.html index 60adc93..ce7c542 100644 --- a/examples/example 18 - Batch/index.html +++ b/examples/example 18 - Batch/index.html @@ -46,9 +46,10 @@ var dudeArray = []; var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; + for (var i = 0; i < totalDudes; i++) { - // create a new Sprite that uses the image name that we just generated as its source + // create a new Sprite var dude = PIXI.Sprite.fromImage("tinyMaggot.png"); dude.tint = Math.random() * 0xE8D4CD; @@ -91,8 +92,8 @@ viewHeight + dudeBoundsPadding * 2); var tick = 0; - function animate() - { + function animate() { + // iterate through the dude and update the position for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 19 - CacheAsBitmap/index.html b/examples/example 19 - CacheAsBitmap/index.html index 67ec466..ca82cdc 100644 --- a/examples/example 19 - CacheAsBitmap/index.html +++ b/examples/example 19 - CacheAsBitmap/index.html @@ -13,16 +13,16 @@ - - @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index caa18ea..5bb21a8 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -43,7 +43,7 @@ var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - // create an array to store a refference to the dude in the pond + // create an array to store a reference to the dudes in the pond var dudeArray = []; var totaldude = 20; diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index c6283ca..f051fd1 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -88,8 +88,8 @@ var tick = 0; requestAnimationFrame(animate); - function animate() - { + function animate() { + // iterate through the dude and update the positiond for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 18 - Batch/index.html b/examples/example 18 - Batch/index.html index 60adc93..ce7c542 100644 --- a/examples/example 18 - Batch/index.html +++ b/examples/example 18 - Batch/index.html @@ -46,9 +46,10 @@ var dudeArray = []; var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; + for (var i = 0; i < totalDudes; i++) { - // create a new Sprite that uses the image name that we just generated as its source + // create a new Sprite var dude = PIXI.Sprite.fromImage("tinyMaggot.png"); dude.tint = Math.random() * 0xE8D4CD; @@ -91,8 +92,8 @@ viewHeight + dudeBoundsPadding * 2); var tick = 0; - function animate() - { + function animate() { + // iterate through the dude and update the position for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 19 - CacheAsBitmap/index.html b/examples/example 19 - CacheAsBitmap/index.html index 67ec466..ca82cdc 100644 --- a/examples/example 19 - CacheAsBitmap/index.html +++ b/examples/example 19 - CacheAsBitmap/index.html @@ -13,16 +13,16 @@ - - - @@ -24,17 +20,15 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - - - // add the renderer view element to the DOM + // add the renderer's view element to the DOM document.body.appendChild(renderer.view); requestAnimFrame(animate); - // create a texture from an image path + // create a video texture from a path var texture = PIXI.VideoTexture.fromUrl("testVideo.mp4"); - // create a new Sprite using the texture + // create a new Sprite using the video texture (yes it's that easy) var moveSprite = new PIXI.Sprite(texture); // center the sprites anchor point @@ -84,14 +78,15 @@ filter.matrix = colorMatrix; filter.syncUniforms(); - // just for fun, let's rotate mr rabbit a little // render the stage renderer.render(stage); } - window.onresize = function() - { - renderer.resize(window.innerWidth, window.innerHeight); + window.addEventListener('resize',onResize,false); + + function onResize(){ + + renderer.resize(window.innerWidth, window.innerHeight); moveSprite.width = window.innerWidth; moveSprite.height = window.innerHeight; @@ -103,10 +98,11 @@ // move the sprite to the center of the screen moveSprite.position.x = window.innerWidth/2; moveSprite.position.y = window.innerHeight/2; - } - window.onresize(); + onResize(); + + diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html index 277e3b4..23fae9a 100644 --- a/examples/example 10 - Text/index.html +++ b/examples/example 10 - Text/index.html @@ -35,25 +35,6 @@ s.parentNode.insertBefore(wf, s); })(); - function runList(item) - { - console.log("_"); - var safe = 0; - var tmp = item; - while(tmp._iNext) - { - safe++; - tmp = tmp._iNext; - console.log(tmp); - - if(safe > 100) - { - console.log("BREAK"); - break; - } - } - } - function init() { var assetsToLoader = ["desyrel.xml"]; @@ -76,8 +57,6 @@ bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20; bitmapFontText.position.y = 20; - runList(bitmapFontText); - stage.addChild(bitmapFontText); } diff --git a/examples/example 11 - RenderTexture/index.html b/examples/example 11 - RenderTexture/index.html index 1bfb10d..88a7396 100644 --- a/examples/example 11 - RenderTexture/index.html +++ b/examples/example 11 - RenderTexture/index.html @@ -8,6 +8,13 @@ padding: 0; background-color: #000000; } + + .rendererView { + position: absolute; + display: block; + width: 100%; + height: 100%; + } @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index caa18ea..5bb21a8 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -43,7 +43,7 @@ var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - // create an array to store a refference to the dude in the pond + // create an array to store a reference to the dudes in the pond var dudeArray = []; var totaldude = 20; diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index c6283ca..f051fd1 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -88,8 +88,8 @@ var tick = 0; requestAnimationFrame(animate); - function animate() - { + function animate() { + // iterate through the dude and update the positiond for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 18 - Batch/index.html b/examples/example 18 - Batch/index.html index 60adc93..ce7c542 100644 --- a/examples/example 18 - Batch/index.html +++ b/examples/example 18 - Batch/index.html @@ -46,9 +46,10 @@ var dudeArray = []; var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; + for (var i = 0; i < totalDudes; i++) { - // create a new Sprite that uses the image name that we just generated as its source + // create a new Sprite var dude = PIXI.Sprite.fromImage("tinyMaggot.png"); dude.tint = Math.random() * 0xE8D4CD; @@ -91,8 +92,8 @@ viewHeight + dudeBoundsPadding * 2); var tick = 0; - function animate() - { + function animate() { + // iterate through the dude and update the position for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 19 - CacheAsBitmap/index.html b/examples/example 19 - CacheAsBitmap/index.html index 67ec466..ca82cdc 100644 --- a/examples/example 19 - CacheAsBitmap/index.html +++ b/examples/example 19 - CacheAsBitmap/index.html @@ -13,16 +13,16 @@ - - - @@ -24,17 +20,15 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - - - // add the renderer view element to the DOM + // add the renderer's view element to the DOM document.body.appendChild(renderer.view); requestAnimFrame(animate); - // create a texture from an image path + // create a video texture from a path var texture = PIXI.VideoTexture.fromUrl("testVideo.mp4"); - // create a new Sprite using the texture + // create a new Sprite using the video texture (yes it's that easy) var moveSprite = new PIXI.Sprite(texture); // center the sprites anchor point @@ -84,14 +78,15 @@ filter.matrix = colorMatrix; filter.syncUniforms(); - // just for fun, let's rotate mr rabbit a little // render the stage renderer.render(stage); } - window.onresize = function() - { - renderer.resize(window.innerWidth, window.innerHeight); + window.addEventListener('resize',onResize,false); + + function onResize(){ + + renderer.resize(window.innerWidth, window.innerHeight); moveSprite.width = window.innerWidth; moveSprite.height = window.innerHeight; @@ -103,10 +98,11 @@ // move the sprite to the center of the screen moveSprite.position.x = window.innerWidth/2; moveSprite.position.y = window.innerHeight/2; - } - window.onresize(); + onResize(); + + diff --git a/examples/example 3 - MovieClip/index.html b/examples/example 3 - MovieClip/index.html index a544174..7c7c79e 100755 --- a/examples/example 3 - MovieClip/index.html +++ b/examples/example 3 - MovieClip/index.html @@ -13,7 +13,7 @@ @@ -20,11 +27,7 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(800, 600); - - // set the canvas width and height to fill the screen - renderer.view.style.width = window.innerWidth + "px"; - renderer.view.style.height = window.innerHeight + "px"; - renderer.view.style.display = "block"; + renderer.view.className = "rendererView"; // add render view to DOM document.body.appendChild(renderer.view); @@ -96,7 +99,7 @@ count += 0.01; - // swap the buffers.. + // swap the buffers ... var temp = renderTexture; renderTexture = renderTexture2; renderTexture2 = temp; @@ -109,7 +112,7 @@ 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 + // the "true" clears the texture before the content is rendered renderTexture2.render(stage, null, true); // and finally render the stage diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index 7c9fc47..514267d 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -36,9 +36,6 @@ // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - // set the canvas width and height to fill the screen - renderer.view.style.display = "block"; - // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 13 - Graphics/index.html b/examples/example 13 - Graphics/index.html index 4615d31..7f7fcd3 100644 --- a/examples/example 13 - Graphics/index.html +++ b/examples/example 13 - Graphics/index.html @@ -22,8 +22,6 @@ stage.interactive = true; var renderer = PIXI.autoDetectRenderer(620, 380); - - renderer.view.style.display = "block"; // add render view to DOM document.body.appendChild(renderer.view); diff --git a/examples/example 14 - Masking/index.html b/examples/example 14 - Masking/index.html index 70261cc..d200bff 100644 --- a/examples/example 14 - Masking/index.html +++ b/examples/example 14 - Masking/index.html @@ -33,6 +33,8 @@ container.position.x = 620 / 2; container.position.y = 380 / 2; + // add a bunch of sprites + var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); bgFront.anchor.x = 0.5; bgFront.anchor.y = 0.5; @@ -60,6 +62,7 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(620, 380); + // center the renderer renderer.view.style.position = "absolute" renderer.view.style.marginLeft = "-310px"; renderer.view.style.marginTop = "-190px"; @@ -120,6 +123,7 @@ requestAnimFrame(animate); function animate() { + bg.rotation += 0.01; bgFront.rotation -= 0.01; diff --git a/examples/example 15 - Filters/index.html b/examples/example 15 - Filters/index.html index f0fe218..db7197e 100644 --- a/examples/example 15 - Filters/index.html +++ b/examples/example 15 - Filters/index.html @@ -17,7 +17,7 @@ var renderer = PIXI.autoDetectRenderer(620, 380); // create an new instance of a pixi stage - var stage = new PIXI.Stage(0xFFFFFF, true); + var stage = new PIXI.Stage(0xFFFFFF); stage.interactive = true; diff --git a/examples/example 16 - BlendModes/index.html b/examples/example 16 - BlendModes/index.html index caa18ea..5bb21a8 100644 --- a/examples/example 16 - BlendModes/index.html +++ b/examples/example 16 - BlendModes/index.html @@ -43,7 +43,7 @@ var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); stage.addChild(pondFloorSprite); - // create an array to store a refference to the dude in the pond + // create an array to store a reference to the dudes in the pond var dudeArray = []; var totaldude = 20; diff --git a/examples/example 17 - Tinting/index.html b/examples/example 17 - Tinting/index.html index c6283ca..f051fd1 100644 --- a/examples/example 17 - Tinting/index.html +++ b/examples/example 17 - Tinting/index.html @@ -88,8 +88,8 @@ var tick = 0; requestAnimationFrame(animate); - function animate() - { + function animate() { + // iterate through the dude and update the positiond for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 18 - Batch/index.html b/examples/example 18 - Batch/index.html index 60adc93..ce7c542 100644 --- a/examples/example 18 - Batch/index.html +++ b/examples/example 18 - Batch/index.html @@ -46,9 +46,10 @@ var dudeArray = []; var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; + for (var i = 0; i < totalDudes; i++) { - // create a new Sprite that uses the image name that we just generated as its source + // create a new Sprite var dude = PIXI.Sprite.fromImage("tinyMaggot.png"); dude.tint = Math.random() * 0xE8D4CD; @@ -91,8 +92,8 @@ viewHeight + dudeBoundsPadding * 2); var tick = 0; - function animate() - { + function animate() { + // iterate through the dude and update the position for (var i = 0; i < dudeArray.length; i++) { diff --git a/examples/example 19 - CacheAsBitmap/index.html b/examples/example 19 - CacheAsBitmap/index.html index 67ec466..ca82cdc 100644 --- a/examples/example 19 - CacheAsBitmap/index.html +++ b/examples/example 19 - CacheAsBitmap/index.html @@ -13,16 +13,16 @@ - - - @@ -24,17 +20,15 @@ // create a renderer instance var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); - - - // add the renderer view element to the DOM + // add the renderer's view element to the DOM document.body.appendChild(renderer.view); requestAnimFrame(animate); - // create a texture from an image path + // create a video texture from a path var texture = PIXI.VideoTexture.fromUrl("testVideo.mp4"); - // create a new Sprite using the texture + // create a new Sprite using the video texture (yes it's that easy) var moveSprite = new PIXI.Sprite(texture); // center the sprites anchor point @@ -84,14 +78,15 @@ filter.matrix = colorMatrix; filter.syncUniforms(); - // just for fun, let's rotate mr rabbit a little // render the stage renderer.render(stage); } - window.onresize = function() - { - renderer.resize(window.innerWidth, window.innerHeight); + window.addEventListener('resize',onResize,false); + + function onResize(){ + + renderer.resize(window.innerWidth, window.innerHeight); moveSprite.width = window.innerWidth; moveSprite.height = window.innerHeight; @@ -103,10 +98,11 @@ // move the sprite to the center of the screen moveSprite.position.x = window.innerWidth/2; moveSprite.position.y = window.innerHeight/2; - } - window.onresize(); + onResize(); + + diff --git a/examples/example 3 - MovieClip/index.html b/examples/example 3 - MovieClip/index.html index a544174..7c7c79e 100755 --- a/examples/example 3 - MovieClip/index.html +++ b/examples/example 3 - MovieClip/index.html @@ -13,7 +13,7 @@ @@ -16,8 +15,9 @@