iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Modern Web

PixiJS青銅玩家系列 第 3

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

  • 分享至 

  • xImage
  •  

▉ 新手任務:測試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,可以順便想到callbind,這些都跟this有關,但是這邊先就此打住不多研究(後面會再碰到的)。


參考資料


上一篇
【LV. 2】PixiJS青銅玩家:安裝PixiJS
下一篇
【LV. 4】PixiJS青銅玩家:實作準備
系列文
PixiJS青銅玩家30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
Chris
iT邦新手 3 級 ‧ 2022-09-18 21:49:08

查了一下「jerk face」意思應該是「卑鄙的人」
https://tw.hinative.com/questions/6228679

NoZ iT邦新手 4 級 ‧ 2022-09-19 15:56:24 檢舉

原來如此!這樣看起來官方文件好親民

0
Chris
iT邦新手 3 級 ‧ 2022-09-18 21:53:03

在 console.log 可以留下樣式,靠的是「在 console 用格式化輸入,寫 CSS」
https://developer.chrome.com/docs/devtools/console/format-style/

NoZ iT邦新手 4 級 ‧ 2022-09-19 15:57:19 檢舉

謝謝Chris提供的資訊!現在馬上來看看/images/emoticon/emoticon41.gif

我要留言

立即登入留言