先前在 iT 邦幫忙鐵人賽 寫 PixiJS 是2017年年底的事

由於是再談 PixiJS，這次的系列文是基於 2018 iT 邦幫忙鐵人賽
PixiJS，方便好用的 WebGL 內容產生工具 的延續

再寫 PixiJS 的動機：

• 踩到很多雷

  目前工作常接觸 PixiJS，也踩過了很多雷
  由於多到可以寫滿整系列鐵人賽
  與其自己炸，不如寫成系列文，大家一起看 :D

• 讀了 PixiJS 的原始碼

  為了解決踩到的雷與寫這個系列，看了不少 PixiJS 的原始碼與文件
  有遇到一些問題或特性、也實際發了 PR 與開發者互動
  都是很特別的經驗

覺得與開發者互動、檢視原始碼、官方文件的寫法
都是使用技術、推廣技術時很有意思的部分
系列文也希望能傳達一些這樣的精神

這次會介紹什麼是 PixiJS 嗎?

這次不會重新介紹 PixiJS
若對於 PixiJS 是什麼、能做什麼，
或是我先前用 PixiJS 做過了什麼，可以參考我先前的系列：
PixiJS，方便好用的 WebGL 內容產生工具

兩次鐵人賽間討論的 PixiJS 會有版本差異嗎??

2017 年年底時 PixiJS 版本是 V4
目前的 PixiJS 版本是 V5

大致上的特色沒有改變
這次的系列也不會特別偏重在 PixiJS V5 的更新

提示： 系列會使用 PixiJS V5 來討論。大多情形下，開發時也是直接使用 PixiJS V5 即可
使用 V5 的版本時，若寫了 V4 支援但建議改寫的做法，在 console 裡會有提示

例如：

這次會討論的內容

有很多有趣的事情可以分享，約略分成幾個大項：

• 忘了 CSS 的 Box Model 經驗
  PixiJS 是運作在 Canvas / WebGL 的內容產生工具
  本身不具備 CSS Box Model 的各種特性
  例如：
  當把物件放進容器時，物件會放在同一個 {x:0, y:0} 上，
  不會把其他物件排開，像是 CSS 的 position: absolute。
  不僅如此，寬高的取得與指定，也都各自會遇到不同的問題

• 互動
  當 PixiJS 的使用包含了互動時，也會遇到很有趣的事情：

  • 感應區的概念
  • 容器與子物件設定互動的情形
  • 看不到的物件能互動嗎 / 能讓看不到的物件互動嗎?

• Texture、畫圖與畫面呈現
  系列會花不少篇討論可視物件的實作、繼承關係、Texture 與其 BaseTexture 的關係

  更加了解 PixiJS 如何把東西放到畫面上，遇到問題時更容易找出可能的原因
  (或是可以預測一些行為正確但是不該這麼做的事情)

• 讀取
  PixiJS 的讀取機制與快取機制相關，也會自動判斷讀取了什麼
  (例如 Sprite sheet 的 JSON 檔案，讀完會判斷是 Sprite sheet，如何實現的)

  會介紹這些機制，以及如何再調整這些機制

• 工具小技巧
  先前介紹了 dat.GUI 的使用，這次會補充 dat.GUI 與一些 library 的其他用法

• 其他心得
  不一定與 PixiJS 有關，但覺得有意思的事情