Pixi sprite demo

by Juan Muñoz

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/1.5.1/pixi.js"></script>
<body>
    <div>FPS: <span id="fps">?</span> Sprites: <span id="sprites">?</span></div>
    <canvas id="pixicanvas"></canvas>
</body>

JavaScript

var spritesContainer = PIXI.SpriteBatch;
// var spritesContainer = PIXI.DisplayObjectContainer;
var spritesPerFrame = 1;
var spriteAlpha = 1;

var spriteURL = 'http://www.goodboydigital.com/pixijs/bunnymark/js/bunny.png';

var width = 800;
var height = 400;

var canvas = document.getElementById('pixicanvas');
var renderer = new PIXI.WebGLRenderer(width, height, canvas);
var stage = new PIXI.Stage(0x000000);
var clock = new Clock();
var fpsEl = document.getElementById('fps');
var spritesEl = document.getElementById('sprites');

var sprites = new spritesContainer();
stage.addChild(sprites);

requestAnimFrame(update);

function update(time)
{
    requestAnimFrame(update);
    clock.update(time);
    
    for (var i=0; i<sprites.children.length; i++)
    {
        var sprite = sprites.children[i];
        sprite.position.x += sprite.velocity.x * clock.delta;
        sprite.position.y += sprite.velocity.y * clock.delta;
        sprite.rotation += sprite.rotationVelocity * clock.delta;
        
        if (sprite.position.x > width + (sprite.width / 2))
        {
            sprites.removeChild(sprite);
        }
    }
    
    for (var i=0; i<spritesPerFrame; i++)
    {
        var sprite = new PIXI.Sprite.fromImage(spriteURL),
            posX = sprite.width / 2,
            posY = randint(sprite.height, height - (sprite.height / 2)),
            velX = randint(40, 100),
            velY = randint(-10, 10);
        
        sprite.anchor.set(0.5, 0.5);
        sprite.velocity = new PIXI.Point(velX, velY);
        sprite.rotationVelocity = randint(-5, 5);
        sprite.position.set(posX, posY);
        sprite.alpha = spriteAlpha;
        sprites.addChild(sprite);
    }
    
    fpsEl.innerHTML = clock.fps;
    spritesEl.innerHTML = sprites.children.length;
    
    renderer.render(stage);
}

function Clock()
{
    this.delta = 0;
    this.deltaPrevTime = 0;
    
    this.fps = 0;
    this.fpsPrevTime = 0;
    this.fpsPrevFrames = 0;
}

Clock.prototype.update =...