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

前面2篇文章基本上没有讲解HTMl5相关的,只是提供一些游戏设计的思路,那么接下来的章节我会深入到代码层面,主要以游戏渲染技术出发,因为我接触HTML5和JS时间不长,所以有一些平台相关的优化功能可能并不太清楚,如果有人发现更好的写法或者某些类的使用方式希望联系我,我会马上更正,谢谢拉.
那么,我们今晚要完成的任务是能在画布上显示图片,在开始之前我们可能需要做一些准备,那就是我们的图片资源,这也是最困扰的,下面我介绍我常去的游戏资源网站,
http://www.66rpg.com/res.php
这个网站目前来说基本够用了,有了这些你可能还需要一个软件,FLASH CS6,它可以帮助我们生成动画纹理集和配置文件,好了,一切准备就绪了,让我们开始吧.
先来第一步,我们新建一个画布,你可以在你的入口html代码块先申请一个画布,并且设置好属于你自己的画布名称,还有画布的宽度和高度,通常我们会有一个框架JS,框架JS是不包含游戏逻辑的,它可能是一个通用的动画块,而Main则是我们游戏的入口和启动类,我们可以在Main里写测试代码,html的代码看起来是这样的:

?
我们知道基于Canvas去绘制动画是很繁琐的事情,而在游戏开发中我们可能不需要更改它的绘制逻辑,所以我们需要一个动画类MovieClip去管理我们的图像或者动画,而我们的游戏逻辑则是在外部去对做变换控制而已,所以我们需要把绘图逻辑封装起来,所以我们也需要一个场景管理器去管理他们,当我们正式开发游戏时的逻辑应该只是把资源传入动画对象,我们不用关系它是如何被显示出来的,我们只关系它的位置比例,角度等等,所以他们的逻辑块看起来应该是这样的:



所以当我们编写好这个框架之后,我们所要做的事情就是读取资源,创建场景,创建动画对象,再操作动画对象,我们新建一个DisplayObject.js,加入它的第一个代码块

?
这里非常简单,当页面初始化完毕后我们获取我们的画布,然后获取画布的类型,并返回这个画布的控制句柄,之后我们对画布的所有操作都是这个句柄了.
第二步,创建场景控制器.
现在我们需要创建一个场景管理器去管理我们的动画对象现在它至少包含三个功能,添加和删除显示对象,还有一个无限循环的心跳函数来调用动画函数的绘制函数,现在它看起来是这样的

?
为了防止重复添加和删除空对象,我们加入了一个indexOf函数判断当前填入的对象是否在当前的显示列表中,所以我们还需要一个显示列表:

?
下面是查询函数

?
查询函数的意思是检测数组中对象等于当前比较的对象如果是则返回当前的数组下标,否则返回-1,然后是重绘函数

?
现在整个游戏的绘制核心都是在这里了,其实它是一个递归函数,这部分的逻辑是先清理上一帧的内容,然后重置画布句柄的属性,现在我们只用到了透明度,所以只重置了透明度,后面的循环则是遍历调用显示对象的重绘方法,所以可以看出来我们绘制的东西每一帧都是新的,这很符合画布的逻辑嘛,最后一步是设置计时器调用本函数方法,这样就可以让我们的游戏永久的运行下去,现在最后一步让我们创建动画对象,我们将会赋予它一些基本的操作属性,XY位移,角度,缩放和透明度

?
实际上这不是一个面向对象的过程,而是一个过程式的,我们只有唯一的画布句柄使用,每个独立对象的属性改变都是通过画布句柄改变的,这里唯一难理解的地方就是drawImage,实际上它就是一个切片的方法,第一个是图像对象,0,0表示开始切片的位置,我们现在需要显示完整的图像,所以切片坐标不做任何偏移,然后是切片的宽度和高度,当然我们也选择了图片本身的宽度和高度,之后的参数可以理解为图像的旋转中心点,现在默认为图像的左上角也就是0,0所以我们需要把它移动到图像的中心点去,所以公式就是负的图片宽度和高度的一半,canvas的坐标系上左为负,下右为正,现在万事具备,让我们新建一个Main.js,然后开始使用他们吧.

?
现在使用起来就很方便了,等待资源加载完毕后,我们开始创建场景,然后启用场景的逻辑,之后我们的游戏开发主要是针对动画对象(MovieClip)的操作,所以我们不再关心它是如何被显示出来了,只关心它的游戏逻辑,现在我们试试创建多个动画对象并且改变他们的属性.

?
看了这么久的代码,现在让我们看看我们究竟画的是什么.



怎么样,有开始准备做游戏的蠢蠢欲动的心了吗,实际上我们把绘图的底层逻辑封装了起来,而在游戏逻辑中我们已经不再关心他们的存在,而只需要创建和使用,之后的章节都会基于现在的基础慢慢完善,所以最好现在开始准备好他们吧，虽然现在他们看起来是非常基础的内容.
这一章就到这里结束了,下一章开始会在这一章的代码基础之上开始我们的动画之旅,敬请期待
在线演示
源码下载

继续浏览有关2D引擎Canvas引擎HTML5游戏入门教程式神引擎开发游戏引擎白泽的文章

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

HTML5游戏开发者社区联合创始人，现专注于HTML5游戏开发