動畫物件 在一般的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…

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…

開啟按鈕效果 官網點擊效果範例：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的判斷另外加上音效是否載入完成的判斷。 今日成果…

 加入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。…

用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被觸發的時機 從上圖可知：…

 載入所使用的Library 在開發遊戲時我們會使用到PixiJS、SystemJS、和JQuery，因此我們會需要將這幾個library加進html裡。 首先我們新增一個index.html的入口檔案，內容如下： 打開這個html後，會看到找不到檔案的訊息。 這時我們在gulpfile.js裡增加一個task名為libs，將我們所需的檔案copy到目標資料夾 其內容如下： 這樣子就會在每次編譯時自動複製專案在使用的library進入build/lib裡。 設定場景 要設定一個PixiJS的遊戲場景，這個部份可以先參考關網的範例：Basics 範例裡創建場景的方式如下： PIXI.Application可以建立一個PIXI的canvas遊戲畫面，其相關API說明請見：PIXI.Application 這個類別有兩種建構子，可以達到相似的功能： 在PixiJS v4以後，官方將所有相關參數都整入options物件內，這樣使用上可以僅傳入需要自行設定的值就好。而要先傳入寬高的則是為了兼容舊版寫法。 若兩邊都傳入相同的屬性，會以optionst傳入的值為主。如上面程式碼產生的場景的width會是100。 PIXI.Application可用參數 在創建這個類別時，可以傳入的options參數如下： Name Type Default Description autoStart boolean true…

PixiJS能使用的素材 承上一篇文章，我們排好的UI介面，其最終的產出是一個fla檔案，但是這樣的檔案pixiJS是無法使用的。 因此我們必需要整理素材並匯出pixiJS可以使用的素材。 那麼，pixiJS可以使用那些素材呢？最基本的是單張的圖檔，但是因為HTTP/1.1在載入檔案是每個檔案都需額外處理request和response header，會讓下載的速度變慢。並且GPU在處理圖檔上，因GPU擅長矩陣處理，而同一張圖去做截取亦為一種矩陣處理，可以使用到GPU加速的優勢。因此在製作遊戲時，我們偏好使用SpriteSheet。SpriteSheet指的是很多張圖檔被整併到一大張圖檔裡。 如下圖這個動畫： 是由10張圖所構成的，那麼SpriteSheet會將這10張圖打包成一個png檔案。 並會產生一個json檔案，來設定每一個畫面要截取的範圍，其檔案內容如下： 在json裡的”0″，是代表這張圖片的id，之後我們要在pixi去取某個spritesheet的某一張圖，會需要使用到這個id來辨視我們要取的圖。在adobe animate裡，動畫的id他會自動幫我們從0~N這樣以流水號編下去。 另外，在pixiJS裡，某些設備沒辦法處理比4096更大的圖片。 有關於這部份的瀏覽器支援，請見：WebGL Stats 由上圖可看出現在尚有許多設備無法支援4096以上的尺寸的圖檔，這點在包圖時要注意一下 除了以上單張圖檔和SpriteSheet之外，PixiJS還可以使用spine的圖檔，不過由於spine的圖檔編輯軟體要價不斐，因此這次的小作品就先跳過了！ 從Adobe Animate匯出動畫連續圖 要從Adobe Animate匯出圖檔，首先要先打開元件庫，然後點擊該動畫元件，按下右鍵，最下方會有一個Generate Sprite Sheet。 接著會跳出一個設定頁面，我們選擇Algorithm為Basic，Data format為JSON，然後按下Export就可以了。 從Adobe Animate匯出圖片集…

連連看遊戲需求 我所規劃的連連看應要有下面的功能： 時間限制：需要在8分鐘內完成遊戲，否則就算是沒有過關。 重整牌面的限制：最多只能重整牌面3次，每次耗1點生命，生命值耗光遊戲就結束了。 音樂、音效需能開或關 重新整理牌面：可以手動洗牌 提示：提示可連線的路徑 復原：還原已消除的圖案 可連到我的FB 其版面配置如下： 尋找免費素材 有了mockup之後，身為一個不會美術的程式設計師，鐵人賽又沒有美術可以幫忙，最重要的就是去尋找免費素材。 這時候就要大推UNITY的Unity Asset Store 很快的我選擇了Free Platform Game Assets這款免費素材來做我連連看的基本素材，首先先登入網站，然後選擇 接著要在電腦裡安裝unity，安裝好之後，再按 接著就會在unity內開啟這個網頁畫面 按下import後，這包素材就會被下載至你剛剛所創的unity專案下的資料夾裡，按右鍵就可以在一般的資料夾找到所下載的素材。 製作遊戲介面 我是使用Adobe Animate來做畫面的繪製。Adobe…

什麼是NPM 下面是官網上對於NPM的說明 Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others. 簡而言之，NPM是一個套件管理的工具，我們可以使用npm來建立、分享、發佈模組，並且於其平台上分享、接收其他人對模組的反饋。 NPM創造了node的生態圈，我們可以在其官網上搜尋、下載、安裝、使用、並管理我們所需要的模組。 模組的選擇…