Frame by Frame (Sprite) Animation With JavaScript – Roger.js

Roger.js is a small and simple-to-use JavaScript plugin for frame by frame animations that can be used to animate a sprite sheet using pure JS.

How to use it:

1. Install and import the Roger.

# NPM
$ npm install @pabrick/roger --save

import Roger from "@pabrick/roger";

2. Or directly import the Roger.js into the document.

<script src="./lib/roger.min.js"></script>

3. Create a container element to hold the sprite animation.

<div id="example"></div>

4. Prepare your own image sprites.

5. The example JavaScript to activate the animation.

// create sprite and spritesheet
const ssPablosHeads = new Roger.RegularSheet("img/damn_pablos_heads.png", {w:512,h:512}, {w:54,h:90});
const pabloIdleSprite = new Roger.Sprite("img/damn_pablos_heads.png", {w:54,h:90}, {x:0,y:0});
const animPablos_blink1 = new Roger.Animation("blink1",
      ssPablosHeads,
      [0,1,2,1,0],
      { delay: 10, loops: -1, callBack: ()=> {
              console.log("blink complete!");
          }
      });
const animPablos_talk1 = new Roger.Animation("talk1",
      ssPablosHeads,
      [3,4,5,6,7],
      { direction: "random" });
const animPablos_blink2 = new Roger.Animation("blink2",
      ssPablosHeads,
      [9,10,11,10,9],
      { delay: 10, callBack: ()=> {
              console.log("blink2 complete!");
          }
      });
const animPablos_talk2 = new Roger.Animation("talk2",
      ssPablosHeads,
      [12,13,14,15,16],
      { callBack: ()=>console.log("talk2 complete!") });
const pabloToon = new Roger.Toon("example", pabloIdleSprite);
pabloToon.addAnimation(animPablos_blink1);
pabloToon.addAnimation(animPablos_blink2);
pabloToon.addAnimation(animPablos_talk1);
pabloToon.addAnimation(animPablos_talk2);
pabloToon.playAnimation("blink1");
const rClock = new Roger.Clock(0.1);
rClock.addToonToUpdate(pabloToon);
rClock.start();

Changelog:

v1.1.0 (2020-04-30)

• Roger.Toon: Idle has been removed: Idle has no use now the animation remains on last frame once they finish.
• Roger.Animation: Options callBack has been changed by callback.
• Roger.AnimationOptions: This class has been added to help users with typing.

v1.0.16 (2020-04-14)

• Fixed bugs

v1.0.13 (2020-02-09)

• add pause and play methods to Clock

v1.0.12 (2019-07-01)

• Roger.Object has been renamed to Roger.Toon
• addObjectToUpdate method in Roger.Clock has been renamed to addToonToUpdate
• clearObjectToUpdate method in Roger.Clock has been renamed to clearToonToUpdate

2019-05-11

• v1.0.9

2018-12-16

• ADD: animation emits event when finished