学JS的心路历程Day26 - PixiJS -入坑

后来知道也可以透过canvas让网页动起来！

而PixiJS是使用WebGL在canvas上绘制内容与制作动态

且同时有下列特色：

支持多点触控

掩码与混合模式

可外加WebGL滤镜

多装置支持

等等，什么是WebGL(sxjlf88)？

WebGL是一种JS的API，让网页能不需使用外挂程序就能在HTML的canvas元素中实现二维及三维渲染。

不过要注意的是，有些浏览器预设会把WebGL关闭，避免太吃性能，要打开可以参照这篇文章How can I enable WebGL in my browser？

这边我示范一下chrome如何打开。

首先，打开硬件加速功能

进入chrome://settings/

接着，启用WebGL

进入chrome://flags/

搜寻WebGL点击启用

最后，确认WebGL状态

进入chrome://gpu/

如果状态不是Hardware accelerated，下方的Problems Detected列表可能会解释原因！

不过前面提到了这么多看起来很赞的特色，想当然就是不能支持太过老旧的浏览器。

或许有人会说，那怎么不用three.js或phaser3呢？

这是因为这两者底层实际上也是用PixiJS，这样你不觉得先学好PixiJS再去学这两者会比较快速吗？

而且PixiJS更新时，three.js及phaser3需要等待一段时间才有办法更新。

就连前段时间很红的

这款游戏也是用PixiJS制作的！

对，你没有听错，Canvas也可以做游戏！

在接下来的四天时间，我将会带各位初步了解PixiJS的语法以及实作，那们我们明天见(leafor)！