Html5画布，继承层次结构可能导致闪烁

Html5 canvas, inheritance hierarchy possible cause of flickering?

本文关键字：闪烁 层次结构 画布 继承 Html5      更新时间：2023-12-12

我正在画布中处理一个动画场景，其中我有一个基类Sprite-我的项目中除了一个对象外，其他所有对象都使用单一继承，就像从Sprite继承一样。

我有一个从精灵继承的静态动画精灵对象，这个动画精灵只是在精灵表上移动剪切区域。它按预期设置了动画，即在图纸中转换时没有闪烁。

然而，我有一个移动的动画精灵，为了节省代码空间，我从AnimatedSprite继承了这个精灵，所以这个精灵从一个从对象继承的对象继承。

这个新的精灵在每个帧转换时都会闪烁，我想知道双重继承是否会导致这个问题？就像搜索所有三个对象的原型以查找函数调用一样？

很抱歉，在不尝试的情况下询问有点懒惰，代码库相当大，今晚我没有时间使用单一继承模型重写对象。

因此，如有任何评论，我们将不胜感激！

记录在案，我是双重缓冲。

继承函数：

function __extends(child,parent){ //Global function for inheriting from objects
       function Temp(){this.constructor = child;} //Create a temporary ctor
       Temp.prototype = parent.prototype; 
       child.prototype = new Temp(); //Set the child to an object with the child's ctor with the parents prototype
}

交换帧：

SantaSprite.prototype.loopImages = function(){
    if(this.getDirection()){ //If going right set the y frame to the bottom of the sheet
        this.setCurrentFrame(this.getCurrentFrame().getX(),this.getFrameHeight());
    }
    else{ //Else set y to the top of the sheet
        this.setCurrentFrame(this.getCurrentFrame().getX(),0);
    }
    this.setSwitchTime(this.getSwitchTime()+this.getIncrement()); //Increment the timer
    if(this.getSwitchTime() >= this.getSwitchFrame()){ //If the counter has reached the limit
        this.setSwitchTime(0); //Reset the counter
        //Move the frame along one tile in the x axis
        this.setCurrentFrame(this.getCurrentFrame().getX() + this.getFrameWidth());
        //If at the end of x axis, reset back to 0 (left)
        if(this.getCurrentFrame().getX() + this.getFrameWidth() > this.getImage().width){
            this.setCurrentFrame(0,this.getCurrentFrame().getY());
        }
    }
};

干杯

这里的错误在这一行：

//Move the frame along one tile in the x axis
    this.setCurrentFrame(this.getCurrentFrame().getX() + this.getFrameWidth()); //No Y value set.

修复：

//Move the frame along one tile in the x axis
    this.setCurrentFrame(this.getCurrentFrame().getX() + this.getFrameWidth(),
                         this.getCurrentFrame().getY());
相关文章：