导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

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看看吧。

QQ截图20180808221017.png

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

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

QQ截图20180808221025.png

然后在控制台输出这段信息是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
  );
}

结果就像下图那样

下载.png

图片完全贴合在了左上角


补充:

如果想要追加要读取的图片,只用追加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
侧边栏
最新评论
广树
2024-06-19
@Xia:是呀,原来塞尔达传说这个名字是伏笔
Xia
2024-06-19
塞尔达:终于又轮到我当主角了(☆ω☆)
广树
2024-06-19
@粽叶加米:是呀,之前梦见岛的引擎
粽叶加米
2024-06-19
而且是Q可爱的。
广树
2024-06-19
@Jacylunatic:确实,这样才公平
正在攻略

传颂之物

PSN奖杯卡

PSN奖杯卡

赞助商广告