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

Even more clean-up

Browse source
This commit is contained in:
Anders Nissen 2014-02-13 20:17:03 +01:00
parent 564f883640
commit 8a0036178e
13 changed files with 71 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,8 +14,7 @@
</head> </head>
<body> <body>
<script> <script>
// Load them google fonts before starting...!
// Load them google fonts before starting...!
WebFontConfig = { WebFontConfig = {
google: { google: {
families: [ 'Snippet', 'Arvo:700italic', 'Podkova:700' ] families: [ 'Snippet', 'Arvo:700italic', 'Podkova:700' ]
@ -49,8 +48,8 @@
if(safe > 100) if(safe > 100)
{ {
console.log("BREAK") console.log("BREAK");
break break;
} }
} }
} }
@ -73,7 +72,7 @@
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" });
bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20; bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20;
bitmapFontText.position.y = 20; bitmapFontText.position.y = 20;
@ -91,15 +90,13 @@
// 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);
requestAnimFrame(animate);
// create some white text using the Snippet webfont // create some white text using the Snippet webfont
var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", {font: "35px Snippet", fill: "white", align: "left"}); var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", { font: "35px Snippet", fill: "white", align: "left" });
textSample.position.x = 20; textSample.position.x = 20;
textSample.position.y = 20; textSample.position.y = 20;
// create a text object with a nice stroke // create a text object with a nice stroke
var spinningText = new PIXI.Text("I'm fun!", {font: "bold 60px Podkova", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6}); var spinningText = new PIXI.Text("I'm fun!", { font: "bold 60px Podkova", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6 });
// setting the anchor point to 0.5 will center align the text... great for spinning! // setting the anchor point to 0.5 will center align the text... great for spinning!
spinningText.anchor.x = spinningText.anchor.y = 0.5; spinningText.anchor.x = spinningText.anchor.y = 0.5;
@ -107,7 +104,7 @@
spinningText.position.y = 400 / 2; spinningText.position.y = 400 / 2;
// create a text object that will be updated.. // create a text object that will be updated..
var countingText = new PIXI.Text("COUNT 4EVAR: 0", {font: "bold italic 60px Arvo", fill: "#3e1707", align: "center", stroke: "#a4410e", strokeThickness: 7}); var countingText = new PIXI.Text("COUNT 4EVAR: 0", { font: "bold italic 60px Arvo", fill: "#3e1707", align: "center", stroke: "#a4410e", strokeThickness: 7 });
countingText.position.x = 620 / 2; countingText.position.x = 620 / 2;
countingText.position.y = 320; countingText.position.y = 320;
countingText.anchor.x = 0.5; countingText.anchor.x = 0.5;
@ -125,6 +122,8 @@
function animate() { function animate() {
} }
requestAnimFrame(animate);
} }
</script> </script>

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

@ -111,8 +111,6 @@
help.position.x = 10; help.position.x = 10;
stage.addChild(help); stage.addChild(help);
requestAnimFrame(animate);
function animate() { function animate() {
bg.rotation += 0.01; bg.rotation += 0.01;
bgFront.rotation -= 0.01; bgFront.rotation -= 0.01;
@ -136,6 +134,8 @@
renderer.render(stage); renderer.render(stage);
requestAnimFrame(animate); requestAnimFrame(animate);
} }
requestAnimFrame(animate);
</script> </script>
</body> </body>

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

@ -16,7 +16,6 @@
</head> </head>
<body> <body>
<script> <script>
var renderer = PIXI.autoDetectRenderer(630, 410); var renderer = PIXI.autoDetectRenderer(630, 410);
renderer.view.style.position = "absolute" renderer.view.style.position = "absolute"
renderer.view.style.width = window.innerWidth + "px"; renderer.view.style.width = window.innerWidth + "px";
@ -248,7 +247,6 @@
fish.rotation = -fish.direction - Math.PI/2; fish.rotation = -fish.direction - Math.PI/2;
// wrap.. // wrap..
if(fish.position.x < bounds.x)fish.position.x += bounds.width; if(fish.position.x < bounds.x)fish.position.x += bounds.width;
if(fish.position.x > bounds.x + bounds.width)fish.position.x -= bounds.width if(fish.position.x > bounds.x + bounds.width)fish.position.x -= bounds.width
@ -257,11 +255,11 @@
} }
displacementFilter.offset.x = count * 10//blurAmount * 40; displacementFilter.offset.x = count * 10;
displacementFilter.offset.y = count * 10 displacementFilter.offset.y = count * 10;
overlay.tilePosition.x = count * -10//blurAmount * 40; overlay.tilePosition.x = count * -10;
overlay.tilePosition.y = count * -10 overlay.tilePosition.y = count * -10;
renderer.render(stage); renderer.render(stage);
requestAnimFrame( animate ); requestAnimFrame( animate );

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

@ -17,8 +17,6 @@
height: 100%; height: 100%;
} }
</style> </style>
<script src="pixi.js"></script>
<script src="../../bin/pixi.js"></script> <script src="../../bin/pixi.js"></script>
</head> </head>
@ -92,9 +90,6 @@
viewHeight + dudeBoundsPadding * 2); viewHeight + dudeBoundsPadding * 2);
var tick = 0; var tick = 0;
requestAnimationFrame(animate);
function animate() function animate()
{ {
// iterate through the dudes and update the positions // iterate through the dudes and update the positions
@ -104,7 +99,7 @@
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 there bounds.. // wrap the dudes by testing there bounds..
if (dude.position.x < dudeBounds.x) if (dude.position.x < dudeBounds.x)
@ -127,6 +122,7 @@
// request another animation frame... // request another animation frame...
requestAnimationFrame(animate); requestAnimationFrame(animate);
} }
requestAnimationFrame(animate);
</script> </script>
</body> </body>

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

@ -37,10 +37,10 @@
// 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);
var particles = new PIXI.SpriteBatch(PIXI.Texture.fromImage("eggHead.png")); var sprites = new PIXI.SpriteBatch();
stage.addChild(particles); stage.addChild(sprites);
var tints = [0XFFFFFF, 0XFFFBEE, 0XFFEEEE, 0XFADEED, 0XE8D4CD]; 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 = [];
@ -51,7 +51,7 @@
// 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;
@ -80,7 +80,7 @@
// 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);
particles.addChild(dude); sprites.addChild(dude);
} }
// create a bounding box box for the little dudes // create a bounding box box for the little dudes
@ -91,8 +91,6 @@
viewHeight + dudeBoundsPadding * 2); viewHeight + dudeBoundsPadding * 2);
var tick = 0; var tick = 0;
requestAnimationFrame(animate);
function animate() function animate()
{ {
// iterate through the dude and update the position // iterate through the dude and update the position
@ -126,6 +124,8 @@
// request another animation frame.. // request another animation frame..
requestAnimationFrame(animate); requestAnimationFrame(animate);
} }
requestAnimationFrame(animate);
</script> </script>
</body> </body>

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

@ -95,7 +95,6 @@
requestAnimFrame(animate); requestAnimFrame(animate);
} }
</script> </script>
</body> </body>

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

@ -50,21 +50,18 @@
explosionTextures.push(texture); explosionTextures.push(texture);
}; };
// create a texture from an image path
// add a bunch of aliens
for (var i = 0; i < 50; i++) for (var i = 0; i < 50; i++)
{ {
// create an explosion MovieClip // create an explosion MovieClip
var explosion = new PIXI.MovieClip(explosionTextures); var explosion = new PIXI.MovieClip(explosionTextures);
explosion.position.x = Math.random() * 800; explosion.position.x = Math.random() * 800;
explosion.position.y = Math.random() * 600; explosion.position.y = Math.random() * 600;
explosion.anchor.x = 0.5; explosion.anchor.x = 0.5;
explosion.anchor.y = 0.5; explosion.anchor.y = 0.5;
explosion.rotation = Math.random() * Math.PI; explosion.rotation = Math.random() * Math.PI;
explosion.scale.x = explosion.scale.y = 0.75 + Math.random() * 0.5 explosion.scale.x = explosion.scale.y = 0.75 + Math.random() * 0.5;
explosion.gotoAndPlay(Math.random() * 27); explosion.gotoAndPlay(Math.random() * 27);
@ -73,17 +70,13 @@
// start animating // start animating
requestAnimFrame( animate ); requestAnimFrame( animate );
} }
function animate() { function animate() {
requestAnimFrame( animate );
renderer.render(stage); renderer.render(stage);
}
requestAnimFrame(animate);
}
</script> </script>
</body> </body>

12
examples/example 4 - Balls/index.html
View file

@ -16,7 +16,6 @@
<div id="sx">SX: 0<br />SY: 0</div> <div id="sx">SX: 0<br />SY: 0</div>
<script> <script>
$(window).resize(resize) $(window).resize(resize)
window.onorientationchange = resize; window.onorientationchange = resize;
@ -31,14 +30,13 @@
var slideX = w / 2; var slideX = w / 2;
var slideY = h / 2; var slideY = h / 2;
var stars = []; var stars = [];
var renderer;
var stage;
function start() { function start() {
var ballTexture = new PIXI.Texture.fromImage("assets/bubble_32x32.png"); var ballTexture = new PIXI.Texture.fromImage("assets/bubble_32x32.png");
renderer = PIXI.autoDetectRenderer(w, h); renderer = PIXI.autoDetectRenderer(w, h);
stage = new PIXI.Stage();
stage = new PIXI.Stage;
document.body.appendChild(renderer.view); document.body.appendChild(renderer.view);
@ -62,15 +60,12 @@
resize(); resize();
requestAnimFrame(update); requestAnimFrame(update);
} }
function newWave () { function newWave () {
sx = 1.0 + (Math.random() / 20); sx = 1.0 + (Math.random() / 20);
sy = 1.0 + (Math.random() / 20); sy = 1.0 + (Math.random() / 20);
document.getElementById('sx').innerHTML = 'SX: ' + sx + '<br />SY: ' + sy; document.getElementById('sx').innerHTML = 'SX: ' + sx + '<br />SY: ' + sy;
} }
function resize() function resize()
@ -116,7 +111,6 @@
requestAnimFrame(update); requestAnimFrame(update);
} }
</script> </script>
</body> </body>

47
examples/example 5 - Morph/index.html
View file

@ -14,7 +14,6 @@
<a href="http://www.html5gamedevs.com/topic/59-pixijs-has-landed/"><img src="assets/pixi.png" width="56" height="22" id="pixi" title="pixi.js" /></a> <a href="http://www.html5gamedevs.com/topic/59-pixijs-has-landed/"><img src="assets/pixi.png" width="56" height="22" id="pixi" title="pixi.js" /></a>
<script> <script>
$(window).resize(resize) $(window).resize(resize)
window.onorientationchange = resize; window.onorientationchange = resize;
@ -37,13 +36,12 @@
var tpoint2 = []; var tpoint2 = [];
var tpoint3 = []; var tpoint3 = [];
var balls = []; var balls = [];
var renderer;
var stage;
function start() { function start() {
var ballTexture = new PIXI.Texture.fromImage("assets/pixel.png"); var ballTexture = new PIXI.Texture.fromImage("assets/pixel.png");
renderer = PIXI.autoDetectRenderer(w, h); renderer = PIXI.autoDetectRenderer(w, h);
stage = new PIXI.Stage; stage = new PIXI.Stage;
document.body.appendChild(renderer.view); document.body.appendChild(renderer.view);
@ -70,32 +68,25 @@
setTimeout(nextObject, 5000); setTimeout(nextObject, 5000);
requestAnimFrame(update); requestAnimFrame(update);
} }
function nextObject () { function nextObject() {
current++; current++;
if (current > objs) if (current > objs)
{ {
current = 0; current = 0;
} }
makeObject(current); makeObject(current);
setTimeout(nextObject, 8000); setTimeout(nextObject, 8000);
} }
function makeObject ( t ) { function makeObject(t) {
var xd; var xd;
switch (t) switch (t)
{ {
case 0: case 0:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
{ {
points1[i] = -50 + Math.round(Math.random() * 100); points1[i] = -50 + Math.round(Math.random() * 100);
@ -103,9 +94,7 @@
points3[i] = 0; points3[i] = 0;
} }
break; break;
case 1: case 1:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
{ {
xd = -90 + Math.round(Math.random() * 180); xd = -90 + Math.round(Math.random() * 180);
@ -114,9 +103,7 @@
points3[i] = Math.sin(xd) * 100; points3[i] = Math.sin(xd) * 100;
} }
break; break;
case 2: case 2:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
{ {
xd = -90 + Math.round(Math.random() * 180); xd = -90 + Math.round(Math.random() * 180);
@ -125,7 +112,6 @@
points3[i] = Math.sin(i * 360 / n) * 100; points3[i] = Math.sin(i * 360 / n) * 100;
} }
break; break;
case 3: case 3:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
@ -136,7 +122,6 @@
points3[i] = Math.sin(xd) * 100; points3[i] = Math.sin(xd) * 100;
} }
break; break;
case 4: case 4:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
@ -147,7 +132,6 @@
points3[i] = Math.sin(i * 360 / n) * 100; points3[i] = Math.sin(i * 360 / n) * 100;
} }
break; break;
case 5: case 5:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
@ -158,7 +142,6 @@
points3[i] = Math.sin(i * 360 / n) * 100; points3[i] = Math.sin(i * 360 / n) * 100;
} }
break; break;
case 6: case 6:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
@ -169,7 +152,6 @@
points3[i] = Math.sin(i * 360 / n) * 100; points3[i] = Math.sin(i * 360 / n) * 100;
} }
break; break;
case 7: case 7:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
@ -180,7 +162,6 @@
points3[i] = Math.sin(i * 360 / n) * 100; points3[i] = Math.sin(i * 360 / n) * 100;
} }
break; break;
case 8: case 8:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
@ -191,7 +172,6 @@
points3[i] = Math.sin(xd) * 100; points3[i] = Math.sin(xd) * 100;
} }
break; break;
case 9: case 9:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
@ -202,9 +182,7 @@
points3[i] = Math.sin(xd) * 100; points3[i] = Math.sin(xd) * 100;
} }
break; break;
case 10: case 10:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
{ {
xd = -90 + Math.round(Math.random() * 180); xd = -90 + Math.round(Math.random() * 180);
@ -213,9 +191,7 @@
points3[i] = Math.sin(i * 360 / n) * 100; points3[i] = Math.sin(i * 360 / n) * 100;
} }
break; break;
case 11: case 11:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
{ {
xd = -90 + Math.round(Math.random() * 180); xd = -90 + Math.round(Math.random() * 180);
@ -224,9 +200,7 @@
points3[i] = Math.sin(xd) * 100; points3[i] = Math.sin(xd) * 100;
} }
break; break;
case 12: case 12:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
{ {
xd = -90 + Math.round(Math.random() * 180); xd = -90 + Math.round(Math.random() * 180);
@ -235,9 +209,7 @@
points3[i] = Math.sin(i * 360 / n) * 100; points3[i] = Math.sin(i * 360 / n) * 100;
} }
break; break;
case 13: case 13:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
{ {
xd = -90 + Math.round(Math.random() * 180); xd = -90 + Math.round(Math.random() * 180);
@ -246,9 +218,7 @@
points3[i] = Math.sin(i * 360 / n) * 100; points3[i] = Math.sin(i * 360 / n) * 100;
} }
break; break;
case 14: case 14:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
{ {
xd = -90 + Math.round(Math.random() * 180); xd = -90 + Math.round(Math.random() * 180);
@ -257,9 +227,7 @@
points3[i] = Math.sin(i * 360 / n) * 100; points3[i] = Math.sin(i * 360 / n) * 100;
} }
break; break;
case 15: case 15:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
{ {
xd = -90 + Math.round(Math.random() * 180); xd = -90 + Math.round(Math.random() * 180);
@ -268,9 +236,7 @@
points3[i] = Math.sin(i * 360 / n) * 100; points3[i] = Math.sin(i * 360 / n) * 100;
} }
break; break;
case 16: case 16:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
{ {
xd = -90 + Math.round(Math.random() * 180); xd = -90 + Math.round(Math.random() * 180);
@ -279,9 +245,7 @@
points3[i] = Math.sin(xd) * 100; points3[i] = Math.sin(xd) * 100;
} }
break; break;
case 17: case 17:
for (var i = 0; i < n; i++) for (var i = 0; i < n; i++)
{ {
xd = -90 + Math.round(Math.random() * 180); xd = -90 + Math.round(Math.random() * 180);
@ -291,7 +255,6 @@
} }
break; break;
} }
} }
function resize() function resize()
@ -338,14 +301,12 @@
balls[i].position.x = (512 * tx) / (d - tz) + w / 2; balls[i].position.x = (512 * tx) / (d - tz) + w / 2;
balls[i].position.y = (h/2) - (512 * ty) / (d - tz); balls[i].position.y = (h/2) - (512 * ty) / (d - tz);
} }
renderer.render(stage); renderer.render(stage);
requestAnimFrame(update); requestAnimFrame(update);
} }
</script> </script>
</body> </body>

63
examples/example 6 - Interactivity/index.html
View file

@ -22,7 +22,6 @@
</head> </head>
<body> <body>
<script> <script>
// create an new instance of a pixi stage // create an new instance of a pixi stage
// the second parameter is interactivity... // the second parameter is interactivity...
var interactive = true; var interactive = true;
@ -71,18 +70,17 @@
button.interactive = true; button.interactive = true;
// set the mousedown and touchstart callback.. // set the mousedown and touchstart callback..
button.mousedown = button.touchstart = function(data){ button.mousedown = button.touchstart = function(data) {
this.isdown = true; this.isdown = true;
this.setTexture(textureButtonDown); this.setTexture(textureButtonDown);
this.alpha = 1; this.alpha = 1;
} };
// set the mouseup and touchend callback.. // set the mouseup and touchend callback..
button.mouseup = button.touchend = button.mouseupoutside = button.touchendoutside = function(data){ button.mouseup = button.touchend = button.mouseupoutside = button.touchendoutside = function(data) {
this.isdown = false; this.isdown = false;
if(this.isOver) if (this.isOver)
{ {
this.setTexture(textureButtonOver); this.setTexture(textureButtonOver);
} }
@ -90,36 +88,35 @@
{ {
this.setTexture(textureButton); this.setTexture(textureButton);
} }
} };
// set the mouseover callback.. // set the mouseover callback..
button.mouseover = function(data){ button.mouseover = function(data) {
this.isOver = true; this.isOver = true;
if(this.isdown)return if (this.isdown)
return;
this.setTexture(textureButtonOver) this.setTexture(textureButtonOver);
} };
// set the mouseout callback.. // set the mouseout callback..
button.mouseout = function(data){ button.mouseout = function(data) {
this.isOver = false; this.isOver = false;
if(this.isdown)return if (this.isdown)
return
this.setTexture(textureButton) this.setTexture(textureButton)
} };
button.click = function(data){
button.click = function(data) {
console.log("CLICK!"); console.log("CLICK!");
} };
button.tap = function(data){
button.tap = function(data) {
console.log("TAP!!"); console.log("TAP!!");
} };
// add it to the stage // add it to the stage
stage.addChild(button); stage.addChild(button);
@ -129,26 +126,20 @@
}; };
// set some silly values... // set some silly values...
buttons[0].scale.x = 1.2; buttons[0].scale.x = 1.2;
buttons[1].scale.y = 1.2; buttons[1].scale.y = 1.2;
buttons[2].rotation = Math.PI / 10;
buttons[2].rotation = Math.PI/10;
buttons[3].scale.x = 0.8; buttons[3].scale.x = 0.8;
buttons[3].scale.y = 0.8; buttons[3].scale.y = 0.8;
buttons[4].scale.x = 0.8; buttons[4].scale.x = 0.8;
buttons[4].scale.y = 1.2; buttons[4].scale.y = 1.2;
buttons[4].rotation = Math.PI; buttons[4].rotation = Math.PI;
function animate() { function animate() {
requestAnimFrame(animate);
// render the stage // render the stage
renderer.render(stage); renderer.render(stage);
requestAnimFrame(animate);
} }
// add a logo! // add a logo!
@ -160,13 +151,9 @@
pixiLogo.position.x = 620 - 56; pixiLogo.position.x = 620 - 56;
pixiLogo.position.y = 400 - 32; pixiLogo.position.y = 400 - 32;
pixiLogo.setInteractive(true); pixiLogo.click = pixiLogo.tap = function() {
window.open("http://www.pixijs.com", '_blank');
pixiLogo.click = pixiLogo.tap = function(){ };
var win=window.open("http://www.pixijs.com", '_blank');
}
</script> </script>
</body> </body>

7
examples/example 7 - Transparent Background/index.html
View file

@ -26,12 +26,10 @@
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>
<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);
// create a renderer instance // create a renderer instance
var renderer = PIXI.autoDetectRenderer(400, 300,false,true); var renderer = PIXI.autoDetectRenderer(400, 300,false,true);
// add the renderer view element to the DOM // add the renderer view element to the DOM
@ -40,10 +38,9 @@
renderer.view.style.top = "0px"; renderer.view.style.top = "0px";
renderer.view.style.left = "0px"; renderer.view.style.left = "0px";
requestAnimFrame(animate);
// create a texture from an image path // create a texture from an image path
var texture = PIXI.Texture.fromImage("bunny.png"); var texture = PIXI.Texture.fromImage("bunny.png");
// create a new Sprite using the texture // create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture); var bunny = new PIXI.Sprite(texture);
@ -58,7 +55,6 @@
stage.addChild(bunny); stage.addChild(bunny);
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
@ -68,6 +64,7 @@
renderer.render(stage); renderer.render(stage);
} }
requestAnimFrame(animate);
</script> </script>
</body> </body>

5
examples/example 8 - Dragging/index.html
View file

@ -14,9 +14,8 @@
</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(0x97c56e, true); var stage = new PIXI.Stage(0x97C56E, true);
// create a renderer instance // create a renderer instance
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null); var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);
@ -31,7 +30,7 @@
// create a texture from an image path // create a texture from an image path
var texture = PIXI.Texture.fromImage("bunny.png"); var texture = PIXI.Texture.fromImage("bunny.png");
for (var i=0; i < 10; i++) for (var i = 0; i < 10; i++)
{ {
createBunny(Math.random() * window.innerWidth, Math.random() * window.innerHeight) createBunny(Math.random() * window.innerWidth, Math.random() * window.innerHeight)
}; };

22
examples/example 9 - Tiling Texture/index.html
View file

@ -7,27 +7,23 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
</style> </style>
<script src="../../bin/pixi.dev.js"></script> <script src="../../bin/pixi.dev.js"></script>
</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(0x97c56e, true); var stage = new PIXI.Stage(0x97C56E, true);
// create a renderer instance // create a renderer instance
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null); var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
// add the renderer view element to the DOM // add the renderer view element to the DOM
document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute"; renderer.view.style.position = "absolute";
renderer.view.style.top = "0px"; renderer.view.style.top = "0px";
renderer.view.style.left = "0px"; renderer.view.style.left = "0px";
document.body.appendChild(renderer.view);
requestAnimFrame(animate);
// create a texture from an image path // create a texture from an image path
var texture = PIXI.Texture.fromImage("p2.jpeg"); var texture = PIXI.Texture.fromImage("p2.jpeg");
@ -35,16 +31,11 @@
// create a tiling sprite ... // create a tiling sprite ...
// requires a texture, width and height // requires a texture, width and height
// to work in webGL the texture size must be a power of two // to work in webGL the texture size must be a power of two
var tilingSprite = new PIXI.TilingSprite(texture, window.innerWidth, window.innerHeight) var tilingSprite = new PIXI.TilingSprite(texture, window.innerWidth, window.innerHeight);
var count = 0;
stage.addChild(tilingSprite); stage.addChild(tilingSprite);
var count = 0;
function animate() { function animate() {
requestAnimFrame(animate);
count += 0.005; count += 0.005;
tilingSprite.tileScale.x = 2 + Math.sin(count); tilingSprite.tileScale.x = 2 + Math.sin(count);
@ -55,8 +46,11 @@
// render the stage // render the stage
renderer.render(stage); renderer.render(stage);
requestAnimFrame(animate);
} }
requestAnimFrame(animate);
</script> </script>
</body> </body>