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>
<body>
<script>
// Load them google fonts before starting...!
// Load them google fonts before starting...!
WebFontConfig = {
google: {
families: [ 'Snippet', 'Arvo:700italic', 'Podkova:700' ]
@ -49,8 +48,8 @@
if(safe > 100)
{
console.log("BREAK")
break
console.log("BREAK");
break;
}
}
}
@ -73,7 +72,7 @@
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.y = 20;
@ -91,15 +90,13 @@
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame(animate);
// 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.y = 20;
// 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!
spinningText.anchor.x = spinningText.anchor.y = 0.5;
@ -107,7 +104,7 @@
spinningText.position.y = 400 / 2;
// 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.y = 320;
countingText.anchor.x = 0.5;
@ -125,6 +122,8 @@
function animate() {
}
requestAnimFrame(animate);
}
</script>

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

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

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

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

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

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

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

@ -37,10 +37,10 @@
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF);
var particles = new PIXI.SpriteBatch(PIXI.Texture.fromImage("eggHead.png"));
stage.addChild(particles);
var sprites = new PIXI.SpriteBatch();
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
var dudeArray = [];
@ -51,7 +51,7 @@
// 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;
@ -80,7 +80,7 @@
// finally we push the dude into the dudeArray so it it can be easily accessed later
dudeArray.push(dude);
particles.addChild(dude);
sprites.addChild(dude);
}
// create a bounding box box for the little dudes
@ -91,8 +91,6 @@
viewHeight + dudeBoundsPadding * 2);
var tick = 0;
requestAnimationFrame(animate);
function animate()
{
// iterate through the dude and update the position
@ -126,6 +124,8 @@
// request another animation frame..
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>
</body>

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

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

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

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

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

@ -16,7 +16,6 @@
<div id="sx">SX: 0<br />SY: 0</div>
<script>
$(window).resize(resize)
window.onorientationchange = resize;
@ -31,14 +30,13 @@
var slideX = w / 2;
var slideY = h / 2;
var stars = [];
var renderer;
var stage;
function start() {
var ballTexture = new PIXI.Texture.fromImage("assets/bubble_32x32.png");
renderer = PIXI.autoDetectRenderer(w, h);
stage = new PIXI.Stage;
stage = new PIXI.Stage();
document.body.appendChild(renderer.view);
@ -62,15 +60,12 @@
resize();
requestAnimFrame(update);
}
function newWave () {
sx = 1.0 + (Math.random() / 20);
sy = 1.0 + (Math.random() / 20);
document.getElementById('sx').innerHTML = 'SX: ' + sx + '<br />SY: ' + sy;
}
function resize()
@ -116,7 +111,6 @@
requestAnimFrame(update);
}
</script>
</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>
<script>
$(window).resize(resize)
window.onorientationchange = resize;
@ -37,13 +36,12 @@
var tpoint2 = [];
var tpoint3 = [];
var balls = [];
var renderer;
var stage;
function start() {
var ballTexture = new PIXI.Texture.fromImage("assets/pixel.png");
renderer = PIXI.autoDetectRenderer(w, h);
stage = new PIXI.Stage;
document.body.appendChild(renderer.view);
@ -70,32 +68,25 @@
setTimeout(nextObject, 5000);
requestAnimFrame(update);
}
function nextObject () {
function nextObject() {
current++;
if (current > objs)
{
current = 0;
}
makeObject(current);
setTimeout(nextObject, 8000);
}
function makeObject ( t ) {
function makeObject(t) {
var xd;
switch (t)
{
case 0:
for (var i = 0; i < n; i++)
{
points1[i] = -50 + Math.round(Math.random() * 100);
@ -103,9 +94,7 @@
points3[i] = 0;
}
break;
case 1:
for (var i = 0; i < n; i++)
{
xd = -90 + Math.round(Math.random() * 180);
@ -114,9 +103,7 @@
points3[i] = Math.sin(xd) * 100;
}
break;
case 2:
for (var i = 0; i < n; i++)
{
xd = -90 + Math.round(Math.random() * 180);
@ -125,7 +112,6 @@
points3[i] = Math.sin(i * 360 / n) * 100;
}
break;
case 3:
for (var i = 0; i < n; i++)
@ -136,7 +122,6 @@
points3[i] = Math.sin(xd) * 100;
}
break;
case 4:
for (var i = 0; i < n; i++)
@ -147,7 +132,6 @@
points3[i] = Math.sin(i * 360 / n) * 100;
}
break;
case 5:
for (var i = 0; i < n; i++)
@ -158,7 +142,6 @@
points3[i] = Math.sin(i * 360 / n) * 100;
}
break;
case 6:
for (var i = 0; i < n; i++)
@ -169,7 +152,6 @@
points3[i] = Math.sin(i * 360 / n) * 100;
}
break;
case 7:
for (var i = 0; i < n; i++)
@ -180,7 +162,6 @@
points3[i] = Math.sin(i * 360 / n) * 100;
}
break;
case 8:
for (var i = 0; i < n; i++)
@ -191,7 +172,6 @@
points3[i] = Math.sin(xd) * 100;
}
break;
case 9:
for (var i = 0; i < n; i++)
@ -202,9 +182,7 @@
points3[i] = Math.sin(xd) * 100;
}
break;
case 10:
for (var i = 0; i < n; i++)
{
xd = -90 + Math.round(Math.random() * 180);
@ -213,9 +191,7 @@
points3[i] = Math.sin(i * 360 / n) * 100;
}
break;
case 11:
for (var i = 0; i < n; i++)
{
xd = -90 + Math.round(Math.random() * 180);
@ -224,9 +200,7 @@
points3[i] = Math.sin(xd) * 100;
}
break;
case 12:
for (var i = 0; i < n; i++)
{
xd = -90 + Math.round(Math.random() * 180);
@ -235,9 +209,7 @@
points3[i] = Math.sin(i * 360 / n) * 100;
}
break;
case 13:
for (var i = 0; i < n; i++)
{
xd = -90 + Math.round(Math.random() * 180);
@ -246,9 +218,7 @@
points3[i] = Math.sin(i * 360 / n) * 100;
}
break;
case 14:
for (var i = 0; i < n; i++)
{
xd = -90 + Math.round(Math.random() * 180);
@ -257,9 +227,7 @@
points3[i] = Math.sin(i * 360 / n) * 100;
}
break;
case 15:
for (var i = 0; i < n; i++)
{
xd = -90 + Math.round(Math.random() * 180);
@ -268,9 +236,7 @@
points3[i] = Math.sin(i * 360 / n) * 100;
}
break;
case 16:
for (var i = 0; i < n; i++)
{
xd = -90 + Math.round(Math.random() * 180);
@ -279,9 +245,7 @@
points3[i] = Math.sin(xd) * 100;
}
break;
case 17:
for (var i = 0; i < n; i++)
{
xd = -90 + Math.round(Math.random() * 180);
@ -291,7 +255,6 @@
}
break;
}
}
function resize()
@ -338,14 +301,12 @@
balls[i].position.x = (512 * tx) / (d - tz) + w / 2;
balls[i].position.y = (h/2) - (512 * ty) / (d - tz);
}
renderer.render(stage);
requestAnimFrame(update);
}
</script>
</body>

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

@ -22,7 +22,6 @@
</head>
<body>
<script>
// create an new instance of a pixi stage
// the second parameter is interactivity...
var interactive = true;
@ -71,18 +70,17 @@
button.interactive = true;
// set the mousedown and touchstart callback..
button.mousedown = button.touchstart = function(data){
button.mousedown = button.touchstart = function(data) {
this.isdown = true;
this.setTexture(textureButtonDown);
this.alpha = 1;
}
};
// 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;
if(this.isOver)
if (this.isOver)
{
this.setTexture(textureButtonOver);
}
@ -90,36 +88,35 @@
{
this.setTexture(textureButton);
}
}
};
// set the mouseover callback..
button.mouseover = function(data){
button.mouseover = function(data) {
this.isOver = true;
if(this.isdown)return
if (this.isdown)
return;
this.setTexture(textureButtonOver)
}
this.setTexture(textureButtonOver);
};
// set the mouseout callback..
button.mouseout = function(data){
button.mouseout = function(data) {
this.isOver = false;
if(this.isdown)return
if (this.isdown)
return
this.setTexture(textureButton)
}
button.click = function(data){
};
button.click = function(data) {
console.log("CLICK!");
}
button.tap = function(data){
};
button.tap = function(data) {
console.log("TAP!!");
}
};
// add it to the stage
stage.addChild(button);
@ -129,26 +126,20 @@
};
// set some silly values...
buttons[0].scale.x = 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.y = 0.8;
buttons[4].scale.x = 0.8;
buttons[4].scale.y = 1.2;
buttons[4].rotation = Math.PI;
function animate() {
requestAnimFrame(animate);
// render the stage
renderer.render(stage);
requestAnimFrame(animate);
}
// add a logo!
@ -160,13 +151,9 @@
pixiLogo.position.x = 620 - 56;
pixiLogo.position.y = 400 - 32;
pixiLogo.setInteractive(true);
pixiLogo.click = pixiLogo.tap = function(){
var win=window.open("http://www.pixijs.com", '_blank');
}
pixiLogo.click = pixiLogo.tap = function() {
window.open("http://www.pixijs.com", '_blank');
};
</script>
</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</div>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(400, 300,false,true);
// add the renderer view element to the DOM
@ -40,10 +38,9 @@
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimFrame(animate);
// create a texture from an image path
var texture = PIXI.Texture.fromImage("bunny.png");
// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);
@ -58,7 +55,6 @@
stage.addChild(bunny);
function animate() {
requestAnimFrame(animate);
// just for fun, lets rotate mr rabbit a little
@ -68,6 +64,7 @@
renderer.render(stage);
}
requestAnimFrame(animate);
</script>
</body>

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

@ -14,9 +14,8 @@
</head>
<body>
<script>
// 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
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);
@ -31,7 +30,7 @@
// create a texture from an image path
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)
};

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

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