【Pixi.js从零开始】开始使用Pixi游戏引擎

浏览数：175 / 时间：2015年06月09日

本示例简单演示如何创建一个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 onload="init()">
    <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 onload="init();">

4.初始化方法：

<body onload="init()">
    <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>