<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 10 using a movieclip</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
<script src="../../src/pixi/DisplayObjectContainer.js"></script>
<script src="../../src/pixi/renderers/WebGLRenderGroup.js"></script>
<script src="../../src/pixi/renderers/WebGLRenderer.js"></script>
<script src="../../src/pixi/textures/RenderTexture.js"></script>
<script src="../../src/pixi/renderers/WebGLBatch.js"></script>
<script src="../../src/pixi/renderers/CanvasRenderer.js"></script>
</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 explosions = [];
var count = 0;
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFF0FF, true);;
// create a renderer instance.
renderer = PIXI.autoDetectRenderer(800, 600);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
// DOOMP
var renderTexture = new PIXI.RenderTexture(256, 256)/////* 2, 128 * 2);
var sprite = new PIXI.Sprite(renderTexture);
var renderTexture2 = new PIXI.RenderTexture(256, 256)/////* 2, 128 * 2);
var sprite2 = new PIXI.Sprite(renderTexture2);
//sprite.anchor.x = 0.5;
//sprite.anchor.y = 0.5;
//sprite.scale.y = .5;
// sprite.position.x = 300;
// sprite.position.y = 200;
var bg = PIXI.Sprite.fromImage("button_test_BG.png");
stage.addChild(bg)
var container = new PIXI.DisplayObjectContainer();
var container2 = new PIXI.DisplayObjectContainer();
stage.addChild(container);
container.addChild(container2);
//
stage.addChild(sprite2);
function onAssetsLoaded()
{
// create an array to store the textures
var explosionTextures = [];
for (var i=0; i < 26; i++)
{
var texture = PIXI.Texture.fromFrame("Explosion_Sequence_A " + (i+1) + ".png");
explosionTextures.push(texture);
};
// explosionTextures.push(PIXI.Texture.fromImage("button_test_BG.png"));
// create a texture from an image path
// add a bunch of aliens
for (var i = 0; i < 150; i++)
{
// create an explosion MovieClip
var explosion = new PIXI.MovieClip(explosionTextures);
//if(i % 2)
{
explosion = new PIXI.MovieClip([PIXI.Texture.fromImage("button_test_BG.png")]);
container2.addChild(explosion);
}
// else
{
// container.addChild(explosion);
}
explosion.position.x = Math.random() * 800;
explosion.position.y =Math.random() * 600;
// explosion.anchor.x = 0.5;
//explosion.anchor.y = 0.5;
// 670 × 432
// explosion.pivot.x = 670/2;
explosion.pivot.y = 432/2;
//explosion.rotation = Math.random() * Math.PI;
explosion.scale.x = explosion.scale.y = 1//0.3//0.75 + Math.random() * 0.5
explosion.animationSpeed = 0.1
explosion.gotoAndPlay(Math.random() * 27);
explosion.buttonMode = true;
// TODO BUG>??
explosion.setInteractive(true);
explosion.click = function(){
// console.log("REMOVEIN!")
//this.visible = false;
this.rotation += Math.PI/10
// this.parent.removeChild(this);
}
}
//∆∆container2.addChild();
stage.addChild(sprite);
sprite.alpha = 1
sprite.position.x = 300;
sprite.position.y = 300;
// start animating
requestAnimFrame( animate );
//container.alpha = 0.5
}
bloop= true;
function animate() {
//sprite.rotation += 0.01;
// console.log(stage.children)
requestAnimFrame( animate );
//stage.children[2]);
renderer.render(stage);
// if(count < 100)
{
bloop = !bloop;
if(bloop )
{
// container.visible = false;
}
else
{
// container.visible = true;
renderTexture2.render(bg, true);
}
}
count++;
if(count == 100)
{
// alert("!")
// stage.removeChild(container);
// renderTexture.render(container, true);
//}
// else if(count > 200)
//{
}
if(count == 200)
{
//
// stage.addChild(container);
//container.removeChild(container2);
}
if(count > 300)
{
// renderTexture2.render(container, true);
//sprite2.scale.x = 10
// renderTexture.render(container, true);
}
else
{
renderTexture2.render(container, true);
}
// container.visible = false;
}
count = 0;
</script>
</body>
</html>
