网页游戏中的特效,主要包括:场景特效,攻击特效和UI特效三种。场景特效是在地图层上播放的特效,攻击特效主要是技能触发的一些特效,UI特效是面板上的一些特效,还有一些在人物身上播放的特效,例如脚底光圈特效等。特效的播放方式有两种,一种是直接播放swf,二种是根据图片序列,直接绘画到Bitmap上,对于两种方式,我比较倾向于直接绘画到Bitmap上。一般我们我们处理程序的逻辑是,显示和逻辑分开。对于特效显示逻辑,就是特效的绘画逻辑,以及资源的整理方式,逻辑就是特效的播放位置和播放时机不一样而已。所以对于特效,我们抽象出一个基类来处理显示逻辑。

  1. 特效资源的组织方式:一种是swf方式,即特效制作人员直接倒出swf文件,直接放到程序中播放,一般小游戏会这么做;还有一种是特效制作人员给出一系列png图片,然后程序根据图片序列和帧率用FlashCS 制作swf文件,然后再程序里根帧率去把swf中每一帧绘画一个bitmapdata中,还有一种是写一个工具,把所以的图片序列生成一张大的png,然后还有一个图片xy偏移的配置文件,根据这个配置文件去取像素,绘画到bitmap上。
  2. 特效绘画到bitmap,要一个需要解决的问题,我把它称作“置心点”,即特效制作人员,制作特效的时候,肯定是根据一个中心点来制作。这个中心一般是画布的中央,或者左上角等。所有绘画到bitmap上的图片序列需要根据这个点做偏移的。
  3. 因为游戏中,会涉及到特效重叠的情况,所以bitmap有一个属性blendMode,即指定使用的混合模式,一般情况用不到这个属性,但是偶尔一些特殊效果,需要用到这个。这个属性查一下API会有详细的图例说明。
  4. cacheAsBitmap属性,为True时,可提高显示性能,这属性是一把双刃剑,最好将此属性与主要具有静态内容且不频繁缩放和旋转的影片剪辑一起使用,如果对位图适用滤镜时,此属性直接为True,其实我感觉这就是一种拿内存来换显示效率的一种方式。具体在什么情况下,使用此属性,我也没有一个很明确的定论,一直跟着自己的感觉走,就是设置下此属性,看看流畅度和内存使用率,怎么好就怎么选择了。

  现举例说明:

  资源的组织方式:特效制作人员会给出一系列png图片和置心点,然后用jsfl工具,把png裁剪到最小范围,并且生成一个偏移量的xml文件。然后再用生成工具把处理过的png图片绘画到swf中的每一帧当中,并且在配置文件中配置此特效的ID,置心点,播放序列。如:590000004(ID),75,85(point),

1,1,2,2,3,3,4,4,5,5,6,6(frames)。这个帧序列的意思就是:第一帧播放swf中第一个图片,第二帧也是第一张图片,第三帧是2张图片,如此循环,便形成一个特效的播放过程。

  特效的播放函数(伪代码):

        public function render(stepFrame:int, stepTime:Number):void
{
var index:int = _info.frames[_currentFrame];
var pack:IPackageFileData = _effectSwf.getPkgData(index); //取当前播放图片序列
if(pack != null)
{
if(index != lastImg)
bitmapData = pack.getBD();
lastImg = index;
var _x:int = pack.getX() -_info.org_point.x + _sceneX;
var _y:int = pack.getY() -_info.org_point.y + _sceneY;
if(super.x != _x)
super.x = _x;
if(super.y != _y)
super.y = _y;
}
_currentFrame = _currentFrame + stepFrame;
if (_currentFrame >= _info.frames.length)
{
count++;
_currentFrame = 0;
}
}
        public function getPkgData(imgId:int):IPackageFileData // 接上面的函数
{
if(_isReady == false)
return null; if(_bmdDatas[imgId]){ // 有缓存直接返回
return _bmdDatas[imgId];
} if(imgId > _frameCount)
return null; var bmdRect:Rectangle;
var bmd:BitmapData; this._source.gotoAndStop(imgId); // swf直接播放到当前图片序列
bmdRect = this._source.getBounds(this._source);
if (bmdRect.width == 0)
{
return null;
}
else
{
bmd = new BitmapData(bmdRect.width, bmdRect.height, true, 0);
this._matrix.tx = -bmdRect.x;
this._matrix.ty = -bmdRect.y;
bmd.draw(this._source, this._matrix);
var pkgData:PacckageFileData = new PacckageFileData(bmd, bmdRect.x, bmdRect.y);
_bmdDatas[imgId] = pkgData;
}
return _bmdDatas[imgId];
}

  现在想来,如果把png序列图片,通过一定的算法,绘画到一张大的bitmap上,然后根据配置文件直接去像素,这样的效率应该会更高。做手游处理资源的方式是这样的,而且还有专门的工具。这个东西也不太好评估,因为把png序列导成swf可以对图片进行一些压缩,从而减少加载大小,提高显示速度,加载是快了,但是显示的时候,还隐形的创造了一个swf对象,多占了好多内存。如果只加载一张比较png图片,加载慢了些,但是png多大,就会占用的多大的内存,比swf对象占的内存小的多。哪个更好些,我也没对比过。不过随着硬件的不断发展和网络不断提速,这两种方式区别可能越来越小,那就怎么方便怎么来吧。

  (转载请表明出处)

arpg网页游戏特效播放(一)的更多相关文章

  1. arpg网页游戏之地图(一)

    [转]http://www.cnblogs.com/BlueWoods/p/4681572.html?from=timeline&isappinstalled=1 开发arpg网页游戏一项比较 ...

  2. arpg网页游戏之地图(三)

    地图分块加载类MapEngine,主要包含以下属性: g 地图层graphics,地图将画在上面 buffPixelRange 地图加载范围矩形 viewPort 屏幕视窗 currZoneArr 已 ...

  3. arpg网页游戏之地图(二)

    [转]http://www.cnblogs.com/BlueWoods/p/4684557.html 这一节说说视窗,这个视窗,也就是游戏的视角.现在的网页游戏分为2D游戏,2.5D游戏和3D游戏,2 ...

  4. arpg网页游戏之地图(四)

    这一节主要是针对上一节的补充,关于地图的优化策略上一节中已经涉及了一些,这一节具体说下. 地图块加载队列:就拿1280*800的屏幕分辨率来讲,大约需要加载的地图块为30~35块之间,如果这个时候一下 ...

  5. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  6. [Mugeda HTML5技术教程之14]案例分析:制作网页游戏

    本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...

  7. 推荐21款最佳 HTML5 网页游戏

    尽管 HTML5 的完全实现还有很长的路要走,但 HTML5 正在改变 Web,未来 HTML5 将把 Web 带入一个更加成熟和开放的应用平台.现在,越来越多的人尝试用 HTML5 来制作网页游戏等 ...

  8. 基于html5实现的愤怒的小鸟网页游戏

    之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...

  9. 解决unity3d发布的网页游戏放到服务器上无法使用的问题

    http://www.unity蛮牛.com/blog-2429-1226.html 第一次把unity3d发布的网页游戏放到服务器上(Win2003),发现无法使用.可以尝试以下办法.       ...

随机推荐

  1. 《剑指offer》第九题(用两个栈实现队列)

    // 面试题:用两个栈实现队列 // 题目:用两个栈实现一个队列.队列的声明如下,请实现它的两个函数appendTail // 和deleteHead,分别完成在队列尾部插入结点和在队列头部删除结点的 ...

  2. jsonSchema

    可参考http://www.cnblogs.com/chenmo-xpw/p/5818773.html 我的理解 jsonSchema最大的用途是去定义和校验json数据,相当于一种json数据的一种 ...

  3. CodeSmith无法获取Oracle表注释

    如题:安装CodeSmith5.2版本,SQLServer没有任何问题,而Oracle就只能获取列的注释而不能获取表的注释,经过多方面查找资料后找到了一个最重要的解决方案,Sql语句,如下:selec ...

  4. [Android教程] Cordova开发App入门(二)使用热更新插件

    前言 不知各位遇没遇到过,刚刚发布的应用,突然发现了一个隐藏极深的“碧油鸡(BUG)”,肿么办!肿么办!肿么办!如果被老板发现,一定会让程序员哥哥去“吃鸡”.但是想要修复这个“碧油鸡”,就必须要重新打 ...

  5. JELLYFISH - Fast, Parallel k-mer Counting for DNA

    kmer分析其实是非常耗费计算资源的,如果我们自己写脚本来分析kmer的话,首先要将所有的序列打断成一定长度的kmer,然后将所有的kmer存储起来,最后统计每个kmer出现的频率,或者统计出现指定次 ...

  6. (GoRails) 用app/decorators来取代app/helpers; delegate()方法

    视频:https://gorails.com/episodes/decorators-from-scratch?autoplay=1 装饰设置风格:把Model层变的干净,但不使用app/helper ...

  7. 12月13日 什么是help_method,session的简单理解, find_by等finder method

    helper_method Declare a controller method as a helper. For example, helper_method :link_to def link_ ...

  8. 基础最短路(模板 bellman_ford)

    Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要寻找最短的从商店 ...

  9. DB2性能调优

    1.更新统计信息 --更新数据库所有表统计信息 --连接到数据库(-v选项,表示要回显命令,以下同) db2 -v connect to DB_NAME --查看是否收集过统计信息,什么时候更新的   ...

  10. Access-Control-Allow-Origin实现跨域访问 跨域

    总结:跨域的get,post请求 后台可以设置 Access-Control-*相关的参数,让浏览器支持. // 指定允许其他域名访问 header('Access-Control-Allow-Ori ...