I'm Universo and for the longest time had coding issues around the concept of time-based sprite animation basically, do not know how to implement it and any code or explanation simple or complex that I've found has been extremely confusing to me and was hoping to have a kind person walk me through the code step by step, explaining exactly how this is implemented correctly.

Here's what, I believe to know about the concept and or idea for time-based sprite animation it is to construct a delay or halt of some code statement using time of some kind in milliseconds with a collection of moving images and or sprites however any attempts from the tutorial's or my own brain have resulted in inaccurate various speed sprite animations and not the consistent stable speed, Id appreciate and be grateful for here's some code to show my progress and perhaps help you understand my position in this mess baring in mind, I prefer my code be as extremely simple and speedy as possible within the limitations, of course:

JavaScript with HTML5 Canvas

window.onload = function () {

var canvas = document.getElementById("canvas"); // get the canvas object

var ctx = canvas.getContext("2d"); 
/* make sure we have a context for that canvas so we can draw stuff */

var FrameSize = 120; //120 pixels
var FrameNumber = 0; //obvious
var img = new Image(); // make a image object
img.src = 'sprite_ani.png'; // url to the image
var last = 0; // no idea 

function Render() {

  ctx.clearRect(0,0 ,640,480); // clear screen
  now = performance.now(); //to get the current timestamp in milliseconds
  delta = now - last; // last is 0, how does this work?
  last = now; // last is now, why?

  if(delta > 20 //what does this value represent??) {
     FrameNumber += FrameNumber + 1;  

   /* increment FrameNumber by 1 could have been FrameNumber++ */

     delta = 20; // No idea why I need to keep this the same number??
  if(FrameNumber>=4){   //just to make sure this is the end of the frame number sequence  
     FrameNumber = 0; // to reset the frame number
     perticularly draw a sequence of images and switch each individual image 
     in that sequence based on the equation
     (number to multiply the pixels by)
     * // multiply operator symbol
     (the pixels for the FrameSize to multiply with) 
     window.requestAnimationFrame(Render); // do the Raf stuff part one
window.requestAnimationFrame(Render);  // do the raf stuff part two

As you can see, it's extremely simple yet, I'm still struggling to not only understand it but extremely simply implement it, I'm not a fan of over-complicated coding hence why I ditched c++ ages ago.

Could someone in extremely simple english guide me through time-based sprite animation in the context of JavaScript preferably, Id also really appreciate various time-based sprite animation methods being explained too in extremely simple terms but not holding out, I thank you for reading this far.


1 Answer 1


After literally years on and off trying to figure out how to do some form of time-based sprite animation here is the final code, it's basically about getting delta and then creating an accumulation of increment and comparing if that's greater then delta and if so do a frame number increase "make sure to use framenumber++, not frame number = frame number + 1 it messes it up for some reason"

window.onload = function () {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var FPS = 30;
        var Accumulator = 0;
        var FrameSize = 120;
        var FrameNumber = 0;
        var FrameCounter = 1;
        var img = new Image();
        img.src = 'sprite_ani.png';
        var Accumulator = 0;
        var last = performance.now();
        function Render() {
          ctx.clearRect(0,0 ,640,480);
          now = performance.now();
          var delta = now - last;
          last = now;
          if(Accumulator >= delta)
             Accumulator = 0;
             FrameNumber = 0;
            window.requestAnimationFrame(Render, 3/1000);
        window.requestAnimationFrame(Render, 3/1000);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .