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

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

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

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

@ -14,7 +14,6 @@
</head>
<body>
<script>
var renderer = PIXI.autoDetectRenderer(620, 380);
// create an new instance of a pixi stage
@ -26,8 +25,8 @@
bg.anchor.x = 0.5;
bg.anchor.y = 0.5;
bg.position.x = 620/2;
bg.position.y = 380/2;
bg.position.x = 620 / 2;
bg.position.y = 380 / 2;
var colorMatrix = [1,0,0,0,
0,1,0,0,
@ -37,8 +36,8 @@
var filter = new PIXI.ColorMatrixFilter();
var container = new PIXI.DisplayObjectContainer();
container.position.x = 620/2;
container.position.y = 380/2;
container.position.x = 620 / 2;
container.position.y = 380 / 2;
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
bgFront.anchor.x = 0.5;
@ -92,9 +91,7 @@
}
}
/*
* Add a pixi Logo!
*/
// Add a pixi Logo!
var logo = PIXI.Sprite.fromImage("../../logo_small.png");
logo.anchor.x = 1;
@ -109,7 +106,7 @@
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank");
}
var help = new PIXI.Text("Click to turn filters on / off.", {font:"bold 12pt Arial", fill:"white"});
var help = new PIXI.Text("Click to turn filters on / off.", { font: "bold 12pt Arial", fill: "white" });
help.position.y = 350;
help.position.x = 10;
stage.addChild(help);
@ -137,9 +134,8 @@
filter.matrix = colorMatrix;
renderer.render(stage);
requestAnimFrame( animate );
requestAnimFrame(animate);
}
</script>
</body>

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

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

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

@ -2,7 +2,7 @@
<html>
<head>
<title>Pixi.js Blendmodes</title>
<title>Pixi.js Blend Modes</title>
<style>
body {
margin: 0;
@ -25,7 +25,6 @@
<body>
<script>
var viewWidth = 630;
var viewHeight = 410;
@ -50,7 +49,6 @@
var dudeArray = [];
var totaldude = 20;
for (var i = 0; i < totaldude; i++)
{
// 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!
stage.addChild(dude);
// create some extra properties that will control movement
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
dude.direction = Math.random() * Math.PI * 2;
@ -109,11 +107,15 @@
dude.rotation = -dude.direction - Math.PI/2;
// wrap the dudes by testing there bounds..
if (dude.position.x < dudeBounds.x)dude.position.x += dudeBounds.width;
else if (dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.x -= dudeBounds.width;
if (dude.position.x < dudeBounds.x)
dude.position.x += dudeBounds.width;
else if (dude.position.x > dudeBounds.x + dudeBounds.width)
dude.position.x -= dudeBounds.width;
if (dude.position.y < dudeBounds.y)dude.position.y += dudeBounds.height;
else if (dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height;
if (dude.position.y < dudeBounds.y)
dude.position.y += dudeBounds.height;
else if (dude.position.y > dudeBounds.y + dudeBounds.height)
dude.position.y -= dudeBounds.height;
}
// increment the ticker
@ -125,7 +127,6 @@
// request another animation frame...
requestAnimationFrame(animate);
}
</script>
</body>

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

@ -24,7 +24,6 @@
<body>
<script>
var viewWidth = 630;
var viewHeight = 410;
@ -43,9 +42,8 @@
// create an array to store a reference to the fish in the pond
var dudeArray = [];
var totalDudes = 20;
for (var i = 0; i < totalDudes; i++)
{
// 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;
// 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
dude.direction = Math.random() * Math.PI * 2;
@ -88,7 +85,6 @@
viewWidth + dudeBoundsPadding * 2,
viewHeight + dudeBoundsPadding * 2);
var tick = 0;
requestAnimationFrame(animate);
@ -104,11 +100,15 @@
dude.rotation = -dude.direction - Math.PI / 2;
// wrap the dudes by testing their bounds..
if (dude.position.x < dudeBounds.x)dude.position.x += dudeBounds.width;
else if (dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.x -= dudeBounds.width;
if (dude.position.x < dudeBounds.x)
dude.position.x += dudeBounds.width;
else if (dude.position.x > dudeBounds.x + dudeBounds.width)
dude.position.x -= dudeBounds.width;
if (dude.position.y < dudeBounds.y)dude.position.y += dudeBounds.height;
else if (dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height;
if (dude.position.y < dudeBounds.y)
dude.position.y += dudeBounds.height;
else if (dude.position.y > dudeBounds.y + dudeBounds.height)
dude.position.y -= dudeBounds.height;
}
// increment the ticker
@ -120,7 +120,6 @@
// request another animation frame..
requestAnimationFrame(animate);
}
</script>
</body>

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

@ -18,15 +18,12 @@
}
</style>
<script src="pixi.js"></script>
<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
<script>
var viewWidth = 800;
var viewHeight = 600;
@ -41,28 +38,20 @@
var stage = new PIXI.Stage(0xFFFFFF);
var particles = new PIXI.SpriteBatch(PIXI.Texture.fromImage("eggHead.png"));
stage.addChild(particles);
var tints = [0XFFFFFF, 0XFFFBEE, 0XFFEEEE, 0XFADEED, 0XE8D4CD];
// create an array to store a refference to the fish in the pond
var dudeArray = [];
var totalDudes = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100//.view.className = "rendererView";
var tints = [0xFFFFFF,
0xfffbee,
0xffeeee,
0xfadeed,
0xe8d4cd];
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
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
dude.anchor.x = dude.anchor.y = 0.5;
@ -75,11 +64,8 @@
dude.y = Math.random() * viewHeight;
// create some extra properties that will control movement
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
dude.direction = Math.random() * Math.PI * 2;
@ -90,6 +76,7 @@
dude.speed = (2 + Math.random() * 2) * 0.2;
dude.offset = Math.random() * 100;
// finally we push the dude into the dudeArray so it it can be easily accessed later
dudeArray.push(dude);
@ -103,43 +90,42 @@
viewWidth + dudeBoundsPadding * 2,
viewHeight + dudeBoundsPadding * 2);
var tick = 0;
requestAnimationFrame(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++)
{
var dude = dudeArray[i];
dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.05
dude.direction += dude.turningSpeed * 0.01;
dude.position.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y);
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;
// wrap the dudes by testing their bounds..
if(dude.position.x < dudeBounds.x)dude.position.x += dudeBounds.width;
else if(dude.position.x > dudeBounds.x + dudeBounds.width)dude.position.x -= dudeBounds.width
if (dude.position.x < dudeBounds.x)
dude.position.x += dudeBounds.width;
else if (dude.position.x > dudeBounds.x + dudeBounds.width)
dude.position.x -= dudeBounds.width;
if(dude.position.y < dudeBounds.y)dude.position.y += dudeBounds.height;
else if(dude.position.y > dudeBounds.y + dudeBounds.height)dude.position.y -= dudeBounds.height
if (dude.position.y < dudeBounds.y)
dude.position.y += dudeBounds.height;
else if (dude.position.y > dudeBounds.y + dudeBounds.height)
dude.position.y -= dudeBounds.height;
}
// increment the ticker
tick += 0.1;
// time to render the stage !
renderer.render(stage);
// request another animation frame..
requestAnimationFrame( animate );
requestAnimationFrame(animate);
}
</script>
</body>

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

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

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

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

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

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