iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
0
Modern Web

PixiJS,方便好用的 WebGL 內容產生工具系列 第 16

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

如之前提到的,由於 PixiJS 不是 HTML DOM 結構,無法使用開發工具調整物件

我常使用的工具是 dat.GUI
Chrome Experiments 開發的工具之一

alt

不只是 PixiJS 專案,像在開發 three.js 專案時,dat.GUI 也相當好用.
當基本的操作介面由dat.GUI 提供時,更能專注在開發 操作介面之後產生的行為

教學:
網址:https://workshop.chromeexperiments.com/examples/gui/
alt
教學頁短短 10 頁,提到了大部分的用法

API文件:
網址:https://github.com/dataarts/dat.gui/blob/master/API.md
alt
dat.GUI 的 API 文件相當清楚,在大致理解 dat.GUI 可以做什麼後可參考看看


官方教學與文件裡,整個操作介面是 GUI 類別
Controller 是每一塊可以控制的區塊,使用 add()addColor() 方法新增進 GUI 實體裡

基本用法:

  • 匯入 dat.gui.js
    <script type="text/javascript" src="dat.gui.js"></script>
    匯入 dat.gui.js 後即可開始寫測試,使用 dat.GUI 時不須更動 HTML 與 CSS

官方基本使用範例:
https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

產生的操作介面:
alt

程式碼:

1. var FizzyText = function() {
2.   this.message = 'dat.gui';
3.   this.speed = 0.8;
4.   this.displayOutline = false;
5.   this.explode = function() { ... };
6.   // Define render logic ...
7. };
8. 
9. window.onload = function() {
10.   var text = new FizzyText();
11.   var gui = new dat.GUI();
12.   gui.add(text, 'message');
13.   gui.add(text, 'speed', -5, 5);
14.   gui.add(text, 'displayOutline');
15.   gui.add(text, 'explode');
16. };

1~7 行:
定義了一個對應到 dat.GUI 的物件,
也可以寫作 var testData = { message : 'dat.gui', speed : 0.8};
然後丟給 dat.GUI 實體使用

11 行:

var gui = new dat.GUI();

在建立 dat.GUI 實體後,會自動在頁面上產生操作介面。
alt
此時操作介面上只會有一個 Open Controls,還沒有功能

12~15行:
在 dat.GUI 實體裡加入相對應的操作介面。

- 當指定物件裡的屬性是字串:

text.message = 'dat.gui';
gui.add(text, 'message');

建立動態文字框
alt
程式碼中的 text 是 對應到 dat.GUI 的物件,'message' 是 該物件裡的屬性名稱

- 當指定物件裡的屬性是數字:

text.speed = 0.8;
gui.add(text, 'speed', -5, 5);

建立滑動區塊,可另外指定滑動範圍的最大值與最小值
alt

- 當指定物件裡的屬性是布林值:

text.displayOutline = false;
gui.add(text, 'displayOutline');

對應到的介面是 checkbox
alt

- 當指定物件裡的屬性是function:

text.explode = function(alert('explode'));
gui.add(text, 'explode');

按下按鈕時會執行對應function
alt


接下來介紹一些 dat.GUI 的操作操作與特色:

alt
滑動區塊:
當指定的值為數字時,除了最大值與最小值外,也可設定滑動時一次變動的幅度

例如:
最小值0,最大值100,一次變動的幅度:
設定為 10,結果為 0, 10 , 20, 30, … 100;
設定為 5,結果為 0, 5, 10, 15, … 100;
設定為 0.1,結果為 0, 0.1, 0.2, … 100;

程式碼:

text.speed = 10;
gui.add(text, 'speed', 0, 100, 10); // 三個數字為最小值、最大值、一次變動的幅度

alt
下拉選單:
可以指定下拉選單對應的字串,或是選擇字串對應的值
程式碼:

// Choose from accepted values
gui.add(text, 'message', [ 'pizza', 'chrome', 'hooray' ] );

// Choose from named values
gui.add(text, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );

檢色器:
dat.GUI 有選取顏色的操作介面
alt

程式碼:

var palette = {
  color1: '#FF0000', // CSS string
  color2: [ 0, 128, 255 ], // RGB array
  color3: [ 0, 128, 255, 0.3 ], // RGB with alpha
  color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
};
gui.addColor(palette, 'color1');
gui.addColor(palette, 'color2');
gui.addColor(palette, 'color3');
gui.addColor(palette, 'color4');

要注意的部分有兩個:

  • 新增檢色器的方法是 addColor
  • 雖然 UI 介面相同,但初始的格式會影響輸出的格式
    alt

Saving Values:
可以將調整的值列出來或存下來
團隊分工時很好用,可讓調整視覺的同事在調整完後,將設定存給開發者
alt
alt

使用 gui.remember() 後,會多一條控制列:
alt


Events:
事件有兩種:

  • controller.onChange(fnc)
  • controller.onFinishChange(fnc)
controller.onChange(function(value) {
  // Fires on every change, drag, keypress, etc.
  // 只要值有變化就會呼叫
});

controller.onFinishChange(function(value) {
  // Fires when a controller loses focus.
  // 當操作介面失去焦點時呼叫
  alert("The new value is " + value);
});

Updating the Display Automatically
有時情況會反過來,需要將數值塞回dat.GUI 介面裡
alt

使用 controller.updateDisplay(); 的方法,將更動過的資料
套回到 dat.GUI 裡即可


上一篇
[PixiJS - Day-15] PIXI 的 resize
下一篇
[PixiJS - Day-17] tint 上色與在 PixiJS 玩顏色
系列文
PixiJS,方便好用的 WebGL 內容產生工具31

尚未有邦友留言

立即登入留言