提煉遊戲引擎系列：開篇介紹

前言

你們好！本系列記錄了從炸彈人遊戲中提煉2D遊戲引擎YEngine2D雛形的實戰過程，您能夠經過本系列了解到引擎提煉的思想、引擎的設計以及引擎是如何從遊戲中提煉的，學習引擎開發的知識。但願對您能有所幫助！
爲了突出重點，本系列對於炸彈人遊戲的業務邏輯的變化和單元測試不會深刻討論。
值得注意的是本系列提出的遊戲引擎還不夠完善，須要在具體的遊戲開發中繼續打磨。

系列目的

一、從炸彈人遊戲中提煉一個2D遊戲引擎
二、將炸彈人遊戲改造爲基於引擎實現。

關鍵詞

2D遊戲引擎、YEngine2D、面向對象、提煉引擎

系列博文目錄

提煉遊戲引擎系列：開篇介紹
提煉遊戲引擎系列：初步設計引擎
提煉遊戲引擎系列：第一次迭代
提煉遊戲引擎系列：第二次迭代（上）
提煉遊戲引擎系列：第二次迭代（下）

遊戲引擎是什麼？有什麼用？

引擎就是用於控制全部遊戲功能的主程序，負責計算碰撞，物體的相對位置，接受玩家的輸入，以及按照正確的音量輸出聲音等工做，扮演着中場發動機的角色，把遊戲中的全部元素捆綁在一塊兒，在後臺指揮它們有序地工做。

爲何須要遊戲引擎？

引擎封裝底層實現，提供給用戶高層API，使用戶能夠將精力放到遊戲的邏輯、玩法、創意上，而不用關心遊戲的底層實現。

爲何要本身開發引擎，而不是直接使用現有的引擎？

如今已經有了不少成熟的2D遊戲引擎，爲何還要費時費力地開發一個本身的遊戲引擎呢？
一、開發引擎是一種極大的樂趣，在開發的過程當中能夠體驗創造的快樂和激情。
二、能夠徹底按照本身的想法打造引擎，具有徹底的自主性和控制性，是研發一系列遊戲的基礎。
三、引擎是遊戲開發的核心技術，本身開發引擎能夠掌握這些技術，學習框架設計的思想，把本身的技術推向一個新的層次。

開發引擎的流程

一、首先要具有必定的遊戲開發經驗。
您應該有不借助任何的遊戲引擎，原生開發遊戲的經驗，而且掌握了2D遊戲的相關概念、技術和設計經驗。
若是您沒有任何遊戲開發的基礎，能夠先使用面向過程的方法開發一兩個小遊戲，學習遊戲開發的技術，而後運用面向對象的思想，採用測試驅動的方式，重點打造一個設計良好的小遊戲，從而具有從中提煉遊戲引擎的基礎。
二、而後學習遊戲引擎的相關知識。
推薦你們能夠看下《HTML5 Canvas核心技術：圖形、動畫與遊戲開發》一書，它介紹了繪圖canvas技術、動畫和精靈等遊戲的基本概念和實現。其中「第9章 遊戲開發」還開發了一個遊戲引擎，並應用到了遊戲中，這章的內容對於咱們學習引擎開發頗有幫助。
另外，你們還能夠學習下現有的Html5 2D遊戲引擎，好比cocod2d-html5引擎就很不錯，它具備很好的設計，是個成熟開源的引擎。咱們能夠先學習它的使用方法，瞭解它的API是如何設計的，而後在開發引擎的過程當中，對應參考它的源代碼，學習它的設計理念和思想。
三、接着從遊戲中提煉引擎。
當咱們有了必定的遊戲開發經驗，學習了引擎的相關知識後，就能夠從咱們的設計良好的遊戲中提煉出遊戲引擎，這個提煉過程會在本系列博文中展現。
四、最後持續地改進和優化引擎
有了初步的引擎後，還須要將它應用到更多的遊戲中，在應用的過程當中不斷地改進引擎。
另外，光有引擎是不夠的，咱們還須要開發與引擎配套的遊戲工具（好比動畫編輯器、關卡編輯器等），打造遊戲開發的閉環。

最新的引擎版本

有興趣的話您能夠看下最新的引擎版本（這個不是本系列博文提出的引擎版本，而是最新修改後的引擎版本）：
發佈HTML5 2D遊戲引擎YEngine2D

最終成果

下面是本系列博文的最終成果

最終引擎和炸彈人Github源碼

最終的領域模型

此處省略了炸彈人中與引擎類無關的類。

最終引擎的高層劃分

包圖

對應的領域模型

• 核心包
  放置引擎的核心類。
  • Main
  • Director
  • Scene
  • Layer
  • Sprite
• 算法包
  放置通用的算法類。
  • AStar
  • collision
• 動畫包
  放置遊戲動畫的相關類。
  • AnimationFrame
  • Animation
  • Animate
  • Frame
• 加載包
  負責遊戲資源的加載和管理。
  • ImgLoader
• 數據結構包
  放置引擎的基礎結構類。
  • Collection
  • Hash
  • Bitmap
  • Geometry
• 通用工具包
  放置引擎通用的方法類。
  • Tool
• 事件管理包
  負責事件的管理。
  • Event
  • EventManager
• 內部庫包
  放置引擎引入的庫。
  • jsExtend

最終引擎介紹

這裏給出本系列提煉的引擎的一些簡要介紹。

引擎外部依賴

引擎依賴了Javascript的oop框架YOOP，具體可參見發佈個人Javascript OOP框架YOOP

引擎使用方式

用戶能夠經過如下三種方法使用引擎類：
（1）直接使用引擎類提供的API。
如用戶可直接調用引擎EventManager類的 addListener方法監聽事件。
（2）繼承重寫
用戶類可繼承引擎類，重寫它的鉤子方法和虛方法、抽象成員，插入本身的用戶邏輯。
如引擎Scene、Layer、Sprite類均採用這種方式。
（3）實例重寫
用戶可重寫引擎類實例的鉤子方法，插入本身的用戶邏輯。
第一次迭代提煉的引擎Main類提供了loadResouce等鉤子方法，炸彈人Main可重寫引擎Main的鉤子，而後在頁面中執行引擎Main實例的init方法，從而在開始遊戲時執行炸彈人Main插入的用戶邏輯。
不過在第二次迭代後，引擎Main的使用方式又改成繼承重寫了，所以本系列提煉的最終引擎只有一、2兩種使用方式。

用戶建立動畫的方式

var width = bomberConfig.player.WIDTH,
                    height = bomberConfig.player.HEIGHT,
                    offset = {
                        x: bomberConfig.player.offset.X,
                        y: bomberConfig.player.offset.Y
                    },
                    sw = bomberConfig.player.SW,
                    sh = bomberConfig.player.SH;

                //建立幀，傳入精靈圖片對象和幀圖片區域大小數據
                var frame1 = YE.Frame.create(this.bitmap.img, YE.rect(offset.x, offset.y, sw, sh));  
                var frame2 = YE.Frame.create(this.getImg(), YE.rect(offset.x + width, offset.y, sw, sh));
…

                //建立動畫幀數組，加入動畫的幀
                var animFrames1 = [];

                animFrames1.push(frame1);
                animFrames1.push(frame2);
…

                //建立動畫，設置動畫的duration
                var animation1 = YE.Animation.create(animFrames1, 100);
…

                //將動畫加入到精靈的AnimationFrame容器中
                var animationFrame = this.getAnimationFrame();

                animationFrame.addAnim("walk_down", YE.Animate.create(animation1));
…

                //設置當前播放的動畫
                this.setAnim("walk_down");

參考資料

炸彈人遊戲系列
cocos2d-html5引擎
Lufy博客
《HTML5 Canvas核心技術：圖形、動畫與遊戲開發》

下一篇博文

提煉遊戲引擎系列：初步設計引擎