[27- Pixi教學] PixiParticles

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

[26- Pixi教學] 實作所有遊戲功能

還未完成的功能

前一篇的成果和我們的mockup相比

還有時間、生命和FB按鈕還未完成。

今天我們要將這些功能全部實作完成。

時間倒數

新增Clock.ts,內容如下

重整次數限制

新增Stars.ts,內容如下:

FB按鈕實作

新增FBBtn.ts,內容如下:



將元件放進場景

在GameScene.ts新增下面程式碼:

今日成果

最終遊戲畫面:

所有commit紀錄請見GITHUB:https://github.com/cochiachang/ironman2018
今日成果demo:http://claire-chang.com/ironman2018/1110/
今日檔案下載:ironman20181110

[25- Pixi教學] 遊戲開始、結束與過關畫面

遊戲關卡概念

每個遊戲一般都會需要關卡的概念,也就是過關後可以再重新進行遊戲,並且需要有關卡結局畫面。
今天我們就是要製作這樣的一個過關或遊戲結束的畫面,如下圖:

在pixi內使用文字

在pixi4.0之後可以直接利用pixi來做出很漂亮的文字效果,以下為官網的範例

成果如下:

現在更支援Bitmap font,請參見官網的demo

顯示成果如下:

新增遊戲關卡畫面

新增檔案GameRoundEnd.ts,內容如下:

並修改GameBoard.ts內iconClickHandler的內容如下

今日成果

線上demo:http://claire-chang.com/ironman2018/1109/
今日成果下載:ironman20181109