先前有介紹過 dat.GUI，這篇補充一些先前沒提過的部分：

[PixiJS - Day-16] 使用 dat.GUI 工具除錯

dat.GUI

tutorial 已失效，不過 repository 裡的 example.html 仍可使用

dat-example:

使用上也不複雜，直接將 repository 裡的 example.html 點開就好

1. 改變物件裡屬性的值：

- 以前我這麼寫：

1. 寫一個 dat.gui 使用的 暫存Object，用來儲存改變的結果
2. gui.add() 裡註冊 暫存Object 特定變數的 onChange() 事件
3. 暫存Object 裡變數的值改變時，將值 重新指派 給最後想更新的屬性

[ Demo-1 ]

const gui = new dat.GUI();

// 1. 建立暫存物件
const controller = {
	bunnyAlpha: 1
};

// 2. 監聽並操作暫存物件的狀態
gui.add(controller, 'bunnyAlpha', 0, 1, 0.01).onChange(guiHandler);

// 3. 暫存物件的變數的狀態改變時，重新指派到最後要改變的變數裡
function guiHandler(){
	console.log("controller.: ", controller.bunnyAlpha);
    // 最終要影響的是 bunny 的 alpha
	bunny.alpha = controller.bunnyAlpha; 
};

- 現在我這麼寫：

由於 dat.gui 直接更改傳入物件的屬性的值，可以將整個監聽與操作的行為整理成兩行：

[ Demo-2 ]

const gui = new dat.GUI();
gui.add(bunny, 'alpha', 0, 1, 0.01);

乾淨！

2. 介面上的 alpha 是誰?

介面上的控制項可以更名，可以是中文或是任何操作時可理解的文字：

[ Demo-3 ]

const gui = new dat.GUI();
gui.add(bunny, 'alpha', 0, 1, 0.01).name("兔子透明度");

[ Demo-4 ]

左： 沒有別名時，兩個都是 alpha
右： 替物件變數加上別名時，就可區分差異

這樣就可以讓操作的人不必知道實體的屬性名稱、或是更容易知道是在調整哪個屬性

使用 .listen() 將數值變化更新回 gui 介面

修改自官方範例 INTERACTION - Dragging

拖拉兔子，取得座標，並將座標 指回 dat.gui 裡

[ Demo-5 ]

const gui = new dat.GUI();
gui.add(bunny, 'x', -300, 300, 1).listen();
gui.add(bunny, 'y', -300, 300, 1).listen();

dat.gui 通常會用在開發者與 設計 / PM 協作，
會再加上 remember() 方法，將操作結果匯出成 JSON 供開發者製作

搭配 remember(obj) 方法，記錄操作數值與匯出 JSON

[ Demo-6 ]

• 加上 remember(obj) 方法後，介面上會多出一條控制項，以及 Revert 按鈕

gui.remember(bunny); // 加上這行，讓 gui 記得 bunny 的屬性變化

• 拖拉 dat.gui 後，目前選定的設定會出現 * 顯示有變化可儲存
  但使用 .listen() 方法更新 dat.gui 時，似乎不會觸發 *，使用時須留意

• 點 New 可另存目前的設定值

• 點選齒輪，可顯示 儲存的數值

本日小節:
dat.gui 已相當久沒更新了，但仍是滿好用的協助開發工具
依舊會推薦使用