Cocos Creator js анимированный спрайт

Я анимировал спрайт, используя лист спрайтов и функцию обновления, например:

Примечание. Я перетащил plist в поле атласа узла спрайта (того же узла, к которому прикреплен скрипт monster.js) в пользовательском интерфейсе Ccos Creator.

//monster.js
onLoad: function(){
// change monsters face
            this.faces['1'] =  'monster1';
            this.faces['2'] =  'monster2';
            this.faces['3'] =  'Rmonster1';
            this.faces['4'] =  'Rmonster2';

}
    update: function (dt) {


    this.timekeep += dt;

    if(this.timekeep > 0.1){

var self = this;
          cc.loader.loadRes('monsters', cc.SpriteAtlas, function (err, atlas) {
  self.getComponent(cc.Sprite).spriteFrame = atlas.getSpriteFrame(self.faces[self.monstersN]);
});     

                this.timekeep = 0;

                this.monstersN++;
                if(this.monstersN > 4){

                    this.monstersN = 1;

                }
            }

На самом деле работает нормально. Я уже думал, что должен экспортировать cc.loader.loaderRes в функцию onLoad и сохранять атлас как глобальную переменную вместо загрузки каждый раз при вызове обновления.

Однако… учитывая встроенные функции анимации, это не может быть правильным решением. Итак, я попробовал это:

onLoad: function () {
            // change monster face
            this.faces['1'] =  'monster1';
            this.faces['2'] =  'monster2';
            this.faces['3'] =  'Rmonster1';
            this.faces['4'] =  'Rmonster2';
            var self = this;
                  cc.loader.loadRes('monsters', cc.SpriteAtlas, function (err, atlas) {
var sprite = self.getComponent(cc.Sprite);

        var animFrames = [];
 for (var i = 1; i < 4; i++) {   
     var spriteFrame = atlas.getSpriteFrame(self.faces[i]);
        var animFrame = new cc.AnimationFrame();
            animFrame.initWithSpriteFrame(spriteFrame, 1, null);
        animFrames.push(animFrame);
 }      
 var animation = sprite.Animation.create(animFrames, 0.2, 100);
    var animate   = sprite.Animate.create(animation); 

    sprite.runAction(animate); 
              });    


        },

Я получаю эту ошибку:

cc.AnimationFrame не является конструктором

Итак, я попробовал это:

onLoad: function () {

            // change monster face
            this.faces['1'] =  'monster1';
            this.faces['2'] =  'monster2';
            this.faces['3'] =  'Rmonster1';
            this.faces['4'] =  'Rmonster2';
            var self = this;
                  cc.loader.loadRes('monsters', cc.SpriteAtlas, function (err, atlas) {
self.atlasA = atlas;
              });    

 var sprite = this.getComponent(cc.Sprite);

        var animFrames = [];
 for (var i = 1; i < 4; i++) {   
     var spriteFrame = this.atlasA.getSpriteFrame(this.faces[i]);
    var animFrame = new cc.AnimationFrame();
        animFrame.initWithSpriteFrame(spriteFrame, 1, null);
    animFrames.push(animFrame);
 }      
 var animation = sprite.Animation.create(animFrames, 0.2, 100);
var animate   = sprite.Animate.create(animation); 

sprite.runAction(animate); 

        },

Я получаю эту ошибку:

Не удается прочитать свойство «getSpriteFrame» неопределенного

Как я могу использовать cc.animate для изменения спрайта, используя имеющуюся у меня таблицу спрайтов. Все, чего я хочу добиться, - это перемещаться по plist в том порядке, в котором изображения находятся в plist, повторяя это до тех пор, пока монстр не будет возвращен в пул, из которого он пришел.