iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0

前幾天參加 Mopcon 時聽了 Eia 大大分享了 PixiJS 的概念和一些實作。

聽完後我的內心是這樣的。

通常別人說要如何讓網頁動起來,我第一個想法都會是...GIF 或 css 動畫?

但後來知道也可以透過 canvas 讓網頁動起來!

而 PixiJS 是使用 WebGL 在 canvas 上繪製內容與製作動態
且同時有下列特色:

  • 支援多點觸控
  • 遮罩與混合模式
  • 可外加 WebGL 濾鏡
  • 多裝置支援

等等,什麼是 WebGL ?

WebGL 是一種 JS 的 API ,讓網頁能不需使用外掛程式就能在HTML的 canvas 元素中實現二維及三維渲染。

不過要注意的是,有些瀏覽器預設會把 WebGL 關閉,避免太吃效能,要打開可以參照這篇文章 How can I enable WebGL in my browser?

這邊我示範一下 chrome 如何打開。

  1. 首先,打開硬體加速功能
    進入 chrome://settings/

  2. 接著,啟用 WebGL
    進入 chrome://flags/
    搜尋 WebGL 點擊啟用

  3. 最後,確認 WebGL 狀態
    進入 chrome://gpu/
    如果狀態不是 Hardware accelerated,下方的 Problems Detected 列表可能會解釋原因!

不過前面提到了這麼多看起來很讚的特色,想當然就是不能支援太過老舊的瀏覽器。

或許有人會說,那怎麼不用 three.js 或 phaser3 呢?
這是因為這兩者底層實際上也是用 PixiJS ,這樣你不覺得先學好 PixiJS 再去學這兩者會比較快速嗎?

而且PixiJS 更新時, three.js 及 phaser3 需要等待一段時間才有辦法更新。

就連前段時間很紅的

奔跑吧!台北

這款遊戲也是用 PixiJS 製作的!

對,你沒有聽錯, Canvas 也可以做遊戲!

在接下來的四天時間,我將會帶各位初步了解 PixiJS 的語法以及實作,那們我們明天見!

參考資料:
Mopcon 共筆
[PixiJS - Day-01] 為何選擇 PixiJS
WebGL 入門
How can I enable WebGL in my browser?


上一篇
學JS的心路歷程 Day25 - JS 的 Class
下一篇
學JS的心路歷程 Day27 - PixiJS - 基礎(一)
系列文
學JS的心路歷程30

尚未有邦友留言

立即登入留言