Claire's Blog

實作提示按鈕 新增檔案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 今日成果下載： ironman20181107

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…

連連看連線及選擇題示 在進行遊戲時，清楚的玩家操作說明及互動是很重要的遊戲要素。因此，像一般的連連看遊戲，都會在玩家選擇圖示之後，把玩家所選擇的圖示做效果，提示玩家已經選擇了某個符號。並且在玩家選擇了第二個符號且連線成功時，會顯示所經過的路徑，並畫出一條線來消除這兩個符號，如下圖： 在這一篇裡，我們就要實做這樣的功能。 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元件 今日成果 線上demo：http://claire-chang.com/ironman2018/1105/ 今日成果下載：ironman20181105

動畫物件 在一般的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：因為動畫若播到一半被中斷會很突兀，這邊一律是等到動畫播完後，才會依狀態判斷下一個要播的動畫…

PIXI顯示元件介紹 PixiJS裡較常使用的顯示元件有：PIXI.Container、Sprite、AnimatedSprite 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就是一個可以放其他顯示元件的一個容器，像Sprite、AnimatedSprite等也都是繼承自Container的顯示元件，因此也都可以再在裡面放其他的顯示元件。 下面是一個簡單的使用範例： Sprite是可以放單張的靜態圖檔元件。 The Sprite object is the base for all textured…

開啟按鈕效果 官網點擊效果範例：https://pixijs.io/examples/#/basics/click.js 預設sprite是無法被點擊到的，因為要偵測這些事件會讓sprite更耗資源，因此如果我們想要讓一個sprite可以被點擊，則要特別對元件設定： 在連連看專案加入按鈕 ButtonBase 因為連連看裡面有許多個按鈕，每個按鈕雖然功能不同，但是會有許多相似的設定，因此將按鈕抽出一個ButtonBase的父類別 ButtonBase.ts的內容如下： SoundBtn 新增一個檔案SoundBtn.ts，製作聲音開/關按鈕，內容如下： GameScene 因為除了聲音按鈕外，要設定整個場景還需要加入非常多東西，因此我新增了一個類別叫GameScene，主要在將所有場景上的物件加進場景裡 GameScene.ts其內容如下  實作靜音功能 在SoundMgr.ts加上靜音功能 今日成果 線上demo：http://claire-chang.com/ironman2018/1102/ 檔案下載：ironman20181102

 PixiJS Sound PixiJS本身有開發可供使用的PIXI.sound。 並且官網上有很詳細的使用範例以及API手冊：PixiJS Sound PixiJS Sound最大的優點是它可以與pixi的素材共用同一個Loader，下載mp3的資源檔案。並支援相當多種的音樂格式，也可以將多個音效壓縮在一個mp3內，再根據要開始與結束的秒數去切成多個聲音資源。在一般的狀況下，PixiJS Sound應為搭配PixiJS首選可使用的音樂函式庫 PixiJS Sound於TypeScript 不過很可惜的，PixiJS Sound現在在typescript上的支援度尚不是那麼的好。PixiJS Sound並沒有推出針對type script專案的函式庫，在開發上會帶給使用typescript的人帶來一些困擾。因此我選擇了另一款很受歡迎的聲音函式庫howler 下面是howler.js一些簡單的使用範例  在連連看專案內使用Howler 在ResourcesList.ts裡新增要下載的mp3檔案 新增SoundMgr.ts內容如下： 在Main.ts加入 並呼叫load()來下載音檔 需要注意的是，因為howler的loader與pixi本身的是兩個不同的loader，所以像這樣的寫法，很有可能剛進遊戲音效會還沒有載入完成，等到載完後才會播放聲音。如果希望一定要剛進遊戲就有聲音，那就需要把拿掉loading page的判斷另外加上音效是否載入完成的判斷。 今日成果 專案下載：ironman20181101 線上demo：http://claire-chang.com/ironman2018/1101/

 加入loading page 上一篇的成果在載入檔案時畫面就會停在那邊，一般的遊戲通常會有一個下載中的畫面，告知使用者現在下載了幾％，還差幾％還未下載完成。 因此今日我們就要來製作這個loading page 首先，在index.html裡加上一個div 並在style.css裡設定 這樣我們就會有一個很簡單的loading畫面如下圖 更新loading進度 直接用jquery去操控剛剛所設定的div裡面的文字顯示，來更新現在的下載進度： 整個Loader.ts修改後的程式碼如下： EventEmitter介紹 PIXI.utils.EventEmitter使用EventEmitter3，在pixiJSv4之後已直接被整理到pixi裡了。 這個套件可以讓我們在js裡很方便的使用事件，在動畫處理上，事件的監聽與發送可以讓我們在處理動畫上更加輕鬆，也可以降低這些元件間的相依性。 下面是EventEmitter3上的一個簡單使用範例 如果我們希望整個遊戲共用一個EventEmitter，可以將產生的EventEmitter做export： 要使用這個物件可以直接import進來 發送下載完成事件 在Loader.ts加入下面的程式碼： 接著在Main.ts裡設定下載完後要做的事情： 上面需要注意，因為我們在Loader.loader.load()裡將下載後的resource存在一個變數裡，所以我們可以直接使用 Loader.resources[“background”].texture 來取得某一個resource id下的texture。 今日成果 線上展示：http://claire-chang.com/ironman2018/1031/ 成果檔案下載：ironman20181031

用PIXI.Sprite來載入圖檔 在PIXI.Sprite裡有一個fromImage(‘URL’)的方法可以直接讓我們將某個圖檔載入Sprite裡面，如： 但這只能針對單張圖檔，而不能處理SpriteSheet的狀況。 並且當我們在做一個遊戲專案時，通常會需要先載完所有的遊戲素材，這樣才不會在進遊戲時看到未載完圖檔的空白而產生錯誤或破圖。 因此較多的時候，我們都會使用PIXI.loaders去下載並監聽下載進度，製作一個loading bar。 並在素材載入完成後才進入遊戲。  PIXI.loaders 下面為一個PIXI.loaders的簡單使用範例 PIXI.loaders是從resource-loader擴展的。 下面為resource-loader的GitHub上的一個簡單使用範例： 從範例可以看出，我們可以用onProgress、onError、onLoad、onComplete 來取得現在的下載進度，並且根據所傳入的參數來更新loading page要顯示的資訊。  開始載入連連看圖檔 新增一個檔案名為ResourcesList.ts，用來設定要載入的圖片並設定一個識別id給它。 其內容如下： 接著新增Loader.ts檔案，用來載入並監控下載進度。 並在Main.ts裡加上  觀察事件觸發時機 從console視窗可以看到我們在Loader內所下的log被觸發的時機 從上圖可知： onProgress：每一段時間都會更新現在下載的進度 onError：有載入失敗的圖檔會呼叫這個func，然後繼續執行後面的圖檔的載入動作 onLoad：每一個檔案下載完成都會呼叫這個function，載入一個spritesheet的json檔案，會呼叫兩次onLoad，一次是json載入，一次是載入這個json裡所指定要使用到的png檔案 onComplete：全部載入完成後會呼叫，要注意即使中間有檔案載入失敗也會呼叫此function  今日成果 線上展示：http://claire-chang.com/ironman2018/1030/ 今日檔案下載：ironman20181030