我的新書AI 職場超神助手:ChatGPT 與生成式 AI 一鍵搞定工作難題的教材投影片已製作完成
歡迎各位有需要的教師和博碩文化索取教材

遊戲之美 – 連連看經典遊戲開發

  • ,

    [10- 遊戲製作] PixiJS介紹

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

  • ,

    [9 – 遊戲介紹] 遊戲開發技術介紹

    遊戲開發技術介紹 在開發遊戲時,遊戲畫面、特效、音效的呈現是吸引玩家很重要的關鍵,也是讓玩家能夠更加放鬆的享受遊戲內容的必備要素,例如現在強調的虛擬實境等,也都是為了此目的而存在。 因此在開發遊戲程式時,會較一般網頁或應用程式的開發上,花更多的時間與心力在畫面的串接以及動畫邏輯撰寫,讓遊戲畫面能夠與玩家有更多的互動。 如畫面元素的物理性、玩家投擲物體時飛落的路徑、物件間碰撞的偵測與觸發的事件、遊戲角色特定的動作該配合出現的特效、攻擊時的特效粒子系統、特殊效果的畫面濾鏡等等…。 上述的每一個項目都有相關的技術要去學習,可幫助我們更快上手。 如:憤怒鳥所使用的物理引擎為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所帶來的效益。…

  • ,

    [8 – 遊戲介紹] 遊戲歷史簡介

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

  • ,

    [7 – 遊戲邏輯] 電腦搜尋路徑

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

  • ,

    [6 – 遊戲邏輯] 連線消除程式撰寫

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

  • ,

    [5 – 遊戲邏輯] 圖形連線消除邏輯發想

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

  • ,

    [4 – 遊戲邏輯] 產生初始盤面

    棋盤設計 用一個陣列來代表盤面,裡面儲存1~N來代表不同的圖形 隨機產生盤面 觀察連連看遊戲裡,同樣的圖形通常會有四個,因此如果盤面是10×10的話,總共會有100的icon,一種icon會有四個,則代表會有25種不同的icon。 一開始為了方便測試,先製作6*6=36的棋盤,這樣會有36/4=9種不同的icon。 var boardContent = [1,2,3,4,5,6,7,8,9]; //產生初始局面 boardContent = boardContent.concat(boardContent).concat(boardContent).concat(boardContent).sort(() => Math.random() > .5); boardContent = [boardContent.slice(0,6), boardContent.slice(6,12), boardContent.slice(12,18), boardContent.slice(18,24), boardContent.slice(24,30), boardContent.slice(30,36)];…

  • ,

    [3 – 環境設定] 開發環境介紹

    VS Code Visual Studio Code(簡稱VS Code)是一個由微軟開發的IDE,它最大的優點就是它是完全免費且Open Source的。它支援偵錯,並內建了Git版本控制功能,同時也具有開發環境功能。我個人覺得他在算是滿方便好用的,自動提示、自動補完和顏色選擇功能都很強大。 這邊是下載連結:Download Visual Studio Code NPM NPM 是 Node Package Manager 的簡稱,它是一個線上套件庫,可以下載各式各樣的 Javascript 套件來使用。 過去如果我們想要使用jQuery,就會需要去下載一個JQuery的Library檔案放進專案目錄裡。但是當這樣的Library庫檔案越來越大,而且越來越多時,就會較難管理,也會造成svn或git等版本管理系統要多去管控一些根本不屬於這個專案的程式碼,Library之間的版本管理也會較為困難。另外很多元件庫或許只需要在開發時期用到,在部署時不需要用到。這些都會讓套件的管理增加複雜度。因此現在大多數的前端工程師都會使用npm來做套件管理的工具,能夠解決上述的那些問題。 安裝npm要先去安裝Node.js。Node.js 在 0.6.3 版本開始內建…

  • ,

    [2 – 演算法] 演算法介紹

    何為演算法 演算法的簡單定義:輸入 + 演算法 = 輸出 這一篇文章有非常詳細的介紹演算法是什麼:初學者學演算法-談什麼是演算法和時間複雜度 一般判斷演算法的好壞是使用『空間複雜度』和『時間複雜度』來評估, 時間複雜度 所謂時間複雜度,指的是執行一段演算法,跑完整個運算邏輯所要花的時間。 雖然這個複雜度名為『時間複雜度』,但實際上,我們要真正衡量某個演算法時,是以步驟次數來看。 如果一個演算法執行的步驟是固定的,無關輸入的值而改變,那我們會記成 O(1),例如: function(int n){ print(n); } 而下面這個演算法: function(int n){ for(i=0;i

  • ,

    [1 – 前言] 連連看遊戲開發

    連連看遊戲起源 遊戲《連連看》顧名思義就是找出相關聯的東西連起來,做關連配對的一種益智遊戲。 最早是使用在幼兒教育的教具上,由於玩法簡單,常用作兒童啟蒙教育遊戲,建立兒童對物品之間的關連性連結。有一種字圖連連看,是專供幼童識字認圖的遊戲,與一般連連看不同的是它並非以一對相同圖案成對,而是以字配圖成對。相關內容連連看則是以兩張內容相關的卡片(可以是字或圖)配成對代替相同圖案。 後來出現了桌面遊戲的連連看,最早期的形式是一副卡片中每種圖案有相同的兩張,先洗牌,然後排好卡片,背面朝上,玩家輪流揭開卡片,每次揭兩張,如兩張圖案不同則回復背面朝上的狀態,如揭到兩張圖案相同則取走卡片,到桌上所有卡片都被取走時即結束遊戲,手上最多卡片者為勝利者。 隨著電腦的普及,連連看遊戲也成為一款經典的電腦小遊戲。在電腦遊戲中的一種規則則是在找到兩幅相同圖案後,若能用三條以內的直線將兩幅圖案連接起來,分別點一下兩幅圖案,即可消除。連連看遊戲後來經歷了桌面遊戲、在線遊戲、社交遊戲三個過程。 連連看電腦版最初是由台灣的陳一進和簡誠志從街機里的四川省(四川麻將)和中國龍改進、移植到PC上的,現在有了各種不同的版本。 台灣的連連看流入大陸以後風靡一時,也吸引眾多程式師開發出多種版本的連連看,其中kawai所開發的《寵物連連看》受到很大的歡迎。隨著Flash應用的流行,網上出現了多種線上Flash版本連連看。如:水晶連連看、果蔬連連看、阿達連連看等,連連看以簡單不無聊的遊戲特色吸引了一大批的女性玩家。2008年,隨著網際網路的普及和開放平台的興起,《連連看》被引入了社交網站,與個人空間相結合,被快速的傳播,成為一款熱門的社交遊戲。 益智遊戲發展介紹 益智遊戲可以是一人玩家,也可以是多人對戰。 連連看是一種益智型遊戲,屬消除型益智遊戲。益智遊戲要求玩家用自己的智慧來解決遊戲中的難題,達到過關的目的。新的商業遊戲通常會加上動作要素,要讓玩家手腦並用,訓練協調性,經典的代表作有俄羅斯方塊、泡泡龍系列、憤怒鳥、Candy Crush以及幾年前很紅的2048。傳統的益智遊戲以動腦為主,如數獨、推箱子等。這類遊戲對玩家而言較難過關,導致大量玩家中途放棄。 後來俄羅斯方塊出現,為落下型遊戲始祖,此遊戲最初是由阿列克謝·帕基特諾夫在蘇聯設計和編寫。此遊戲除了成為一個熱門的家用電腦和街機遊戲外,還成為Game Boy史上最受歡迎的遊戲。《電子遊戲月刊》在2007年將此遊戲列為「最偉大的100個遊戲」中的第1位。直到今日,俄羅斯方塊是有史以來最暢銷的電子遊戲。 最新的許多益智遊戲結合了消除型與落下型遊戲的特色,利用落下隨機元素增加了遊戲的隨機性,並增加遊戲特殊道具,讓遊戲更加有趣。如Candy Crush便為一例,Candy Crush與連連看相同皆為消除遊戲,三個相同顏色的方塊可以互相消除,並會隨機落下新的不同顏色的方塊,特殊的消除模式可以產生特殊道具。這樣的遊戲方式有挑戰性,而且適合打發時間,因此成為Facebook平台上最受歡迎遊戲,擁有4億5千6百萬每月玩家。 後來的神魔之塔、Dragon Puzzle更結合了角色扮演與卡牌遊戲及線上對戰的特色,使得益智型遊戲的樣貌更加的多元化。植物大戰殭屍則添加了即時戰略遊戲及卡牌遊戲的特色,讓益智型遊戲的面向變得更多元化,此作品獲得了相當正面的評價,在GameRankings的評分達到89.5%,Metacritic的評分則是88。 下圖為不同遊戲中所包含的遊戲性元素: 由上圖可知益智型遊戲在現今的手機市場上,因手機版面限制與操作便利性的關係,益智遊戲比起傳統RPG遊戲或動作遊戲在手機市場上占上更多的優勢。也因著益智遊戲的市場越來越大,後期的益智遊戲所包含的遊戲元素的面向越來越廣,不論是卡牌元素、即時戰略遊戲元素、操作手感元素等,都可以讓遊戲的趣味性更加提升,線上多人遊戲的模式更能增加玩家的黏著度。 設計一款有趣的益智遊戲,其中的演算法設計十分重要,例如物理遊戲的物理公式設計、相消遊戲的消除條件、每個關卡的過關條件、道具設計、遊戲競爭性,上述的每一個項目若能夠越符合大自然的法則,會讓玩家玩起來更加的直覺,也是遊戲好玩的必要關鍵。當然開發一款大型的遊戲,美術、音效、程式、企劃缺一不可,對於程式開發者而言,學習適合的語言工具也十分重要。這些與遊戲設計相關的元素,在這次的鐵人賽裡面,我都會在不同的章節裡提到。 連連看開發模式規劃 這一次的鐵人賽主題裡,我主要會分為兩個教學線。 主線為連連看遊戲邏輯的分析與程式碼撰寫,目標為撰寫出正確的邏輯,需能正確判別兩個圖形間是否存在小於兩個轉彎處的連線存在,並且能夠隨機產生隨機的遊戲牌面,以陣列來儲存遊戲現在的資料。 副線則為使用Pixi.js來實際開發一款具有畫面、效果及音效,真正具有遊戲性的網頁H5遊戲。…


17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。

如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!