前言 接下來這一篇就要來實際加入 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 ( ) { ... }; }; 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 工具,我個人覺得也是相當的不錯,對於看物件結構來講是滿方便的
這兩者可以搭配著一起使用,也可以增加 debug 的速度唷~
(可惜沒有 Firefxo 版 QQ)
參考文獻