HTML5 2D游戏引擎研发系列 第四章 Canvas技术篇-画布技术-基于手动切片动画
作者:HTML5游戏开发者社区-白泽
转载请注明出处:http://html5gamedev.or
HTML5 2D游戏引擎研发系列 第四章 <Canvas技术篇-画布技术-基于手动切片动画>
作者:HTML5游戏开发者社区-白泽
转载请注明出处:http://html5gamedev.org/
目录
- HTML5 2D游戏引擎研发系列 第一章 <一切的开始>
- HTML5 2D游戏引擎研发系列 第二章 <磨剑>
- HTML5 2D游戏引擎研发系列 第三章 <Canvas技术篇-画布技术-显示图片>
- HTML5 2D游戏引擎研发系列 第四章 <Canvas技术篇-画布技术-基于手动切片动画>
- HTML5 2D游戏引擎研发系列 第五章 <Canvas技术篇-画布技术-纹理集复杂动画>
- HTML5 2D游戏引擎研发系列 第六章 <Canvas技术篇-画布技术-混色特效和粒子>
- HTML5 2D游戏引擎研发系列 第七章 <Canvas技术篇-画布技术-鼠标侦听器>
- HTML5 2D游戏引擎研发系列 第八章 <Canvas技术篇-基于顶点绘制与变形>
- WEBGL 2D游戏引擎研发系列 第一章 <新的开始>
- WEBGL 2D游戏引擎研发系列 第二章 <显示图片>
- WEBGL 2D游戏引擎研发系列 第三章 <正交视口>
- WEBGL 2D游戏引擎研发系列 第四章 <感想以及矩阵>
- WEBGL 2D游戏引擎研发系列 第五章 <操作显示对象>
- WEBGL 2D游戏引擎研发系列 第六章 <第一次封装>
- WEBGL 2D游戏引擎研发系列 第七章 <混色>
- WEBGL 2D游戏引擎研发系列 第八章 <批处理(影分身之术)>
- WEBGL 2D游戏引擎研发系列 第九章 <基于UV的模拟切片>
- WEBGL 2D游戏引擎研发系列 第十章 <纹理集动画>
- WEBGL 2D游戏引擎研发系列 第十一章 <着色器-shader>
- WEBGL 2D游戏引擎研发系列 第十二章 <粒子发射器>
- WEBGL 2D游戏引擎研发系列 第十三章 <Shader分享>
- 游戏技法 2D游戏引擎研发系列 第一章 <优化技巧>
- 游戏技法 2D游戏引擎研发系列 第二章 <计时器>
- 游戏技法 2D游戏引擎研发系列 第三章 <基于UV的无缝图像滚动>
- 游戏技法 2D游戏引擎研发系列 第四章 <基于形状的碰撞检测>
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,试试在外部修改他们的参数吧.
基于刚才的封装,我们可以毫不关心它的内部逻辑了,我们只要输入动画需要播放的参数即可,现在让我们试试把这个小人添加到整个场景上,并且随机播放某一段动画吧,
因为动画是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游戏引擎研发系列 第四章
HTML5 2D游戏引擎研发系列 第四章 Canvas技术篇-画布技术-基于手动切片动画相关推荐
- HTML5 2D游戏引擎研发系列 第五章
HTML5 2D游戏引擎研发系列 第五章 <Canvas技术篇-画布技术-纹理集复杂动画> 作者:HTML5游戏开发者社区-白泽 转载请注明出处:http://html5gamedev.o ...
- WEBGL 2D游戏引擎研发系列 第四章 感想以及矩阵
WEBGL 2D游戏引擎研发系列 第四章 <感想以及矩阵> HTML5游戏开发者社区(群号:326492427) 转载请注明出处:http://html5gamedev.org/ HTML ...
- WEBGL 2D游戏引擎研发系列 第三章 正交视口
WEBGL 2D游戏引擎研发系列 第三章 <正交视口> 作者:HTML5游戏开发者社区-白泽 转载请注明出处:http://html5gamedev.org/ 目录 HTML5 2D游戏引 ...
- HTML5 2D游戏引擎研发系列 第一章
HI,大家好,我是白泽,一名游戏设计师,一直专注各平台的2D游戏引擎研发,HTML5是我准备进入的新领域,我有个习惯,刚接触的新领域我都会习惯自己写一套游戏引擎,而不用第三方提供的,为了方便自己学习 ...
- WEBGL 2D游戏引擎研发系列 第一章 新的开始
WEBGL 2D游戏引擎研发系列 第一章 <新的开始> ~\(≥▽≤)/~HTML5游戏开发者社区(群号:326492427) 转载请注明出处:http://html5gamedev.or ...
- 《HTML5 2D游戏编程核心技术》——第1章,第1.3节特别功能
本节书摘来自华章出版社<HTML5 2D游戏编程核心技术>一书中的第1章,第1.3节特别功能,作者[美] 戴维·吉尔里,更多章节内容可以访问云栖社区"华章计算机"公众号 ...
- 《HTML5 2D游戏编程核心技术》——第2章,第2.3节使用CSS背景
**本节书摘来自华章出版社<HTML5 2D游戏编程核心技术>一书中的第2章,第2.3节,作者[美] 戴维·吉尔里,更多章节内容可以访问云栖社区"华章计算机"公众号查看 ...
- 《HTML5 2D游戏编程核心技术》——第1章,第1.1节Snail Bait游戏
本节书摘来自华章出版社<HTML5 2D游戏编程核心技术>一书中的第1章,第1.1节,作者[美] 戴维·吉尔里,更多章节内容可以访问云栖社区"华章计算机"公众号查看. ...
- 《HTML5 2D游戏编程核心技术》——第1章,第1.8节练习
本节书摘来自华章出版社<HTML5 2D游戏编程核心技术>一书中的第1章,第1.8节练习,作者[美] 戴维·吉尔里,更多章节内容可以访问云栖社区"华章计算机"公众号查看 ...
最新文章
- Hadoop学习笔记一 简要介绍
- tomcat 远程管理(入门级)
- 敏捷结果30天之第六天:周五回顾,找到三件做的好以及三件需要改善的事情...
- ubuntu websocket python2
- 使用DOM4J读取和维护XML数据
- Linux如何关闭某个占用端口的进程
- html中怎么用js把表格清空_一款简洁非常好用的前端表格组件库
- Python这些位运算的妙用,绝对让你大开眼界
- ionic打包中的那些坑
- Android线程,线程池使用及原理博文参考
- MySQL主从同步相关-主从多久的延迟?
- 关于博主 | 联系博主
- 出差经历的人在囧途那一天
- 单片机c语言1ms 2ms 4ms方波,定时器使用:利用单片机内部定时器0通过P1.0端口输出一定周期的方波信号。 - 试题答案网问答...
- 如何优雅地书写英文文章
- 快速查询苹果手机的UUID
- CubieBoard1【大屏计划】- 霸气平板 - 个人整合帖子【丰富】
- 酒旅板块复苏,亚朵继续上市梦,距离“新住宿经济第一股“还有多远?
- 取巧方式无限制试用Source insight3.5
- 使用 honeycam 在电脑上截取GIF动图