浅析HTML5基于组件的2D游戏引擎

此文写给想专注游戏，或者从flash转身前端的朋友。

大家好，想死你们了，大爱ITEYE。虽然我写的东西并不多，但回顾一下，也能发现自己的IT之路和些微进步。从上次的坦克大战(可以点击进入，得到很多人的关注，实在是谢谢了)，到现在，已经成长到前台主管兼'初级'前台框架师，这中间实在学到了很多东西，得到了众多网友的帮助；但却愈发的忐忑，一个人水平不管到了什么程度，如果愿意分享，都会帮到适合的朋友。这也是本文的目的之一。对于帮助过我的人的反馈，对于未走过来朋友的分享。

言归正转，多了就腻。本文所有论点基于我们开发的iGame游戏引擎。该引擎可以运行在所有支持html5的浏览器上面。

游戏引擎包含哪些模块？先普及下知识。一般来说游戏就是由精灵、物体(Tile)和场景拼成的；从功能块看是由基础层、游戏类、精灵类、物体类、组件类、多媒体类、数学类、离线应用类、本地存储类和绘画类等组成。其中基础层相当于一个简单的js框架，类似弱化了的jQuery，封装了常用函数、基本的DOM操作、事件模块的底层实现、加载器的底层实现、Ajax封装和数组等内置对象的扩展等；游戏类内容比较杂，主要有主循环的实现(btw，用requestAnimationFrame替代setTimeout和setInterval)、全局事件封装、加载器封装、游戏资源加载完成的入口函数、创建游戏接口(生成命名空间添加工具方法)、组件接口和场景接口等；其他部分暂时略去不讲。

以下开始说组件。以精灵为例。
首先，精灵是什么？简而言之，精灵是一个会动的对象。
创建精灵的步骤什么？同上言之，生成命名空间，添加精灵的属性方法。
组件是什么？组件可以看成精灵的父类，精灵可以继承多个父类的方法和属性。

用代码表示一下过程：

// inspind为公司名，iGame引擎对外的变量
// inspind.Lang是引擎的常用函数
var s = inspind.Lang.namespace(namespaceStr); // 创建精灵
s.name = namespaceStr; // 添加属性
inspind.Lang.extend(s, inspind.Sprite.util, true); // 继承精灵的方法，以下.add()为继承过来的添加组件的接口
s.add(['css', 'attr', 'toggle', 'event', 'animate']); // 添加默认组件，可以添加不同功能的组件定义不同类型的精灵

// 其中add做的事情主要是注册组件、继承组件的属性和方法：this._comps.push(comp);inspind.Lang.extend(this, comp, true);

由此至少可以看出，组件是个对象。看下组件的代码是什么样纸吧：

inspind.Sprite.c('event', {
	bind: function(type, handler, data) {
		inspind.Event.bind(this.element, type, handler, data, this);
		return this;
	},
	unbind: function(type, handler) {
		inspind.Event.unbind(this.element, type, handler);
		return this;
	},
	trigger: function(type, data) {
		inspind.Event.trigger({}, this.element, type, data);
		return this;
	}
});

是不是很简单？

有了这些常识之后，可以理一下引擎的主要逻辑了。从主循环入手，每帧会调用两个函数，业务逻辑和重绘。业务逻辑就是游戏的算法，如何变化，怎样控制，改变了哪些，哪些需要重绘，需要的添加到inspind.Canvas.Dom数组里面；业务逻辑执行完成后，inspind.Canvas类会将数组里面的所有元素重绘出来。

题外话一：iGame引擎使用dom而没有用canvas标签，当时由于测试结果和领导决策而定；如果使用canvas道理也雷同，部分区别在于事件处理和区域重绘。事件处理方面，可以创建个hashmap，创建精灵的时候，记录下精灵的位置和大小(如mbr)，点击canvas时查找map，判断执行哪个精灵的什么事件；区域重绘可以找些脏矩形的资料，本文不讨论。

题外话二：如果觉得本文对你有一丁点帮助，可以到这里下载个例子，顺便支持一下。

楼主应该说明是2D的框架，如果是基于webgl的3D框架，其架构还是比较复杂的，直接移植传统客户端游戏引擎的架构好像还是不太合适的。不知道楼主是否研究过3D的javascript框架？如果有的话想和你交流一下

看起来是好简单，学习下

楼主的这个东东叫“动画框架”比较好。

游戏引擎可需要大量数学和物理的封装。

已经修改名字了，公司现在没有3D的需求，侧重点还是根据神经可塑性原理，提高国人的智商。
如果可以的话，请点击题外话二里面的链接，支持一下我们的作品。谢谢~

实际上是 Jquery animate方法的HTML5增强版了

不过楼主的探索精神值得学习。

哦哦哦，高人呀。。佩服佩服~

谢谢，这篇文章只作介绍，细节还有很多，有些人脸皮太厚了，堪比城墙拐角。
如果想作深入了解，可以下载代码品评下。至少某些天生粗陋的人，以为引擎里面没有数学类和重力组件，咱们一笑带过。
其实说到这，引擎之所以叫引擎，很大一部分和引擎的工具分不开的，这已经不是现在讨论的话题了。
不好意思，借你地用了下。希望本文对你有帮助。

这阶段研究了下3d。感觉webgl也只是一个渲染的手段。用2d canvas也能达到相同的效果。所以three.js中将渲染器分离出来了。