H5 2D渲染引擎—Pixi.js 渲染器、舞台和精灵的创建

此文章的思路：

1️⃣ 创建渲染器

在页面上创建动画的第一步就是创建渲染器，也就是动画播放的区域，Pixi中的 renderer函数或者 application类会自动创建canvas画布来显示图像：

① renderer函数

var renderer = PIXI.autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

访问页面，就可以看到已经有一个256*256的canvas元素了。

其中，第一个和第二个参数为宽度和高度，还有可选的第三参数（对象）用来设置一些附加值：

backgroundColor：默认为0x000000，设置渲染区域的背景色（在不设置透明的情况下）；

transparent 透明度：默认为false，设置画布背景的透明与否；

antialias 反走样技术/抗锯齿：默认为false，平滑字体和图片的边缘，目前只有Chrome浏览器支持；

resolution 分辨率：默认为1，方便使用不同分辨率和像素密度的显示器工作，详细设置参考Mat Grove关于如何为所有细节使用分辨率的说明。大多数项目中，分辨率保持1即可；

clearBeforeRender：默认为true，设置在新的渲染之前是否清除画布；

preserveDrawingBuffer 缓冲区保护：默认为false，如果在WebGL 画布上下文需要使用 dataToURL方法需要将其设为true；。

renderer = PIXI.autoDetectRenderer(
  256, 256,
  {backgroundColor: 0xce71e3, antialias: false, transparent: false, resolution: 1}
);

渲染器的宽度和高度可以通过 renderer.view.width 和 renderer.view.height 来获取。

如需要改变渲染器的大小，可以使用 renderer 的 resize 方法并提供新的宽高值。但为了确保画布大小和分辨率的适配，需要将 autoResize 设为 true。

renderer.autoResize = true;
renderer.resize(512, 512);

如果需要将渲染器设置为窗口大小，可以通过以下进行设置：

renderer.view.style.position = "absolute";
renderer.view.style.display = "block";
renderer.view.autoResize = true;
renderer.resize(window.innerWidth, window.innerHeight);

除了 autoDetectRenderer ，还有 CanvasRenderer 和WebGLRenderer ，autoDetectRenderer可以根据客户端对WebGL的支持自动创建 WebGL 或者Canvas renderer。

②application 类

var app = new PIXI.Application(256, 256, {
    backgroundColor: 0xce71e3
});
document.body.appendChild(app.view);

访问页面，就可以看到已经有一个256*256大小背景为紫色的canvas元素了。其参数设置同renderer 函数。

2️⃣创建舞台容器 container

渲染器创建好了，简单的demo就可以直接创建精灵渲染了。但如果是写游戏或者更复杂的动画类项目时，页面上的元素会非常多，为了方便项目管理和维护，需要创建一个舞台容器container。它里面可以添加不同的元素，甚至可以添加容器，最后由渲染器渲染舞台。相当于一个顶级的容器。

var container = new PIXI.Container();
renderer.render(container);

舞台容器创建好了， But，现在的舞台还是空哒，创建精灵，走起。

3️⃣创建精灵 sprite

在动画中最重要的元素是图片/材质，这类特殊的图片对象在Pixi中称为精灵 sprite，通过控制 sprite 的大小，位置及其他属性，达到动画的效果。学会创建及控制精灵，是学习 pixi 最重要的一个技能，也是学习制作游戏和动画的第一步。

在 pixi 中有一个 sprite 类，可以根据外部的图片（材质）来创建一个可以在pixi中使用的对象。有三种不同的方式创建：

1>从某个单独的图片创建；

 var sun = PIXI.Sprite.fromImage('img/sun.ico');

2>从整个材质图片创建；

var texture = PIXI.Texture.fromImage('img/sun.ico');
var sun = new PIXI.Sprite(texture);

3>从材质集创建。

材质集是一个json文件，定义图片集里图片的位置和大小等。可以使用Texture Packer来创建一个tps，创建后会生成一张包含所有图片的图片以及定义了图片位置的json文件。以之前做的一个破冰demo为例：

json 文件如下：

{"frames": {

"header1_bak.png":
{
	"frame": {"x":2,"y":2,"w":750,"h":580},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":0,"y":17,"w":750,"h":580},
	"sourceSize": {"w":750,"h":616}
},
"owl.jpg":
{
	"frame": {"x":2,"y":584,"w":650,"h":393},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":650,"h":393},
	"sourceSize": {"w":650,"h":393}
},
"sun.ico":
{
	"frame": {"x":754,"y":2,"w":128,"h":123},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":123},
	"sourceSize": {"w":128,"h":123}
},
"sun2.ico":
{
	"frame": {"x":884,"y":2,"w":126,"h":124},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":1,"y":3,"w":126,"h":124},
	"sourceSize": {"w":128,"h":128}
}},
"meta": {
	"app": "http://www.codeandweb.com/texturepacker ",
	"version": "1.0",
	"image": "demo.png",
	"format": "RGBA8888",
	"size": {"w":1024,"h":1024},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:8a1e2d8d6d36b513d31dcac230e74627:1/1$"
}
}

在pixi中有一个 loader 类来管理图片的加载，并且在加载完成后调用回调函数处理。加载完成后可以通过 PIXI.loader.resources 来获取加载的图片。

PIXI.loader
  .add('img/demo.json')
  .load(loaded);
function loaded() {
  var sun = new Sprite(
    PIXI.loader.resources["img/demo.json"].textures["sun.png"]
  );
  container.addChild(sun);
}

现在，精灵创建好了，把精灵放到舞台容器上去--->

container.addChild(sun);

各位亲，不要忘了，还有最最最关键的一步，那就是把舞台容器添加到渲染器上。

①renderer 渲染器

renderer.render(container);

②application 渲染器

app.stage.addChild(container);

或者，小demo可以直接将精灵添加到渲染器上：

①renderer 渲染器

renderer.render(sprite);

②application 渲染器

app.stage.addChild(sprite);

有时候，当我们不需要展示这个精灵了怎么办呢？下面两种方法依据自己项目情况使用：

stage.removeChild(anySprite);

anySprite.visible = false;

注：

现在，有种特殊情况，在使用 autoDetectRenderer 渲染器进行渲染，并且使用单独的图片或者材质创建精灵时，在网页上只能看到黑色或者你设置的颜色的背景，这是因为精灵的创建是异步的，必须等到加载完图片之后才能把精灵加入到舞台上。这就需要不断的去刷新舞台：

requestAnimationFrame(animate);
function animate(){
    renderer.render(stage);
    requestAnimationFrame(animate);
}

同时，若想让精灵动起来（旋转，位移，缩放等等），代码需要放到 animate函数里执行，才能达到动画的效果。

针对 application 渲染器 ，动画更新渲染的函数如下：

app.ticker.add(function(delta) {
  container.rotation -= 0.01 * delta;
})

我的思路很清晰，就是不知道你们能不能看的很清晰了

，下面直接上代码。

renderer渲染器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="libs/pixi.min.js"></script>
<script>

    // 设置渲染器,并添加到页面上
    var renderer = PIXI.autoDetectRenderer(600, 600, {transparent: true});
    document.body.appendChild(renderer.view);
    // 创建舞台容器
    var stage = new PIXI.Container();
    // 创建精灵,并添加到舞台容器上
    var sprite = PIXI.Sprite.fromImage('img/sun.jpg');
    sprite.scale.set(0.3);
    stage.addChild(sprite);
    // 将舞台容器通过渲染器进行渲染
    renderer.render(stage);
    // 每次更新渲染的监听函数
    requestAnimationFrame(animate);
    function animate(){
        renderer.render(stage);
        requestAnimationFrame(animate);
    }

</script>
</body>
</html>

application 渲染器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="libs/pixi.min.js"></script>
<script>

    // 设置渲染器,并添加到页面上
    var app = new PIXI.Application(800, 600, {backgroundColor : 0x92edfb, transparent: false});
    document.body.appendChild(app.view);

    // 创建一个图片精灵
    var texture = PIXI.Texture.fromImage('img/sun.ico');
    var sun = new PIXI.Sprite(texture);
    // 设置精灵中心位置
    sun.anchor.set(1);
    // 设置精灵在x轴/y轴的位置
    sun.x = app.renderer.width / 2;
    sun.y = app.renderer.height / 2;
    // 将精灵添加到舞台
    app.stage.addChild(sun);

    // 动画更新渲染的监听函数
    app.ticker.add(function(delta) {
        sun.rotation += 0.01 * delta;
    });

</script>
</body>
</html>

OK，然后，你就可以把你能想到的动画效果实现出来了。

H5 2D渲染引擎—Pixi.js 渲染器、舞台和精灵的创建

猜你喜欢