系統提示:「慢慢來,比較快」,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檔中。
(教程使用前者,這裡將使用後者)
方法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()
官方文件:
說明:
他將會顯示出目前使用的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
有關,但是這邊先就此打住不多研究(後面會再碰到的)。
查了一下「jerk face」意思應該是「卑鄙的人」
https://tw.hinative.com/questions/6228679
原來如此!這樣看起來官方文件好親民
在 console.log 可以留下樣式,靠的是「在 console 用格式化輸入,寫 CSS」
https://developer.chrome.com/docs/devtools/console/format-style/
謝謝Chris提供的資訊!現在馬上來看看