Glitchy Animation On Canvas

July 27, 2023 Post a Comment

On my main bottom layer where the player moves and elevators move I use this frame rate: var requestAnimFrame = window.requestAnimationFrame || window.web

Solution 1:

Here’s an animation illustration that uses both requestAnimationFrame and setTimeout.

It would be more performant to use RAF to drive both animations, but both are presented here for illustration purposes.

This RAF animation loop runs your elevator and looks like this:

var fps1 = 60;
functionrunElevator() {
    setTimeout(function() {

        // request another loop
        raf1=requestAnimFrame(runElevator);

        // update the elevator properties (current Y and directon)
        elevatorY+=elevatorSpeed*elevatorDirection;
        if(elevatorY+elevatorHeight>canvasB.height || elevatorY<30){
            elevatorDirection= -elevatorDirection;
        }

        // call the function that draws the elevator framedrawElevator(elevatorX,elevatorY,elevatorWidth,elevatorHeight)

    }, 1000 / fps1);
}

The setTimeout animation loop runs your explosion and looks like this:

var fps2 = 30;
functionrunExplosion() {

    // update the explosion properties (the current radius of the explosion)
    explosionRadius+=1.5;

    // check if the explosion is doneif(explosionRadius<explosionMaxRadius){

        // the explosion is not done, draw another explosion framedrawExplosion(explosionX,explosionY,explosionRadius);

        // and request another loop setTimeout(runExplosion, 1000/fps2);

    }else{

        // the explosion is done,  clear the top canvas and “we’re outta here!”
        ctxT.clearRect(0,0,canvasT.width,canvasT.width);
    }

}

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/YzqUF/

<!doctype html><html><head><linktype="text/css"media="all"href="css/reset.css" /><!-- reset css --><scripttype="text/javascript"src="http://code.jquery.com/jquery.min.js"></script><style>body{ background-color: ivory; padding:20px;}
    #container{position:relative;}
    canvas{border:1px solid red; position:absolute; top:0; left:0}
</style><script>
    $(function(){

        var canvasT=document.getElementById("canvasTop");
        var ctxT=canvasT.getContext("2d");
        var canvasB=document.getElementById("canvasBottom");
        var ctxB=canvasB.getContext("2d");

        window.requestAnimFrame = (function(callback) {
          returnwindow.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
        })();


        var elevatorX=30;
        var elevatorY=30;
        var elevatorWidth=40;
        var elevatorHeight=60;
        var elevatorSpeed=2;
        var elevatorDirection=1;

        ctxT.strokeStyle="orange";
        var explosionX=100;
        var explosionY=200;
        var explosionStartingRadius=10;
        var explosionEndingRadius=25;
        var explosionRadius=explosionStartingRadius;

        var raf1;
        var raf2;

        runElevator();


        functionexplode(x,y,maxRadius){

            explosionX=x;
            explosionY=y;
            explosionMaxRadius=maxRadius
            explosionRadius=10;

            ctxT.clearRect(0,0,canvasB.width,canvasB.height);
            ctxT.beginPath();
            ctxT.arc(x,y,explosionRadius,0,Math.PI*2,false)
            ctxT.closePath();
            ctxT.fillStyle="yellow"
            ctxT.fill();
            ctxT.stroke();
            ctxT.fillStyle="orange";
            runExplosion();

        }

        var fps1 = 60;
        functionrunElevator() {
            setTimeout(function() {
                raf1=requestAnimFrame(runElevator);

                elevatorY+=elevatorSpeed*elevatorDirection;
                if(elevatorY+elevatorHeight>canvasB.height || elevatorY<30){
                    elevatorDirection= -elevatorDirection;
                }

                drawElevator(elevatorX,elevatorY,elevatorWidth,elevatorHeight)

            }, 1000 / fps1);
        }

        var fps2 = 30;
        functionrunExplosion() {

            explosionRadius+=1.5;

            if(explosionRadius<explosionMaxRadius){
                drawExplosion(explosionX,explosionY,explosionRadius);
                setTimeout(runExplosion, 1000/fps2);
            }else{
                ctxT.clearRect(0,0,canvasT.width,canvasT.width);
            }

        }

        functiondrawElevator(x,y,width,height){
            ctxB.clearRect(0,0,canvasB.width,canvasB.height);
            ctxB.beginPath();
            ctxB.moveTo(x+width/2,0);
            ctxB.lineTo(x+width/2,y);
            ctxB.rect(x,y,width,height);
            ctxB.stroke();
            ctxB.fill();
        }

        functiondrawExplosion(x,y,radius){
            ctxT.beginPath();
            ctxT.arc(x,y,radius,0,Math.PI*2,false);
            ctxT.closePath()
            ctxT.stroke();
        }

        $("#explode").click(function(){ explode(150,150,75); });


    }); // end $(function(){});</script></head><body><buttonid="explode">Explode</button><divid="container"><canvasid="canvasTop"width=300height=300></canvas><canvasid="canvasBottom"width=300height=300></canvas></div></body></html>

Solution 2:

It sounds like you're trying to control the speed of your animation by controlling the framerate. I recommend refactoring so that framerate is independent of animation speed.

In other words, don't slow down your explosion by lowering your framerate. You should slow it down by making the flames / debris move less between each frame.

That said, slowing the whole level down (elevators and all) when you die sounds like kind of a neat effect ;)

Html5 Developer

Glitchy Animation On Canvas

Solution 1:

Solution 2:

Post a Comment for "Glitchy Animation On Canvas"