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

Category: Animation , Javascript | April 30, 2020
Author: Pabrick
Views Total: 152 views
Official Page: Go to website
Last Update: April 30, 2020
License: MIT

Preview:

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

Description:

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.

Frame by Frame (Sprite) Animation Sprite-min

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

You Might Be Interested In:


Leave a Reply