63 lines
1.3 KiB
HTML
63 lines
1.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>pixi.js example 9 Tiling Texture</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #FFFFFF;
|
|
|
|
}
|
|
</style>
|
|
<script src="../../bin/pixi.dev.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
|
|
// create an new instance of a pixi stage
|
|
var stage = new PIXI.Stage(0x97c56e, true);
|
|
|
|
// create a renderer instance
|
|
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);
|
|
|
|
// add the renderer view element to the DOM
|
|
document.body.appendChild(renderer.view);
|
|
renderer.view.style.position = "absolute";
|
|
renderer.view.style.top = "0px";
|
|
renderer.view.style.left = "0px";
|
|
|
|
requestAnimFrame(animate);
|
|
|
|
// create a texture from an image path
|
|
var texture = PIXI.Texture.fromImage("p2.jpeg");
|
|
|
|
// create a tiling sprite ...
|
|
// requires a texture, width and height
|
|
// to work in webGL the texture size must be a power of two
|
|
var tilingSprite = new PIXI.TilingSprite(texture, window.innerWidth, window.innerHeight)
|
|
|
|
var count = 0;
|
|
|
|
stage.addChild(tilingSprite);
|
|
|
|
function animate() {
|
|
|
|
requestAnimFrame(animate);
|
|
|
|
count += 0.005;
|
|
|
|
tilingSprite.tileScale.x = 2 + Math.sin(count);
|
|
tilingSprite.tileScale.y = 2 + Math.cos(count);
|
|
|
|
tilingSprite.tilePosition.x += 1;
|
|
tilingSprite.tilePosition.y += 1;
|
|
|
|
// render the stage
|
|
renderer.render(stage);
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|