本示例简单演示如何创建一个Pixi项目，以及制作一个滚动场景。
首先下载源码：https://github.com/GoodBoyDigital/pixi.js
1.配置canvas：
<head lang="en">
<meta charset="UTF-8">
<title>MyPixi</title>
<style>
body { background-color: #000000; }
canvas { background-color: #222222; }
</style>
<script type="text/javascript" src="lib/pixi.js-master/bin/pixi.dev.js"></script>
</head>
<body >
<div align="center">
<canvas id="game-canvas" width="512" height="384"> </canvas>
</div>
</body>
2.包含Pixi.js到代码中：
<script src="pixi.js-master/bin/pixi.dev.js"></script>
3.创建一个初始化方法：
<body >
4.初始化方法：
<body >
<div align="center">
<canvas id="game-canvas" width="512" height="384"></canvas>
</div>
<script>
function init()
{
console.log("init() successfully called.");
//首先定义一个舞台
this.stage = new PIXI.Stage(0x66FF99);
// 创建一个渲染使舞台渲染到浏览器上
this.renderer = PIXI.autoDetectRenderer(
512,
384,
{view:document.getElementById("game-canvas")}
);
//创建远景材质
var farTexture = PIXI.Texture.fromImage("resources/bg-far.png");
//实现无缝循环滚动，需要使用TilingSprite，这里宽高已经写死，也可用通过farTexture.baseTexture.width,farTexture.baseTexture.height获取动态宽高
this.far = new PIXI.TilingSprite(farTexture,512,256);
this.far.tilePosition.x = 0;
this.far.tilePosition.y = 0;
this.stage.addChild(this.far);
//近景材质
var midTexture = PIXI.Texture.fromImage("resources/bg-mid.png");
//近景sprite，同理
this.mid = new PIXI.TilingSprite(midTexture,512,256);
this.mid.position.x = 0;
this.mid.position.y = 128;
this.stage.addChild(this.mid);
//渲染浏览器画面
this.renderer.render(this.stage);
//动画
requestAnimFrame(update);
}
function update() {
this.far.tilePosition.x -= 0.128;
this.mid.tilePosition.x -= 0.64;
renderer.render(stage);
//循环滚动
requestAnimFrame(update);
}
</script>
</body>
项目下载：http://files.cnblogs.com/files/theodore/scrollpixi.rar
时间： 2024-10-09 01:04:38