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

More clean-up

Browse source
This commit is contained in:
Anders Nissen 2014-02-13 16:47:28 +01:00
parent fcd2033d40
commit 564f883640
9 changed files with 60 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,7 +14,6 @@
</head> </head>
<body> <body>
<script> <script>
// create an new instance of a pixi stage // create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99); var stage = new PIXI.Stage(0x66FF99);
@ -43,7 +42,6 @@
stage.addChild(bunny); stage.addChild(bunny);
function animate() { function animate() {
requestAnimFrame(animate); requestAnimFrame(animate);
// just for fun, let's rotate mr rabbit a little // just for fun, let's rotate mr rabbit a little
@ -52,7 +50,6 @@
// render the stage // render the stage
renderer.render(stage); renderer.render(stage);
} }
</script> </script>
</body> </body>

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

@ -14,7 +14,6 @@
</head> </head>
<body> <body>
<script> <script>
var renderer = PIXI.autoDetectRenderer(620, 380); var renderer = PIXI.autoDetectRenderer(620, 380);
// create an new instance of a pixi stage // create an new instance of a pixi stage
@ -92,9 +91,7 @@
} }
} }
/* // Add a pixi Logo!
* Add a pixi Logo!
*/
var logo = PIXI.Sprite.fromImage("../../logo_small.png"); var logo = PIXI.Sprite.fromImage("../../logo_small.png");
logo.anchor.x = 1; logo.anchor.x = 1;
@ -139,7 +136,6 @@
renderer.render(stage); renderer.render(stage);
requestAnimFrame(animate); requestAnimFrame(animate);
} }
</script> </script>
</body> </body>

7
examples/example 15 - Filters/indexAll.html
View file

@ -13,7 +13,6 @@
<script src="../../bin/pixi.dev.js"></script> <script src="../../bin/pixi.dev.js"></script>
<script src="dat.gui.min.js"></script> <script src="dat.gui.min.js"></script>
<!-- <script src="pixi.js"></script> -->
</head> </head>
<body> <body>
<script> <script>
@ -29,11 +28,7 @@
// add render view to DOM // add render view to DOM
document.body.appendChild(renderer.view); document.body.appendChild(renderer.view);
var gui = new dat.GUI({ var gui = new dat.GUI({});
//height : 5 * 32 - 1,
//width : 350
});
//// ////

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

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title>Pixi.js Blendmodes</title> <title>Pixi.js Blend Modes</title>
<style> <style>
body { body {
margin: 0; margin: 0;
@ -25,7 +25,6 @@
<body> <body>
<script> <script>
var viewWidth = 630; var viewWidth = 630;
var viewHeight = 410; var viewHeight = 410;
@ -50,7 +49,6 @@
var dudeArray = []; var dudeArray = [];
var totaldude = 20; var totaldude = 20;
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
@ -69,9 +67,9 @@
// time to add the dude to the pond container! // time to add the dude to the pond container!
stage.addChild(dude); stage.addChild(dude);
// create some extra properties that will control movement
dude.blendMode = PIXI.blendModes.ADD dude.blendMode = PIXI.blendModes.ADD
// create some extra properties that will control movement
// create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees // create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees
dude.direction = Math.random() * Math.PI * 2; dude.direction = Math.random() * Math.PI * 2;
@ -109,11 +107,15 @@
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)
else if (dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.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)
else if (dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.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
@ -125,7 +127,6 @@
// request another animation frame... // request another animation frame...
requestAnimationFrame(animate); requestAnimationFrame(animate);
} }
</script> </script>
</body> </body>

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

@ -24,7 +24,6 @@
<body> <body>
<script> <script>
var viewWidth = 630; var viewWidth = 630;
var viewHeight = 410; var viewHeight = 410;
@ -45,7 +44,6 @@
var dudeArray = []; var dudeArray = [];
var totalDudes = 20; var totalDudes = 20;
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
@ -67,7 +65,6 @@
dude.tint = Math.random() * 0xFFFFFF; dude.tint = Math.random() * 0xFFFFFF;
// create some extra properties that will control movement // create some extra properties that will control movement
// create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees // create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees
dude.direction = Math.random() * Math.PI * 2; dude.direction = Math.random() * Math.PI * 2;
@ -88,7 +85,6 @@
viewWidth + dudeBoundsPadding * 2, viewWidth + dudeBoundsPadding * 2,
viewHeight + dudeBoundsPadding * 2); viewHeight + dudeBoundsPadding * 2);
var tick = 0; var tick = 0;
requestAnimationFrame(animate); requestAnimationFrame(animate);
@ -104,11 +100,15 @@
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)
else if (dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.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)
else if (dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.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
@ -120,7 +120,6 @@
// request another animation frame.. // request another animation frame..
requestAnimationFrame(animate); requestAnimationFrame(animate);
} }
</script> </script>
</body> </body>

40
examples/example 18 - Batch/index.html
View file

@ -18,15 +18,12 @@
} }
</style> </style>
<script src="pixi.js"></script>
<script src="../../bin/pixi.dev.js"></script> <script src="../../bin/pixi.dev.js"></script>
</head> </head>
<body> <body>
<script> <script>
var viewWidth = 800; var viewWidth = 800;
var viewHeight = 600; var viewHeight = 600;
@ -41,28 +38,20 @@
var stage = new PIXI.Stage(0xFFFFFF); var stage = new PIXI.Stage(0xFFFFFF);
var particles = new PIXI.SpriteBatch(PIXI.Texture.fromImage("eggHead.png")); var particles = new PIXI.SpriteBatch(PIXI.Texture.fromImage("eggHead.png"));
stage.addChild(particles); stage.addChild(particles);
var tints = [0XFFFFFF, 0XFFFBEE, 0XFFEEEE, 0XFADEED, 0XE8D4CD];
// create an array to store a refference to the fish in the pond // create an array to store a refference to the fish in the pond
var dudeArray = []; var dudeArray = [];
var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100//.view.className = "rendererView"; var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100;
var tints = [0xFFFFFF,
0xfffbee,
0xffeeee,
0xfadeed,
0xe8d4cd];
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("tinyMaggot.png"); var dude = PIXI.Sprite.fromImage("tinyMaggot.png");
dude.tint = Math.random() * 0xe8d4cd; dude.tint = Math.random() * 0XE8D4CD;
// set the anchor point so the the dude texture is centerd on the sprite // set the anchor point so the the dude texture is centerd on the sprite
dude.anchor.x = dude.anchor.y = 0.5; dude.anchor.x = dude.anchor.y = 0.5;
@ -75,11 +64,8 @@
dude.y = Math.random() * viewHeight; dude.y = Math.random() * viewHeight;
// create some extra properties that will control movement // create some extra properties that will control movement
dude.tint = Math.random() * 0x808080; dude.tint = Math.random() * 0x808080;
//dude.tint = i > 3000 ? 0x977d76 : tints[i % tints.length];//Math.random() * 0xFFFFFF;
// create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees // create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees
dude.direction = Math.random() * Math.PI * 2; dude.direction = Math.random() * Math.PI * 2;
@ -90,6 +76,7 @@
dude.speed = (2 + Math.random() * 2) * 0.2; dude.speed = (2 + Math.random() * 2) * 0.2;
dude.offset = Math.random() * 100; dude.offset = Math.random() * 100;
// 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);
@ -103,13 +90,12 @@
viewWidth + dudeBoundsPadding * 2, viewWidth + dudeBoundsPadding * 2,
viewHeight + dudeBoundsPadding * 2); viewHeight + dudeBoundsPadding * 2);
var tick = 0; var tick = 0;
requestAnimationFrame(animate); requestAnimationFrame(animate);
function animate() function animate()
{ {
// iterate through the dude and update the positiond // iterate through the dude and update the position
for (var i = 0; i < dudeArray.length; i++) for (var i = 0; i < dudeArray.length; i++)
{ {
var dude = dudeArray[i]; var dude = dudeArray[i];
@ -119,27 +105,27 @@
dude.position.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y); dude.position.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y);
dude.rotation = -dude.direction + Math.PI; dude.rotation = -dude.direction + Math.PI;
// 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)
else if(dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.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)
else if(dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.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);
// request another animation frame.. // request another animation frame..
requestAnimationFrame(animate); requestAnimationFrame(animate);
} }
</script> </script>
</body> </body>

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

@ -13,7 +13,6 @@
</head> </head>
<body> <body>
<script> <script>
// create an array of assets to load // create an array of assets to load
var assetsToLoader = [ "SpriteSheet.json"]; var assetsToLoader = [ "SpriteSheet.json"];
@ -36,8 +35,7 @@
var stage = new PIXI.Stage(0xFFFFFF); var stage = new PIXI.Stage(0xFFFFFF);
// create a renderer instance. // create a renderer instance.
renderer = PIXI.autoDetectRenderer(800, 600); var renderer = PIXI.autoDetectRenderer(800, 600);
//renderer = new PIXI.CanvasRenderer(800, 600);
// add the renderer view element to the DOM // add the renderer view element to the DOM
document.body.appendChild(renderer.view); document.body.appendChild(renderer.view);
@ -51,15 +49,14 @@
function onAssetsLoaded() function onAssetsLoaded()
{ {
// create a texture from an image path // add a bunch of aliens with textures from image paths
// add a bunch of aliens
for (var i = 0; i < 100; i++) for (var i = 0; i < 100; i++)
{ {
var frameName = alienFrames[i % 4]; var frameName = alienFrames[i % 4];
// create an alien using the frame name.. // create an alien using the frame name..
var alien = PIXI.Sprite.fromFrame(frameName); var alien = PIXI.Sprite.fromFrame(frameName);
alien.tint = Math.random() * 0xFFFFFF//0xFF0000; alien.tint = Math.random() * 0xFFFFFF;
/* /*
* fun fact for the day :) * fun fact for the day :)
@ -80,8 +77,6 @@
} }
function animate() { function animate() {
requestAnimFrame(animate);
// just for fun, lets rotate mr rabbit a little // just for fun, lets rotate mr rabbit a little
for (var i = 0; i < 100; i++) for (var i = 0; i < 100; i++)
{ {
@ -90,12 +85,15 @@
} }
count += 0.01; count += 0.01;
alienContainer.scale.x = Math.sin(count) alienContainer.scale.x = Math.sin(count);
alienContainer.scale.y = Math.sin(count) alienContainer.scale.y = Math.sin(count);
alienContainer.rotation += 0.01;
alienContainer.rotation += 0.01
// render the stage // render the stage
renderer.render(stage); renderer.render(stage);
requestAnimFrame(animate);
} }
</script> </script>

17
examples/example 2 - SpriteSheet/indexTrim.html
View file

@ -13,7 +13,6 @@
</head> </head>
<body> <body>
<script> <script>
// create an array of assets to load // create an array of assets to load
var assetsToLoader = [ "fighter.json"]; var assetsToLoader = [ "fighter.json"];
@ -29,7 +28,6 @@
// holder to store aliens // holder to store aliens
var aliens = []; var aliens = [];
var count = 0; var count = 0;
// create an new instance of a pixi stage // create an new instance of a pixi stage
@ -37,7 +35,6 @@
// create a renderer instance. // create a renderer instance.
renderer = PIXI.autoDetectRenderer(800, 600); renderer = PIXI.autoDetectRenderer(800, 600);
//renderer = new PIXI.CanvasRenderer(800, 600);
// add the renderer view element to the DOM // add the renderer view element to the DOM
document.body.appendChild(renderer.view); document.body.appendChild(renderer.view);
@ -53,15 +50,11 @@
{ {
// create a texture from an image path // create a texture from an image path
// add a bunch of aliens // add a bunch of aliens
var frames = []; var frames = [];
for (var i = 0; i < 30; i++) { for (var i = 0; i < 30; i++) {
var val = i < 10 ? "0" + i : i; var val = i < 10 ? "0" + i : i;
frames.push(PIXI.Texture.fromFrame("rollSequence00" + val + ".png")); frames.push(PIXI.Texture.fromFrame("rollSequence00" + val + ".png"));
}; };
movie = new PIXI.MovieClip(frames); movie = new PIXI.MovieClip(frames);
@ -69,25 +62,23 @@
movie.position.x = 300; movie.position.x = 300;
movie.position.y = 300; movie.position.y = 300;
movie.anchor.x = movie.anchor.y = 0.5//1; movie.anchor.x = movie.anchor.y = 0.5;
movie.play(); movie.play();
movie.animationSpeed = 0.5; movie.animationSpeed = 0.5;
stage.addChild(movie); stage.addChild(movie);
// start animating // start animating
requestAnimFrame(animate); requestAnimFrame(animate);
} }
function animate() { function animate() {
requestAnimFrame( animate );
movie.rotation += 0.01; movie.rotation += 0.01;
// render the stage // render the stage
renderer.render(stage); renderer.render(stage);
}
requestAnimFrame(animate);
}
</script> </script>
</body> </body>

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

@ -13,7 +13,6 @@
</head> </head>
<body> <body>
<script> <script>
// create an array of assets to load // create an array of assets to load
var assetsToLoader = [ "SpriteSheet.json"]; var assetsToLoader = [ "SpriteSheet.json"];
@ -26,14 +25,13 @@
//begin load //begin load
loader.load(); loader.load();
// holder to store aliens // holder to store aliens
var explosions = []; var explosions = [];
var count = 0; var count = 0;
// create an new instance of a pixi stage // create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF);; var stage = new PIXI.Stage(0xFFFFFF);
// create a renderer instance. // create a renderer instance.
renderer = PIXI.autoDetectRenderer(800, 600); renderer = PIXI.autoDetectRenderer(800, 600);