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>
<html>
<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>
<style>
body {
@ -11,7 +10,6 @@
}
</style>
<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
@ -27,7 +25,6 @@
// do something
init();
}
};
(function() {
var wf = document.createElement('script');
@ -41,14 +38,14 @@
function runList(item)
{
console.log("_")
console.log("_");
var safe = 0;
var tmp = item;
while(tmp._iNext)
{
safe++;
tmp = tmp._iNext;
console.log(tmp);//.childIndex);
console.log(tmp);
if(safe > 100)
{
@ -68,15 +65,12 @@
// use callback
loader.onComplete = onAssetsLoaded;
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
// begin load
loader.load();
function onAssetsLoaded()
{
var bitmapFontText = new PIXI.BitmapText("bitmap fonts are\n now supported!", {font: "35px Desyrel", align: "right"});
@ -86,12 +80,8 @@
runList(bitmapFontText);
stage.addChild(bitmapFontText);
}
// add a shiny background...
var background = PIXI.Sprite.fromImage("textDemoBG.jpg");
stage.addChild(background);
@ -132,27 +122,8 @@
stage.removeAll();
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>
<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
@ -40,8 +39,8 @@
var outputSprite = new PIXI.Sprite(currentTexture);
// align the sprite
outputSprite.position.x = 800/2;
outputSprite.position.y = 600/2;
outputSprite.position.x = 800 / 2;
outputSprite.position.y = 600 / 2;
outputSprite.anchor.x = 0.5;
outputSprite.anchor.y = 0.5;
@ -50,8 +49,8 @@
var stuffContainer = new PIXI.DisplayObjectContainer();
stuffContainer.position.x = 800/2;
stuffContainer.position.y = 600/2
stuffContainer.position.x = 800 / 2;
stuffContainer.position.y = 600 / 2
stage.addChild(stuffContainer);
@ -82,14 +81,13 @@
// used for spinning!
var count = 0;
requestAnimFrame(animate);
function animate() {
requestAnimFrame( animate );
for (var i=0; i < items.length; i++)
for (var i = 0; i < items.length; i++)
{
// rotate each item
var item = items[i];
@ -103,7 +101,6 @@
renderTexture = renderTexture2;
renderTexture2 = temp;
// set the new texture
outputSprite.setTexture(renderTexture);

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

@ -16,14 +16,11 @@
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
stage.setInteractive(true);
var sprite = PIXI.Sprite.fromImage("spinObj_02.png");
var renderer = PIXI.autoDetectRenderer(620, 380);
renderer.view.style.display = "block";
@ -33,7 +30,6 @@
var graphics = new PIXI.Graphics();
// set a fill and line style
graphics.beginFill(0xFF3300);
graphics.lineStyle(10, 0xffd900, 1);
@ -74,7 +70,6 @@
graphics.moveTo(30,30);
graphics.lineTo(600, 300);
stage.addChild(graphics);
// 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.y = 0.5;
bg.position.x = 620/2;
bg.position.y = 380/2;
bg.position.x = 620 / 2;
bg.position.y = 380 / 2;
stage.addChild(bg);
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;
@ -73,8 +73,8 @@
// lets create moving shape
var thing = new PIXI.Graphics();
stage.addChild(thing);
thing.position.x = 620/2;
thing.position.y = 380/2;
thing.position.x = 620 / 2;
thing.position.y = 380 / 2;
thing.lineStyle(0);
container.mask = thing;
@ -109,7 +109,7 @@
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"});
@ -120,7 +120,6 @@
requestAnimFrame(animate);
function animate() {
bg.rotation += 0.01;
bgFront.rotation -= 0.01;
@ -144,7 +143,7 @@
renderer.render(stage);
requestAnimFrame( animate );
requestAnimFrame(animate);
}
</script>

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

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

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

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

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

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

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

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