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

實作提示按鈕 新增檔案TipBtn.ts，內容如下： 在GameBoard.ts裡的constructor監聽TipsRequest事件 並新增所需要的方法 因為若玩家此時選擇了其他的方塊，我們需要把提示的框消除掉以避免混淆 並實作消除提示紅框的功能 實作重整按鈕 新增檔案ReloadBtn.ts，內容如下： 在GameBoard.ts裡的constructor監聽ReloadBoardRequest事件 並實作所需的方法 今日成果 線上demo：http://claire-chang.com/ironman2018/1108/ 今日成果下載：ironman20181108

堆疊與佇列 堆疊 (Stack) 加入(push)與刪除(pop)於同一端 具有後進先出(LIFO, Last-in-First-out)或先進後出(FILO, First-in-Last-out)性質的有序串列 例子：疊盤子、發牌、走迷宮 佇列 (Queue) 加入(enqueue)與刪除(dequeue)於不同端(front & rear) 先進先出(FIFO, First-in-First-out) 例子：排隊買票、坐公車 實作復原功能 復原功能比較像是走迷宮，一定是先從最後一步開始復原，因此這邊我們採用堆疊的方式。堆疊最簡單的實作方式就是使用array，並用pop以及push來塞入、取出資料。 首先先創建一個類別名為RevertBtn.ts 接著在GameScene.ts加入RevertBtn這個按鈕 然後去GameBoard.ts註冊GameFlowEvent.RevertBackRequest這個事件 並新增revertBoard的方法 然後在每次成功連線時，將成功連線的方塊的值和位置存進陣列裡 今日成果 線上展示：http://claire-chang.com/ironman2018/1107…

GreenSock 下面是GSAP官網對這個產品的說明： Think of GSAP as the Swiss Army Knife of javascript animation…but better. It animates anything JavaScript can touch (CSS properties, canvas library objects,…

連連看連線及選擇題示 在進行遊戲時，清楚的玩家操作說明及互動是很重要的遊戲要素。因此，像一般的連連看遊戲，都會在玩家選擇圖示之後，把玩家所選擇的圖示做效果，提示玩家已經選擇了某個符號。並且在玩家選擇了第二個符號且連線成功時，會顯示所經過的路徑，並畫出一條線來消除這兩個符號，如下圖： 在這一篇裡，我們就要實做這樣的功能。 Graphics 這邊是官網使用Graphics的一個使用範例：Graphics 這是API說明：http://pixijs.download/release/docs/PIXI.Graphics.html 下面是畫線的一個簡單範例： 成果如下： 而這是畫矩型的一個簡單範例： 成果如下： 為方塊加上選取效果 在過去，我們在產生方塊是直接new一個Sprite並加入場景，而現在方塊要能夠有被選取、取消選取的功能，因此我們將方塊拉出成為一個獨立的類別GameIcon。 其內容如下： 接著我們在GameBoard.ts裡，撰寫兩個方法iconSelected及iconUnSelected如下： 然後改寫GameBoard.ts裡的createIcon方法 為消除加上連線路徑 當成功消除兩個方塊時，應該要有剛剛連線的路徑，這樣使用者才能夠確定連線的方式是正確的，現在我們要為遊戲加上這個功能。 我希望能夠在盤面的上方加上一層圖層，能夠繪製剛剛成功消除的方塊的連線路徑。之前我們在[6 – 遊戲邏輯] 連線消除程式撰寫的地方，所撰寫的Path類別若呼叫canLinkInLine()結果反回為true的話，同時亦會把所經的路徑的點塞入path_Detail這個陣列裡面。 所以這個類別的主要職責，應該是要能夠把輸入的path裡的路徑畫出來。為了要使這個圖層能更方便的在各個地方被取用，我使用了singleton方法來建立這個物件，這樣所有的類別都可以利用LinkedLine.instance來取得這個元件惟一的實體。 下面為LinkedLine.ts的資料 接著在GameBoard.ts裡連線成功時加上這行來繪製連線 並在GameScene.ts裡加上LinkedLine元件…

動畫物件 在一般的2D遊戲中，動畫可以用2D骨骼動畫製作（如：Spine）、粒子系統（如：Particles）、或者使用Tween(如：gsap）以及逐格動畫來製作。 下面為這四種動畫的介紹： 骨骼動畫：針對角色動畫的骨架做設定，並且經由改變骨骼元件方向及變形來讓角色做出如行走、跳躍等動態動作。使用骨骼動畫可以大大降低角色所占的圖像空間，尤其是在2D的遊戲裡，這是不可或缺的技術。 粒子系統：有許多編輯器可以編輯出粒子效果的設定檔，並藉由粒子系統的程式來做出特效。 Tween：針對一個物件的某個屬性去設定一段時間將該屬性從a數值變成b數值。可以用在物件位移（更動x、y屬性）、放大縮小（更動scale）、旋轉（更動rotate）等效果上。也可以更改自定義屬性，如跑分效果（將分數慢慢加上去）。 下面是官網上的一個效果範例： 逐格動畫：逐格動畫是最簡單原始的動畫類型，由許多張的動態圖組合成為一幅動畫。逐格動畫的動畫製作能夠最精緻、最多樣化，但是也需要花最多力氣在繪製圖像，並且會有很大的檔案大小。其原理與一般電影、gif檔相同。 逐格動畫 PIXI.extras.AnimatedSprite是在Pixi.JS裡處理動畫的類別，官網對此類別的說明如下： An AnimatedSprite is a simple way to display an animation depicted by a list of…