PIXI Experiment

by Konstantin Cryman

CSS

#demo{
  width: 320px;
  height: 240px;
}

JavaScript

// http://pixijs.github.io/examples/required/assets/basics/bunny.png

var renderer = PIXI.autoDetectRenderer( 320, 240 , {backgroundColor : 0x1099bb } );
document.body.appendChild(renderer.view);
renderer.view.id = 'demo';
console.log( renderer, PIXI );








// create the root of the scene graph
var stage = new PIXI.Container();

var container = new PIXI.Container();

stage.addChild(container);

function presetActions(bunny){
        bunny.interactive = true;
        bunny.on('mousedown', function(){ 
        	bunny.destroy() 
        });
        bunny.on('touchstart', function(){ 
        	bunny.destroy() 
        });
};

for (var j = 0; j < 6; j++) {
    for (var i = 0; i < 12; i++) {
        var bunny = PIXI.Sprite.fromImage('http://pixijs.github.io/examples/required/assets/basics/bunny.png');
        bunny.scale.set( 0.6,0.6);
        bunny.x = 25 * i;
        bunny.y = 25 * j;
				presetActions(bunny);
        container.addChild(bunny);
    };
};
        console.log( container , new PIXI.Point( 100, 100 ) );
/*
 * All the bunnies are added to the container with the addChild method
 * when you do this, all the bunnies become children of the container, and when a container moves,
 * so do all its children.
 * This gives you a lot of flexibility and makes it easier to position elements on the screen
 */
container.x = 15;
container.y = 20;

// start animating
animate();

function animate() {

    requestAnimationFrame(animate);

    // render the root container
    renderer.render(stage);
}