后来知道也可以透过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)!