Fotograma a fotograma (Sprite) animación con JavaScript-Roger. js

Vista prévia

Descripción

Roger. js es un plugin de JavaScript pequeño y fácil de usar para animaciones fotograma a fotograma que se pueden usar para animar una hoja de sprites usando JS puro.

Funcionamiento

Importar el Roger. CSS y Roger. js en el documento.

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

Cree un elemento contenedor.

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

Prepare sus propios sprites de imagen.

El ejemplo de JavaScript para activar la animación.

'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");

Registro de cambios

2019-01-02

• v1.0.6

2018-12-16

• ADD: la animación emite un evento cuando se termina