HTML5 2D游戏引擎研发系列第一章

HI,大家好,我是白泽,一名游戏设计师,一直专注各平台的2D游戏引擎研发,HTML5是我准备进入的新领域,我有个习惯,刚接触的新领域我都会习惯自己写一套游戏引擎,而不用第三方提供的,为了方便自己学习和给HTML5事业做贡献,所以我会在此系列教程中详细的介绍如何从0开始做一套属于自己的引擎,它可能并不是HTML5专属,我会从CANVAS机制到WEBGL再到opengl es的思路转换,着色器,粒子,动画等等,我会在后期的文章中提供自己积累的大量2D引擎用的算法,并且会做详细的解释,所以,如果对自己研发引擎有兴趣的同学欢迎关注本小站,好了,在讲到代码前,我们先整理整理思路,如果是要架构一个引擎思路清晰是重要的,特别是一些理论思维,所以我会先从理论知识开始,日后会逐渐的提供代码片段和完整的代码,希望这些对大家有帮助.

2D还是3D?

这是我们首先要逾越的一个思维门槛,通常我们在一个游戏领域中,初学时期总是要先显示一张图片,这时候也就是我们的关键选择是用什么技术,目前来说,通常渲染技术有平台自己提供的基于CANVAS(画布)原理的2D绘图API,比如早期的J2ME,到现在的Android,FLASH,HTML5,等等,还有一种方式是使用opengl 系列API或者DX API来实现,如果是移动平台通常来说就是opengl es,这也是我最早接触他们时感悟的误区,当时很多人包括我自己在内,认为后者的技术是用于3D开发,而我们一般是小型或者中小型开发,并且基于工期硬件设备等等限制,是暂时用不到3D技术的,而且门槛也有点难度,所以会优先选择CANVAS技术做为我们的开发API,渐渐的我们就把2D和3D的界限拉宽了,甚至开始排斥3D技术,后来再我学习一段时间后我发现CANVAS的技术效率无法满足我的需求了,我就开始思考了,为何3D技术使用是多面拼接能比我单面的CANVAS效率还要高好几倍呢,所以我做了一个大胆的决定,并且做好了接受个方向来的讽刺意见,我准备使用3D技术做2D游戏,3D使用多面模型,而我只需要3D技术为我渲染2个三角形拼接的4边行就好了,当时这个理论我询问了很多人,很多做3D研发的大神们看不起2D,而且他们多数是基于第三方引擎开发,做2D的也基本不会使用3D技术,所以当我在提出这个想法时,可想而知,包括当时我的舍友也嘲笑我,你这种是取巧的方式,不是官方推荐,而且没见人做过,但我没有放弃,开始了我的3D技术之旅,多年之后发现2D引擎越来越多,在阅读他们的代码之后,我笑了,原来我的理论是成立的,这不是取巧,也不是奇葩,2D既是3D,从某种意义上来说,2D就是正交视口(注:这是很关键的2D引擎技术,在之后的文章中我会详细讲解,并且提供正交视口的矩阵算法^ ^)的平面3D,并且使用3D技术多数是在GPU环境下绘制,而基于CANVAS的画布技术则是CPU环境下(目前有的平台会提供画布GPU加速技术,但原理不一样),所以效率上也会有明显的差距,现在我们可以得出结论,opengl 或者DX或其他“3D”渲染技术不是3D技术专属,而是一种基于GPU的快速绘图API,哇,多年的思维障碍终于通了,所以,希望做出60帧高效的游戏并且还需要跨平台,选择他们没错,不管你是做1D，2D，还是3D游戏.

24帧还是60帧?

在我们理清楚我们将要使用的技术后,我们可以开始深入一点了,这也是我们制作游戏最开始设置的第一个参数,游戏刷新率,游戏的刷新帧率在各个平台直到现在都是一个在争论的问题,实际上我最早接触游戏用的是默认帧率12,因为我当时的需求很简单,移动一张图片,所以能动就算成功了,后来当我随着学习的知识增加,面对屏幕的时间增加,我发现我做的游戏有很严重的停顿现象总是有一种薄薄和粗制的感觉,后来发现问题所在,我的游戏刷新率不够,于是我设置成了当时的页游标准,24帧,比我原来的帧率提高了2倍,顿时感觉流畅了很多,慢慢的我又开始不满足了,25帧,30帧,直到最后的60帧,甚至58帧率偶尔掉帧我都能察觉到了,当我认定做游戏就一定要做60帧率的理论提出来之后,和上文一样,各种这样的建议讽刺迎面而来,首先是60帧率的游戏需要消耗更多的CPU性能,并且每一帧不能超过16毫秒的计算时间,并且和游戏服务器同步不同平台的兼容性同步性,动画播放速率等等问题,后来我整理了一下,为何不用60帧的问题,首先是第一个问题,需要消耗更多的CPU性能,在当时这个问题没错,在同一时间内游戏需要调用的重绘函数更多了,CPU消耗自然是更多了,但是换来的则是良好的用户体验,平滑的操作感,厚实的感觉,用户不会打开任务管理器去看你的游戏消耗了他多少CPU,而是在乎你的游戏的视觉体验上是否满足了他,玩游戏的人知道,我们经常为了玩流畅的游戏而更换电脑设备,因为没有人会喜欢长时间的呆在一个卡顿的游戏里,加上画面的卡顿闪烁很容易引起用户的视觉疲劳,所以,这样的消耗是值得的,再加上我们现在有了GPU这样的绘图专属芯片,可以极大的缓解CPU的消耗,所以我们没有理由再排斥它,第二个问题有点意思,服务器同步,如果你做的是联网游戏,基于使用的技术,和平台,还有服务器压力,60帧率可能并不是最好的选择,因为它可能会在某些细节设计上或者高同步情况下会增加服务器传输量,并且需要预留一部分前端资源分解服务器的压力,所以,如果是网络游戏,那么还是建议跟着项目实际需求走,但如果是单机游戏,优先考虑体验而非跨平台,那就60帧吧,第三个问题是我听得最多的,我们都知道电视电影的帧率是24帧，和30帧,所以有些人建议游戏也使用这样的帧率,这是标准帧率,不可逾越的,想想看在我们看电视时和看电影时虽然不是60帧率的但不会觉得画面卡顿,这是为什么呢,这时候我们要说一个比较高级的概念,运动模糊,现在有兴趣的同学可以抬起自己的左手,然后快速左右摇晃,看看,是不是神奇的事情发生了,你甚至已经看不清楚你的手指了,他们在空气有很多的残影叠加,而且还是模糊的,但是你觉得卡顿了吗？没有这是为什么呢?原因在于我们人眼是通过光的反射来看到任何影像的,而光的速度是极快的,并且我们人眼有一个很强大的融合功能,视觉残留,也就是你上次看到的物体会在你的视觉上停留一小段时间,那么当我们在这段时间内又接受了新的光的反射,总不能眼球把上一次的内容清除掉吧,所以它会持续的接受下面的画面并且和上一次的混合处理,而光又快速反射着,所以你的肉眼持续接受到了手臂摇晃的影像并且融合形成新的图像,这就是我们看到的残影和模糊效果,而电影和电视都是实景拍摄,摄像机的采样原理和人眼一样,也是在一段时间内接受光反射出来的信号,所以在一个快速的运动的物体上出现的模糊反而会觉得很清晰,不卡顿,因为你的肉眼或者摄像没有丢掉任何一帧画面,他们很完美的运行着,可以做一个小实验,打开一个比较劲爆的电影,比如速度与激情,变形金刚,你可以试试在画面最精彩的部分暂停(如果没有广告的情况下 )你会看到静止的画面是模糊的,而播放时则是清晰的流畅的,这种技术在3D电影中也常用.

还有一个更加有趣的小实验,可以试试模拟风扇快速转动的效果,你会发现如果你只是增加图片的旋转角度,那么当角度大了之后图片是快速跳跃的,而非平滑的旋转,这就是我们接下来讨论的问题,我们都知道显示的显示单位是像素,这是可量单位,而对比我们现实生活中的单位可能会很多种说法,有米,厘米,毫米等等,而这些单位实际上都是估值,因为只要你持续度量下去,科技允许的情况下你无法测试出2点之间的距离是多长,因为最小的长度单位则是由N个更加小的单位组成的,我不知道未来科技是否可以发现这种最小单位,如果有则我们是否可以扩大它实现空间传送呢,哈哈,题外话了,至少我活着的年代是无法看到了,但是回到我们的显示器上,我们看到的所有影响实际上都是在做空间跳跃运动,他们的是可量的像素单位,永远没有半个像素,所以我们控制图像的旋转位移只是把图像当前的像素信息传递给了另外一个区域的像素信息区域而已,所以他们永远没有平滑的过度运动,除非提高科技缩小设备上单个像素的面积,欺骗视觉,而当我们在程序中使用x+=2,y+=3,rotation+=4的时候,只是让这些像素信息做瞬间移动,没有运动模糊,没有视觉残留的脑部,所以正常情况下,你永远无法基于角度去模拟风扇快速转动的效果，

而且游戏中的输出画面并非录制画面,是由程序逻辑的计算出来的结果,而且不采用影像技术的情况下,每一帧都是清晰无比的即使你的x累加的值很大,它只是在做瞬间的空间转移而,并非快速的运动过去的,所以,我们为了保证游戏画面的流畅度,降低2帧时间的画面差,会用较高的刷新率去弥补,让用户在视觉残留的时间内接受更多的游戏画面,所以游戏帧率非电影帧率,如果条件允许的情况下,60帧吧,最后提一点,如果在游戏合理的运用动态模糊效果可以增强画面的体验特别是高速运动的物体.

现在开源引擎这么多,我为什么要自己写重复造轮子呢?

我觉得这个得看个人时间和兴趣爱好,人们总是排斥自己无法掌握的东西,真要实现一个自己的一套引擎可是有不小的难度的,而且需要大量的时间,还不一定好用,但是有使用者就有制作者,如果总是像一个使用者一样思考,难道只能把制作者丢给老外吗？有些东西只有了解到深入了,我们才能发现它潜在的能力,才会去进步,发现不足,如果能够理解引擎的内部原理,那么对于整体项目的设计和优化是有极大的帮助的,甚至可以写自己的扩展,所以当我们在考虑选择什么引擎时或者抱怨目前正在使用的引擎时或者正在等待时何不试试自己开发一个呢？即使SB了不好用，也只有自己知道，不是吗?至少在过程中学习到了.

要自己写一个2D渲染引擎要如何开始呢,需要很复杂的算法吗?

我会在后期提供我开发的引擎源码,和一整套2D引擎常用算法,和图形图像算法,着色器特效算法,粒子算法等等,如果您已经看到了这里,说明已经动心了,您的评论和转发是对我们的鼓励,感谢！

下面是我从0基础开始研究HTML5的一些小DEMO:

建议谷歌浏览打开观看

塔防游戏,拖拽按钮上的图标可以放置炮塔

http://jfy19771224.sinaapp.com/html5js/dev_1/index.html

一个粒子效果:

http://jfy19771224.sinaapp.com/html5js/demo_1/index.html

一个云朵效果:

http://jfy19771224.sinaapp.com/html5js/demo_2/index.html

一个动画精灵的测试:

http://jfy19771224.sinaapp.com/html5js/demo_3/index.html

转载请注明：HTML5游戏开发者社区 » HTML5 2D游戏引擎研发系列第一章

本文作者：HTML5游戏开发者社区-白泽

HTML5游戏开发者社区联合创始人，著名高级游戏开发工程师，现专注于HTML5游戏开发