<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 2 loading a sprite sheet</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../../bin/pixi.dev.js"></script>
</head>
<body>
<script>
// create an array of assets to load
var assetsToLoader = [ "fighter.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 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);
renderer = new PIXI.CanvasRenderer(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
var frames = [];
for (var i = 0; i < 30; i++) {
var val = i < 10 ? "0" + i : i;
frames.push(PIXI.Texture.fromFrame("rollSequence00" + val + ".png"));
};
movie = new PIXI.MovieClip(frames);
movie.position.x = 300;
movie.position.y = 300;
movie.anchor.x = movie.anchor.y = 0.5;
movie.play();
movie.animationSpeed = 0.5;
stage.addChild(movie);
// start animating
requestAnimFrame(animate);
}
function animate() {
movie.rotation += 0.01;
// render the stage
renderer.render(stage);
requestAnimFrame(animate);
}
</script>
</body>
</html>
