寫畫面效果的時候常常會需要調整參數,看是不是想要的效果,每次都要儲存一次檔案再reload真的是非常麻煩

dat.GUI提供直接在畫面上用介面修改參數的功能,就在畫面上快樂的調到你想要的效果,再改到檔案裡,超級方便!

而且dat.GUI並不是只能用在PIXI上,像是Three.js也同樣可以使用

dat.GUI網站

先下載js檔並引入

我覺得官網超難懂ORZ

下面這段隨便叫甚麼都沒甚麼差,總之就是建立一個function然後把你會用到的變數通通都放進去,除非是要做分類,不然我覺得就都放一起就好

 var FizzyText = function() {
    this.x = 150;
    this.y = 120;
    this.rotation = 1;
  };

再來這段呼叫上面的function,然後建立GUI實體,在一個一個add進畫面中

window.onload = function () {
  var text = new FizzyText();
  var gui = new dat.GUI();

  gui.add(text, 'x');
  gui.add(text, 'y');
  gui.add(text, 'rotation');
}

最後呢,把會動到的參數都要放到ticker中,不然畫面是不會更新的QQ(一個踩中)

app.ticker.add(function (delta) {
    bunny.x = text.x;
    bunny.y = text.y;
    bunny.rotation = text.rotation;
});

另外也有一些其他的用法,像是addColor可以做顏色變數,就自己看官方文件啦XD