載入所使用的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的生態圈，我們可以在其官網上搜尋、下載、安裝、使用、並管理我們所需要的模組。 模組的選擇…

關於PixiJS 下面文字是官網裡對於 Pixi.js 特性的說法： Pixi.js is a 2D webGL renderer with a seamless canvas fallback that enables it to work across all modern browsers both…

遊戲開發技術介紹 在開發遊戲時，遊戲畫面、特效、音效的呈現是吸引玩家很重要的關鍵，也是讓玩家能夠更加放鬆的享受遊戲內容的必備要素，例如現在強調的虛擬實境等，也都是為了此目的而存在。 因此在開發遊戲程式時，會較一般網頁或應用程式的開發上，花更多的時間與心力在畫面的串接以及動畫邏輯撰寫，讓遊戲畫面能夠與玩家有更多的互動。 如畫面元素的物理性、玩家投擲物體時飛落的路徑、物件間碰撞的偵測與觸發的事件、遊戲角色特定的動作該配合出現的特效、攻擊時的特效粒子系統、特殊效果的畫面濾鏡等等…。 上述的每一個項目都有相關的技術要去學習，可幫助我們更快上手。 如：憤怒鳥所使用的物理引擎為Box2D，物理引擎可以賦與物體物理特性，具有掉落、碰撞等特性； 如：Spine、DragonBones等骨骼動畫套件，壓縮2D遊戲所需要的素材大小。 像這隻龍走動的動畫 可以用這張圖搭配骨骼動畫引擎來組合成上圖的動畫 如：particles.js粒子系統可以讓美術可以使用特效產生器產生特效的設定檔案，並能夠於遊戲中執行。 另外在遊戲開發上，對數學、物理、色彩矩陣等的了解度也是十分重要。 例如Shader是一個能夠透過一連串的數學公式，去針對一個圖片來做出特殊的動畫效果，如水波效果、風吹效果、霧霾、煙霧效果等…。 有了上面這些技術的幫助，我們可以不用每一個特效都要製作連續圖檔，降低美術的負擔，也能讓特效有更多的變化性、更小的遊戲檔案大小。 在學習那些技術之前，我們首先先來認識最基礎的Graphics Library。 Graphics Library 現在的Graphics Library主要的作用，是幫助我們能夠使用GPU來做電腦圖像處理。GPU，圖形顯示器，又稱顯示核心、視覺處理器、顯示晶片或繪圖晶片，是一種專門在個人電腦、工作站、遊戲機和一些行動裝置（如平板電腦、智慧型手機等）上執行繪圖運算工作的微處理器。 在GPU尚未出現前，圖形的繪製是和一般的複雜運算一起使用CPU去做運算，因為影像輸出的處理會需要大量的運算，會讓電腦的運算速度被拖慢。直到1999年8月輝達公司（NVIDIA）在發表GeForce 256繪圖處理晶片時，提出了將影像輸出的顯示晶片，視為獨立的運算單元的概念。 GPU不同於傳統的CPU，傳統CPU內核數量較少專為通用計算而設計。相反，GPU是一種特殊類型的處理器，具有數百或數千個內核，經過最佳化，可並列執行大量計算。雖然GPU在遊戲中以3D彩現而聞名，但它們對執行分析、深度學習和機器學習演算法尤其有用，近年來十分流行的AI人工智慧，由於在大數據處理時需做許多的矩陣計算，也用到GPU其特殊運算的功能。GPU可讓某些計算比傳統CPU上執行相同的計算速度快10倍至100倍。 起初，高效能3D圖像只可經設有3D加速功能（和完全缺乏2D GUI加速功能）的獨立繪圖處理卡上運算，如3dfx的Voodoo。然而，由於製造技術再次進步，影像、2D GUI加速和3D功能都整合到一塊晶片上，現在許多2D的遊戲引擎也都能夠享受GPU所帶來的效益。…

遊戲的要素 前一篇的成果是連連看的純邏輯程式，沒有具備一般遊戲必備的遊戲畫面、動畫、音效、特效等…。 其成果看起來是這樣的： 只有數字的畫面、沒有連線效果只有文字，一般人很難能夠有耐性的持續玩它，去享受其中遊戲的樂趣。 其實，一款成功的遊戲應有幾個不可或缺的要素： 要素一：畫面及音效 要素二：內容架構 要素三：收費機制 要素四：耐玩度及娛樂性 在前一個單元裡，我們完成了這個遊戲內容架構（遊戲邏輯）的部份，這當然是一款遊戲最核心的部份。但是只有這樣，還沒辦法成為一個真正能夠吸引人的遊戲。一個真正能夠吸引人並要能夠持續經營、生存下去的遊戲，上述的四個要點都是不可或缺的。 以智冠的四川省3000來說，就在相同的連連看機制上加了許多額外的遊戲規則和元素，增加遊戲的遊戲性。 例如在一般的過關模式，增加了角色動畫來加強遊戲視覺的享受，並有時間上的限制來增加遊戲緊張感： 並新增了對戰模式，消除特定的圖示來獲得勝利，並要阻擋對方消除到目標的圖示 增加競賽的元素例如高分榜等，也可以增加玩家競爭的動機，讓黏著度提高。 看到上面的遊戲畫面，是不是覺得比起前一篇的成果更吸引你想要去玩看看呢？ 在後面的章節中，我們會慢慢將這些遊戲元素加進我們的連連看遊戲裡面。 現在先讓我們來更深入的從「遊戲的發展歷史」來更深入的了解遊戲產業以及相關成功作品所具備的特色。 喜愛遊戲的我們，就讓我們一起回到年輕時代的我們所熱愛過的遊戲吧！Let’s Go! 遊戲的回憶櫥窗 1970-1983年代 1970年代較流行的是大型的遊戲機台，在那個年代的小朋友，下課時總喜歡跑去遊戲機的店裡投幾個硬幣，來玩幾場遊戲，當作下課最開心的休閒娛樂（然後再被大人抓回家）。 在1980年開始有了掌上型的遊戲機，任天堂的Game & Watch開始生產，這是首次有較小型的遊戲機，如下圖：…

 判斷是否存在任一條路徑 在這個連連看遊戲中，是有可能存在死局的，也就是沒有任何兩個圖案可以用兩個轉彎內的線連接起來時。這時我們需要讓電腦能夠自動判斷這種狀況並做出反應，讓玩家可以更明確知道是否有可行的路徑。 那要如何判斷是否存在任一可能路徑呢？有幾個條件： 第一點：電腦能夠判斷連線是否合法 第二點：遍歷所有可能的圖案去確認是否存在可能路徑 第一點在上一篇我們已經做到了，因此在這一篇，我們要找到一個較省時的方式去遍歷所有可能的連線是否存在。 搜尋方法構思 下圖是我在思考電腦自動搜尋時的搜尋邏輯： 因為我希望電腦在搜尋時，能夠避免搜尋已搜尋過的路徑，因此應要紀錄已搜尋過的組合有那些。 為了方便紀錄與判別是否已搜尋過，我決定以圖案來做搜尋依據，由最盤面最左上開始，每遇到一個符號，就判別該符號是否有任何可能可以連線的兩個圖案。 所以我們會需要下面幾件事情： 遍歷盤面，並在找到路徑時停止搜尋 紀錄已搜尋過的符號並避免重複搜尋 列出現有符號可能兩兩連線的所有排列組合 判別兩點間能否連線 程式實作 第四點我們在上一篇文章裡已經完成該功能，因此現在我們應該要做的有1~3項，這部份的程式碼如下： 而重整盤面的程式碼如下： public rearrangeBoard(){ let values = this.getAllValueInBoard().sort((a,…

主要遊戲流程 連連看點選兩個圖案後，可消除的邏輯是: 兩個所點擊到的圖案相同 連線不超過兩個轉彎 因此我們先來寫遊戲主流程的部份，玩家會先點第一個圖案，代表他想要消除這個圖案，接著再消第二個圖案，這時再來判斷是否符合可消除，這部份的流程圖如下: 撰寫的程式碼如下 var app = angular.module(‘LianLianKan’, []); app.controller(‘myCtrl’, function ($scope) { $scope.select1 = new Point(-1, -1); $scope.select2 = new Point(-1, -1);…

搜尋邏輯思考 在連連看裡面，連線的線條不可超過兩個轉彎處，兩個轉彎處的意思，代表連接的線最多只能由三條直線來組成。 這時候我們來思考該如何找出這兩點間所存在的那條線。先觀察一下棋盤，最多三條直線，代表有可能是一條直線、兩條直線或三條直線來做連接的。 不論如何，兩個點之間的那條線，一定一邊是從第一個點(A)開始，到另一個點(B)結束，因此，可以視為這兩個點之中，有可能存在A點連出的的(C)點與B點連出的(D)點，來形成連線。 由上圖我們可以觀察出，A點連出的的(C)點絕對是和開始的(A)點在同一行或同一列，B點連出的(D)點絕對是和結束的點(B)點在同一行或同一列。 尋找可能的線的模型 首先，我們來畫出所有有可能連出來的線圖形狀，再來思考該如何去撰寫消除邏輯。 判斷是否存在此圖形的連線 從上面的圖型我們先來分析向左、上、下、右的邊消的情況，要如何去搜尋可能存在的路徑。 讓我們先看這張圖 圖中的(A)為起始點，(B)為終點，(C)為(A)點最左能走到的點，(D)為(B)點最左能走到的點。則淡紅色漸層的部份，就是存在著可能的路徑。 這個可能連線的區塊的座標應為: 左上(A.x,D.y)、右上(A.x, B.y)、右下(D.x,D.y)、左下(B.x,B.y)。 我們應該要取A_C與B_D的橫向座標(y)中，有交集的部份。 因此這部份的邏輯程式應為 let potinC = getPathLeftPoint(pointA); let pointD = getPathLeftPoint(pointB); let…