前言

大家好！本系列記錄了從炸彈人游戲中提煉2D游戲引擎YEngine2D雛形的實戰(zhàn)過程，您可以通過本系列了解到引擎提煉的思想、引擎的設計以及引擎是如何從游戲中提煉的，學習引擎開發(fā)的知識。希望對您能有所幫助！
為了突出重點，本系列對于炸彈人游戲的業(yè)務邏輯的變化和單元測試不會深入討論。
值得注意的是本系列提出的游戲引擎還不夠完善，需要在具體的游戲開發(fā)中繼續(xù)打磨。

系列目的

1、從炸彈人游戲中提煉一個2D游戲引擎
2、將炸彈人游戲改造為基于引擎實現(xiàn)。

關(guān)鍵詞

2D游戲引擎、YEngine2D、面向?qū)ο蟆⑻釤捯?/p>

系列博文目錄

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

游戲引擎是什么？有什么用？

引擎就是用于控制所有游戲功能的主程序，負責計算碰撞，物體的相對位置，接受玩家的輸入，以及按照正確的音量輸出聲音等工作，扮演著中場發(fā)動機的角色，把游戲中的所有元素捆綁在一起，在后臺指揮它們有序地工作。

為什么需要游戲引擎？

引擎封裝底層實現(xiàn)，提供給用戶高層API，使用戶可以將精力放到游戲的邏輯、玩法、創(chuàng)意上，而不用關(guān)心游戲的底層實現(xiàn)。

為什么要自己開發(fā)引擎，而不是直接使用現(xiàn)有的引擎？

現(xiàn)在已經(jīng)有了很多成熟的2D游戲引擎，為什么還要費時費力地開發(fā)一個自己的游戲引擎呢？
1、開發(fā)引擎是一種極大的樂趣，在開發(fā)的過程中可以體驗創(chuàng)造的快樂和激情。
2、可以完全按照自己的想法打造引擎，具備完全的自主性和控制性，是研發(fā)一系列游戲的基礎(chǔ)。
3、引擎是游戲開發(fā)的核心技術(shù)，自己開發(fā)引擎可以掌握這些技術(shù)，學習框架設計的思想，把自己的技術(shù)推向一個新的層次。

開發(fā)引擎的流程

1、首先要具備一定的游戲開發(fā)經(jīng)驗。
您應該有不借助任何的游戲引擎，原生開發(fā)游戲的經(jīng)驗，并且掌握了2D游戲的相關(guān)概念、技術(shù)和設計經(jīng)驗。
如果您沒有任何游戲開發(fā)的基礎(chǔ)，可以先使用面向過程的方法開發(fā)一兩個小游戲，學習游戲開發(fā)的技術(shù)，然后運用面向?qū)ο蟮乃枷?#xff0c;采用測試驅(qū)動的方式，重點打造一個設計良好的小游戲，從而具備從中提煉游戲引擎的基礎(chǔ)。
2、然后學習游戲引擎的相關(guān)知識。
推薦大家可以看下《HTML5 Canvas核心技術(shù)：圖形、動畫與游戲開發(fā)》一書，它介紹了繪圖canvas技術(shù)、動畫和精靈等游戲的基本概念和實現(xiàn)。其中“第9章 游戲開發(fā)”還開發(fā)了一個游戲引擎，并應用到了游戲中，這章的內(nèi)容對于我們學習引擎開發(fā)很有幫助。
另外，大家還可以學習下現(xiàn)有的Html5 2D游戲引擎，比如cocod2d-html5引擎就很不錯，它具有很好的設計，是個成熟開源的引擎。我們可以先學習它的使用方法，了解它的API是如何設計的，然后在開發(fā)引擎的過程中，對應參考它的源代碼，學習它的設計理念和思想。
3、接著從游戲中提煉引擎。
當我們有了一定的游戲開發(fā)經(jīng)驗，學習了引擎的相關(guān)知識后，就可以從我們的設計良好的游戲中提煉出游戲引擎，這個提煉過程會在本系列博文中展示。
4、最后持續(xù)地改進和優(yōu)化引擎
有了初步的引擎后，還需要將它應用到更多的游戲中，在應用的過程中不斷地改進引擎。
另外，光有引擎是不夠的，我們還需要開發(fā)與引擎配套的游戲工具（比如動畫編輯器、關(guān)卡編輯器等），打造游戲開發(fā)的閉環(huán)。

最新的引擎版本

有興趣的話您可以看下最新的引擎版本（這個不是本系列博文提出的引擎版本，而是最新修改后的引擎版本）：
發(fā)布HTML5 2D游戲引擎YEngine2D

最終成果

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

最終引擎和炸彈人Github源碼

最終的領(lǐng)域模型

此處省略了炸彈人中與引擎類無關(guān)的類。

最終引擎的高層劃分

包圖

對應的領(lǐng)域模型

• 核心包
  放置引擎的核心類。
  • Main
  • Director
  • Scene
  • Layer
  • Sprite
• 算法包
  放置通用的算法類。
  • AStar
  • collision
• 動畫包
  放置游戲動畫的相關(guān)類。
  • AnimationFrame
  • Animation
  • Animate
  • Frame
• 加載包
  負責游戲資源的加載和管理。
  • ImgLoader
• 數(shù)據(jù)結(jié)構(gòu)包
  放置引擎的基礎(chǔ)結(jié)構(gòu)類。
  • Collection
  • Hash
  • Bitmap
  • Geometry
• 通用工具包
  放置引擎通用的方法類。
  • Tool
• 事件管理包
  負責事件的管理。
  • Event
  • EventManager
• 內(nèi)部庫包
  放置引擎引入的庫。
  • jsExtend

最終引擎介紹

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

引擎外部依賴

引擎依賴了Javascript的oop框架YOOP，具體可參見發(fā)布我的Javascript OOP框架YOOP

引擎使用方式

用戶可以通過以下三種方法使用引擎類：
（1）直接使用引擎類提供的API。
如用戶可直接調(diào)用引擎EventManager類的 addListener方法監(jiān)聽事件。
（2）繼承重寫
用戶類可繼承引擎類，重寫它的鉤子方法和虛方法、抽象成員，插入自己的用戶邏輯。
如引擎Scene、Layer、Sprite類均采用這種方式。
（3）實例重寫
用戶可重寫引擎類實例的鉤子方法，插入自己的用戶邏輯。
第一次迭代提煉的引擎Main類提供了loadResouce等鉤子方法，炸彈人Main可重寫引擎Main的鉤子，然后在頁面中執(zhí)行引擎Main實例的init方法，從而在開始游戲時執(zhí)行炸彈人Main插入的用戶邏輯。
不過在第二次迭代后，引擎Main的使用方式又改為繼承重寫了，因此本系列提煉的最終引擎只有1、2兩種使用方式。

用戶創(chuàng)建動畫的方式

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;//創(chuàng)建幀，傳入精靈圖片對象和幀圖片區(qū)域大小數(shù)據(jù)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)); …//創(chuàng)建動畫幀數(shù)組，加入動畫的幀var animFrames1 = [];animFrames1.push(frame1);animFrames1.push(frame2); …//創(chuàng)建動畫，設置動畫的durationvar 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核心技術(shù)：圖形、動畫與游戲開發(fā)》

下一篇博文

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

轉(zhuǎn)載于:https://www.cnblogs.com/chaogex/p/4149904.html

總結(jié)

以上是生活随笔為你收集整理的提炼游戏引擎系列：开篇介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。