Remove trailing whitespace
This commit is contained in:
Dr. Kibitz
parent
277af3b0de
commit
aecd78d635
55 changed files with 1337 additions and 1337 deletions
|
|
@ -14,41 +14,41 @@
|
|||
</head>
|
||||
<body>
|
||||
<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);
|
||||
|
||||
|
||||
// add the renderer view element to the DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
|
||||
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);
|
||||
|
||||
|
||||
// center the sprites anchor point
|
||||
bunny.anchor.x = 0.5;
|
||||
bunny.anchor.y = 0.5;
|
||||
|
||||
|
||||
// move the sprite t the center of the screen
|
||||
bunny.position.x = 200;
|
||||
bunny.position.y = 150;
|
||||
|
||||
|
||||
stage.addChild(bunny);
|
||||
|
||||
|
||||
function animate() {
|
||||
|
||||
|
||||
requestAnimFrame( animate );
|
||||
|
||||
|
||||
// just for fun, lets rotate mr rabbit a little
|
||||
bunny.rotation += 0.1;
|
||||
|
||||
// render the stage
|
||||
|
||||
// render the stage
|
||||
renderer.render(stage);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(wf, s);
|
||||
})();
|
||||
|
||||
|
||||
function runList(item)
|
||||
{
|
||||
console.log(">>>>>>>>>")
|
||||
|
|
@ -52,15 +52,15 @@
|
|||
tmp = tmp._iNext;
|
||||
console.log(tmp);//.childIndex);
|
||||
// console.log(tmp);
|
||||
|
||||
|
||||
if(safe > 100)
|
||||
{
|
||||
console.log("BREAK")
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function init()
|
||||
{
|
||||
var assetsToLoader = ["desyrel.xml"];
|
||||
|
|
@ -72,24 +72,24 @@
|
|||
loader.onComplete = onAssetsLoaded;
|
||||
|
||||
//begin load
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0x66FF99);
|
||||
|
||||
|
||||
loader.load();
|
||||
function onAssetsLoaded()
|
||||
{
|
||||
var bitmapFontText = new PIXI.BitmapText("bitmap fonts are\n now supported!", {font: "35px Desyrel", align: "right"});
|
||||
bitmapFontText.position.x = 620 - bitmapFontText.width - 20;
|
||||
bitmapFontText.position.y = 20;
|
||||
|
||||
|
||||
runList(bitmapFontText)
|
||||
stage.addChild(bitmapFontText);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// add a shiney background..
|
||||
var background = PIXI.Sprite.fromImage("textDemoBG.jpg");
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
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"});
|
||||
textSample.position.x = 20;
|
||||
|
|
@ -119,11 +119,11 @@
|
|||
countingText.position.x = 620 / 2;
|
||||
countingText.position.y = 320;
|
||||
countingText.anchor.x = 0.5;
|
||||
|
||||
|
||||
stage.addChild(textSample);
|
||||
stage.addChild(spinningText);
|
||||
stage.addChild(countingText);
|
||||
|
||||
|
||||
var count = 0;
|
||||
var score = 0;
|
||||
|
||||
|
|
@ -137,16 +137,16 @@
|
|||
score++;
|
||||
// update the text...
|
||||
countingText.setText("COUNT 4EVAR: " + score);
|
||||
|
||||
|
||||
}
|
||||
// just for fun, lets rotate the text
|
||||
spinningText.rotation += 0.03;
|
||||
|
||||
// render the stage
|
||||
|
||||
// render the stage
|
||||
renderer.render(stage);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -9,71 +9,71 @@
|
|||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0x000000);
|
||||
|
||||
// create a renderer instance
|
||||
var renderer = new PIXI.autoDetectRenderer(800, 600);
|
||||
|
||||
|
||||
// set the canvas width and height to fill the screen
|
||||
renderer.view.style.width = window.innerWidth + "px";
|
||||
renderer.view.style.height = window.innerHeight + "px";
|
||||
renderer.view.style.display = "block";
|
||||
|
||||
|
||||
// add render view to DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
|
||||
// OOH! SHINY!
|
||||
// create two render textures.. these dynamic textures will be used to draw the scene into itself
|
||||
var renderTexture = new PIXI.RenderTexture(800, 600);
|
||||
var renderTexture2 = new PIXI.RenderTexture(800, 600);
|
||||
var currentTexture = renderTexture;
|
||||
|
||||
|
||||
// create a new sprite that uses the render texture we created above
|
||||
var outputSprite = new PIXI.Sprite(currentTexture);
|
||||
|
||||
|
||||
// align the sprite
|
||||
outputSprite.position.x = 800/2;
|
||||
outputSprite.position.y = 600/2;
|
||||
outputSprite.anchor.x = 0.5;
|
||||
outputSprite.anchor.y = 0.5;
|
||||
|
||||
|
||||
// add to stage
|
||||
stage.addChild(outputSprite);
|
||||
|
||||
|
||||
var stuffContainer = new PIXI.DisplayObjectContainer();
|
||||
|
||||
|
||||
stuffContainer.position.x = 800/2;
|
||||
stuffContainer.position.y = 600/2
|
||||
|
||||
|
||||
stage.addChild(stuffContainer);
|
||||
|
||||
// create an array of image ids..
|
||||
|
||||
// create an array of image ids..
|
||||
var fruits = ["spinObj_01.png", "spinObj_02.png",
|
||||
"spinObj_03.png", "spinObj_04.png",
|
||||
"spinObj_05.png", "spinObj_06.png",
|
||||
"spinObj_07.png", "spinObj_08.png"];
|
||||
|
||||
|
||||
// create an array of items
|
||||
var items = [];
|
||||
|
||||
|
||||
// now create some items and randomly position them in the stuff container
|
||||
for (var i=0; i < 20; i++)
|
||||
for (var i=0; i < 20; i++)
|
||||
{
|
||||
var item = PIXI.Sprite.fromImage(fruits[i % fruits.length]);
|
||||
item.position.x = Math.random() * 400 - 200;
|
||||
item.position.y = Math.random() * 400 - 200;
|
||||
|
||||
|
||||
item.anchor.x = 0.5;
|
||||
item.anchor.y = 0.5;
|
||||
|
||||
|
||||
stuffContainer.addChild(item);
|
||||
console.log("_")
|
||||
items.push(item);
|
||||
|
|
@ -81,40 +81,40 @@
|
|||
|
||||
// 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];
|
||||
item.rotation += 0.1;
|
||||
};
|
||||
|
||||
|
||||
count += 0.01;
|
||||
|
||||
|
||||
// swap the buffers..
|
||||
var temp = renderTexture;
|
||||
renderTexture = renderTexture2;
|
||||
renderTexture2 = temp;
|
||||
|
||||
|
||||
|
||||
|
||||
// set the new texture
|
||||
outputSprite.setTexture(renderTexture);
|
||||
|
||||
|
||||
// twist this up!
|
||||
stuffContainer.rotation -= 0.01
|
||||
outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2;
|
||||
|
||||
|
||||
// render the stage to the texture
|
||||
// the true clears the texture before content is rendered
|
||||
renderTexture2.render(stage, new PIXI.Point(0,0), true);
|
||||
|
||||
|
||||
// and finally render the stage
|
||||
renderer.render(stage);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,72 +9,72 @@
|
|||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
|
||||
// create an array of assets to load
|
||||
|
||||
|
||||
var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"];
|
||||
|
||||
|
||||
// create a new loader
|
||||
loader = new PIXI.AssetLoader(assetsToLoader);
|
||||
|
||||
|
||||
// use callback
|
||||
loader.onComplete = onAssetsLoaded
|
||||
|
||||
|
||||
//begin load
|
||||
loader.load();
|
||||
|
||||
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0xFFFFFF, true);
|
||||
|
||||
// create a renderer instance
|
||||
var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
|
||||
|
||||
|
||||
// set the canvas width and height to fill the screen
|
||||
renderer.view.style.display = "block";
|
||||
|
||||
|
||||
// add render view to DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
|
||||
function onAssetsLoaded()
|
||||
{
|
||||
// create a spine boy
|
||||
var spineBoy = new PIXI.Spine("data/spineboySpineData.json");
|
||||
|
||||
|
||||
// set the position
|
||||
spineBoy.position.x = window.innerWidth/2;
|
||||
spineBoy.position.y = window.innerHeight;
|
||||
|
||||
|
||||
spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400;
|
||||
|
||||
|
||||
// set up the mixes!
|
||||
spineBoy.stateData.setMixByName("walk", "jump", 0.2);
|
||||
spineBoy.stateData.setMixByName("jump", "walk", 0.4);
|
||||
|
||||
|
||||
// play animation
|
||||
spineBoy.state.setAnimationByName("walk", true);
|
||||
|
||||
|
||||
|
||||
|
||||
stage.addChild(spineBoy);
|
||||
|
||||
|
||||
stage.click = function()
|
||||
{
|
||||
spineBoy.state.setAnimationByName("jump", false);
|
||||
spineBoy.state.addAnimationByName("walk", true);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
|
||||
stage.addChild(logo);
|
||||
|
||||
|
||||
|
||||
|
||||
logo.anchor.x = 1;
|
||||
logo.position.x = window.innerWidth
|
||||
logo.scale.x = logo.scale.y = 0.5;
|
||||
|
|
@ -86,9 +86,9 @@
|
|||
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
||||
function animate() {
|
||||
|
|
|
|||
|
|
@ -9,61 +9,61 @@
|
|||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="pixi.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
|
||||
// create an array of assets to load
|
||||
|
||||
|
||||
var assetsToLoader = ["../../logo_small.png", "data/dragonBones.json", "data/dragonBonesData.json"];
|
||||
|
||||
|
||||
// create a new loader
|
||||
loader = new PIXI.AssetLoader(assetsToLoader);
|
||||
|
||||
|
||||
// use callback
|
||||
loader.onComplete = onAssetsLoaded
|
||||
|
||||
|
||||
//begin load
|
||||
loader.load();
|
||||
|
||||
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0xFFFFFF, true);
|
||||
|
||||
// create a renderer instance
|
||||
var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
|
||||
|
||||
|
||||
// set the canvas width and height to fill the screen
|
||||
renderer.view.style.display = "block";
|
||||
|
||||
|
||||
// add render view to DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
|
||||
function onAssetsLoaded()
|
||||
{
|
||||
var dragon = new PIXI.Spine("data/dragonBonesData.json");
|
||||
|
||||
|
||||
var scale = 1;//window.innerHeight / 700;
|
||||
|
||||
|
||||
dragon.position.x = window.innerWidth/2;
|
||||
dragon.position.y = window.innerHeight/2 + (450 * scale);
|
||||
|
||||
|
||||
dragon.scale.x = dragon.scale.y = scale
|
||||
|
||||
|
||||
|
||||
|
||||
dragon.state.setAnimationByName("flying", true);
|
||||
|
||||
|
||||
stage.addChild(dragon);
|
||||
|
||||
|
||||
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
|
||||
stage.addChild(logo);
|
||||
|
||||
|
||||
|
||||
|
||||
logo.anchor.x = 1;
|
||||
logo.position.x = window.innerWidth
|
||||
logo.scale.x = logo.scale.y = 0.5;
|
||||
|
|
@ -74,13 +74,13 @@
|
|||
{
|
||||
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
||||
|
||||
|
||||
function animate() {
|
||||
|
||||
|
|
|
|||
|
|
@ -9,89 +9,89 @@
|
|||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
|
||||
// create an array of assets to load
|
||||
|
||||
|
||||
var assetsToLoader = ["../../logo_small.png", "data/PixieSpineData.json", "data/Pixie.json", "data/iP4_BGtile.jpg", "data/iP4_ground.png"];
|
||||
|
||||
|
||||
// create a new loader
|
||||
loader = new PIXI.AssetLoader(assetsToLoader);
|
||||
|
||||
|
||||
// use callback
|
||||
loader.onComplete = onAssetsLoaded;
|
||||
|
||||
|
||||
//begin load
|
||||
loader.load();
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0xFFFFFF, true);
|
||||
|
||||
// create a renderer instance
|
||||
var renderer = new PIXI.autoDetectRenderer(1024, 640);
|
||||
|
||||
|
||||
// set the canvas width and height to fill the screen
|
||||
renderer.view.style.display = "block";
|
||||
renderer.view.style.width = "100%"
|
||||
renderer.view.style.height = "100%"
|
||||
|
||||
|
||||
// add render view to DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
|
||||
var postition = 0;
|
||||
var background;
|
||||
var background2;
|
||||
|
||||
|
||||
function onAssetsLoaded()
|
||||
{
|
||||
background = PIXI.Sprite.fromImage("data/iP4_BGtile.jpg");
|
||||
background2 = PIXI.Sprite.fromImage("data/iP4_BGtile.jpg");
|
||||
stage.addChild(background);
|
||||
stage.addChild(background2);
|
||||
|
||||
|
||||
foreground = PIXI.Sprite.fromImage("data/iP4_ground.png");
|
||||
foreground2 = PIXI.Sprite.fromImage("data/iP4_ground.png");
|
||||
stage.addChild(foreground);
|
||||
stage.addChild(foreground2);
|
||||
foreground.position.y = foreground2.position.y = 640 - foreground2.height;
|
||||
|
||||
|
||||
var pixie = new PIXI.Spine("data/PixieSpineData.json");
|
||||
|
||||
|
||||
var scale = 0.3;//window.innerHeight / 700;
|
||||
|
||||
|
||||
pixie.position.x = 1024/3;
|
||||
pixie.position.y = 500
|
||||
|
||||
|
||||
pixie.scale.x = pixie.scale.y = scale
|
||||
|
||||
|
||||
|
||||
|
||||
//dragon.state.setAnimationByName("running", true);
|
||||
|
||||
|
||||
stage.addChild(pixie);
|
||||
|
||||
|
||||
pixie.stateData.setMixByName("running", "jump", 0.2);
|
||||
pixie.stateData.setMixByName("jump", "running", 0.4);
|
||||
|
||||
|
||||
pixie.state.setAnimationByName("running", true);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
stage.mousedown = stage.touchstart = function()
|
||||
{
|
||||
pixie.state.setAnimationByName("jump", false);
|
||||
pixie.state.addAnimationByName("running", true);
|
||||
}
|
||||
|
||||
|
||||
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
|
||||
stage.addChild(logo);
|
||||
|
||||
|
||||
|
||||
|
||||
logo.anchor.x = 1;
|
||||
logo.position.x = 1024
|
||||
logo.scale.x = logo.scale.y = 0.5;
|
||||
|
|
@ -102,42 +102,42 @@
|
|||
{
|
||||
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
|
||||
}
|
||||
|
||||
|
||||
requestAnimFrame(animate);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function animate() {
|
||||
|
||||
|
||||
postition += 10;
|
||||
|
||||
|
||||
background.position.x = -(postition * 0.6);
|
||||
background.position.x %= 1286 * 2;
|
||||
if(background.position.x<0)background.position.x += 1286 * 2;
|
||||
background.position.x -= 1286;
|
||||
|
||||
|
||||
background2.position.x = -(postition * 0.6) + 1286;
|
||||
background2.position.x %= 1286 * 2;
|
||||
if(background2.position.x<0)background2.position.x += 1286 * 2;
|
||||
background2.position.x -= 1286;
|
||||
|
||||
|
||||
foreground.position.x = -postition;
|
||||
foreground.position.x %= 1286 * 2;
|
||||
if(foreground.position.x<0)foreground.position.x += 1286 * 2;
|
||||
foreground.position.x -= 1286;
|
||||
|
||||
|
||||
foreground2.position.x = -postition + 1286;
|
||||
foreground2.position.x %= 1286 * 2;
|
||||
if(foreground2.position.x<0)foreground2.position.x += 1286 * 2;
|
||||
foreground2.position.x -= 1286;
|
||||
|
||||
|
||||
requestAnimFrame( animate );
|
||||
|
||||
|
||||
|
||||
|
||||
renderer.render(stage);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,40 +9,40 @@
|
|||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script src="pixi.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<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");
|
||||
//stage.addChild(sprite);
|
||||
// create a renderer instance
|
||||
// the 5the parameter is the anti aliasing
|
||||
var renderer = PIXI.autoDetectRenderer(620, 380, null, false, true);
|
||||
|
||||
|
||||
// set the canvas width and height to fill the screen
|
||||
//renderer.view.style.width = window.innerWidth + "px";
|
||||
//renderer.view.style.height = window.innerHeight + "px";
|
||||
renderer.view.style.display = "block";
|
||||
|
||||
|
||||
// add render view to DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
|
||||
var graphics = new PIXI.Graphics();
|
||||
|
||||
|
||||
|
||||
|
||||
// set a fill and line style
|
||||
graphics.beginFill(0xFF3300);
|
||||
graphics.lineStyle(10, 0xffd900, 1);
|
||||
|
||||
|
||||
// draw a shape
|
||||
graphics.moveTo(50,50);
|
||||
graphics.lineTo(250, 50);
|
||||
|
|
@ -51,11 +51,11 @@
|
|||
graphics.lineTo(50, 220);
|
||||
graphics.lineTo(50, 50);
|
||||
graphics.endFill();
|
||||
|
||||
|
||||
// set a fill and line style again
|
||||
graphics.lineStyle(10, 0xFF0000, 0.8);
|
||||
graphics.beginFill(0xFF700B, 1);
|
||||
|
||||
|
||||
// draw a second shape
|
||||
graphics.moveTo(210,300);
|
||||
graphics.lineTo(450,320);
|
||||
|
|
@ -65,56 +65,56 @@
|
|||
graphics.lineTo(410,200);
|
||||
graphics.lineTo(210,300);
|
||||
graphics.endFill();
|
||||
|
||||
|
||||
// draw a rectangel
|
||||
graphics.lineStyle(2, 0x0000FF, 1);
|
||||
graphics.drawRect(50, 250, 100, 100);
|
||||
|
||||
|
||||
// draw a circle
|
||||
graphics.lineStyle(0);
|
||||
graphics.beginFill(0xFFFF0B, 0.5);
|
||||
graphics.drawCircle(470, 200,100);
|
||||
|
||||
|
||||
graphics.lineStyle(20, 0x33FF00);
|
||||
graphics.moveTo(30,30);
|
||||
graphics.lineTo(600, 300);
|
||||
|
||||
|
||||
|
||||
|
||||
stage.addChild(graphics);
|
||||
|
||||
|
||||
// lets create moving shape
|
||||
var thing = new PIXI.Graphics();
|
||||
stage.addChild(thing);
|
||||
thing.position.x = 620/2;
|
||||
thing.position.y = 380/2;
|
||||
|
||||
|
||||
var count = 0;
|
||||
|
||||
|
||||
stage.click = stage.tap = function()
|
||||
{
|
||||
graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
|
||||
graphics.moveTo(Math.random() * 620,Math.random() * 380);
|
||||
graphics.lineTo(Math.random() * 620,Math.random() * 380);
|
||||
}
|
||||
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
||||
function animate() {
|
||||
|
||||
|
||||
thing.clear();
|
||||
|
||||
|
||||
count += 0.1;
|
||||
|
||||
|
||||
thing.clear();
|
||||
thing.lineStyle(30, 0xff0000, 1);
|
||||
thing.beginFill(0xffFF00, 0.5);
|
||||
|
||||
|
||||
thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
|
||||
thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count)* 20);
|
||||
thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count)* 20);
|
||||
thing.lineTo(-120 + Math.cos(count)* 20, 100 + Math.sin(count)* 20);
|
||||
thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
|
||||
|
||||
|
||||
thing.rotation = count * 0.1;
|
||||
renderer.render(stage);
|
||||
requestAnimFrame( animate );
|
||||
|
|
|
|||
|
|
@ -9,58 +9,58 @@
|
|||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0xFFFFFF, true);
|
||||
|
||||
|
||||
stage.interactive = true;
|
||||
|
||||
|
||||
var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
|
||||
bg.anchor.x = 0.5;
|
||||
bg.anchor.y = 0.5;
|
||||
|
||||
|
||||
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;
|
||||
|
||||
|
||||
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
|
||||
bgFront.anchor.x = 0.5;
|
||||
bgFront.anchor.y = 0.5;
|
||||
|
||||
|
||||
container.addChild(bgFront);
|
||||
|
||||
|
||||
var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
|
||||
light2.anchor.x = 0.5;
|
||||
light2.anchor.y = 0.5;
|
||||
container.addChild(light2);
|
||||
|
||||
|
||||
var light1 = PIXI.Sprite.fromImage("LightRotate1.png");
|
||||
light1.anchor.x = 0.5;
|
||||
light1.anchor.y = 0.5;
|
||||
container.addChild(light1);
|
||||
|
||||
|
||||
var panda = PIXI.Sprite.fromImage("panda.png");
|
||||
panda.anchor.x = 0.5;
|
||||
panda.anchor.y = 0.5;
|
||||
|
||||
|
||||
container.addChild(panda);
|
||||
|
||||
|
||||
stage.addChild(container);
|
||||
|
||||
|
||||
|
||||
|
||||
// create a renderer instance
|
||||
var renderer = PIXI.autoDetectRenderer(620, 380);
|
||||
|
||||
|
||||
// set the canvas width and height to fill the screen
|
||||
// renderer.view.style.width = window.innerWidth + "px";
|
||||
//renderer.view.style.height = window.innerHeight + "px";
|
||||
|
|
@ -72,26 +72,26 @@
|
|||
renderer.view.style.display = "block";
|
||||
// add render view to DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// lets create moving shape
|
||||
var thing = new PIXI.Graphics();
|
||||
stage.addChild(thing);
|
||||
thing.position.x = 620/2;
|
||||
thing.position.y = 380/2;
|
||||
thing.lineStyle(0);
|
||||
|
||||
|
||||
container.addFilter(thing);
|
||||
|
||||
|
||||
var count = 0;
|
||||
|
||||
|
||||
stage.click = stage.tap = function()
|
||||
{
|
||||
if(!container.filter)
|
||||
{
|
||||
container.addFilter(thing);
|
||||
|
||||
|
||||
PIXI.runList(stage);
|
||||
}
|
||||
else
|
||||
|
|
@ -99,47 +99,47 @@
|
|||
container.removeFilter(thing);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Add a pixi Logo!
|
||||
*/
|
||||
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
|
||||
stage.addChild(logo);
|
||||
|
||||
|
||||
logo.anchor.x = 1;
|
||||
logo.position.x = 620
|
||||
logo.scale.x = logo.scale.y = 0.5;
|
||||
logo.position.y = 320
|
||||
logo.interactive = true;
|
||||
logo.buttonMode = true;
|
||||
|
||||
|
||||
logo.click = logo.tap = function()
|
||||
{
|
||||
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"});
|
||||
help.position.y = 350;
|
||||
help.position.x = 10;
|
||||
stage.addChild(help);
|
||||
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
||||
function animate() {
|
||||
|
||||
|
||||
// thing.clear();
|
||||
bg.rotation += 0.01;
|
||||
bgFront.rotation -= 0.01;
|
||||
|
||||
|
||||
|
||||
|
||||
light1.rotation += 0.02;
|
||||
light2.rotation += 0.01;
|
||||
|
||||
|
||||
panda.scale.x = 1 + Math.sin(count) * 0.04;
|
||||
panda.scale.y = 1 + Math.cos(count) * 0.04;
|
||||
|
||||
|
||||
count += 0.1;
|
||||
|
||||
|
||||
thing.clear();
|
||||
thing.lineStyle(5, 0x16f1ff, 1);
|
||||
thing.beginFill(0x8bc5ff, 0.4);
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
thing.lineTo(-120 + Math.cos(count)* 20, 100 + Math.sin(count)* 20);
|
||||
thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
|
||||
thing.rotation = count * 0.1;
|
||||
|
||||
|
||||
renderer.render(stage);
|
||||
requestAnimFrame( animate );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,61 +9,61 @@
|
|||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0xFFFFFF, true);
|
||||
|
||||
|
||||
stage.interactive = true;
|
||||
|
||||
|
||||
var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
|
||||
bg.anchor.x = 0.5;
|
||||
bg.anchor.y = 0.5;
|
||||
|
||||
|
||||
bg.position.x = 620/2;
|
||||
bg.position.y = 380/2;
|
||||
|
||||
|
||||
stage.addChild(bg);
|
||||
|
||||
|
||||
|
||||
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
|
||||
bgFront.anchor.x = 0.5;
|
||||
bgFront.anchor.y = 0.5;
|
||||
|
||||
stage.addChild(bgFront);
|
||||
|
||||
|
||||
// create a renderer instance
|
||||
var renderer = PIXI.autoDetectRenderer(620, 380);
|
||||
|
||||
|
||||
renderer.view.style.position = "absolute"
|
||||
renderer.view.style.marginLeft = "-310px";
|
||||
renderer.view.style.marginTop = "-190px";
|
||||
renderer.view.style.top = "50%";
|
||||
renderer.view.style.left = "50%";
|
||||
renderer.view.style.display = "block";
|
||||
|
||||
|
||||
// add render view to DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
|
||||
// lets create moving shape
|
||||
|
||||
|
||||
var mask1 = new PIXI.Graphics();
|
||||
mask1.beginFill(0);
|
||||
mask1.drawRect(0, 0, 100, 100)
|
||||
|
||||
|
||||
bgFront.mask = mask1;
|
||||
|
||||
|
||||
var mask2 = new PIXI.Graphics();
|
||||
mask2.beginFill(0);
|
||||
mask2.drawRect(500, 100, 100, 100)
|
||||
|
||||
bg.mask = mask2;
|
||||
|
||||
bg.mask = mask2;
|
||||
var count = 0;
|
||||
|
||||
|
||||
stage.click = stage.tap = function()
|
||||
{
|
||||
if(!container.filter)
|
||||
|
|
@ -76,40 +76,40 @@
|
|||
container.mask = null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Add a pixi Logo!
|
||||
*/
|
||||
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
|
||||
stage.addChild(logo);
|
||||
|
||||
|
||||
logo.anchor.x = 1;
|
||||
logo.position.x = 620
|
||||
logo.scale.x = logo.scale.y = 0.5;
|
||||
logo.position.y = 320
|
||||
logo.interactive = true;
|
||||
logo.buttonMode = true;
|
||||
|
||||
|
||||
logo.click = logo.tap = function()
|
||||
{
|
||||
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"});
|
||||
help.position.y = 350;
|
||||
help.position.x = 10;
|
||||
stage.addChild(help);
|
||||
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
||||
function animate() {
|
||||
|
||||
|
||||
bg.rotation += 0.01;
|
||||
bgFront.rotation -= 0.01;
|
||||
|
||||
|
||||
count += 0.1;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
renderer.render(stage);
|
||||
requestAnimFrame( animate );
|
||||
|
|
|
|||
|
|
@ -9,78 +9,78 @@
|
|||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0xFFFFFF, true);
|
||||
|
||||
|
||||
stage.interactive = true;
|
||||
|
||||
|
||||
var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
|
||||
bg.anchor.x = 0.5;
|
||||
bg.anchor.y = 0.5;
|
||||
|
||||
|
||||
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;
|
||||
|
||||
|
||||
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
|
||||
bgFront.anchor.x = 0.5;
|
||||
bgFront.anchor.y = 0.5;
|
||||
|
||||
|
||||
container.addChild(bgFront);
|
||||
|
||||
|
||||
var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
|
||||
light2.anchor.x = 0.5;
|
||||
light2.anchor.y = 0.5;
|
||||
container.addChild(light2);
|
||||
|
||||
|
||||
var light1 = PIXI.Sprite.fromImage("LightRotate1.png");
|
||||
light1.anchor.x = 0.5;
|
||||
light1.anchor.y = 0.5;
|
||||
container.addChild(light1);
|
||||
|
||||
|
||||
var panda = PIXI.Sprite.fromImage("panda.png");
|
||||
panda.anchor.x = 0.5;
|
||||
panda.anchor.y = 0.5;
|
||||
|
||||
|
||||
container.addChild(panda);
|
||||
|
||||
|
||||
stage.addChild(container);
|
||||
|
||||
|
||||
// create a renderer instance
|
||||
var renderer = PIXI.autoDetectRenderer(620, 380);
|
||||
|
||||
|
||||
renderer.view.style.position = "absolute"
|
||||
renderer.view.style.marginLeft = "-310px";
|
||||
renderer.view.style.marginTop = "-190px";
|
||||
renderer.view.style.top = "50%";
|
||||
renderer.view.style.left = "50%";
|
||||
renderer.view.style.display = "block";
|
||||
|
||||
|
||||
// add render view to DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
|
||||
// lets create moving shape
|
||||
var thing = new PIXI.Graphics();
|
||||
stage.addChild(thing);
|
||||
thing.position.x = 620/2;
|
||||
thing.position.y = 380/2;
|
||||
thing.lineStyle(0);
|
||||
|
||||
|
||||
container.mask = thing;
|
||||
|
||||
|
||||
var count = 0;
|
||||
|
||||
|
||||
stage.click = stage.tap = function()
|
||||
{
|
||||
if(!container.filter)
|
||||
|
|
@ -93,45 +93,45 @@
|
|||
container.mask = null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Add a pixi Logo!
|
||||
*/
|
||||
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
|
||||
stage.addChild(logo);
|
||||
|
||||
|
||||
logo.anchor.x = 1;
|
||||
logo.position.x = 620
|
||||
logo.scale.x = logo.scale.y = 0.5;
|
||||
logo.position.y = 320
|
||||
logo.interactive = true;
|
||||
logo.buttonMode = true;
|
||||
|
||||
|
||||
logo.click = logo.tap = function()
|
||||
{
|
||||
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"});
|
||||
help.position.y = 350;
|
||||
help.position.x = 10;
|
||||
stage.addChild(help);
|
||||
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
||||
function animate() {
|
||||
|
||||
|
||||
bg.rotation += 0.01;
|
||||
bgFront.rotation -= 0.01;
|
||||
|
||||
|
||||
light1.rotation += 0.02;
|
||||
light2.rotation += 0.01;
|
||||
|
||||
|
||||
panda.scale.x = 1 + Math.sin(count) * 0.04;
|
||||
panda.scale.y = 1 + Math.cos(count) * 0.04;
|
||||
|
||||
|
||||
count += 0.1;
|
||||
|
||||
|
||||
thing.clear();
|
||||
thing.lineStyle(5, 0x16f1ff, 1);
|
||||
thing.beginFill(0x8bc5ff, 0.4);
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
thing.lineTo(-120 + Math.cos(count)* 20, 100 + Math.sin(count)* 20);
|
||||
thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
|
||||
thing.rotation = count * 0.1;
|
||||
|
||||
|
||||
renderer.render(stage);
|
||||
requestAnimFrame( animate );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,59 +13,59 @@
|
|||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
// create an array of assets to load
|
||||
var assetsToLoader = [ "SpriteSheet.json"];
|
||||
|
||||
|
||||
// create a new loader
|
||||
loader = new PIXI.AssetLoader(assetsToLoader);
|
||||
|
||||
|
||||
// use callback
|
||||
loader.onComplete = onAssetsLoaded
|
||||
|
||||
|
||||
//begin load
|
||||
loader.load();
|
||||
|
||||
|
||||
// holder to store aliens
|
||||
var aliens = [];
|
||||
var alienFrames = ["eggHead.png", "flowerTop.png", "helmlok.png", "skully.png"];
|
||||
|
||||
|
||||
var count = 0;
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0xFFFFFF);
|
||||
|
||||
|
||||
// create a renderer instance.
|
||||
renderer = PIXI.autoDetectRenderer(800, 600);
|
||||
|
||||
|
||||
// add the renderer view element to the DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
|
||||
// create an empty container
|
||||
var alienContainer = new PIXI.DisplayObjectContainer();
|
||||
alienContainer.position.x = 400;
|
||||
alienContainer.position.y = 300;
|
||||
|
||||
|
||||
stage.addChild(alienContainer);
|
||||
|
||||
|
||||
function onAssetsLoaded()
|
||||
{
|
||||
// create a texture from an image path
|
||||
// add a bunch of aliens
|
||||
for (var i = 0; i < 100; i++)
|
||||
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);
|
||||
|
||||
|
||||
/*
|
||||
* fun fact for the day :)
|
||||
* another way of doing the above would be
|
||||
* 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;
|
||||
|
|
@ -73,30 +73,30 @@
|
|||
aliens.push(alien);
|
||||
alienContainer.addChild(alien);
|
||||
}
|
||||
|
||||
|
||||
// start animating
|
||||
requestAnimFrame( animate );
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function animate() {
|
||||
|
||||
|
||||
requestAnimFrame( animate );
|
||||
|
||||
|
||||
// just for fun, lets rotate mr rabbit a little
|
||||
for (var i = 0; i < 100; i++)
|
||||
for (var i = 0; i < 100; i++)
|
||||
{
|
||||
var alien = aliens[i];
|
||||
alien.rotation += 0.1;
|
||||
}
|
||||
|
||||
|
||||
count += 0.01;
|
||||
alienContainer.scale.x = Math.sin(count)
|
||||
alienContainer.scale.y = Math.sin(count)
|
||||
|
||||
|
||||
alienContainer.rotation += 0.01
|
||||
// render the stage
|
||||
// render the stage
|
||||
renderer.render(stage);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,71 +16,71 @@
|
|||
|
||||
// create an array of assets to load
|
||||
var assetsToLoader = [ "SpriteSheet.json"];
|
||||
|
||||
|
||||
// create a new loader
|
||||
loader = new PIXI.AssetLoader(assetsToLoader);
|
||||
|
||||
|
||||
// use callback
|
||||
loader.onComplete = onAssetsLoaded
|
||||
|
||||
|
||||
//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);;
|
||||
|
||||
|
||||
// create a renderer instance.
|
||||
renderer = PIXI.autoDetectRenderer(800, 600);
|
||||
|
||||
|
||||
// add the renderer view element to the DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
|
||||
function onAssetsLoaded()
|
||||
{
|
||||
// create an array to store the textures
|
||||
var explosionTextures = [];
|
||||
|
||||
for (var i=0; i < 26; i++)
|
||||
|
||||
for (var i=0; i < 26; i++)
|
||||
{
|
||||
var texture = PIXI.Texture.fromFrame("Explosion_Sequence_A " + (i+1) + ".png");
|
||||
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
|
||||
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.gotoAndPlay(Math.random() * 27);
|
||||
|
||||
|
||||
stage.addChild(explosion);
|
||||
}
|
||||
|
||||
|
||||
// start animating
|
||||
requestAnimFrame( animate );
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function animate() {
|
||||
|
||||
|
||||
requestAnimFrame( animate );
|
||||
|
||||
renderer.render(stage);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Pixi Balls by Photon Storm</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0" />
|
||||
<link rel="stylesheet" href="storm.css">
|
||||
<link rel="stylesheet" href="storm.css">
|
||||
<script src="jquery-1.8.3.min.js"></script>
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
renderer = PIXI.autoDetectRenderer(w, h);
|
||||
|
||||
stage = new PIXI.Stage;
|
||||
|
||||
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
for (var i = 0; i < starCount; i++)
|
||||
|
|
@ -77,10 +77,10 @@
|
|||
{
|
||||
w = $(window).width() - 16;
|
||||
h = $(window).height() - 16;
|
||||
|
||||
|
||||
slideX = w / 2;
|
||||
slideY = h / 2;
|
||||
|
||||
|
||||
renderer.resize(w, h);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Pixi Morph by Photon Storm</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0" />
|
||||
<link rel="stylesheet" href="storm.css">
|
||||
<link rel="stylesheet" href="storm.css">
|
||||
<script src="jquery-1.8.3.min.js"></script>
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
renderer = PIXI.autoDetectRenderer(w, h);
|
||||
|
||||
stage = new PIXI.Stage;
|
||||
|
||||
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
makeObject(0);
|
||||
|
|
@ -298,7 +298,7 @@
|
|||
{
|
||||
w = $(window).width() - 16;
|
||||
h = $(window).height() - 16;
|
||||
|
||||
|
||||
renderer.resize(w, h);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
padding: 0;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
|
||||
#help{
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
|
|
@ -19,71 +19,71 @@
|
|||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
// the second parameter is interactivity...
|
||||
var interactive = true;
|
||||
var stage = new PIXI.Stage(0x000000, interactive);
|
||||
|
||||
|
||||
// create a renderer instance.
|
||||
var renderer = PIXI.autoDetectRenderer(620, 400);
|
||||
|
||||
|
||||
// add the renderer view element to the DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
|
||||
requestAnimFrame( animate );
|
||||
|
||||
|
||||
// create a background..
|
||||
var background = PIXI.Sprite.fromImage("button_test_BG.jpg");
|
||||
|
||||
|
||||
// add background to stage..
|
||||
stage.addChild(background);
|
||||
|
||||
|
||||
// create some textures from an image path
|
||||
var textureButton = PIXI.Texture.fromImage("button.png");
|
||||
var textureButtonDown = PIXI.Texture.fromImage("buttonDown.png");
|
||||
var textureButtonOver = PIXI.Texture.fromImage("buttonOver.png");
|
||||
|
||||
|
||||
var buttons = [];
|
||||
|
||||
|
||||
var buttonPositions = [175,75,
|
||||
600-145, 75,
|
||||
600/2 - 20, 400/2 + 10,
|
||||
175, 400-75,
|
||||
600-115, 400-95];
|
||||
|
||||
|
||||
for (var i=0; i < 5; i++)
|
||||
|
||||
|
||||
for (var i=0; i < 5; i++)
|
||||
{
|
||||
var button = new PIXI.Sprite(textureButton);
|
||||
button.buttonMode = true;
|
||||
|
||||
|
||||
button.anchor.x = 0.5;
|
||||
button.anchor.y = 0.5;
|
||||
|
||||
|
||||
button.position.x = buttonPositions[i*2];
|
||||
button.position.y = buttonPositions[i*2 + 1];
|
||||
|
||||
// make the button interactive..
|
||||
|
||||
// make the button interactive..
|
||||
button.interactive = true;
|
||||
|
||||
|
||||
// set the mousedown and touchstart callback..
|
||||
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){
|
||||
this.isdown = false;
|
||||
|
||||
|
||||
if(this.isOver)
|
||||
{
|
||||
this.setTexture(textureButtonOver);
|
||||
|
|
@ -93,82 +93,82 @@
|
|||
this.setTexture(textureButton);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// set the mouseover callback..
|
||||
button.mouseover = function(data){
|
||||
|
||||
|
||||
this.isOver = true;
|
||||
|
||||
|
||||
if(this.isdown)return
|
||||
|
||||
|
||||
this.setTexture(textureButtonOver)
|
||||
}
|
||||
|
||||
|
||||
// set the mouseout callback..
|
||||
button.mouseout = function(data){
|
||||
|
||||
|
||||
this.isOver = false;
|
||||
if(this.isdown)return
|
||||
this.setTexture(textureButton)
|
||||
}
|
||||
|
||||
|
||||
button.click = function(data){
|
||||
// click!
|
||||
console.log("CLICK!");
|
||||
// alert("CLICK!")
|
||||
}
|
||||
|
||||
|
||||
button.tap = function(data){
|
||||
// click!
|
||||
console.log("TAP!!");
|
||||
//this.alpha = 0.5;
|
||||
}
|
||||
|
||||
|
||||
// add it to the stage
|
||||
stage.addChild(button);
|
||||
|
||||
|
||||
// add button to array
|
||||
buttons.push(button);
|
||||
};
|
||||
|
||||
|
||||
// set some silly values..
|
||||
|
||||
|
||||
buttons[0].scale.x = 1.2;
|
||||
|
||||
|
||||
buttons[1].scale.y = 1.2;
|
||||
|
||||
|
||||
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;
|
||||
// var button1 =
|
||||
// var button1 =
|
||||
function animate() {
|
||||
|
||||
|
||||
requestAnimFrame( animate );
|
||||
// render the stage
|
||||
|
||||
// render the stage
|
||||
|
||||
// do a test..
|
||||
|
||||
|
||||
renderer.render(stage);
|
||||
}
|
||||
|
||||
|
||||
// add a logo!
|
||||
var pixiLogo = PIXI.Sprite.fromImage("pixi.png");
|
||||
stage.addChild(pixiLogo);
|
||||
|
||||
|
||||
pixiLogo.position.x = 620 - 56;
|
||||
pixiLogo.position.y = 400- 32;
|
||||
|
||||
|
||||
pixiLogo.setInteractive(true);
|
||||
|
||||
|
||||
pixiLogo.click = pixiLogo.tap = function(){
|
||||
|
||||
|
||||
var win=window.open("https://github.com/GoodBoyDigital/pixi.js", '_blank');
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
padding: 0;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.textHolder{
|
||||
width: 400px;
|
||||
}
|
||||
|
|
@ -27,43 +27,43 @@
|
|||
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, null, true);
|
||||
|
||||
|
||||
// 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 );
|
||||
|
||||
|
||||
// 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);
|
||||
|
||||
|
||||
// center the sprites anchor point
|
||||
bunny.anchor.x = 0.5;
|
||||
bunny.anchor.y = 0.5;
|
||||
|
||||
|
||||
// move the sprite t the center of the screen
|
||||
bunny.position.x = 200;
|
||||
bunny.position.y = 150;
|
||||
|
||||
|
||||
stage.addChild(bunny);
|
||||
|
||||
|
||||
function animate() {
|
||||
|
||||
|
||||
requestAnimFrame( animate );
|
||||
|
||||
|
||||
// just for fun, lets rotate mr rabbit a little
|
||||
bunny.rotation += 0.1;
|
||||
|
||||
// render the stage
|
||||
|
||||
// render the stage
|
||||
renderer.render(stage);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.textHolder{
|
||||
width: 400px;
|
||||
}
|
||||
|
|
@ -18,52 +18,52 @@
|
|||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0x97c56e, true);
|
||||
|
||||
|
||||
// create a renderer instance
|
||||
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);
|
||||
|
||||
|
||||
// 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 );
|
||||
|
||||
|
||||
// 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)
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
function createBunny(x, y)
|
||||
{
|
||||
// create our little bunny friend..
|
||||
var bunny = new PIXI.Sprite(texture);
|
||||
// bunny.width = 300;
|
||||
// enable the bunny to be interactive.. this will allow it to respond to mouse and touch events
|
||||
// enable the bunny to be interactive.. this will allow it to respond to mouse and touch events
|
||||
bunny.interactive = true;
|
||||
// this button mode will mean the hand cursor appears when you rollover the bunny with your mouse
|
||||
bunny.buttonMode = true;
|
||||
|
||||
|
||||
// center the bunnys anchor point
|
||||
bunny.anchor.x = 0.5;
|
||||
bunny.anchor.y = 0.5;
|
||||
// make it a bit bigger, so its easier to touch
|
||||
bunny.scale.x = bunny.scale.y = 3;
|
||||
|
||||
|
||||
|
||||
|
||||
// use the mousedown and touchstart
|
||||
bunny.mousedown = bunny.touchstart = function(data)
|
||||
{
|
||||
// stop the default event...
|
||||
data.originalEvent.preventDefault();
|
||||
|
||||
|
||||
// store a refference to the data
|
||||
// The reason for this is because of multitouch
|
||||
// we want to track the movement of this particular touch
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
this.alpha = 0.9;
|
||||
this.dragging = true;
|
||||
};
|
||||
|
||||
|
||||
// set the events for when the mouse is released or a touch is released
|
||||
bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data)
|
||||
{
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
// set the interaction data to null
|
||||
this.data = null;
|
||||
};
|
||||
|
||||
|
||||
// set the callbacks for when the mouse or a touch moves
|
||||
bunny.mousemove = bunny.touchmove = function(data)
|
||||
{
|
||||
|
|
@ -92,22 +92,22 @@
|
|||
this.position.y = newPosition.y;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// move the sprite to its designated position
|
||||
bunny.position.x = x;
|
||||
bunny.position.y = y;
|
||||
|
||||
|
||||
// add it to the stage
|
||||
stage.addChild(bunny);
|
||||
}
|
||||
|
||||
|
||||
function animate() {
|
||||
|
||||
|
||||
requestAnimFrame( animate );
|
||||
|
||||
|
||||
// just for fun, lets rotate mr rabbit a little
|
||||
//stage.interactionManager.update();
|
||||
// render the stage
|
||||
// render the stage
|
||||
renderer.render(stage);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.textHolder{
|
||||
width: 400px;
|
||||
}
|
||||
|
|
@ -18,47 +18,47 @@
|
|||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0x97c56e, true);
|
||||
|
||||
|
||||
// create a renderer instance
|
||||
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);
|
||||
|
||||
|
||||
// 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 );
|
||||
|
||||
|
||||
// create a texture from an image path
|
||||
var texture = PIXI.Texture.fromImage("p2.jpeg");
|
||||
|
||||
|
||||
// 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;
|
||||
|
||||
|
||||
stage.addChild(tilingSprite);
|
||||
|
||||
function animate() {
|
||||
|
||||
|
||||
requestAnimFrame( animate );
|
||||
|
||||
|
||||
|
||||
|
||||
count += 0.005
|
||||
tilingSprite.tileScale.x = 2 + Math.sin(count);
|
||||
tilingSprite.tileScale.y = 2 + Math.cos(count);
|
||||
|
||||
|
||||
tilingSprite.tilePosition.x += 1;
|
||||
tilingSprite.tilePosition.y += 1;
|
||||
|
||||
|
||||
// just for fun, lets rotate mr rabbit a little
|
||||
//stage.interactionManager.update();
|
||||
// render the stage
|
||||
// render the stage
|
||||
renderer.render(stage);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue