后来知道也可以透过canvas让网页动起来!
而PixiJS是使用WebGL在canvas上绘制内容与制作动态
且同时有下列特色:
支持多点触控
掩码与混合模式
可外加WebGL滤镜
多装置支持
等等,什么是WebGL()?
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的语法以及实作,那们我们明天见()!