2D WebGL renderer Pixi.js v4 入门【第一回】

正在召唤神秘力量

导航

2D WebGL renderer Pixi.js v4 入门【第一回】

作者：广树·时间：2018-08-31 10:25:05·分类：JavaScript/jQuery/Vue

Start with pixi.js

首先先引入pixi.js吧！

但是由于这是个练习，所以想快一点就直接读了CDN。

制作html。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Start with pixi.js</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.3/pixi.min.js"></script>
<script type="text/javascript">
    var type = "WebGL";
    if(!PIXI.utils.isWebGLSupported()){
      type = "canvas"
    }
    PIXI.utils.sayHello(type);
</script>
</body>
</html>

由于body中没有放其他元素，所以和预想一样本地打开的时候什么都没有。

那么打开console看看吧。

这是pixi.js读取的证据呢。

细读了代码，发现如果是不支持WebGL的话，会切换成Canvas。

然后在控制台输出这段信息是sayHello function的机能。

因为这次用的浏览器是支持WebGL的Chrome，所以type是WebGL。

试着做点什么吧

将以下代码加到先前script的sayHello function后面。

（加入注释说明）

//生成一个新的渲染器
var renderer = PIXI.autoDetectRenderer(256, 256);

//将其插入到HTML中
document.body.appendChild(renderer.view);

//生成名为stage的容器（object）
var stage = new PIXI.Container();

//在渲染器中传入stage。
renderer.render(stage);

这似乎就是最基本的代码了。

打开浏览器会发现出现一个黑色的方块。

通过审查元素查看内容。

<canvas width="256" height="256" style="touch-action: none; cursor: inherit;"></canvas>

确认生成了canvas。

说明下autoDetectRenderer function的参数。

autoDetectRenderer(width, height, {options});

其实就是对canvas进行各种设定。

比如下面的代码

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

antialias 轮廓是否平滑？
transparent　是否透明？
resolution　倍率为1，如果输入0.5则生成尺寸减半变为128*128。

因为只是配置，加不加都无所谓。

默认配置如上面一样{antialias: false, transparent: false, resolution: 1}

强制生成WebGL或者canvas

autoDetectRenderer function会自动判断是否支持WebGL（优先WebGL），

但是如果想在不支持WebGL的浏览器中直接不运行的话就使用 WebGLRenderer function

renderer = new PIXI.WebGLRenderer(256, 256);

反之只想使用canvas的话则使用CanvasRenderer function

renderer = new PIXI.CanvasRenderer(256, 256);

有关style

renderer.backgroundColor = 0x061639;
renderer.view.style.border = "1px dashed black";

通过javascript设定样式的话

<canvas width="256" height="256" style="touch-action: none; border: 1px dashed black; cursor: inherit;"></canvas>

就会生成上面那样的canvas。

然后在中途也可以进行重置大小。

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

也可以填充满整个浏览器。

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

什么是精灵

// 生成一个新的渲染器
var renderer = PIXI.autoDetectRenderer(256, 256);

// 将其插入到HTML中
document.body.appendChild(renderer.view);

// 生成名为stage的容器（object）
var stage = new PIXI.Container();

// 在渲染器中传入stage。
renderer.render(stage);

这里说下第三段（上面例子中的第8行）代码。

如container（object）的意思一样，就是容器。

可以放入许多元素的容器。

renderer.render(stage);

将其传入最上面的renderer，反映到canvas中去。

这里stage这个名字只是单纯的例子，一般情况下是会取scene或者root之类的名字。

那么，这个容器里要放入什么东西呢？那就是“精灵”了。

所谓精灵就是可控的图形（images object）。

可以控制其位置、大小、交互、动画的展示等等。

制作精灵的三种方法

1.使用图像（一个一个读取进去）

2.将项目内用到的所有图片（sub-image）全部集合成一张大图片（tileset）使用。（就是将大量小图合成一张大图）

3.通过JSON（texture atlas）指定大图（tileset）中各自图像的位置和大小。

实践篇

注意点：接下来的html为了防止本地打开后无法运行某些机能，是在设立了一个简单的服务器基础上执行的。

1.使用图像并显示出来吧（一个一个读取）前篇

使用TextureCache function，保存图像的路径。然后建立新的精灵。

var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"];
var sprite = new PIXI.Sprite(texture);

这里的"images/anySpriteImage.png"为实际要使用到的路径与图片文件名。

但是有可能会指定了路径但是并未读取，所以这里要用到loader

PIXI.loader
  .add("images/anyImage.png")
  .load(setup);

function setup() {
  //读取图片后执行
}

pixi.js开发团队推荐的使用方法：如果要使用loader的话，务必将loader读取的东西作为精灵去使用。

var sprite = new PIXI.Sprite(
  PIXI.loader.resources["images/anyImage.png"].texture
);

然后合并代码就如下面所示。

PIXI.loader
  .add("images/anyImage.png")
  .load(setup);

function setup() {
  var sprite = new PIXI.Sprite(
    PIXI.loader.resources["images/anyImage.png"].texture
  );
}

结果就像下图那样

图片完全贴合在了左上角

补充:

如果想要追加要读取的图片，只用追加loader.add()即可。

PIXI.loader
  .add("images/imageOne.png")
  .add("images/imageTwo.png")
  .add("images/imageThree.png")
  .load(setup);

为了更加简洁集合成loader.add([])

PIXI.loader
  .add([
    "images/imageOne.png",
    "images/imageTwo.png",
    "images/imageThree.png"
  ])
  .load(setup);

变换成别的名字吧（Aliases）

刚才的代码整理起来如下。

<script>
var stage = new PIXI.Container(),
    renderer = PIXI.autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

PIXI.loader
  .add("images/cat.png")
  .load(setup);

function setup() {
  var cat = new PIXI.Sprite(PIXI.loader.resources["images/cat.png"].texture);
  stage.addChild(cat);  
  renderer.render(stage);
}
</script>

将里面的PIXI.***全部拿出来，取一个自己看得懂的别名。

var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    Sprite = PIXI.Sprite;

var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

loader
  .add("images/cat.png")
  .load(setup);

function setup() {
  var cat = new Sprite(resources["images/cat.png"].texture);
  stage.addChild(cat);
  renderer.render(stage);
}

然后将代码换成上面那样子。简洁易懂。

第一回先到此。

本回demo：点击进入

本回的代码：进入git

本文翻译自：2D WebGL renderer Pixi.js v4【連載第一回】

翻译者：广树

转载请注明出处！

2D WebGL renderer Pixi.js v4 入门【第二回】

#pixi.js

侧边栏