PixiJS V5 教學 (22) - debug

發表於 2020-07-07 分類於 JavaScript

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

接下來我們來認識一下該如何在 Pixi 上 debug。

前言

接下來我們來認識一下該如何在 Pixi 上 debug。

其實 Pixi 在開發上要做 debug 是一件非常困難的事情，因為 Pixi 的結構與 HTML、CSS 不同，沒辦法再 devTools 上面看到 Dom 結構以及調整相關參數，所以在開發上若想調整其實是一件非常困難的事情。

但是這一篇主要會稍微認識一下 dat.GUI 下一篇才會來實作加入。

網路搜尋一下 PIXI 相關的開發工具的調整大多都會推薦 dat.GUI 這套工具，滿多前輩都會推薦使用這套工具來做 Pixi 的 debug 工具

此外 dat.GUI 強大之處不只在於 Pixi、Three.js 也可以使用，最厲害的莫過於開發 VR 時也可以使用

官方圖源

如果對於 dat.GUI for VR 有興趣的話可以點這裡研究一下程式碼，它是開源的。

dat.GUI 最大特色在於我們可以圖形化介面調整相關參數及物件，否則我們正常開發時是必須要修改一次，然後存檔重新整理畫面，多次下來是會感到煩悶進而導致我們的開發效率低落。

在官方網站上我們可以看到一些範例，我們可以透過修改左邊的浮動視窗來調整畫面上的圖案，例如 Message 以及 speed 等

dat.GUI

透過這個 gui 介面我們可以更方便的調整 PixiJS

dat.GUI 操控

那對於 dat.GUI 基本的認識就先到這裡，下一篇我們就來看一下該如何加入 dat.GUI 吧~