[23- Pixi教學] 復原按鈕功能實作

堆疊與佇列

堆疊 (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
今日成果下載: ironman20181107

[22- Pixi教學] 按鈕動態- Tween

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, SVG, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms.

因為GSAP可以使用GPU加速,因此在執行速度效能上會勝過jQuery,也因為它是很單純的去漸變改變某個屬性,所以我們可以很容易的使用在任何我們可操控的屬性上去製作動畫效果,是一個十分強大好用的工具。

要嘗試動畫效果的樣式和程式寫法,官網有提供GSDevTools可供我們使用,可以更容易的編輯我們要的動畫樣式

TweenLite

TweenLiteTweenMax是當我們只有一個Tween時可使用的,例如:把一個物件從左邊移到右邊。

而這兩個類別的差異在於TweenMax提供更多的參數和方法可供我們使用

TimelineLite

TimelineLiteTimelineMax則是當我們要做一系列的Tween時可使用的,例如:某按鈕按下去要先放大再縮小再彈回來。

而TimelineLite與TimelineMax的差異也是TimelineMax提供更多方法和參數可以使用。

為按鈕加Tween效果

首先我們要在專案裡加入使用gsap

以及@types/gsap

設定在build的時後要複製TweenLite.min.js及TimelineMax.min.js到libs裡(gulpfile.js)

並在index.js裡加上

接著修改ButtonBase.ts的內容如下:

今日成果

線上成果展示:http://claire-chang.com/ironman2018/1106/
今日成果下載:ironman20181106

[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