PixiJS V5 教學 (23) - dat.GUI

前言

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

起手式

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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');
};

修改相關參數

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

1
2
3
4
5
6
const datGuiData = function() {
this.speedVy = 5;
this.alpha = 0.05;
this.containerX = 0;
this.containerY = 0;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;

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

1
2
3
4
5
6
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 工具,我個人覺得也是相當的不錯,對於看物件結構來講是滿方便的

PixiJS devTools

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

(可惜沒有 Firefxo 版 QQ)

參考文獻

0%