arpg网页游戏特效播放（一）

时间：2022-07-09 14:58:59

　　网页游戏中的特效，主要包括：场景特效，攻击特效和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对象占的内存小的多。哪个更好些，我也没对比过。不过随着硬件的不断发展和网络不断提速，这两种方式区别可能越来越小，那就怎么方便怎么来吧。

　　（转载请表明出处）

相关文章