iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 1
1

先前在 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 有關,但覺得有意思的事情


下一篇
[Re:PixiJS - Day02] PixiJS 物件的排列、寬高特性
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45

1 則留言

0
King Tzeng
iT邦新手 4 級 ‧ 2020-09-01 14:35:53

看到前輩參賽馬上就訂閱了!/images/emoticon/emoticon18.gif
列入「我一定要看」系列中!期待前輩寫的文/images/emoticon/emoticon42.gif

感謝點下訂閱小鈴鐺!

我要留言

立即登入留言