title: How can I make Kaboom.js Sprite Animations Repeat?
body: <p>I'm using Kaboom.js to make some games and while it's easy to move players about, I've been stuck for a while on getting sprite sheet animations to work. I've kind of managed it, as you can see in the code here, using setInterval, and messing about with the values to make my particular 7 step animation (a dino animation from <a href="https://opengameart.org/content/free-dino-sprites" rel="nofollow noreferrer">Open Game Art</a> which I made into a sprite sheet using the Codeshack <a href="https://codeshack.io/images-sprite-sheet-generator/" rel="nofollow noreferrer">image to sprite generator</a> but I can't help thinking there must be a better way?</p>
  <pre><code>kaboom({
    global: true,
    width: 320,
    height: 240,
    scale: 2,
    debug: true,
    clearColor: [0, 0, 1, 1],
  });
  
  loadRoot(&quot;img/&quot;);
  loadSprite(&quot;dino&quot;, &quot;spritesheet.png&quot;, {
    sliceX: 8,
    sliceY: 1,
    anims: {
      idle: { from: 1, to: 1 },
      run: { from: 1, to: 7 },
    },
  });
  
  const player = add([
    sprite(&quot;dino&quot;, {
      animSpeed: 2,
      frame: 1,
    }),
    pos(width() * 0.5, height() * 0.5),
    origin(&quot;center&quot;),
    scale(1),
  ]);
  
  
  let myInterval;
  
  function animateR() {
    myInterval = setInterval(() =&gt; {
      player.play(&quot;run&quot;);
      player.move(1000, 0);
    }, 100);
  }
  function animateL() {
    myInterval = setInterval(() =&gt; {
      player.play(&quot;run&quot;);
      player.move(-1000, 0);
    }, 100);
  }
  
  keyPress(&quot;right&quot;, () =&gt; {
    player.scale.x = 1;
    animateR();
  });
  
  keyPress(&quot;left&quot;, () =&gt; {
    player.scale.x = -1;
    animateL();
  });
  
  keyDown(&quot;x&quot;, () =&gt; {
    player.move(0, -10);
  });
  
  keyRelease(&quot;left&quot;, () =&gt; {
    clearInterval(myInterval);
  });
  
  keyRelease(&quot;right&quot;, () =&gt; {
    clearInterval(myInterval);
  });
  </code></pre>