Claire's Blog

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…

 遊戲效能評估方式 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事件的動作。…

開發人員工具 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時可以直接在畫面上反應出來，在對位上是十分方便的一個工具。 在調整數值時，可以直接用上、下鍵來增加或減少數字，也可以直接在畫面中馬上看到物件的移動，若是直接輸入數字，較容易游標會有跳掉的狀況。 參考資料 chrome 線上應用程式商店-pixijs-devtools…

Particles System 遊戲經常透過粒子系統製作各種視覺效果，例如火焰、煙霧、下雨、沙塵、爆炸等效果，並不容易使用一般的動畫工具製作。通常粒子系統在三維空間中的位置與運動是由發射器控制的，發射器可以設定粒子生成速度（即單位時間粒子生成的數目）、粒子初始速度向量（例如什麼時候向什麼方向運動）、粒子壽命（經過多長時間粒子湮滅）、粒子顏色、在粒子生命周期中的變化以及其它參數等等。經由這些參數，來產生不同的特效效果。 下圖為一個火燄特效的範例圖： PixiParticles 官網網址如下：PixiParticles Pixi Particles是一款供Pixi JS去使用的Particles功能，其官網對其功能的介紹如下： A particle system library for the PixiJS library. Also, we created an interactive particle editor to design and preview custom particle emitters which utilitze PixiParticles. 在官網的下方有範例可供參考，基本使用上會去用Emitter來設定config到特效裡，方法為： 簡單的使用範例如下： Pixi Particles Editor 粒子特效的config通常需要一個編輯軟體讓美術來調整相關數值，PixiParticles的編輯器在官網有提供，其網址為：https://pixijs.io/pixi-particles-editor/#pixieDust

還未完成的功能 前一篇的成果和我們的mockup相比 還有時間、生命和FB按鈕還未完成。 今天我們要將這些功能全部實作完成。 時間倒數 新增Clock.ts，內容如下  將元件放進場景 在GameScene.ts新增下面程式碼： 今日成果 最終遊戲畫面： 所有commit紀錄請見GITHUB:https://github.com/cochiachang/ironman2018 今日成果demo：http://claire-chang.com/ironman2018/1110/ 今日檔案下載：ironman20181110

遊戲關卡概念 每個遊戲一般都會需要關卡的概念，也就是過關後可以再重新進行遊戲，並且需要有關卡結局畫面。 今天我們就是要製作這樣的一個過關或遊戲結束的畫面，如下圖： 在pixi內使用文字 在pixi4.0之後可以直接利用pixi來做出很漂亮的文字效果，以下為官網的範例 成果如下： 現在更支援Bitmap font，請參見官網的demo 顯示成果如下： 新增遊戲關卡畫面 新增檔案GameRoundEnd.ts，內容如下： 並修改GameBoard.ts內iconClickHandler的內容如下 今日成果 線上demo：http://claire-chang.com/ironman2018/1109/ 今日成果下載：ironman20181109