Android系統的手機設備偵錯 在電腦上的偵錯工具首推的就是 Chrome 開發者工具，但是由於若我們想要做手機遊戲，不同的設備有可能會有不同的狀況，我們會需要在不同手機上去做除錯。如果是Android系統的手機，開啟Enable USB Debugging之後，用USB線連至電腦，則可以藉著使用chrome去做遠端偵錯。 偵錯步驟如下： 選擇 Settings > Developer Options > Enable USB Debugging以啟用設備上的開發者選項（要如何開啟請參考此篇文章：Set up a device for development） 使用一個 Google 帳戶登錄到 Chrome…

 遊戲效能評估方式 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+:…

開發人員工具 Chrome 開發者工具是網頁開發者常在使用的偵錯工具，可以檢查下載的檔案、html的dom元素檢視及編輯、調整css等… 開發工具打開方式： 1. 功能表 -> 工具 -> 開發人員工具 2. 直接按 F12 叫出來 3. 在網頁任何位置按右鍵，選擇”檢查元素”，就可以看到原始碼。 工具有許多的面版在最上列，左邊也可以直接選擇要找的html元素的位置 上圖即為偵錯面板的圖示。 關於這個工具更多的資訊請見此：Chrome 開發者工具 PixiJS devtools 一般的debug tools在一般網頁上就十分夠用了，但是對於PIXI來說，因為其繪圖元件都放在Canvas裡，對於畫面上的偵錯較不容易。 因此推薦大家可以安裝下面這個擴充應用程式：…

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…

還未完成的功能 前一篇的成果和我們的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