<!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>
<script src="pixi.dev.js"></script>
</head>
<body>
<script>
// holder to store aliens
var count = 0;
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xace455);
// create a renderer instance.
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
var target = new PIXI.Point();
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
// create an empty container
count = 0;
// build a rope!
var length = 918 / 20;
points = [];
for (var i = 0; i < 20; i++) {
var segSize = length;
points.push(new PIXI.Point(i * length, 0));
};
strip = new PIXI.Rope(PIXI.Texture.fromImage("snake.png"), points);
strip.x = -918/2;
var snakeContainer = new PIXI.DisplayObjectContainer();
snakeContainer.position.x = window.innerWidth/2;
snakeContainer.position.y = window.innerHeight/2;
snakeContainer.scale.set( window.innerWidth / 1100)
stage.addChild(snakeContainer);
snakeContainer.addChild(strip);
// start animating
requestAnimFrame(animate);
function animate() {
count += 0.1;
var length = 918 / 20;
for (var i = 0; i < points.length; i++) {
points[i].y = Math.sin(i *0.5 + count) * 30;
points[i].x = i * length + Math.cos(i *0.3 + count) * 20;
};
// render the stage
renderer.render(stage);
requestAnimFrame(animate);
}
</script>
</body>
</html>
