HTML5 2D游戏引擎研发系列第四章 <Canvas技术篇-画布技术-基于手动切片动画>

最新推荐文章于 2023-09-04 09:08:58 发布

小鬼编程

最新推荐文章于 2023-09-04 09:08:58 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：游戏 html5 web开发文章标签： html5 html5游戏开发游戏 2d html5 前端游戏开发游戏引擎

本文链接：https://blog.youkuaiyun.com/wangwangaijia/article/details/17952967

html5 同时被 3 个专栏收录

11 篇文章

订阅专栏

游戏

10 篇文章

订阅专栏

web开发

9 篇文章

订阅专栏

本文是HTML5 2D游戏引擎研发系列的第四章，介绍了如何使用Canvas实现基于手动切片的动画。通过修改`drawImage`函数的参数，实现动画帧的切换，并通过更新逻辑控制动画播放，展示了创建和控制动画的基本步骤。内容包括动画的关键参数、分离绘制和逻辑更新、以及简单的动画循环播放。最后，提供了资源加载和地图编辑器的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者:HTML5游戏开发者社区-白泽

转载请注明出处:http://html5gamedev.or

HTML5 2D游戏引擎研发系列第四章 <Canvas技术篇-画布技术-基于手动切片动画>

作者:HTML5游戏开发者社区-白泽

转载请注明出处:http://html5gamedev.org/

HI,大家好,前几天加班很晚加上5.4新版本(你们懂的),所以停了2天,今天准时11点开写,我们这一章要开始一个游戏中重要的环节,就是基于手动切片的动画,不知道有没有人保留上一章节的代码呢,如果没有保留建议去上一章下载代码

复制粘贴一下,我们这一章就不从头开始了,而是基于上一章的代码进行功能添加,现在我们可能需要一张素材,我已经给你准备了,右键保存吧.

如果没有出现其他问题的话,它应该是一个384*256的图片尺寸,现在让我们替换昨天的素材,把它先显示出来,在网页中看起来应该是这个样子，别忘记改变坐标和删除多余的图像.

每次看到这样的素材我心里都有小小的激动,仿佛一个生动的游戏准备运行一样,不是知道你有没有这样的感觉呢,为了让它运动起来我们需要做下面的一些工作,首先我们要确定几个关键点,这非常关键关键得我需要用红色标记出来.

动画相对于原始图像的裁切X位置

动画相对于原始图像的裁切Y位置

动画对象的宽度

动画对象的高度

动画对象的X偏移信息

动画对象的Y偏移信息

动画的最大宽度

动画的最大高度

现在我们的先从简单的开始,我们只需要前4个参数也就是裁切的XY和裁切的宽度和高度就好了,看到这里是不是想起了我们上一章节的一个函数?drawImage,没错了,就是它,现在让我们让我们的IDE切换到DisplayObject.js中,寻找MovieClip2D动画类中的paint函数,我们做如下修改:

看到了吗,我们只是把上一章节的绘图函数注释掉了,然后加了4个变量,为什么是32？因为这个图片中的小人宽度和高度正好是32,现在让我们上传代码,看看发生了什么事情.

没错了,这就是我们想要的效果,我们成功的显示出了动画的第一帧,现在我们如果需要播放动画怎么办呢？我们只需要改变mcX,或者mcY就可以了,为了方便扩展,我打算把写在paint函数中的零时变量改成MovieClip的成员变量,就像其他属性一样.

现在为了让动画能循环播放,我们需要知道动画的播放长度,也就是有多少帧,所以还需要另外二个成员变量.

为了让动画的逻辑信息和绘制信息分离开来,所以我们还需要一个动画的更新函数。

当然,这样更改之后别忘记在绘图函数里的参数加上this指向.

现在,让我们把upFrameData函数添加到渲染函数里去.

怎么样,思路是不是清晰了,我们的绘画函数只负责绘图,而不用去关心动画的逻辑,而我们的upFrameData函数只关心动画的逻辑而不用关心如何去绘制,现在让我们把刚才新建的变量放到这个逻辑块中试试,我们先尝试着改变mcY的为32,如果没有出错的话，它应该显示图片的第二行的第一个动画帧,就像这样.

我好像又发现了什么,我们是不是可以用mcY来控制人物的朝向?实际上是动画场景的不同,注意,我们的动画场景一般指一个独立的动画对象,现在我们可以注意到这个动画场景的总长度是3,也就是3帧走路的动画,那么我们可以试试让这个小人动起来,我们对upFrameData函数做如下修改:

在这里,我们先强行设置了动画帧的长度,和mcY的值,因为人物动画是32*32的,所以我们以mcX做为动画播放的依据,现在的逻辑是3帧循环播放,如果没有出任何问题的话,你的小人现在应该已经行动起来了,细心的你一定发现了什么,没错,我们现在这样写很不方便操作,我们需要把动画的信息提取出去做为一个参数,并且可以手动输入这个值,所以我们需要做一个设计和规则来制定这个动画标准,我们使用mcY来控制动画的上下移动,mcY控制动画的左右移动,并且以3帧为一个循环,所以我们需要设置一个动画帧的播放头,也就是这个动画的起始帧的位置,这个播放头需要2个参数,动画播放头所在的mcX位置和mcY位置,现在让我们添加新的2个成员变量，然后修改upFrameData的逻辑,如下.

看到了吗,实际上我们设置播放头时不需要再关心这个动画的尺寸是多少了,所以我们让播放头乘以动画的宽度和高度,现在让我们回到Main.js,试试在外部修改他们的参数吧.

QQ截图20130915003902

基于刚才的封装,我们可以毫不关心它的内部逻辑了,我们只要输入动画需要播放的参数即可,现在让我们试试把这个小人添加到整个场景上,并且随机播放某一段动画吧,

因为动画是3帧一段,所以图片的横向排列一共是4段,我们取了一个随机数然后取整再乘以3,纵向排列只需要去8段中的其中一段就好了,现在让我们看看发生了什么.

50个不同动画段的小人运动着,哇,我突然有一个想法,我们加入地图和建筑吧,现在你可能还需要另外一张图片资源,没关系,我也已经给你准备好了,右键查看原图保存吧.

到目前为止,我们只是加载了一张图像资源而已,现在我们可能需要写一个简易的队列加载器允许我们加载N张图片,那么我们只需要在Main.js中加入以下代码.

我们让图像加载完毕后存入imageStart数组方便我们之后的调用,现在我们需要更改一下游戏启动的函数,就像这样.

现在我们的图像资源访问应该改成这样

好了,一切准备就绪,在我们开始拼接地板前,我们可能需要对DisplayObject.js做一点修改,因为目前来说我们把裁切封装成动画专属了,而很多情况下我们是不需要动画的而只是裁切而已,所以我们需要加一个开关,就像这样

默认是开启动画的,而我们不需要是手动关闭,然后裁切的属性又回归我们所有了,为了拼接地面我们新建了一个函数.

关闭了它的动画自动裁切功能,我们手动设置了裁切位置,裁切的宽度和高度为32,位置为0,0因为草地的图片就在原始图像的0,0点,以左上角为原点.然后把它添加到人物初始化之前,因为它的显示层级最低

现在,提交代码,别忘记上传新的map图片,然后刷新页面看一下吧,没有出错它应该是这个样子

哇,50个小人在草地上,有点游戏的感觉了,我又热血沸腾了，我需要加入建筑,让他们看来有个家,下面是3个建筑的代码.

然后我们把他们加入到一个新的函数里.

然后添加到我们的主初始化函数里

如果没有出错的话,测试页面应该是这个样子

哈哈,有点意思了,但还是感觉很空,加点装饰物吧,代码我就不贴了和建筑一样只是参数不同,如果没出错它看起来应该是这个样子了

呼,只是添加了6个元素而已,已经把我累坏了,细心的你一定发现了切片的数据是一个固定值,没错,那是我开着软件看着图片一个一个数出来的,如果换做是你我想应该需要一个地图编辑器去做这样的事情,它看起来应该是这个样

如果你正好没有的话,可以先用用我的这个简易的编辑器,实际上我们切片只需要知道切片的XY和宽度高度就好了,所以可以把这些属性记录到一个XML,下面是这个编辑器的在线地址 :

地图编辑器在线演示源码下载

到这里为止,基于切片的动画已经结束了,但是我们会发现还有很多地方不足,比如动画帧率,如果是切片不是基于宽度高度都是可数的数呢？比如播放暂停动画等等,这些我希望把它放在下一章,基于纹理集的动画来讲解,因为它才是我们最终游戏需要用到的动画,有了它我们才可以做出任何不规则的动画和不规则的切片,不过在此之前,你可以先好好玩玩这章的DEMO,试试优化一下,不要让小人踩到屋顶去了,或者加一个键盘控制他们的坐标移动?下章见.

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