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

本系列記錄了從炸彈人游戲中提煉2D游戲引擎YEngine2D雛形的實戰(zhàn)過程，您可以通過本系列了解到引擎提煉的思想、引擎的設計以及引擎是如何從游戲中提煉的，學習引擎開發(fā)的知識。

前言

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

系列目的

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

關鍵詞

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

系列博文目錄

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

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

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

為什么需要游戲引擎？

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

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

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

開發(fā)引擎的流程

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

最終成果

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

最終引擎和炸彈人Github源碼

最終的領域模型

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

最終引擎的高層劃分

包圖

對應的領域模型

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

最終引擎介紹

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

引擎外部依賴

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

引擎使用方式

用戶可以通過以下三種方法使用引擎類：
（1）直接使用引擎類提供的API。
如用戶可直接調用引擎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)建動畫，設置動畫的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核心技術：圖形、動畫與游戲開發(fā)》

下一篇博文

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

posted @ 2014-12-07 21:43 楊元超閱讀(2157) 評論(1) 收藏舉報

刷新頁面返回頂部