分類: 遊戲之美 – 連連看經典遊戲開發

Android系統的手機設備偵錯 在電腦上的偵錯工具首推的就是 Chrome 開發者工具，但是由於若我們想要做手機遊戲，不同的設備有可能會有不同的狀況，我們會需要在不同手機上去做除錯。如果是Android系統的手機，開啟Enable USB Debugging之後，用USB線連至電腦，則可以藉著使用chrome去做遠端偵錯。 偵錯步驟如下： 選擇 Settings > Developer Opti

遊戲效能評估方式 FPS是指影格速率，是用於測量顯示張數的量度。測量單位為「每秒顯示張數」（Frame per Second，FPS）或「赫茲」，一般來說FPS用於描述影片、電子繪圖或遊戲每秒播放多少影格。一般說來，顯示器的張數為60Hz，因此，若超過60的fps容易會有畫面撕裂的狀況產生。而60FPS的遊戲體驗會相較30FPS的遊戲體驗來得更順暢。 PixiJS的ticker的預設FPS為60

開發人員工具 Chrome 開發者工具是網頁開發者常在使用的偵錯工具，可以檢查下載的檔案、html的dom元素檢視及編輯、調整css等... 開發工具打開方式： 1. 功能表 -> 工具 -> 開發人員工具 2. 直接按 F12 叫出來 3. 在網頁任何位置按右鍵，選擇"檢查元素"，就可以看到原始碼。 工具有許多的面版在最上列，左邊也可以直接選擇要找的html元素的位置 上圖即為偵錯面板的圖示。

Particles System 遊戲經常透過粒子系統製作各種視覺效果，例如火焰、煙霧、下雨、沙塵、爆炸等效果，並不容易使用一般的動畫工具製作。通常粒子系統在三維空間中的位置與運動是由發射器控制的，發射器可以設定粒子生成速度（即單位時間粒子生成的數目）、粒子初始速度向量（例如什麼時候向什麼方向運動）、粒子壽命（經過多長時間粒子湮滅）、粒子顏色、在粒子生命周期中的變化以及其它參數等等。經由這些參數，

還未完成的功能 前一篇的成果和我們的mockup相比 還有時間、生命和FB按鈕還未完成。 今天我們要將這些功能全部實作完成。 時間倒數 新增Clock.ts，內容如下 [crayon-63db12374039e941177761/] 重整次數限制 新增Stars.ts，內容如下： [crayon-63db1237403a6380680475/] FB按鈕實作 新增FBBtn.ts，內容如下： [c

遊戲關卡概念 每個遊戲一般都會需要關卡的概念，也就是過關後可以再重新進行遊戲，並且需要有關卡結局畫面。 今天我們就是要製作這樣的一個過關或遊戲結束的畫面，如下圖： 在pixi內使用文字 在pixi4.0之後可以直接利用pixi來做出很漂亮的文字效果，以下為官網的範例 [crayon-63db123740786265603990/] 成果如下： 現在更支援Bitmap font，請參見官網的dem

實作提示按鈕 新增檔案TipBtn.ts，內容如下： [crayon-63db123740b3e627621450/] 在GameBoard.ts裡的constructor監聽TipsRequest事件 [crayon-63db123740b44400373016/] 並新增所需要的方法 [crayon-63db123740b47673939479/] 因為若玩家此時選擇了其他的方塊，我們需要把提

堆疊與佇列 堆疊 (Stack) 加入(push)與刪除(pop)於同一端 具有後進先出(LIFO, Last-in-First-out)或先進後出(FILO, First-in-Last-out)性質的有序串列 例子：疊盤子、發牌、走迷宮 佇列 (Queue) 加入(enqueue)與刪除(dequeue)於不同端(front & rear) 先進先出(FIFO, First-in-First-

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

連連看連線及選擇題示 在進行遊戲時，清楚的玩家操作說明及互動是很重要的遊戲要素。因此，像一般的連連看遊戲，都會在玩家選擇圖示之後，把玩家所選擇的圖示做效果，提示玩家已經選擇了某個符號。並且在玩家選擇了第二個符號且連線成功時，會顯示所經過的路徑，並畫出一條線來消除這兩個符號，如下圖： 在這一篇裡，我們就要實做這樣的功能。 Graphics 這邊是官網使用Graphics的一個使用範例：Graphic

動畫物件在一般的2D遊戲中，動畫可以用2D骨骼動畫製作（如：Spine）、粒子系統（如：Particles）、或者使用Tween(如：gsap）以及逐格動畫來製作。 下面為這四種動畫的介紹： 骨骼動畫：針對角色動畫的骨架做設定，並且經由改變骨骼元件方向及變形來讓角色做出如行走、跳躍等動態動作。使用骨骼動畫可以大大降低角色所占的圖像空間，尤其是在2D的遊戲裡，這是不可或缺的技術。 粒子系統：有許多編

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

開啟按鈕效果 官網點擊效果範例：https://pixijs.io/examples/#/basics/click.js 預設sprite是無法被點擊到的，因為要偵測這些事件會讓sprite更耗資源，因此如果我們想要讓一個sprite可以被點擊，則要特別對元件設定： [crayon-63db123742557113219533/] 在連連看專案加入按鈕 ButtonBase 因為連連看裡面有許多個

PixiJS Sound PixiJS本身有開發可供使用的PIXI.sound。 並且官網上有很詳細的使用範例以及API手冊：PixiJS Sound PixiJS Sound最大的優點是它可以與pixi的素材共用同一個Loader，下載mp3的資源檔案。並支援相當多種的音樂格式，也可以將多個音效壓縮在一個mp3內，再根據要開始與結束的秒數去切成多個聲音資源。在一般的狀況下，PixiJS Sou

加入loading page 上一篇的成果在載入檔案時畫面就會停在那邊，一般的遊戲通常會有一個下載中的畫面，告知使用者現在下載了幾％，還差幾％還未下載完成。 因此今日我們就要來製作這個loading page 首先，在index.html裡加上一個div [crayon-63db123742c34873141842/] 並在style.css裡設定 [crayon-63db123742c3959

用PIXI.Sprite來載入圖檔 在PIXI.Sprite裡有一個fromImage('URL')的方法可以直接讓我們將某個圖檔載入Sprite裡面，如： [crayon-63db123743086269039598/] 但這只能針對單張圖檔，而不能處理SpriteSheet的狀況。 並且當我們在做一個遊戲專案時，通常會需要先載完所有的遊戲素材，這樣才不會在進遊戲時看到未載完圖檔的空白而產生錯

載入所使用的Library 在開發遊戲時我們會使用到PixiJS、SystemJS、和JQuery，因此我們會需要將這幾個library加進html裡。 首先我們新增一個index.html的入口檔案，內容如下： [crayon-63db1237434c0630796115/] 打開這個html後，會看到找不到檔案的訊息。 這時我們在gulpfile.js裡增加一個task名為libs，將我們所

PixiJS能使用的素材 承上一篇文章，我們排好的UI介面，其最終的產出是一個fla檔案，但是這樣的檔案pixiJS是無法使用的。 因此我們必需要整理素材並匯出pixiJS可以使用的素材。 那麼，pixiJS可以使用那些素材呢？最基本的是單張的圖檔，但是因為HTTP/1.1在載入檔案是每個檔案都需額外處理request和response header，會讓下載的速度變慢。並且GPU在處理圖檔上，因

連連看遊戲需求 我所規劃的連連看應要有下面的功能： 時間限制：需要在8分鐘內完成遊戲，否則就算是沒有過關。 重整牌面的限制：最多只能重整牌面3次，每次耗1點生命，生命值耗光遊戲就結束了。 音樂、音效需能開或關 重新整理牌面：可以手動洗牌 提示：提示可連線的路徑 復原：還原已消除的圖案 可連到我的FB 其版面配置如下： 尋找免費素材 有了mockup之後，身為一個不會美術的程式設計師，鐵人賽又沒有美

什麼是NPM 下面是官網上對於NPM的說明 Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others. 簡而言之，NPM是一個套件管理的工具，我們可以使用npm來建立、分享、發佈模組，並且於其平台上分享、

關於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 hopefu

遊戲開發技術介紹 在開發遊戲時，遊戲畫面、特效、音效的呈現是吸引玩家很重要的關鍵，也是讓玩家能夠更加放鬆的享受遊戲內容的必備要素，例如現在強調的虛擬實境等，也都是為了此目的而存在。 因此在開發遊戲程式時，會較一般網頁或應用程式的開發上，花更多的時間與心力在畫面的串接以及動畫邏輯撰寫，讓遊戲畫面能夠與玩家有更多的互動。 如畫面元素的物理性、玩家投擲物體時飛落的路徑、物件間碰撞的偵測與觸發的事件、遊戲

遊戲的要素 前一篇的成果是連連看的純邏輯程式，沒有具備一般遊戲必備的遊戲畫面、動畫、音效、特效等...。 其成果看起來是這樣的： 只有數字的畫面、沒有連線效果只有文字，一般人很難能夠有耐性的持續玩它，去享受其中遊戲的樂趣。 其實，一款成功的遊戲應有幾個不可或缺的要素： 要素一：畫面及音效 要素二：內容架構 要素三：收費機制 要素四：耐玩度及娛樂性 在前一個單元裡，我們完成了這個遊戲內容架構（遊戲邏

判斷是否存在任一條路徑 在這個連連看遊戲中，是有可能存在死局的，也就是沒有任何兩個圖案可以用兩個轉彎內的線連接起來時。這時我們需要讓電腦能夠自動判斷這種狀況並做出反應，讓玩家可以更明確知道是否有可行的路徑。 那要如何判斷是否存在任一可能路徑呢？有幾個條件： 第一點：電腦能夠判斷連線是否合法 第二點：遍歷所有可能的圖案去確認是否存在可能路徑 第一點在上一篇我們已經做到了，因此在這一篇，我們要找到一

主要遊戲流程 連連看點選兩個圖案後，可消除的邏輯是: 兩個所點擊到的圖案相同 連線不超過兩個轉彎 因此我們先來寫遊戲主流程的部份，玩家會先點第一個圖案，代表他想要消除這個圖案，接著再消第二個圖案，這時再來判斷是否符合可消除，這部份的流程圖如下: 撰寫的程式碼如下 [crayon-63db123744392279719180/] 判斷所選圖案是否相同 在上面的程式碼中，可以看到我們用board.ha

搜尋邏輯思考 在連連看裡面，連線的線條不可超過兩個轉彎處，兩個轉彎處的意思，代表連接的線最多只能由三條直線來組成。 這時候我們來思考該如何找出這兩點間所存在的那條線。先觀察一下棋盤，最多三條直線，代表有可能是一條直線、兩條直線或三條直線來做連接的。 不論如何，兩個點之間的那條線，一定一邊是從第一個點(A)開始，到另一個點(B)結束，因此，可以視為這兩個點之中，有可能存在A點連出的的(C)點與B點連

棋盤設計 用一個陣列來代表盤面，裡面儲存1~N來代表不同的圖形 隨機產生盤面 觀察連連看遊戲裡，同樣的圖形通常會有四個，因此如果盤面是10x10的話，總共會有100的icon，一種icon會有四個，則代表會有25種不同的icon。 一開始為了方便測試，先製作6*6=36的棋盤，這樣會有36/4=9種不同的icon。 [crayon-63db123744a8b347939506/] 這時候可以看到已

VS Code Visual Studio Code（簡稱VS Code）是一個由微軟開發的IDE，它最大的優點就是它是完全免費且Open Source的。它支援偵錯，並內建了Git版本控制功能，同時也具有開發環境功能。我個人覺得他在算是滿方便好用的，自動提示、自動補完和顏色選擇功能都很強大。 這邊是下載連結：Download Visual Studio Code NPM NPM 是 Node P

何為演算法 演算法的簡單定義：輸入 + 演算法 = 輸出 這一篇文章有非常詳細的介紹演算法是什麼：初學者學演算法-談什麼是演算法和時間複雜度 一般判斷演算法的好壞是使用『空間複雜度』和『時間複雜度』來評估， 時間複雜度 所謂時間複雜度，指的是執行一段演算法，跑完整個運算邏輯所要花的時間。 雖然這個複雜度名為『時間複雜度』，但實際上，我們要真正衡量某個演算法時，是以步驟次數來看。 如果一個演算法執行

連連看遊戲起源 遊戲《連連看》顧名思義就是找出相關聯的東西連起來，做關連配對的一種益智遊戲。 最早是使用在幼兒教育的教具上，由於玩法簡單，常用作兒童啟蒙教育遊戲，建立兒童對物品之間的關連性連結。有一種字圖連連看，是專供幼童識字認圖的遊戲，與一般連連看不同的是它並非以一對相同圖案成對，而是以字配圖成對。相關內容連連看則是以兩張內容相關的卡片（可以是字或圖）配成對代替相同圖案。 後來出現了桌面遊戲的連