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

First batch of examples cleaned up

Browse source 
Mostly cosmetic improvements
This commit is contained in:
Anders Nissen 2014-02-12 23:23:44 +01:00
parent cb400573d4
commit fcd2033d40
8 changed files with 30 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,6 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<!--<link href='http://fonts.googleapis.com/css?family=Snippet|Arvo:700italic|Podkova' rel='stylesheet' type='text/css'>-->
<title>pixi.js example 10 Text</title> <title>pixi.js example 10 Text</title>
<style> <style>
body { body {
@ -11,7 +10,6 @@
} }
</style> </style>
<script src="../../bin/pixi.dev.js"></script> <script src="../../bin/pixi.dev.js"></script>
</head> </head>
<body> <body>
@ -27,7 +25,6 @@
// do something // do something
init(); init();
} }
}; };
(function() { (function() {
var wf = document.createElement('script'); var wf = document.createElement('script');
@ -41,14 +38,14 @@
function runList(item) function runList(item)
{ {
console.log("_") console.log("_");
var safe = 0; var safe = 0;
var tmp = item; var tmp = item;
while(tmp._iNext) while(tmp._iNext)
{ {
safe++; safe++;
tmp = tmp._iNext; tmp = tmp._iNext;
console.log(tmp);//.childIndex); console.log(tmp);
if(safe > 100) if(safe > 100)
{ {
@ -68,15 +65,12 @@
// use callback // use callback
loader.onComplete = onAssetsLoaded; loader.onComplete = onAssetsLoaded;
// create an new instance of a pixi stage // create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99); var stage = new PIXI.Stage(0x66FF99);
// begin load // begin load
loader.load(); loader.load();
function onAssetsLoaded() function onAssetsLoaded()
{ {
var bitmapFontText = new PIXI.BitmapText("bitmap fonts are\n now supported!", {font: "35px Desyrel", align: "right"}); var bitmapFontText = new PIXI.BitmapText("bitmap fonts are\n now supported!", {font: "35px Desyrel", align: "right"});
@ -86,12 +80,8 @@
runList(bitmapFontText); runList(bitmapFontText);
stage.addChild(bitmapFontText); stage.addChild(bitmapFontText);
} }
// add a shiny background... // add a shiny background...
var background = PIXI.Sprite.fromImage("textDemoBG.jpg"); var background = PIXI.Sprite.fromImage("textDemoBG.jpg");
stage.addChild(background); stage.addChild(background);
@ -132,27 +122,8 @@
stage.removeAll(); stage.removeAll();
function animate() { function animate() {
// requestAnimFrame(animate);
// count++;
// if(count == 50)
// {
// count = 0;
// score++;
// // update the text...
// countingText.setText("COUNT 4EVAR: " + score);
// }
// // just for fun, let's rotate the text
// spinningText.rotation += 0.03;
// // render the stage
// renderer.render(stage);
} }
} }

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

@ -10,7 +10,6 @@
} }
</style> </style>
<script src="../../bin/pixi.dev.js"></script> <script src="../../bin/pixi.dev.js"></script>
</head> </head>
<body> <body>
@ -40,8 +39,8 @@
var outputSprite = new PIXI.Sprite(currentTexture); var outputSprite = new PIXI.Sprite(currentTexture);
// align the sprite // align the sprite
outputSprite.position.x = 800/2; outputSprite.position.x = 800 / 2;
outputSprite.position.y = 600/2; outputSprite.position.y = 600 / 2;
outputSprite.anchor.x = 0.5; outputSprite.anchor.x = 0.5;
outputSprite.anchor.y = 0.5; outputSprite.anchor.y = 0.5;
@ -50,8 +49,8 @@
var stuffContainer = new PIXI.DisplayObjectContainer(); var stuffContainer = new PIXI.DisplayObjectContainer();
stuffContainer.position.x = 800/2; stuffContainer.position.x = 800 / 2;
stuffContainer.position.y = 600/2 stuffContainer.position.y = 600 / 2
stage.addChild(stuffContainer); stage.addChild(stuffContainer);
@ -82,14 +81,13 @@
// used for spinning! // used for spinning!
var count = 0; var count = 0;
requestAnimFrame(animate); requestAnimFrame(animate);
function animate() { function animate() {
requestAnimFrame( animate ); requestAnimFrame( animate );
for (var i=0; i < items.length; i++) for (var i = 0; i < items.length; i++)
{ {
// rotate each item // rotate each item
var item = items[i]; var item = items[i];
@ -103,7 +101,6 @@
renderTexture = renderTexture2; renderTexture = renderTexture2;
renderTexture2 = temp; renderTexture2 = temp;
// set the new texture // set the new texture
outputSprite.setTexture(renderTexture); outputSprite.setTexture(renderTexture);

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

@ -16,14 +16,11 @@
<body> <body>
<script> <script>
// create an new instance of a pixi stage // create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true); var stage = new PIXI.Stage(0xFFFFFF, true);
stage.setInteractive(true); stage.setInteractive(true);
var sprite = PIXI.Sprite.fromImage("spinObj_02.png");
var renderer = PIXI.autoDetectRenderer(620, 380); var renderer = PIXI.autoDetectRenderer(620, 380);
renderer.view.style.display = "block"; renderer.view.style.display = "block";
@ -33,7 +30,6 @@
var graphics = new PIXI.Graphics(); var graphics = new PIXI.Graphics();
// set a fill and line style // set a fill and line style
graphics.beginFill(0xFF3300); graphics.beginFill(0xFF3300);
graphics.lineStyle(10, 0xffd900, 1); graphics.lineStyle(10, 0xffd900, 1);
@ -74,7 +70,6 @@
graphics.moveTo(30,30); graphics.moveTo(30,30);
graphics.lineTo(600, 300); graphics.lineTo(600, 300);
stage.addChild(graphics); stage.addChild(graphics);
// let's create moving shape // let's create moving shape

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

@ -24,14 +24,14 @@
bg.anchor.x = 0.5; bg.anchor.x = 0.5;
bg.anchor.y = 0.5; bg.anchor.y = 0.5;
bg.position.x = 620/2; bg.position.x = 620 / 2;
bg.position.y = 380/2; bg.position.y = 380 / 2;
stage.addChild(bg); stage.addChild(bg);
var container = new PIXI.DisplayObjectContainer(); var container = new PIXI.DisplayObjectContainer();
container.position.x = 620/2; container.position.x = 620 / 2;
container.position.y = 380/2; container.position.y = 380 / 2;
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
bgFront.anchor.x = 0.5; bgFront.anchor.x = 0.5;
@ -73,8 +73,8 @@
// lets create moving shape // lets create moving shape
var thing = new PIXI.Graphics(); var thing = new PIXI.Graphics();
stage.addChild(thing); stage.addChild(thing);
thing.position.x = 620/2; thing.position.x = 620 / 2;
thing.position.y = 380/2; thing.position.y = 380 / 2;
thing.lineStyle(0); thing.lineStyle(0);
container.mask = thing; container.mask = thing;
@ -109,7 +109,7 @@
logo.click = logo.tap = function() logo.click = logo.tap = function()
{ {
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank") window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank");
} }
var help = new PIXI.Text("Click to turn masking on / off.", {font:"bold 12pt Arial", fill:"white"}); var help = new PIXI.Text("Click to turn masking on / off.", {font:"bold 12pt Arial", fill:"white"});
@ -120,7 +120,6 @@
requestAnimFrame(animate); requestAnimFrame(animate);
function animate() { function animate() {
bg.rotation += 0.01; bg.rotation += 0.01;
bgFront.rotation -= 0.01; bgFront.rotation -= 0.01;
@ -144,7 +143,7 @@
renderer.render(stage); renderer.render(stage);
requestAnimFrame( animate ); requestAnimFrame(animate);
} }
</script> </script>

15
examples/example 15 - Filters/index.html
View file

@ -34,7 +34,6 @@
0,0,1,0, 0,0,1,0,
0,0,0,1]; 0,0,0,1];
var filter = new PIXI.ColorMatrixFilter(); var filter = new PIXI.ColorMatrixFilter();
var container = new PIXI.DisplayObjectContainer(); var container = new PIXI.DisplayObjectContainer();
@ -61,13 +60,11 @@
panda.anchor.x = 0.5; panda.anchor.x = 0.5;
panda.anchor.y = 0.5; panda.anchor.y = 0.5;
container.addChild(panda); container.addChild(panda);
stage.addChild(container); stage.addChild(container);
// create a renderer instance // create a renderer instance
renderer.view.style.position = "absolute" renderer.view.style.position = "absolute"
renderer.view.style.width = window.innerWidth + "px"; renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px"; renderer.view.style.height = window.innerHeight + "px";
@ -76,7 +73,6 @@
// add render view to DOM // add render view to DOM
document.body.appendChild(renderer.view); document.body.appendChild(renderer.view);
stage.filters = [filter]; stage.filters = [filter];
var count = 0; var count = 0;
@ -94,7 +90,6 @@
{ {
stage.filters = null; stage.filters = null;
} }
} }
/* /*
@ -119,11 +114,9 @@
help.position.x = 10; help.position.x = 10;
stage.addChild(help); stage.addChild(help);
requestAnimFrame(animate); requestAnimFrame(animate);
function animate() { function animate() {
bg.rotation += 0.01; bg.rotation += 0.01;
bgFront.rotation -= 0.01; bgFront.rotation -= 0.01;
@ -138,13 +131,11 @@
colorMatrix[1] = Math.sin(count) * 3; colorMatrix[1] = Math.sin(count) * 3;
colorMatrix[2] = Math.cos(count); colorMatrix[2] = Math.cos(count);
colorMatrix[3] = Math.cos(count) * 1.5; colorMatrix[3] = Math.cos(count) * 1.5;
colorMatrix[4] = Math.sin(count/3) * 2; colorMatrix[4] = Math.sin(count / 3) * 2;
colorMatrix[5] = Math.sin(count/2); colorMatrix[5] = Math.sin(count / 2);
colorMatrix[6] = Math.sin(count/4); colorMatrix[6] = Math.sin(count / 4);
filter.matrix = colorMatrix; filter.matrix = colorMatrix;
renderer.render(stage); renderer.render(stage);
requestAnimFrame( animate ); requestAnimFrame( animate );
} }

15
examples/example 16 - BlendModes/index.html
View file

@ -46,8 +46,6 @@
var pondFloorSprite = new PIXI.Sprite(pondFloorTexture); var pondFloorSprite = new PIXI.Sprite(pondFloorTexture);
stage.addChild(pondFloorSprite); stage.addChild(pondFloorSprite);
// create an array to store a refference to the dude in the pond // create an array to store a refference to the dude in the pond
var dudeArray = []; var dudeArray = [];
@ -55,7 +53,6 @@
for (var i = 0; i < totaldude; i++) for (var i = 0; i < totaldude; i++)
{ {
// create a new Sprite that uses the image name that we just generated as its source // create a new Sprite that uses the image name that we just generated as its source
var dude = PIXI.Sprite.fromImage("flowerTop.png"); 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 // finally we push the dude into the dudeArray so it it can be easily accessed later
dudeArray.push(dude); dudeArray.push(dude);
} }
// create a bounding box box for the little dudes // create a bounding box box for the little dudes
@ -97,7 +93,6 @@
viewWidth + dudeBoundsPadding * 2, viewWidth + dudeBoundsPadding * 2,
viewHeight + dudeBoundsPadding * 2); viewHeight + dudeBoundsPadding * 2);
var tick = 0; var tick = 0;
requestAnimationFrame(animate); requestAnimationFrame(animate);
@ -114,18 +109,16 @@
dude.rotation = -dude.direction - Math.PI/2; dude.rotation = -dude.direction - Math.PI/2;
// wrap the dudes by testing there bounds.. // wrap the dudes by testing there bounds..
if(dude.position.x < dudeBounds.x)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 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; 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 else if (dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height;
} }
// increment the ticker // increment the ticker
tick += 0.1; tick += 0.1;
// time to render the stage ! // time to render the stage !
renderer.render(stage); renderer.render(stage);

16
examples/example 17 - Tinting/index.html
View file

@ -48,7 +48,6 @@
for (var i = 0; i < totalDudes; i++) 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 that uses the image name that we just generated as its source
var dude = PIXI.Sprite.fromImage("eggHead.png"); 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 // finally we push the dude into the dudeArray so it it can be easily accessed later
dudeArray.push(dude); dudeArray.push(dude);
} }
// create a bounding box box for the little dudes // create a bounding box box for the little dudes
@ -103,26 +101,24 @@
dude.direction += dude.turningSpeed * 0.01; dude.direction += dude.turningSpeed * 0.01;
dude.position.x += Math.sin(dude.direction) * dude.speed; dude.position.x += Math.sin(dude.direction) * dude.speed;
dude.position.y += Math.cos(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.. // wrap the dudes by testing their bounds..
if(dude.position.x < dudeBounds.x)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 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; 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 else if (dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height;
} }
// increment the ticker // increment the ticker
tick += 0.1; tick += 0.1;
// time to render the state! // time to render the state!
renderer.render(stage); renderer.render(stage);
// request another animation frame.. // request another animation frame..
requestAnimationFrame( animate ); requestAnimationFrame(animate);
} }
</script> </script>

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

@ -67,7 +67,6 @@
* var texture = PIXI.Texture.fromFrame(frameName); * var texture = PIXI.Texture.fromFrame(frameName);
* var alien = new PIXI.Sprite(texture); * var alien = new PIXI.Sprite(texture);
*/ */
alien.position.x = Math.random() * 800 - 400; alien.position.x = Math.random() * 800 - 400;
alien.position.y = Math.random() * 600 - 300; alien.position.y = Math.random() * 600 - 300;
alien.anchor.x = 0.5; alien.anchor.x = 0.5;
@ -78,12 +77,9 @@
// start animating // start animating
requestAnimFrame(animate); requestAnimFrame(animate);
} }
function animate() { function animate() {
requestAnimFrame(animate); requestAnimFrame(animate);
// just for fun, lets rotate mr rabbit a little // just for fun, lets rotate mr rabbit a little