PixiJS V5 教學 (23) - dat.GUI

前言

接下來這一篇就要來實際加入 dat.GUI。

起手式

首先我們將會先前的程式碼來做調整

我們會需要加入 dat.GUI 的部分有 vy 以及透明度等，官方底下其實有滿詳細的範例作法

var FizzyText = function() {
  this.message = 'dat.gui';
  this.speed = 0.8;
  this.displayOutline = false;
  this.explode = function() { ... };
  // Define render logic ...
};

window.onload = function() {
  var text = new FizzyText();
  var gui = new dat.GUI();
  gui.add(text, 'message');
  gui.add(text, 'speed', -5, 5);
  gui.add(text, 'displayOutline');
  gui.add(text, 'explode');
};

修改相關參數

接下來就是依照官方提供的範本來調整相關參數

const datGuiData = function() {
  this.speedVy = 5;
  this.alpha = 0.05;
  this.containerX = 0;
  this.containerY = 0;
}

接下來將會動到的參數帶到相對應的地方去

function tickerLoop(delta) {
  emojiContainer.x = datGuiTools.containerX;
  emojiContainer.y = datGuiTools.containerY;
  sprite.y += sprite.vy;
  let status = contain(sprite, {x: 0, y: 20, width: 512, height: 512});
  if(status === 'top' || status === 'bottom') {
    sprite.vy *= -1;
    hurt(status);
  }
}
...
sprite.vy = datGuiTools.vy;
datGuiTools.speedVy *= -1;
...
item.alpha -= datGuiTools.alpha;

最後就是將相關參數做一下撰寫就差不多了

const datGuiTools = new datGuiData();
const gui = new dat.GUI();
gui.add(datGuiTools, 'speedVy', 0, 100);
gui.add(datGuiTools, 'alpha', 0, 1);
gui.add(datGuiTools, 'containerX', 0, 512);
gui.add(datGuiTools, 'containerY', -512, 512);

最後的成品就在這裡囉~

需注意到，如果你要調整畫面上的狀況，那這些數值是一定會放在 app.ticker.add 中。

Chrome Pixi 插件

最後再補充一個東西，假使若你不想使用 dat.GUI 來調整，你也可以使用 PixiJS Chrome 套件 (PixiJS devTools)，其主要功能就是在 devTools 多一個 Pixi 的 debug 工具，我個人覺得也是相當的不錯，對於看物件結構來講是滿方便的

這兩者可以搭配著一起使用，也可以增加 debug 的速度唷~

(可惜沒有 Firefxo 版 QQ)

參考文獻

• Day18 超好用工具dat.GUI
• [PixiJS - Day-16] 使用 dat.GUI 工具除錯