Claire's Blog

 載入所使用的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 過去 width number 800 renderers view的寬 height number 600 renderers view的高 view HTMLCanvasElement 遊戲場景要放置的canvas目標，如果沒有傳入，則會新建一個canvas做為回傳 transparent…

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匯出圖片集 如果要匯出多個圖檔至一個圖片集，則在元件庫先整理過元件的名稱，預設adobe animate會以元件庫的名稱做為在json內的識別id。 接著一次選擇多個要匯出的圖檔，點右鍵，選擇Generate Sprite Sheet 左邊可以看到將要輸出的sprite sheet裡會有那些圖檔，圖檔的id為何，選項的部份與動畫匯出相同。 音效下載 我是在這邊尋找適合的音效：小森平的免費下載音效 最後打包好的素材集 請按此下載：assets

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

什麼是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的生態圈，我們可以在其官網上搜尋、下載、安裝、使用、並管理我們所需要的模組。 模組的選擇 一般而言，在選擇npm的模組時，要去注意一下這個模組的開發者是否有持續在更新、維護模組內容。並從單周下載量，來評估這個套件的普及度，一般很多人在用的套件會較可信賴。 由於node的生態圈現在還算是個戰國時代，有許多在上面分享的模組很有可能過了一陣子發現了bug，套件的開發者卻已經沒在維護了，我們還得要去研究套件本身是否有某些程式碼會造成這bug，會讓我們在開發時的成本大大增加。 上圖中的weekly download、last publish以及下圖中的Dependents（有多少專案使用這個模組）都是我們要去觀察一個套件的指標。 另外網路上相關教學、使用手冊完整度、網路論壇討論度、是否適合我們的專案，也是我們可拿來做選擇模組的考量點。 我所選擇的套件 – 環境與部署相關 run-sequence：可讓gulp的task循序被執行。 del：可以去刪除本機的檔案。 gulp：可以編寫complier時要做的動作的腳本 gulp-typescript：可以使用gulp來呼叫TypeScript的API去將typescript轉為js gulp-sourcemaps：可以產生一份xxx.ts.map的檔案，我們可以在debug時連到原始的ts檔案去做偵錯。 browser-sync：可以同步瀏覽器，當有檔案被更新時瀏覽器會自動重新整理。…

關於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 desktop and mobile. Helping Goodboy and hopefully you achieve the big fat goal of “Build…

遊戲開發技術介紹 在開發遊戲時，遊戲畫面、特效、音效的呈現是吸引玩家很重要的關鍵，也是讓玩家能夠更加放鬆的享受遊戲內容的必備要素，例如現在強調的虛擬實境等，也都是為了此目的而存在。 因此在開發遊戲程式時，會較一般網頁或應用程式的開發上，花更多的時間與心力在畫面的串接以及動畫邏輯撰寫，讓遊戲畫面能夠與玩家有更多的互動。 如畫面元素的物理性、玩家投擲物體時飛落的路徑、物件間碰撞的偵測與觸發的事件、遊戲角色特定的動作該配合出現的特效、攻擊時的特效粒子系統、特殊效果的畫面濾鏡等等…。 上述的每一個項目都有相關的技術要去學習，可幫助我們更快上手。 如：憤怒鳥所使用的物理引擎為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所帶來的效益。 有了3D圖形庫，撰寫可以擅用GPU的一個遊戲引擎不再困難重重。以前還沒有統一的API規範時，開發3D遊戲必需要先有配合的GPU硬體廠商，並且針對該硬體去撰寫相關的驅動程式，來使用GPU的運算功能，這會讓開發3D的遊戲困難重重。3D圖形庫最有名的有Direct3D和OpenGL。雖然DirectX在家用市場全面領先，但在專業高端繪圖領域，OpenGL是不能被取代的主角。  OpenGL OpenGL是個與硬體無關的軟體介面，可以在不同的平台如Windows 95、Windows NT、Unix、Linux、MacOS、OS╱2之間進行移植。這些API規範描述了繪製2D和3D圖形的抽象API。這些API雖然可以完全透過軟體去撰寫，但它是為大部分或者全部使用GPU硬體加速而設計的。OpenGL規範由1992年成立的OpenGL架構評審委員會（ARB）維護。OpenGL不僅語言無關，而且平台無關，在各種平台及設備都有支援OpenGL的介面，移植性較佳。 近年來由於WebGL的推出，讓網頁的3D效果也能夠享受到GPU加速效果，使得3D的遊戲得以在網頁上被實現。Three.js就是一個基於OpenGL使用javascript做開發的3D引擎。 OpenGL是一個不斷進化的API。新版OpenGL規範會定期由Khronos Group發布，通過擴展API來支援各種新功能。 Direct3D Direct3D是DirectX下的一個子項目。提供設計人員一個共同的硬件驅動標準，讓遊戲開發者不必為每一品牌的硬件來寫不同的驅動程序，也降低用戶安裝及設置硬件的複雜度。 舉個例子，以前在DOS下玩遊戲時，不像現在安裝就可以玩了，過去往往要先設置聲卡的品牌和型號、然後還要設置IRQ（中斷）、I/O（輸入於輸出）、DMA（存取模式），如果哪項設置的不對，那麼遊戲聲音就發不出來。這部分的設置不僅讓玩家傷透腦筋，而且對遊戲開發者來說就更頭痛了。因為為了讓遊戲能夠在眾多電腦中正確運行，開發者必須在開始製作遊戲前,便把市面上所有音效卡的硬體數據都收集過來，然後根據不同的API來寫不同的驅動程式，這對於遊戲製作公司來說，是很難完成的，所以說在當時多媒體遊戲很少。 微軟看到了這個問題，為眾廠家推出了一個共同的應用程序接口——DirectX，只要這個遊戲是依照Directx來開發的，不管你是什麼顯卡、聲卡、統統都能玩，而且還能發揮更佳的效果。當然，前提是你的顯卡、聲卡的驅動程序也必須支持DirectX才行。 以現況來說，OpenGL因為具有OpenGL多平台支援的特色，同一套程式可以直接被套用在各種不同的平台，因此在專業高端繪圖領域，OpenGL是不能被取代的主角，在包含CAD，內容創作，能源，娛樂，遊戲開發，及虛擬實境等行業領域中，OpenGL得到廣泛的應用。DirectX適合於多媒體，娛樂，及時3D動畫等廣泛和實用的3D圖形計算，在基於windows平台上的遊戲開發中，它占領了大部分的市場。 遊戲平台介紹…

遊戲的要素 前一篇的成果是連連看的純邏輯程式，沒有具備一般遊戲必備的遊戲畫面、動畫、音效、特效等…。 其成果看起來是這樣的： 只有數字的畫面、沒有連線效果只有文字，一般人很難能夠有耐性的持續玩它，去享受其中遊戲的樂趣。 其實，一款成功的遊戲應有幾個不可或缺的要素： 要素一：畫面及音效 要素二：內容架構 要素三：收費機制 要素四：耐玩度及娛樂性 在前一個單元裡，我們完成了這個遊戲內容架構（遊戲邏輯）的部份，這當然是一款遊戲最核心的部份。但是只有這樣，還沒辦法成為一個真正能夠吸引人的遊戲。一個真正能夠吸引人並要能夠持續經營、生存下去的遊戲，上述的四個要點都是不可或缺的。 以智冠的四川省3000來說，就在相同的連連看機制上加了許多額外的遊戲規則和元素，增加遊戲的遊戲性。 例如在一般的過關模式，增加了角色動畫來加強遊戲視覺的享受，並有時間上的限制來增加遊戲緊張感： 並新增了對戰模式，消除特定的圖示來獲得勝利，並要阻擋對方消除到目標的圖示 增加競賽的元素例如高分榜等，也可以增加玩家競爭的動機，讓黏著度提高。 看到上面的遊戲畫面，是不是覺得比起前一篇的成果更吸引你想要去玩看看呢？ 在後面的章節中，我們會慢慢將這些遊戲元素加進我們的連連看遊戲裡面。 現在先讓我們來更深入的從「遊戲的發展歷史」來更深入的了解遊戲產業以及相關成功作品所具備的特色。 喜愛遊戲的我們，就讓我們一起回到年輕時代的我們所熱愛過的遊戲吧！Let’s Go! 遊戲的回憶櫥窗 1970-1983年代 1970年代較流行的是大型的遊戲機台，在那個年代的小朋友，下課時總喜歡跑去遊戲機的店裡投幾個硬幣，來玩幾場遊戲，當作下課最開心的休閒娛樂（然後再被大人抓回家）。 在1980年開始有了掌上型的遊戲機，任天堂的Game & Watch開始生產，這是首次有較小型的遊戲機，如下圖： 1983-1990年代 1983年末至1984年早期，製造北美家庭電腦電子產品的幾間公司紛紛破產，終結了電子遊戲的第二世代。隨著1983年的蕭條，電腦遊戲市場於1984年取代了家用機市場。當時電腦提供同等能支援遊戲的硬體能力，並且因為它們簡單的設計允許遊戲在電腦一開機就完全取得硬體的控制，這種方式相當接近如玩家用機般的簡單直接。 家用遊戲機1983年7月15日在日本以「Family Computer」（ＦＣ）為名推出，1985年起在歐美以「Nintendo Entertainment System」（簡稱「NES」）為名發行。紅白機是當時最暢銷的遊戲機，全球累計銷量超過了6100萬台。紅白機出現對電子遊戲產生了十分深遠的影響，讓美國電子遊戲界從1983年的崩潰中恢復過來，1985年發售的超級瑪琍，奠定了FC的初步成功。 後續1986年《勇者鬥惡龍系列》第一部《勇者鬥惡龍》發行，這款遊戲在當時風行了很長的一段時間，相信很多讀者也都對這款遊戲很有印象。這款遊戲在日本文化上造成有史以來的奇蹟，又稱國民RPG。 在1987年，最終幻想的第一代出現在市場上，這款遊戲至今仍然是許多人心目中最棒的遊戲，它至今已經出到第15代了，這款遊戲的畫面與音效都獲得很大的好評。它是個效法《勇者鬥惡龍》的角色扮演遊戲 （RPG）。《Final Fantasy系列》的賣座拯救了史克威爾公司免於破產，也是遊戲商心裡最成功的RPG角色扮演遊戲。那時的任天堂在家用遊戲機裡一枝獨秀，奠定了任天堂在當今遊戲界的地位。遊戲機的後續機種為1990年推出的超級任天堂。 約於同時，《薩爾達傳說系列》首部《薩爾達傳說》在1986年於FC遊戲機上登場。這款遊戲也是很經典且在Wii、DS、3DS等都有製作其續集，近年新出的Switch也有推出『薩爾達傳說 曠野之息』，依然獲得了極高的評價。 1990-2000年代 而在1990年代，隨著個人電腦處理器計算能力的增加以及成本降低，開始出現了使用3D運算的遊戲。在1996年後，隨著個人電腦上使用的平價3D加速卡，3D的遊戲包括RTS遊戲如微軟《世紀帝國》、暴雪娛樂的《魔獸爭霸》與《星海爭霸》系列、以及回合制的遊戲如《魔法門之英雄無敵》，都陸續出現在市場上。 1990開始也是台灣本土遊戲最興盛的時期，智冠的神州八劍與大宇的軒轅劍都在此時發行。…

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

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

搜尋邏輯思考 在連連看裡面，連線的線條不可超過兩個轉彎處，兩個轉彎處的意思，代表連接的線最多只能由三條直線來組成。 這時候我們來思考該如何找出這兩點間所存在的那條線。先觀察一下棋盤，最多三條直線，代表有可能是一條直線、兩條直線或三條直線來做連接的。 不論如何，兩個點之間的那條線，一定一邊是從第一個點(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 min = Math.max(pointC.y,pointD.y); let max = Math.min(pointA.y, pointB.y); for (var i = max;i>=min;i–) { if…