学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)!

猜你喜欢

转载自www.cnblogs.com/lannyQ-Q/p/10160091.html