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

HTML5 2D游戏引擎研发系列 第六章 <Canvas技术篇-画布技术-混色特效和粒子>
作者:HTML5游戏开发者社区-白泽

HTML5游戏开发者社区（群号：326492427）。

转载请注明出处: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,大家好,前几章节学得怎么样呢?是否你的引擎已经有一个初级的模型了?是否开始枯燥的思考应该如何搭建一个你自己的架构呢?现在本章节就让你放松放松,我们将要学习游戏中最酷，最炫的部分,但是,它却是如此如此的简单,简单得只需要一行代码,它就是混色了,混色是什么？这个内容我已经在第一章介绍过了,如果忘记了可以倒回去看看哦,如果你已经明白了,那我们可以开始利用混色做一些特殊效果了,现在我们经常看到游戏中有酷炫的技能,想想看,我们为什么觉得这个技能好看呢？答案只有一个,那就是足够亮,而且还带有一定的透明度,现在要完成这个你只需要把所有颜色叠加起来就可以了,如果你经常分析别人游戏的素材,你往往会发现一些带黑底的图片或者一些看起来并不起来的素材,比如

           怎么样,他们看起来并没有什么特别,而且有的边缘很粗燥,甚至觉得不能用,我们总不能跑一个特效动画全是黑底吧,其实吧,他们才是游戏素材里的宝贝哦,特效和粒子的原始图源就是它们了,现在让我们给它华丽的变身,你可以找一张暗淡的背景,我们试试,我们把先把他们摆到场景上看看效果

           实在是太丑了,丑得无法直视了,现在让我们給特效门加上叠加效果再看看.

哈哈,怎么样,叠加不但自动帮你把背景去掉了,而且还让特效更加鲜艳了,嗯,现在要让这些特效看起来是那么回事,还少一个步骤,那就是运动,所谓的粒子就是叠加的图片+骚气的运动轨迹而已,如果你等不及了,可以看看我下面的FLASH演示,

演示地址

         嗯哼？很有意思对吗,而且看起来很神秘,我当初还不懂粒子的实现原理时,看到很多大牛实现的非常棒的效果时都一整感慨啊,不明觉厉啊,我以为需要很高深的算法或者需要使用传说中的永远的第三方插件或者引擎才能实现,其实现在看来,粒子是最简单的一个环节,只要你的源图好看,场景足够暗,就能发挥出粒子的最大效果,不知道我公开这个秘密后一些拿着自己的粒子效果卖萌的大神们会不会来批判我,哈哈。。,实际上通过混色和运动不一定要实现粒子,还可以实现遮罩,电影特效等等,现在很期待了吧,好吧,打开你的编辑器,找到的DisplayerObject.js,把混色这个神器的功能加上吧。

?

1 2	//混色参数   this .blend= "source-over" ;

先加上一个成员变量,然后是更新函数

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

//动画类的重绘函数      this .paint= function ()      {          if ( this .visible)          {                 this .upFrameData();              //保存画布句柄状态              context.save();                 //加入混色功能              context.globalCompositeOperation= this .blend;                 //更改画布句柄的透明度,从这以后绘制的图像都会依据这个透明度              context.globalAlpha= this .alpha;                 //设置画布句柄的位置,实际上是设置的图像的位置              context.translate( this .x, this .y);                 //设置画布旋转角度实际上是设置了图像的角度,参数是弧度,所以我们必须把角度转换为弧度              context.rotate( this .rotation*Math.PI/180);                 //设置画布句柄的比例,实际上是设置了图像的比例              context.scale( this .scaleX, this .scaleY);                 switch ( this .isPlay)              {                  case 1:                      context.drawImage(img, this .mcX, this .mcY, this .frameWidth, this .frameHeight,- this .frameWidth/2,- this .frameHeight/2, this .frameWidth, this .frameHeight);                      break ;                  case 2:                      //增加了帧信息的偏移量,和最后一段的动画实际宽度和高度                      context.drawImage(img, this .mcX, this .mcY, this .width, this .height,                          -( this .frameX)- this .frameWidth/2,                          -( this .frameY)- this .frameHeight/2                          , this .width, this .height);                      break                  default :                      context.drawImage(img, this .mcX, this .mcY, this .frameWidth, this .frameHeight,- this .frameWidth/2,- this .frameHeight/2, this .frameWidth, this .frameHeight);                      break ;              }                 //最后返回画布句柄的状态,因为画布句柄是唯一的,它的状态也是唯一的,当我们使用之后方便其他地方使用所以              //需要返回上一次保存的状态,就好像什么事情都没有发生过              context.restore();          }      } }

再然后,如果你没有素材的话,我替你准备好了,查看原图下载吧

XML地址:http://jfy19771224.sinaapp.com/course/demo_4/eff.xml

接下来,找一个背景,然后会到Main.js测试一下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

function init () {         //创建场景管理器      stage2d= new Stage2D();         //启用场景逻辑      stage2d.init();         var mc= new MovieClip2D(imageStart[0]);      mc.isPlay=1;      mc.x=1024/2;      mc.y=768/2;      mc.frameWidth=imageStart[0].width;      mc.frameHeight=imageStart[0].height;      stage2d.addChild(mc);         var mc2= new MovieClip2D(imageStart[1],xmlStart[0].quadDataList);      mc2.isPlay=2;      mc2.x=1024/2;      mc2.y=768/2;      mc2.scene( "eff_5" )      //设置混色样式为叠加      mc2.blend= "lighter" ;      stage2d.addChild(mc2); }

如果没出错的话,你的画面现在应该是这个样子了.

怎么样,效果出来了吧,如果你要建立一个完整的粒子系统的话,你还需要做几件事情,第一,创建一个对象池,你将实现把粒子显示对象存储下来方便下次调用,第二,让粒子运动起来,你可以给定一个角度和速度让他们往某个方向运动,比如

mc.x+=Math.cos(角度*Math.PI/180)*速度

mc.y+=Math.sin(角度*Math.PI/180)*速度

然后还可以給他们的出生点一定的范围随机坐标,到这里为止,混色介绍完毕了,在HTML5中的案例可以看下面的塔防游戏,喷火激光和子弹的效果就是这么实现的,你可以升级炮塔看看满级时的状态.

你可以点击这里体验试玩这个塔防游戏。

最后几点，当然混色不只是只有叠加状态。其他的状态字符你可以参考w3school中有关 混色的介绍 ，如果你对里面的状态不是很了解的话,可以翻翻本系列的第一章的混色部分看看,我们的游戏特效除了混色之外还有一个更加高级技术叫着色器,实际上很多游戏特效都是通过着色器实现的,虽然现在的HTML5有像素处理能力但是效率太低,不合适实际开发,所以这个着色器这个阶段我会放在之后新的篇章WEBGL去介绍,现在如果你对着色器有兴趣,可以通过下面的DEMO了解了解

着色器演示本章DEMO在线演示 本章DEMO源码下载

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