performance - 使用双缓冲 Canvas 的简单动画不流畅

Question

我尝试开发一个简单的 Flash 游戏，使用双缓冲区来绘制动画。

触发 Event.ENTER_FRAME 时会发生重绘。

用于双缓冲的后台缓冲区是 BitmapData 类型。

动画非常简单:我将一个 20x20 像素的位图绘制到后台缓冲区中，并增加 x 坐标，以便它应该从 Canvas 的左侧平滑地移动到右侧。这基本上工作得很好，但如果你仔细观察，你会发现这个运动有明显的破坏。这似乎与帧速率无关，因为它始终超过 60。平滑移动的中断对于动画来说是 Not Acceptable ，但我很确定我在双缓冲方面没有做错任何事情，所以我'我担心这可能是 Flash 播放器问题或其他问题...如果不是这种情况，我会感到很欣慰

请看一下显示简单动画的 swf:

https://dl.dropbox.com/u/55967135/test.swf

(顺便说一句，当运动基于两帧之间的时间时，动画的中断也不会消失 - 到目前为止，每帧恒定为 2 像素。)

我上传了一个非常轻量级的 Flash 构建器项目，包括上面 swf 的整个源代码: https://dl.dropbox.com/u/55967135/test.zip

    public function enterFrame():void               
      {

           // Calculate the time since the last frame  (NOT USED IN THE EXAMPL PROGRAM)                   
           var thisFrame : Date = new Date();               
           var dT : Number = (thisFrame.getTime() - lastFrame.getTime())/1000.0;               
           lastFrame = thisFrame;          

           // erase backBuffer
           backBuffer.fillRect(backBuffer.rect, 0xFFFFFFFF);


           // set new postion of the small testimage
           if (this.pos > 600 || this.pos < 0) {
                this.direction = !this.direction;
           }

           // increase / decrease vertical position
           if (this.direction) {
                this.pos += 2;
           } else {
                this.pos -= 2;
           }

           //trace(pos);
           // draw small test image at postion "offset"
           backBuffer.copyPixels(     this.testGraphic.bitmap.bitmapData, 
                                         this.testGraphic.bitmap.bitmapData.rect, 
                                         new Point(pos, 0.0));               
      }

enterFrame() 是我的类 GraphicsController 的一个方法，它处理双缓冲。它由应用程序的 EnterFrame(event) 方法启动:

        public function enterFrame(event:Event):void
           {
                GraphicsController.Instance.enterFrame();     
                myCanvas.graphics.clear();
                myCanvas.graphics.beginBitmapFill(GraphicsController.Instance.backBuffer, null, false, false);                              
                myCanvas.graphics.drawRect(0, 0, this.width, this.height);                              
                myCanvas.graphics.endFill();
                stage.invalidate();
           }  

非常感谢您的帮助

谢谢

Answer 1

在 Chrome 上运行非常流畅，但我知道你描述的效果。我在 Firefox 的应用程序中体验到了它，但我使用的是显示列表而不是位图数据。我的问题是因为将显示对象移动了不到一个像素，而闪光灯对此不满意。当我将对象缩放到 0.99 时，它就被修复了。

您可以尝试绘制 dT 并查看它是否稳定。它应该是 16.6666(或 0.0166)，因为您以 60fps 运行，如果它波动，那么某些东西会导致输入帧事件被推迟。

这也可能有用:http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/