Problem with sprite sheet animation

JavaScript
1

I have 3 siders animated at the top of the canvas. I try to add 5 more from a for loop and they are added but they’re moving at an accelerated rate and I don’t get why. You can view ot running here:
http://jim-east.site/spiders/spiderTurn.html

Here’s my code:
HTML:

<!DOCTYPE html>

<html>
   <head>
     <title>Animating with sprite sheets</title>

      <style> 
         body {
            background: rbga(9,9,0,1);
         }

         #canvas {
            position: absolute;
            left: 0px;
            top:  0px;
            margin: 20px;
            background-color: rgba(200,180,90,0.2);
         }

      </style>
   </head>

  <body>
    <canvas id='canvas' width='900' height='900'>
      Canvas not supported
    </canvas>

    <script src='../shared/js/sprites.js'></script>
    <script src='spiderTurn.js'></script>    
  </body>
</html>

JS:

var cvsOffScreen1 = document.createElement('canvas');
var ctxOffScreen1 = cvsOffScreen1.getContext('2d');

var cvsOffScreen2 = document.createElement('canvas');
var ctxOffScreen2 = cvsOffScreen2.getContext('2d');

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    xPos,
    yPos,   
    spritesheet = new Image(),
    spiderCells = [
      { left: 0,   top: 0, width: 120, height: 150 },
      { left: 120,   top: 0, width: 120, height: 150 },
      { left: 240,   top: 0, width: 120, height: 150 },
      { left: 360,   top: 0, width: 120, height: 150 },

      { left: 0,     top:150, width: 120, height: 150 },
      { left: 120,   top:150, width: 120, height: 150 },
      { left: 240,   top:150, width: 120, height: 150 },
      { left: 360,   top:150, width: 120, height: 150 },

      { left: 0,   top: 300, width: 120, height: 150 },
      { left: 120,   top: 300, width: 120, height: 150 },
      { left: 240,   top: 300, width: 120, height: 150 },
      { left: 360,   top: 300, width: 120, height: 150 },

      { left: 0,   top: 450, width: 120, height: 150 },
      { left: 120,   top: 450, width: 120, height: 150 },
      { left: 240,   top: 450, width: 120, height: 150 },
      { left: 360,   top: 450, width: 120, height: 150 },

      { left: 0,   top: 600, width: 120, height: 150 },
      { left: 120,   top: 600, width: 120, height: 150 },
      { left: 240,   top: 600, width: 120, height: 150 },      
    ],
    sprite = new Sprite('spider', new SpriteSheetPainter(spiderCells)),
   // interval,
    lastAdvance = 0,
    paused = false,
    PAGEFLIP_INTERVAL = 22;
// functions .........................................

 function loadImage(imgFile, onload){
// //function loadImage(imgFile){    
//     var img = new Image();
    img.onload = function() { exec(spritesheet); };
    spritesheet.src = imgFile;
}

function copyOff2on() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(cvsOffScreen2,0,0);

 // it is possible to use subImage as stamp     
context.drawImage(cvsOffScreen2,32,64);
context.drawImage(cvsOffScreen2,300,64);

var xCoord = Math.floor((Math.random() * 900) + 1);
var yCoord = Math.floor((Math.random() * 900) + 1);   

// apply transformation 

for (var i = 0; i <5; i++) {
context.save();
context.translate(80,80);
context.rotate(90 * (Math.PI/180));
context.translate(-80,-80);

context.drawImage(cvsOffScreen2, xCoord, -yCoord);
context.restore(); 
}

var w = 120; var h = 150;
var dataToTranslate = ctxOffScreen1.getImageData(0,0,w,h);
    ctxOffScreen2.putImageData(dataToTranslate,0,0);
}

// Animation.....................................................

function animate(time) {
ctxOffScreen2.clearRect(0, 0, canvas.width, canvas.height);
      sprite.paint(ctxOffScreen2);
      if (time - lastAdvance > PAGEFLIP_INTERVAL) {
         lastAdvance = time;        
         sprite.painter.advance();
      }
      window.requestAnimationFrame(animate);
 
copyOff2on();
}

// Initialization................................................
document.create 
xPos = 20;
yPos = 20;
spritesheet.src = '../shared/images/spider_crawl.png';
sprite.left = xPos;
sprite.top = yPos;
lastAdvance = 0;
window.requestAnimationFrame(animate);
2

I found a problem. The code in the loop is necessary in order to be able to apply transforms and rotation on the spiders. I took it out of the loop so as to only be creating 1 spider, that didn’t help, I wrote in integers instead of using random numbers that did work so I think maybe all I need is to insure I’m getting whole numbers back from the random function. To be continued…

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.