iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

0
Modern Web

再談 PixiJS,那些先前不一定有提到的部分與地雷系列 第 42

[Re:PixiJS - Day42] dat.gui 小技巧 .name() / .listen() / .remember(obj)

先前有介紹過 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 已相當久沒更新了,但仍是滿好用的協助開發工具
依舊會推薦使用


上一篇
[Re:PixiJS - Day41] 將 PixiJS 的 ticker 替換為 GSAP 的 ticker
下一篇
[Re:PixiJS - Day43] pixi-particles 粒子效果 1/2:plugin 安裝與開始使用
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45

尚未有邦友留言

立即登入留言