как загрузить таблицу спрайтов с помощью createJS и запустить анимацию - PullRequest
0 голосов
/ 26 октября 2018

Я новичок в createJS и пытаюсь загрузить таблицу спрайтов и запустить кадры, содержащие анимацию;но я продолжаю получать эту ошибку в консоли: «Uncaught TypeError: Невозможно прочитать свойство 'getImages' undefined в Game.handleFileLoad".Я смущен тем, что происходит, потому что нет getImages, и поэтому я думаю, что просто не понимаю, как загрузить таблицу.Пожалуйста, помогите!

Вот код вопроса:

loadGraphics() {
   var queue = new createjs.LoadQueue(true);
   queue.on("fileload", handleFileLoad, this);
   queue.loadFile("images/index_atlas_.png");
   queue.load();

}

handleFileLoad(event) {
   var item = event.item; 
   var type = item.type;
   var image = queue.getResult(event.item);
   document.body.appendChild(image);

   var data = {
            images: [image],
            frames: {width:256, height:256},
            animations: {
                run:[0,4]
            }
        };

        var spriteSheet = new createjs.SpriteSheet(data);
        var animation = new createjs.Sprite(spriteSheet, "run");

}

А вот и весь мой код:

    class GameObject extends createjs.Container{

    constructor(graphic){
       super();
       if(graphic != undefined){
        this.graphic = graphic;
        this.addChild(this.graphic);
        var b = this.graphic.nominalBounds;
        this.setBounds(b.x, b.y, b.width, b.height);
      }

    }

}


    class Hero extends GameObject{

     constructor(){
        super(new lib.HeroGraphic());
      }

    }


    class Platform extends GameObject{

       constructor(){
       super(new lib.PlatformGraphic());
        }

    }


class World extends createjs.Container{

    constructor(){
        super();
        this.platforms = [];
        this.generatePlatforms();
        this.addHero();
    }


    addHero(){
       var hero = new Hero();
       this.addChild(hero);
       hero.x = 100;
       hero.y = 100;
       this.hero = hero;
    }

    generatePlatforms(){
       var platform = new Platform();
       this.addChild(platform);
       platform.x = 100;
       platform.y = 300;
       this.platforms.push(platform);

       platform = new Platform();
       this.addChild(platform);
       platform.x = 550;
       platform.y = 300;
       this.platforms.push(platform);
        }
    }


    class Game
    {
       constructor(lib){
          this.lib = lib;
          this.canvas = document.getElementById("canvas");
          this.stage = new createjs.Stage(this.canvas);
          this.stage.width = this.canvas.width;
          this.stage.height = this.canvas.height;
          createjs.Touch.enable(this.stage);
          createjs.Ticker.framerate = 60;
          createjs.Ticker.on("tick", this.stage);
          this.loadGraphics();
          this.restartGame();
    }

    loadGraphics() {
         var queue = new createjs.LoadQueue(true);
         queue.on("fileload", handleFileLoad, this);
         queue.loadFile("images/index_atlas_.png");
         queue.load();
     }

     handleFileLoad(event) {
       var item = event.item;
       var type = item.type;
       var image = queue.getResult(event.item);
       document.body.appendChild(image);

         var data = {
                images: [image],
                frames: {width:256, height:256},
                animations: {
                    run:[0,4]
                }
            };

            var spriteSheet = new createjs.SpriteSheet(data);
            var animation = new createjs.Sprite(spriteSheet, "run");
     }


    restartGame(){

        this.world = new World();
        this.stage.addChild(this.world);
      }


    }

    var game = new Game(lib, exportRoot);
...