【LV. 3】PixiJS青銅玩家：測試是否運作

2022 iThome 鐵人賽

DAY 3

Modern Web

PixiJS青銅玩家系列第 3 篇

14th鐵人賽 pixi pixijs

NoZ

團隊好想工作室 v6.0

2022-09-18 11:31:11

654 瀏覽

分享至

▉ 新手任務：測試PixiJS是否能運作

系統提示：「慢慢來，比較快」，PixiJS青銅玩家獲得一雙不一定跑得快但一定跑得穩的鞋。

在【LV. 2】階段時了解到安裝PixiJS的三種方法，分別為npm、下載JS文件、CDN。雖然說教程中使用的是下載JS文件的方法，但這邊將利用載入CDN的方式，將CDN網址放到HTML的<script>標籤的src裡面：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.4.2/browser/pixi.min.js"></script>

安裝完成後，接著要檢查是否有安裝成功、測試PixiJS是否能順利執行，以下這段程式碼有兩種執行方式可以選擇，一是在HTML執行（<script>寫在<body>裡面），二是直接額外寫在JS檔中。
（教程使用前者，這裡將使用後者）

▍測試PixiJS是否能順利執行

方法1. 在HTML執行

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
</head>
  <script src="pixi/pixi.min.js"></script>
<body>
  <script type="text/javascript">
    let type = "WebGL"
    if(!PIXI.utils.isWebGLSupported()){
      type = "canvas"
    }

    PIXI.utils.sayHello(type)
  </script>
</body>
</html>

方法2. 在JavaScript執行

let type = "WebGL"
if(!PIXI.utils.isWebGLSupported()){
  type = "canvas"
}

PIXI.utils.sayHello(type)

▍結果

當我們執行上述程式碼後，假如PixiJS成功可以運作時，以Chrome來說就可以在DevTools中的console裡面看見底下的圖片：

（出現它就代表我們接下來可以使用PixiJS了！）

▍程式碼分析

有點好奇上面那段程式碼，所以再回頭看看它到底做了什麼事情：

let type = "WebGL"
if(!PIXI.utils.isWebGLSupported()){
  type = "canvas"
}

PIXI.utils.sayHello(type)

列數	code	說明
1	let type = "WebGL"	先宣告一個變數type為WebGL
2	if(!PIXI.utils.isWebGLSupported())[註1]	當網頁不支援WebGL時則進入執行
3	{type = "canvas"}	不支援WebGL時，將type改為canvas
5	PIXI.utils.sayHello(type)[註2]	印出目前的type

[註1] PIXI.utils.isWebGLSupported()
- 官方文件：
- 說明：
  這個語法用於判斷這個網頁是否支援WebGL，將依照結果回傳一個boolean值（true或是false）。
[註2] PIXI.utils.sayHello()
- 官方文件：
- 說明：
  他將會顯示出目前使用的PixiJS版本以及渲染相關的資訊（WebGL或是canvas）
  
  官方還在最後補充：
  
  If you don't want to see this message you can run PIXI.utils.skipHello() before creating your renderer. Keep in mind that doing that will forever make you a jerk face.
  
  當你不想看到那條粉色的資訊時，可以利用PIXI.utils.skipHello()，但是記住如果這麼做的話會讓你永遠是個jerk face（？
  
  所以回到他顯示的內容，可以從中得知我目前使用的是v4.5.5版本的PixiJS，且目前是利用WebGL做渲染。
  
  而"WebGL"內容是可以自行修改的，即使是中文也可以顯示出來，感覺上可以理解成一個多了樣式的console.log
```
let type = "這是 WebGL"
if(!PIXI.utils.isWebGLSupported()){
  type = "canvas"
}

PIXI.utils.sayHello(type)
```
  至於這樣的樣式顯示在console是怎麼做出來的？基於好奇心驅使（即便這跟要學的PixiJS沒什麼關係），還是決定看看。
  
  Step1.
  首先我在它右側看見index.js:243，先點進去看看
  
  Step2.
  因為沒有要把重點放在這個部份，所以挑了些重點來看。可以看到變數args中的內容即為PIXI.utils.sayHello的樣式，最後利用console.log.apply(console, args)印出來。
  
  看到apply，可以順便想到call跟bind，這些都跟this有關，但是這邊先就此打住不多研究（後面會再碰到的）。