I have created a requirejs module that enhances the functionality of a BitmapAnimation by allowing it to move around the stage at a specific speed and transition to another looped animation once reaching its destination.
The issue I am encountering is a noticeable delay between calling gotoAndPlay and seeing any changes on the stage. Despite logging the methods that trigger gotoAndPlay, the animations do not switch as quickly as expected.
Below is an abstract object example:
'use strict';
/**
* AbstractCharacter
* Provides common functionality for all characters
*/
define(['easeljs'], function () {
var AbstractCharacter = function (model) {
this.model = model;
// modified from original code
// for improved encapsulation
this._s = new createjs.SpriteSheet(model.ssInit);
// add reversed frames
createjs.SpriteSheetUtils.addFlippedFrames(this._s, true, false, false),
this.initialize();
};
AbstractCharacter.prototype = Object.create(createjs.BitmapAnimation.prototype);
AbstractCharacter.prototype.constructor = AbstractCharacter;
// constant for speed
AbstractCharacter.prototype.SPEED = 10;
// taken from Flash CS6
AbstractCharacter.prototype.BitmapAnimation_initialize = AbstractCharacter.prototype.initialize;
/**
* Moves a character to a destination and sets their state at the end of the move
* @param {object} destination coordinates {x:XX}
* @param {string} nextAction the next action to perform
* @return {null}
*/
AbstractCharacter.prototype.moveTo = function(destination, nextAction) {
nextAction = nextAction || 'idle';
if (destination) {
if (destination.x < this.x) {
this.walkLeft();
} else {
this.walkRight();
}
this.destination = destination;
this.nextAction = nextAction;
}
};
/**
* Public method to perform action
* @param {string} room current room name where character resides
* @param {string} action action name
* @param {object} params parameters needed by the action
* @return {null}
*/
AbstractCharacter.prototype.action = function(room, action, params) {
switch (action) {
case 'walk' :
this.moveTo(params, 'idle');
break;
case 'talk' :
this.moveTo(params, 'talk');
break;
case 'sleep' :
this.moveTo(this.model.actions.room[room].sleep, 'sleep');
break;
}
};
/**
* Callback for each frame of animation using easeljs
* @return {null}
*/
AbstractCharacter.prototype.onTick = function() {
if (this.destination) {
...
EDIT: The lag issue only affects Chrome - IE9 and Firefox17 are running smoothly.
EDIT: By using the following code instead of extending my abstractcharacter, the animations play without any delays or lags:
var test = new createjs.BitmapAnimation(new createjs.SpriteSheet({
images: [model.assets['mycharacters']],
frames: [[0,0,129,344,0,74,327],[129,0,129,345,0,74,327], ...