提炼游戏引擎系列：开篇介绍

前言

你们好！本系列记录了从炸弹人游戏中提炼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核心技术：图形、动画与游戏开发》

下一篇博文

提炼游戏引擎系列：初步设计引擎