[30- 相關工具] 手機遠程測試

Android系統的手機設備偵錯

在電腦上的偵錯工具首推的就是 Chrome 開發者工具,但是由於若我們想要做手機遊戲,不同的設備有可能會有不同的狀況,我們會需要在不同手機上去做除錯。如果是Android系統的手機,開啟Enable USB Debugging之後,用USB線連至電腦,則可以藉著使用chrome去做遠端偵錯。
偵錯步驟如下:

  • 選擇 Settings > Developer Options > Enable USB Debugging以啟用設備上的開發者選項(要如何開啟請參考此篇文章:Set up a device for development
  • 使用一個 Google 帳戶登錄到 Chrome
  • 打開Chrome 開發者工具(在Chrome選單中選擇 更多工具 > 開發者工具)
  • 在 DevTools 中,點擊 Main Menu 主菜單,然後選擇 More tools > Remote devices。
  • 在 DevTools 中,點擊 Settings 標籤
  • 確保已啓用 Discover USB devices。
  • 使用 USB 將 Android 設備直接連接到電腦上
  • 在左測的remote target選擇要偵錯的設備

iOS的手機設備偵錯

首先針對要偵錯的 iDevice 接上 Mac 並且進入 iOS 設定中的「Safari」選項,在「進階」選單中開啟「網頁檢閱器」,iPhone 畫面如下:

接著我們開啟 MacOS 中的 Safari,並且啟用「開發」選項,如下圖:

當我們的 iOS 開啟網頁時,就可以在 Mac 中的 Safari「開發」功能表中看到連上線的 iDevice,直接選取正在開啟的頁面就可以進行 Debug 囉,畫面如下:

Debug的畫面如下:

利用 weinre 遠端 Debug 網頁元素

官網位置:https://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

weinre 的全名是 WEb INspector REmote,顧名思義是一個遠端的網頁檢視器。在技術上 weinre 其實是一個以 node.js 為基礎的 Http Server,利用了 Web 即時通訊的技巧,將某個已經掛上 Target JavaScript 的 Browser ,透過背景將 DOM 資訊傳遞到 Debugging Tools 中。Debugging Tools 也是由 Web 進行設計,連接後雙方可以即時傳遞一些命令讓我們即時看見反饋,是一個很聰明的做法。而且沒有太多的環境限制,基本上可以執行 JavaScript 的瀏覽器都可以使用。

1. 安裝方式:可以直接由網址下載安裝,也可以透過npm來安裝
透過npm

直接透過網址安裝

2. 啟動服務

接著在電腦內打開網址 http://10.0.0.13:8080,會看到如下的畫面:

3. 設定要被觀察的程式
在程式內加入下面的script

接著重新整理就可以看到我們在手機設備上開啟的網頁的資訊,點選該連結就可以偵錯該程式

4. 偵錯畫面如下

參考資料

[29- 相關工具] 效能評估工具



遊戲效能評估方式

FPS是指影格速率,是用於測量顯示張數的量度。測量單位為「每秒顯示張數」(Frame per Second,FPS)或「赫茲」,一般來說FPS用於描述影片、電子繪圖或遊戲每秒播放多少影格。一般說來,顯示器的張數為60Hz,因此,若超過60的fps容易會有畫面撕裂的狀況產生。而60FPS的遊戲體驗會相較30FPS的遊戲體驗來得更順暢。

PixiJS的ticker的預設FPS為60,可以自行藉由ticker.speed的值來調整遊戲的FPS。

顯示遊戲現在的fps數值

這邊介紹兩款不同的畫面fps顯示工具,FPSMeter和stats.js

FPSMeter

官網:http://darsa.in/fpsmeter/
使用樣子:

使用方法:

若一個遊戲有多個不同的fps設定,則可以在該ticker去設定要顯示的fps是那一個ticker的

若要知道每一次render圖像時要花的時間,則使用下列方法:

stats.js

官網:https://github.com/mrdoob/stats.js/
使用樣子:

使用方法:

這個工具可以同時顯示較多的數值,我們初始顯示的數值雖然只能四選一(0: fps, 1: ms, 2: mb, 3+: custom)
但是只要在顯示fps的方塊用滑鼠點擊,亦可以切換顯示不同的panel。



Chrome Debug Tool

在電腦上測試時最好的效能監測工具還是屬Chrome Debug Tool,切到Performance頁籤,在要監測時按下左上方的錄影按鈕,在結束時按下停止,就會看到如下的畫面:

我們可以看到,最上方有fps的部份,以上圖為例,我們可以觀察到,在遊戲重新loading時的fps最低,這的同時,也是cpu最高的時期,在frame的部份,還可以看到遊戲在每個時間點時的遊戲畫面截圖,幫助我們更了解這個時間軸的每個時刻遊戲畫面是如何呈現。

在2500ms的地方,有一條紅色的線,代表當時是被debug tool判定效能較差的時刻。我們點一下上方的時間軸,可以選擇下方要顯示的資料的範圍。

這時候我們可以看到最上方有一條Timer Fired的任務花費最多時間,這時候大家可能會想什麼ansync.js根本不是我寫的呀,但是其實這個工具上面顯示的名稱是只會顯示一整串序列最初被呼叫的函數名稱。例如在pixi裡的event handler是循序被執行並不會同步執行的,這時如果有許多listener監聽某個事件,其中有一個在聽到該事件後會執行一個很耗效能的動作,在這個performace工具裡會顯示的名稱為該動作emit事件的動作。

因此我們較難直接從這個列表得知造成效能低落的原因,這時,我們可以點選某列我們感興趣的執行動作,這時下方會出現一個面板,我們可以從這個面板得知這個工作項目的細節。

由上圖可得知,這個耗效能的動作,是由於GameScene.draw要繪製整個遊戲場景所造成的。

除了Call-Tree可以讓我們看到這整個工作項目是怎麼被呼叫的,Summary裡可以看到這個動作較花效能的是script、painting還是rendering

參考資料

[28- 相關工具] PixiJS devtools

開發人員工具

Chrome 開發者工具是網頁開發者常在使用的偵錯工具,可以檢查下載的檔案、html的dom元素檢視及編輯、調整css等…

開發工具打開方式:
1. 功能表 -> 工具 -> 開發人員工具
2. 直接按 F12 叫出來
3. 在網頁任何位置按右鍵,選擇”檢查元素”,就可以看到原始碼。

工具有許多的面版在最上列,左邊也可以直接選擇要找的html元素的位置

上圖即為偵錯面板的圖示。

關於這個工具更多的資訊請見此:Chrome 開發者工具

PixiJS devtools

一般的debug tools在一般網頁上就十分夠用了,但是對於PIXI來說,因為其繪圖元件都放在Canvas裡,對於畫面上的偵錯較不容易。

因此推薦大家可以安裝下面這個擴充應用程式:

安裝完成後,如果這個網頁的頁面內有使用pixi,則會多顯示這個pixi的tab如下圖

在左邊我們可以看到場景上所有的繪圖元件以及其屬性

當我們點選元件的名稱時,場景上會有框框將這個元件的位置框出來

當我們有物件放到場景上卻沒有看到時,用這個工具可以很方便的查找是否該物件有存在在場景上只是被其他物件壓住,亦或是根本沒有加進場景裡。
也可以從物件的順序看到圖層的相對關係,越下面的代表越上面的圖片。

面版的左上方的Reconnect按鈕則是用來刷新元件資訊,元件列表的更新需要手動按這個鈕才能夠更新到最新。

屬性面版的部份,則是我認為最好用的功能,我們可以直接去檢視現在這個物件的某些屬性是否正確。
例如x、y、visible,並且也可以動態調整。

因為現在Pixi JS的開發工具還沒有專屬的IDE,在開發遊戲時,對位是相對較麻煩的
這個工具因為可以所見即所得,並且動態調整x、y時可以直接在畫面上反應出來,在對位上是十分方便的一個工具。

在調整數值時,可以直接用上、下鍵來增加或減少數字,也可以直接在畫面中馬上看到物件的移動,若是直接輸入數字,較容易游標會有跳掉的狀況。

參考資料