[21- Pixi教學] 連線效果實作-Graphics

連連看連線及選擇題示

在進行遊戲時,清楚的玩家操作說明及互動是很重要的遊戲要素。因此,像一般的連連看遊戲,都會在玩家選擇圖示之後,把玩家所選擇的圖示做效果,提示玩家已經選擇了某個符號。並且在玩家選擇了第二個符號且連線成功時,會顯示所經過的路徑,並畫出一條線來消除這兩個符號,如下圖:

在這一篇裡,我們就要實做這樣的功能。

Graphics

這邊是官網使用Graphics的一個使用範例:Graphics
這是API說明:http://pixijs.download/release/docs/PIXI.Graphics.html
下面是畫線的一個簡單範例:

成果如下:

而這是畫矩型的一個簡單範例:

成果如下:

為方塊加上選取效果

在過去,我們在產生方塊是直接new一個Sprite並加入場景,而現在方塊要能夠有被選取、取消選取的功能,因此我們將方塊拉出成為一個獨立的類別GameIcon
其內容如下:

接著我們在GameBoard.ts裡,撰寫兩個方法iconSelectediconUnSelected如下:

然後改寫GameBoard.ts裡的createIcon方法

為消除加上連線路徑

當成功消除兩個方塊時,應該要有剛剛連線的路徑,這樣使用者才能夠確定連線的方式是正確的,現在我們要為遊戲加上這個功能。

我希望能夠在盤面的上方加上一層圖層,能夠繪製剛剛成功消除的方塊的連線路徑。之前我們在[6 – 遊戲邏輯] 連線消除程式撰寫的地方,所撰寫的Path類別若呼叫canLinkInLine()結果反回為true的話,同時亦會把所經的路徑的點塞入path_Detail這個陣列裡面。

所以這個類別的主要職責,應該是要能夠把輸入的path裡的路徑畫出來。為了要使這個圖層能更方便的在各個地方被取用,我使用了singleton方法來建立這個物件,這樣所有的類別都可以利用LinkedLine.instance來取得這個元件惟一的實體。

下面為LinkedLine.ts的資料

接著在GameBoard.ts裡連線成功時加上這行來繪製連線

並在GameScene.ts裡加上LinkedLine元件

今日成果

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

[20- Pixi教學] 連連看公仔實作- 逐格動畫

動畫物件

在一般的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 textures.

也就是可以用來播放由多張連續的圖檔組成的逐格動畫,在前面的[13- 遊戲製作] 素材處理的部份,已經有分享過該如何將連續圖檔打包成所需的格式,在這一章裡,則會在遊戲裡來實際使用這些連續圖檔。

角色動畫需求

在遊戲中,我們希望角色動畫可以在不同的時間播放不同的動畫,讓角色與遊戲能夠更有互動感,播放時機與動畫的設計如下:

    • 待機動畫:播放Character_Idle.json
      消除成功時:播放Character_Laugh.json
      按下提示時:播放Character_Jump.json
  • 角色動畫程式撰寫

    1. 產生動畫元件: 傳入要產生的動畫名稱,然後設定動畫完成後要呼叫的動作。

    2. 產生動畫並設定handler:因為動畫若播到一半被中斷會很突兀,這邊一律是等到動畫播完後,才會依狀態判斷下一個要播的動畫

    Container特性

    在上面,我們是直接產生三個動畫物件,在需要使用時才會把visible設為true並且播放,因此要小心是否會造成效能問題,在研究了一下Container.js的原始碼,可以發現如果當元件的visible為false時,是不會去render這個物件的,也不會去處理其相關子元件的畫面變更。


    Source:Container.js

    在經過實測後,的確將畫面上不會被看到的元件的visible設為false後,能夠提升畫面的fps,因此這也是開發上一個可以多加利用的小技巧。

    另外,filter的使用,會花費較多的效能,需要謹慎使用。而mask下的物件,即便因為mask而無法看到,仍舊會一直被render,因此即便是已經在mask下因此畫面上無法看見的元件,依然建議要把可試範圍外的物件的visible設為false,以提升遊戲效能。

    今日成果


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

    [19- Pixi教學] 連連看盤面實作

    PIXI顯示元件介紹

    PixiJS裡較常使用的顯示元件有:PIXI.ContainerSpriteAnimatedSprite

    PIXI.Container在官網上的解釋如下:

    A Container represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.

    簡而言之Container就是一個可以放其他顯示元件的一個容器,像SpriteAnimatedSprite等也都是繼承自Container的顯示元件,因此也都可以再在裡面放其他的顯示元件。
    下面是一個簡單的使用範例:

    Sprite是可以放單張的靜態圖檔元件。

    The Sprite object is the base for all textured objects that are rendered to the screen

    下面是一個簡單的使用範例:

    AnimatedSprite則可以把多張連續的圖檔播放成連續的動畫。

    An AnimatedSprite is a simple way to display an animation depicted by a list of textures.

    下面是一個簡單的使用範例:

    連連看邏輯程式

    之前在第一部份我們完成的程式碼在此:ironman20181022

    在這一篇我們要將第一篇所寫完的連線邏輯套入pixiJS版本的連連看遊戲之中。

    搬移邏輯部份的檔案

    在邏輯程式的部份,PathBoardDirection都可以直接移來專案內使用。
    這些程式碼的邏輯解釋在前幾篇的系列文中都有詳細的說明。

    新增Path.ts內容如下:

    新增Board.ts,內容如下:

    新增Direction.ts,內容如下:

    需要另外撰寫的部份

    第一部份邏輯的介面我們是使用angularJS來做呈現,而現在的專案則需要使用pixiJS,因此呈現部份的程式碼需要重新撰寫。

    首先我們先創立一個檔案名為GameBoard.ts,要放置所有的圖示。

    然後在GameScene.ts加入這個元件:

    
    

    實際撰寫GameBoard的邏輯

    完整的程式碼內容如下:

    今日成果

    今天終於有個連連看遊戲的樣子了!

    程式碼下載:ironman20181103
    線上demo:http://claire-chang.com/ironman2018/1103/