85 lines
2 KiB
HTML
85 lines
2 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>pixi.js example 1</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #000000;
|
|
}
|
|
</style>
|
|
<script src="../../bin/pixi.dev.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<script>
|
|
|
|
// create an new instance of a pixi stage
|
|
var stage = new PIXI.Stage(0x66FF99);
|
|
|
|
// create a renderer instance
|
|
var renderer = PIXI.autoDetectRenderer(400, 300);
|
|
|
|
// add the renderer view element to the DOM
|
|
document.body.appendChild(renderer.view);
|
|
|
|
requestAnimFrame( animate );
|
|
|
|
// create a texture from an image path
|
|
var texture = PIXI.Texture.fromImage("bunny.png");
|
|
// create a new Sprite using the texture
|
|
var bunny = new PIXI.Sprite(texture);
|
|
|
|
// center the sprites anchor point
|
|
bunny.anchor.x = 0.5;
|
|
bunny.anchor.y = 0.5;
|
|
|
|
// move the sprite t the center of the screen
|
|
bunny.position.x = 200;
|
|
bunny.position.y = 150;
|
|
|
|
stage.addChild(bunny);
|
|
|
|
|
|
source = {};
|
|
|
|
source.Canvas = document.createElement("canvas")// $('<canvas></canvas>')[0];
|
|
source.Canvas.width = 256; source.Canvas.height = 256;
|
|
source.Canvas.context = source.Canvas.getContext('2d');
|
|
source.Canvas.context.fillStyle = "#FF0000";
|
|
source.Canvas.context.fillRect(0,0,256,256)
|
|
//Split Canvas into multiple textures
|
|
source.Frames = [];
|
|
|
|
|
|
for(i=0;i<4;i++)
|
|
for(ii=0;ii<4;ii++) {
|
|
var tex = PIXI.Texture.fromCanvas(source.Canvas);
|
|
tex.setFrame({x:ii*32,y:i*32,width:32,height:32});
|
|
source.Frames[(ii+(i*4))] = tex;
|
|
}
|
|
source.Sprite = new PIXI.MovieClip(source.Frames);
|
|
source.Sprite.animationSpeed = 0.1;
|
|
source.Sprite.currentFrame = 0;
|
|
source.Sprite.play();
|
|
stage.addChild(source.Sprite);
|
|
|
|
|
|
|
|
function animate() {
|
|
|
|
requestAnimFrame( animate );
|
|
|
|
// just for fun, lets rotate mr rabbit a little
|
|
bunny.rotation += 0.1;
|
|
|
|
// console.log(stage.getBounds().width);
|
|
// render the stage
|
|
renderer.render(stage);
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|