• as3如何做出残影效果


          在页游中,时不时能看到人物做一些快速移动动作如冲刺时,有残影效果,强化了画面表现。实际人肉眼之所以能看到残影的效果,是因为观察到的物体会在人视线中残留几十毫秒时间,当运动物体运动太快时,人肉眼所见未能跟上物体运动速度,视网膜仍然残留旧的物体影像,没有马上消失,物体已经移动到别的位置,就会产生残影效果。

      实际游戏里物体的移动速度当然不可能这么快,但我们可以在通过让旧的物体影像“残留”更长一段时间,来做出残影效果。

      具体做法:

      用一张Bitmap专门draw运动物体,当物体移动时,并不把上一帧的bitmapData进行dispose,而是对bitmapData加上一层透明滤镜,然后再直接画出新的运动物体。每次enter_frame都如此操作,越是旧的bitmapData就会越变透明直至消失不见。残影效果就形成了。

      

            private var bitmapData:BitmapData;
            private var bitmap:Bitmap;
            private var blur:BlurFilter;
            private var colorTransform:ColorTransform;
            private var origin:Point;
            private var ball:Sprite;      
    
         private function configUI():void
            {
          ball = new Sprite();
           ball.graphics.beginFill(0x0000ff,1);
           ball.graphics.drawCircle(10, 10, 10);
           ball.graphics.endFill();
           this.addChild(ball);
                bitmapData = new BitmapData(this.stage.stageWidth, this.stage.stageHeight, true, 0x00000000);
                bitmap = new Bitmap(bitmapData);
                this.addChild(bitmap);
                //羽化效果
                blur = new BlurFilter(1,1);
                //前三个参数设置rgb颜色通道,第四个参数设置透明度(影响残影持续效果)
                colorTransform = new ColorTransform(0.9,0.95,0.9,0.3);
                origin = new Point(0,0);
                
                this.addEventListener(Event.ENTER_FRAME, handler);
            }
    
    
            private function handler(e:Event):void
            {
                ball.x += 3;
                ball.y += 3;
                
                //在绘制新的图像之前应用滤镜到旧的图像。 残影效果
                bitmapData.applyFilter(bitmapData,bitmapData.rect,origin,blur);
                bitmapData.colorTransform(bitmapData.rect, colorTransform);
                //绘制最新图像
                bitmapData.draw(this.stage);
            }

    残影效果:

  • 相关阅读:
    div居中鼠标悬浮显示下拉列表
    javascript循环
    javascript函数
    javascript时间、随机数
    javascript外部使用
    Javascript 探路
    CSS六大选择器(注释css表里不能加注释!!)
    框架链接
    Jmeter分布式测试dubbo接口2
    Jmeter分布式测试dubbo接口1
  • 原文地址:https://www.cnblogs.com/leoin2012/p/3921400.html
Copyright © 2020-2023  润新知