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

Preview:

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:

Import the Roger.css and Roger.js into the document.

<link rel="stylesheet" href="css/roger.css">
<script src="js/PabTools.js"></script>

Create a container element.

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

Prepare your own image sprites.

The example JavaScript to activate the animation.

'use strict';
var rClock = new RogerClock(0.1);

rClock.init();

var ss_damnPablosHeads = new RogerRegularSheet(sprite.png", {w:512,h:512}, {w:54,h:90});

var anim_damnPablos_blink1 = new RogerAnimation("blink1",
    ss_damnPablosHeads,
    [0,1,2,1,0],
    { delay: 60, callBack: ()=>console.log('blink complete!') });

var anim_damnPablos_talk1 = new RogerAnimation("talk1",
     ss_damnPablosHeads,
     [3,4,5,6,7],
     { direction: "random" });


var anim_damnPablos_blink2 = new RogerAnimation("blink2", 
    ss_damnPablosHeads,
    [9,10,11,10,9],
    { delay: 10 });

var anim_damnPablos_talk2 = new RogerAnimation("talk2", 
    ss_damnPablosHeads,
    [12,13,14,15,16],
    { loops: -1 });

var pablo = new RogerObject("example", rClock);
pablo.addAnimation(anim_damnPablos_blink1);
pablo.addAnimation(anim_damnPablos_blink2);
pablo.addAnimation(anim_damnPablos_talk1);
pablo.addAnimation(anim_damnPablos_talk2);
pablo.setDefaultAnimation("blink1");

pablo.playAnimation("blink1");

Changelog:

2018-12-16

• ADD: animation emits event when finished