HTML5游戏开发驴子跳.docx
- 文档编号:30453485
- 上传时间:2023-08-15
- 格式:DOCX
- 页数:17
- 大小:30.54KB
HTML5游戏开发驴子跳.docx
《HTML5游戏开发驴子跳.docx》由会员分享,可在线阅读,更多相关《HTML5游戏开发驴子跳.docx(17页珍藏版)》请在冰豆网上搜索。
HTML5游戏开发驴子跳
JavaScriptHTML5canvasHTML5游戏开发驴子跳
在线演示:
http:
//yujianshenbing.w108.mc-
源码下载:
请查看附件
操作方法:
游戏开始后,按键盘“A”或“D”控制左右方向,也可以通过方向键控制。
(请了解:
游戏中所有图片和音乐均来自手机版同名游戏,本游戏仅供学习参考。
本文所有内容及结论均属个人意见,如有不同见解,欢迎指正。
)
经过两个多月断断续续的开发,我的第一款游戏《驴子跳》终于完成了,此时,我已经迫不及待地想跟大家分享这个过程,包括学习方法、游戏源码、和经验心得;本文的目的,是希望能帮助更多的人快速地加入到HTML5的大团队,同时也希望能得到各种大侠的指点。
本文所有内容基于个人的学习过程和经验,因此在整理文章的过程中,我也假设你目前对游戏开发一无所知,甚至对HTML和JavaScript也不太了解。
我将文章分为5个部分:
1.我将会告诉你如何学习游戏开发,如何入门HTML5
2.以我的游戏框架为例,初步了解游戏模型和组成
3.通过讲解我的“游戏逻辑结构”,让你真正可以开始动手创建HTML5游戏
4.分享诸多亲身体验的性能问题和解决方案
5.一些其它的东西
一、如何学习HTML5游戏开发?
如果是刚接触HTML5,也是第一次开发游戏,过程中难免会遇到这样那样的问题,我所遇到的第一个问题就是:
我对HTML5还不是很了解。
因此我首先要分享的就是学习方法和路线:
如果你还不是很熟悉HTML、CSS、和JavaScript,请不要急于求成,只要打好基础,一切都会变得容易起来。
如何才算是“熟悉”?
1.HTML常用标签你全都认识并能说出它们相同、和不同的特性吗?
2.CSS中所有属性是否熟悉?
特别是CSS3中的新特性和动画?
3.是否已经完全明白JavaScript面向对象、闭包、原型链、作用域等概念,并能熟练运用?
4.是否掌握了一系列JavaScript性能优化的方法和经验?
如果你在回答这些问题时还不是很有信心,我建议先补充下这方面的知识。
也许你会问:
做HTML5游戏不是主要使用Canvas画布和JavaScript吗?
为什么对HTML和CSS还有这么多要求?
最开始,我也是这样以为的,不过后来我发现HTML5游戏中并非只有Canvas,其实CSS仍然显得非常重要,Canvas应该只做一些它更擅长的事,比如动画和特效,而其它的事情交给其它方式来实现吧。
(题外话:
这就像前几年流行web2.0时,不少公司和客户,都明确规定页面不允许出现table标签,于是乎我们写了一堆UL标签和CSS代码,来实现类似于表格的效果,并担心各浏览器的差异。
我至今仍在怀疑,这种做法除了符合所谓的“标准”,还有什么明显的优势?
)
言归正传,例如我们要开发一个游戏“热血传奇”,首先分析下图:
图中蓝色背景的部分应该使用Canvas来绘制,而红色背景的部分则应该使用普通的HTML标签和CSS来开发。
判定标准主要是依据该模块的效果复杂度、和刷新频率,在“热血传奇”中,界面包含人物、地图、技能效果等主场景(蓝色背景部分);还有状态工具栏、人物属性窗口、物品窗口、技能窗口等(红色背景部分)。
很明显,主场景中的人物、技能效果、地图等随时都在发生变化,这种场景才能体现出Canvas的优势;而其它的例如状态工具栏、人物属性窗口等,更新的频率很低,只有在用户驱动下才会发生改变,且不包含复杂的效果,因此我们可以把它当成是一个普通页面的一部分,使用普通的HTML结构和CSS样式,再加上一些控制逻辑,即可实现。
为什么一定要尽量使用HTML结构和CSS的方式来实现呢?
因为这会降低开发的复杂度、工作量和成本,更重要的是,在性能上会有更好的体现(关于性能上的问题,后面会详细讨论)。
假设你对这些知识都已经非常了解了,下一步要做的,就是全面了解Canvas画布。
刚开始了解它时,你会发现它并非你想象中的那么完美,它只提供了一系列“简陋”的方法,你甚至会怀疑使用它们真的能开发出效果绚丽的游戏吗?
不过仔细想想,只要在这套API上稍作扩展,还有什么事情是我们办不到的呢?
关于Canvas的API具体内容,这里不作讨论,还不清楚的同学,可以参考官方文档,或中文版API:
在获取到这些文档之后,如何入手呢?
别想太多,先从头到尾用几遍,只要记住它有哪些方法,以及这些方法都是用来做什么的、怎么用的就可以了。
关于API中不明白的地方,XX和Google会告诉你答案。
如果你已经了解了API中的方法,可能会很迷惑:
如何才能将这些API熟练地运用到游戏开发中?
那么请看这里吧:
你可以试着了解一些游戏中的基本概念和组织结构,这会让你开始“忙起来”,如果你看不懂网上那么多专业的游戏开发资料,或者是不知道该从何入手,我推荐可以看看“大城小胖”的视频教程《手把手教你开发HTML5游戏》,地址是:
看视频的时候,你应该先动手创建一个工程,跟着视频写同样的代码,视频中没有讲清楚的概念和环节,网上可以查的到;如果看完视频感觉没有彻底明白的话,可以再看几次,直到你感觉视频中介绍的内容你全都掌握了(这个视频我看了不下10遍,同时一边写、一边在网上扩展更多的相关知识,这个过程大约花了我两到三个星期。
)
当学习完以上部分内容后,你对游戏开发的内容有了一些了解,也知道自己首先应该做的,就是编写一个简单的游戏引擎。
但你却还不知道一个完整的游戏引擎在技术上到底包含了哪些部分?
应该划分为哪些模块?
各个模块间的耦合关系如何确定?
确实,对于一个没有任何游戏开发经验的人来说,这部分内容需要一段时间去琢磨(至少我花了不少的时间在这个阶段)。
这时,我建议你可以多分析目前已有的游戏框架源码,仔细阅读,认真体会;如果你对AS3和Flex比较熟悉,那么还可以了解一些Flex游戏框架,毕竟这东西和开发语言关系不大。
下面我推荐一些国产的框架给大家参考:
casualjs:
quarkjs:
最后推荐的就是我分享的游戏源码了,虽有还有许多不完善的地方,但格式清晰,注释完整,比较适合学习(下载源码后,myEngine目录为游戏框架源码)。
这个过程中最重要的就是坚持,困难肯定是有的,但问题一定也是可以解决的。
(小插曲:
我在学习过程中,经常会向各种大侠请教,虽然他们并不认识我。
我有段时间连续几天通过微博求助于“大城小胖”,估计那段时间他快被我搞烦了,其实那段时间我自己也快被自己搞疯了;在这里感谢小胖~)
好了,看到这里,你已经掌握了一套学习方法,它会带着你,完成你的第一个HTML5游戏。
更重要的是,完成之后,请记得一定要分享出来,因为这样做不仅仅会帮助更多的人,你也会得到进一步的提高。
二、以myEngine为例开发一套游戏框架
接下来我们进入第二步,我将介绍这个游戏的相关目录和组件,在这之前,请先下载游戏的源码。
当你打开donkeyjump目录后,能看到这里存放着游戏中的所有资源,包括源码、音频和图像文件。
我先介绍一下目录的结构,请看下图:
(如果你也想把某一款手机游戏移植到HTML5版本,首先可以先下载一个该游戏的APK安装包,一般在安卓市场都可以搜索的到:
在游戏源码的根目录,当你打开index.html就可以快速预览游戏的效果了(当然,这需要你的浏览器支持HTML5部分特性)。
游戏的核心框架是myEngine目录,这也是本节介绍的重要。
myEngine目录中包含了与游戏业务逻辑无关的核心库,它与你所接触过的jQuery、Ext等框架一样,封装了一系列常用的处理逻辑;在它的基础上,你可以更简单地编写少量的代码,来完成你的游戏。
按照游戏index.html文件中引入的脚本顺序,我将依次说明游戏框架中每个文件的含义:
∙首先是core目录下的my.js,这是框架的核心文件,它包含了一些常用的公共函数,如果你已经了解了JavaScript面向对象相关的知识,那么很容易可以看懂文件中所有的代码。
∙component/Component.js:
Component是所有游戏组件的基类,所有的游戏组件均继承自它,Component类提供了组件对象的创建、初始化、销毁等公共方法。
∙component/DisplayObject.js:
DisplayObject是所有可显示组件的基类,游戏中所有能显示的组件,都应该继承它,因为它提供了一套统一的处理对象显示的方法:
显示隐藏控制、透明度、旋转、翻转、缩放、渲染控制等。
∙component/DisplayObjectContainer.js:
DisplayObjectContainer是一个组件容器类,它本身也是一个DisplayObject对象,但它可以容纳其它更多的DisplayObject和DisplayObjectContainer对象,便于统一管理。
例如:
一个房间内的场景包含了桌子、椅子、衣柜、书架等DisplayObject(或DisplayObjectContainer)对象,而这个房间就是一个DisplayObjectContainer对象,房间被销毁,房间内的所有东西也不会再存在;这样你就不需要再把房间内的东西一个个地销毁掉。
∙component/Bitmap.js:
图像对象,如果你要在游戏中显示一副图像,可以创建一个Bitmap对象。
∙component/Animation.js:
帧动画控制类,由多幅图像组成,在固定的频率中不断切换,形成动画的效果。
使用它,可以方便地创建一个帧动画,并控制它的显示、隐藏和播放等行为。
∙component/Sprite.js:
游戏中所有精灵的基类,如果对“精灵”的概念还不是很清楚,建议按照第一节中介绍的学习过程再巩固一下。
它提供了一个精灵的基础方法和属性,包括移动、动画控制和碰撞检测。
∙component/Viewport.js:
视口对象,游戏地图可能会很大,但能够同时看得到的区域可能只是一个固定的尺寸,当游戏角色或场景移动时,地图也会移动,玩家会感觉是通过一个视口在观察角色和地图的移动。
这里的视口对象,就是用来处理视口的移动,以及保存视口状态的。
∙component/Layer.js:
游戏的分层,一个游戏中可能包含许多内容,比如主角、玩家、NPC、怪兽、道具、效果、地图和其它场景,我们没必要把它们堆到一起,这样你无法进行管理和维护,因此我将它们放到多个层级,就可以方便地对每个层级内的元素进行统一控制。
这里的分层不仅仅是在逻辑上将不同类型的元素分离开,不同的Layer对象还可以配置到不同的Canvas画布上,这是提升性能的一种重要的方式,后面会详细讨论。
∙component/Game.js:
游戏基类,用于控制游戏的帧频、画布的刷新、开始和结束游戏,以及游戏时间相关的记录。
∙event/KeyEvent.js:
监听用户按键事件,如果你查看过这个文件的源码,相信我不用作太多介绍你就会明白。
它不会绑定具体的事件在用户的某个按键上,它只提供一些控制和查询当前按键状态的方法。
∙utils/ImageManager.js:
图像管理类,使用Canvas绘图前,首先需要保证图片已经被完全加载完毕,而游戏中使用的图片非常多,因此如何统一控制加载和管理,就由ImageManager来发挥了。
∙utils/DOM.js:
提供了一套类似于jQuery的DOM操作方法,之所以不使用jQuery,是因为对这个游戏来说,jQuery显得有些大材小用,没有必要为了使用其中的几个方法,加载整个库。
∙utils/Math.js:
提供一些基础的算数运算方法。
∙utils/buzz.js:
这是一个第三方音频管理库,作用和ImageManager类似,不过是用于控制音频文件的加载和播放。
其实框架中是包含了一个我自己写的音频管理类,这里之所以使用第三方库,是因为我还不能完全确保那个音频管理类的稳定性。
∙另外,框架中还包含了一些游戏中没有使用到的文件,比如:
ScriptManager(脚本动态加载和管理)和Astar(自动寻路算法),这里我就不作介绍了。
以上是游戏框架中的全部内容,具体细节建议阅读源码,源码中标注有详细的注释。
如果你接触过Ext框架或Flex,你会很容易理解这里大部分类的作用和功能,因为它们有许多相似之处。
这套框架我一共重写了4次,每一次都会有许多提升。
这里所说的提升并非是指功能的增强,相反,这个版本和第1次完成时相比,功能已经被删减掉了一大部分,之所以这样做,仅仅是为了做到需求、工作量和性能之间的平衡(性能相关的问题,我们放到后面再讨论),我认为在能实现需求的前提下,最重要的就是尽可能的简单、快速。
我在这里回顾一下之前删减掉的一些功能:
∙类似DOMLevel2中的事件模型,包含Event、EventDispatcher、EventManager和Component下具体子类的事件模型类。
之所以删掉它们,是因为我完全可以使用类似DOMLevel1中的事件模型来代替它们,而这样做会更简单,更高效。
当然也会牺牲一些扩展性和耦合度,但我认为这是值得的。
∙以前的Animation类,是一个继承自DisplayObjectContainer的子类,它包含了一系列Frame(单帧)对象,而Frame对象中又包含了Bitmap(图像)对象和CollRect(碰撞区域)对象;当初之所以有这么多东西,是因为考虑到动画对图像文件和绘制图形之间的转换,以及支持多种碰撞检测方式。
这种做法后来也被我否决了,原因与和前面一点一样,出于简单开发和高效性能的考虑。
而现在优化后的Animation类十分简单,它本身只是一个Component组件,通过简单配置图像URL和帧数据,就可以实现一个帧动画。
当然,这种做法就受到许多约束,例如:
一个动画中所有的帧图像必须是同一个Image对象,还有Animation本身不提供渲染的方法,它必须依附在一个Sprite(精灵)对象中。
∙删除了Level和Scene类,Level类是用来做游戏关卡控制和调度关卡数据的,而Scene类用作场景的切换、初始化、缓存场景数据以及处理Layer(分层)的视差效果。
现在我把分层的视差效果直接放到了Layer本身,通过定义Layer对象的distance属性(即定义分层与视口之间的距离),就会自动形成视差效果。
例如:
在这个游戏中,驴子刚开始跳跃时,驴子身后的房子、山丘、高山、和天空在视觉上的移动速度是不一样的,物体距离相对驴子越远,视觉上移动距离越小;这些背景实际上是存储在多个Layer中,而我只需要通过定义每个Layer的distance属性,就可以实现这个效果。
如果你想开发一套成熟的游戏框架,这些功能或许是非常必要的。
因此,我并不能保证删减这些功能是正确的做法,但对于具体需求来说,我认为这样做会更合适。
(如果你也需要这些代码,可以联系我。
)
三、开发一个“驴子跳”游戏
到目前为止,我已经介绍了学习方法、和基础框架的搭建;此时你应该花更多的时间去编写和优化你的框架,让它更简单、更稳定以及更加“坚固”。
如果你还有不明白的地方,可能是我描述的不够清楚和准确,也可能是你所花的时间还不够多;无论如何,你都可以联系我一起研究学习。
如果你对前面讲解的内容没有太多的困惑,本节将着重讨论如何在框架库的基础上,开始开发游戏。
这个过程会让你非常心动,因为不久你就可以看到游戏的样子了。
我第一步要做的就是将整理游戏资源,提取游戏中图片和音频文件的方法可以参考第二点中的内容。
首先是整理图片资源,我使用Photoshop对图片尺寸进行调整,更重要的是将图片进行合并;这将减少资源的请求数,提高加载效率;另外,这也是我框架库中Animation类所强制要求的(前面提到过,Animation要求动画中所有的帧图像为同一个Image对象)
其次是整理音频文件,目前各浏览器还没有统一支持的音频格式,因此我们必须使用两套同样的音频文件,关于目前各浏览器所支持的音频格式如下:
浏览器
支持的音频格式
IE9
mp3,aacwav
Firefox
ogg,wav
Chrome
ogg,mp3,aac,wav
Safari
mp3,aac,wav
Opera
ogg,wav
游戏中的音频文件是mp3格式,为了兼容Firefox和Opera,我同时还选择了wav格式。
wav格式的文件非常大,为了减小文件大小,我将音频进行了压缩,减小比特率,但音质受到了明显的影响。
可能你会疑惑,为什么我不选择ogg格式呢?
这是因为我购买的虚拟主机竟然不支持访问ogg格式的文件,Why?
这里,我建议你可以仍然使用ogg格式,在保持和mp3同样音质的情况下,文件大小会比wav小很多。
资源的整理可能需要花上好几天的时间,不过幸运的是,这些资源我已经整理过一遍,你可以copy过去直接使用。
资源整理完毕后,我创建一个了项目,分好目录结构,并将资源放在对应的目录下。
然后创建游戏页面index.html。
经过分析,我将尽量能使用HTML和CSS来做的内容独立开来,使用HTML和CSS进行开发(index.html文件中包含了所有的HTML,css目录下包含了所有的样式);还缺少什么呢?
对了,还缺少对DOM的控制逻辑,这么多的HTML,在游戏进行到什么时候显示?
什么时候隐藏?
如何控制?
这些具体的逻辑我们都用不管,先编写一个统一的UI控制类,代码存放在js/classes/UI.js,UI类不包含任何游戏逻辑,它只负责处理DOM相关的UI展现和控制,在游戏中需要使用到它的时候,调用相应的方法即可。
另外在UI类中,也包含了类似于DOMLevel1的事件管理方式,这是为了降低DOM对象与游戏逻辑间的耦合度。
当这部分内容完成的时候,游戏就有了一个可以看到的雏形,但我们还没有真正开始呢,因为我们编写的游戏框架库还没有派上用场。
我先在js目录下创建一个main.js,用作游戏主逻辑的入口文件(在上一节中,我们介绍过,js目录只用于存放游戏相关的业务逻辑)。
在main.js中,我先加载了游戏资源,在资源加载完毕后,创建游戏对象,并开始监听和处理DOM相关的事件;当你点击“开始”按钮后,游戏就正式开始了。
游戏开始后,具体是怎么运行的,这里就不做描述,源码中有详细的注释,但我觉得还是有必要简单描述下js目录下的所有文件的结构,便于大家查找。
∙js/main.js:
这个文件刚才介绍过,是游戏的主逻辑入口文件。
∙js/classes:
游戏中所有的逻辑代码都存放在这里。
∙js/classes/Audio.js:
Audio类提供一些基础方法,用于控制游戏中音效的播放。
∙js/classes/Cloud.js:
当驴子踩到云朵上时,会产生践踏效果,Cloud就是践踏效果类,用于产生践踏效果对象。
∙js/classes/Donkey.js:
驴子类,用于创建驴子实例,提供控制驴子状态相关的方法。
Donkey类继承自Sprite(精灵)类。
∙js/classes/DonkeyJump.js:
DonkeyJump(驴子跳),该类继承自Game类,是整个游戏的核心类,主导游戏整体逻辑和状态,用于创建游戏中的分层,负责游戏初始化、开始、暂停等操作。
∙js/classes/Prop.js:
游戏道具类,游戏中一共有7种道具,但它们都是Prop类的生成对象。
∙js/classes/Stair.js:
云朵类,游戏中的云朵也有7种,包括5种普通云、脆弱的云和会移动的云。
云朵的类型是随机的,在云朵被创建时,有一定的几率会同时出现一个道具(道具的类型也是随机选择的)。
∙js/classes/UI.js:
UI类用于控制DOM的展现逻辑,上文中已经进行过讨论。
∙js/frames:
游戏中所有精灵的帧动画配置数据都存放在这里;每个文件存放不同精灵的帧动画数据,此处不一一介绍,只以donke.js为例,当你打开这个文件,会发现里面存储的内容几乎完全一样,它定义了每个动画需要使用的所有帧数据:
∙{//这是某一帧的配置数据
∙x:
0,//当前帧在动画的Image对象出现的x轴位置
∙y:
0,//当前帧在动画的Image对象出现的y轴位置
∙duration:
10,//当前帧播放的时间(ms)
∙collRect:
[[50,93,28,15]]//当前帧的矩形碰撞区域
}
单帧配置中的duration表示该帧在动画过程中所播放的时间,而collRect表示动画被播放到该帧时,精灵对象的碰撞区域。
目前我只支持了矩形碰撞,通过分割定义多个矩形碰撞区域,可以提高碰撞监测的准确度。
如果需要更加精确的碰撞检测,就需要使用其它的方式实现,例如像素检测。
∙js/resources:
定义游戏所需要的图片和音频资源路径和配置。
∙js/resources/audios.js:
对游戏中所有的音频资源进行定义
∙js/resources/images.js:
对游戏中所有图片资源进行定义
当你了解了这个游戏的组成,你可以参考游戏的源码,并试着自己也写一遍。
当然,我的源码写的不一定好,至少我目前觉得在游戏各对象的耦合关系上处理地还不太好,这也是因为开始写的之前没有全面规划。
到目前为止,你通过阅读以上全文,并付之实践,相信一定可以开发出一个你喜欢的HTML5游戏了。
四、性能优化
在本节,我将分享游戏过程中遇到的种种性能问题,和解决方案,以及一些性能测试数据。
在分享这些测试数据之前,我得先说明一下我的机器配置:
ThinkPadSL410K(属于ThinkPad系列中最低端的一款了,伤心ing)
操作系统:
Windows7旗舰版
CPU:
Intel奔腾双核T44主频2.2GHz
内存:
4GB(标配2GB,自己加了2GB)
硬盘:
320GSAT5400转
显卡:
IntelGMAX4500集显
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 游戏 开发 驴子