createJS - Uncaught ReferenceError: lib не определена - PullRequest
Новая
       40

createJS - Uncaught ReferenceError: lib не определена

0 голосов
/ 19 октября 2018

Я нахожусь на начальных этапах создания игры с использованием Adobe Animate CC и CreateJS и получаю следующую ошибку: Uncaught ReferenceError: lib не определена.По сути, сейчас я просто пытаюсь получить фон и несколько случайных чисел, которые появятся на экране.Я создал свой фон и случайные числа в качестве символов в Adobe Animate, а также дал им имя класса, присвоив им «связь».Я включил файл javascript, созданный Animate, в мой html вместе со ссылкой на CreateJS и следующим кодом:

Вот мой код JavaScript: 

class NumberedBox extends createjs.Container 
{
  constructor(number=0)
  {
    super();
    var movieclip = new lib.NumberedBox();
    movieclip.numberedText.text = number;
    this.addChild(movieclip);

    movieclip.x = Math.random() * 200;
    movieclip.y = Math.random() * 200;
  }

}



class Game {

constructor()
{
   this.canvas = document.getElementById("canvas");
   this.stage = new createjs.Stage(this.canvas);

   createjs.Ticker.framerate = 60;
   createjs.Ticker.on("tick", this.stage);

   this.stage.addChild(new lib.Background());
   this.stage.addChild(new NumberedBox(88));
 }

}

var game = new Game();

Я получаю сообщение об ошибке в этой строке кода (см. Выше): this.stage.addChild (new lib.Background ());

Вот код, созданный CreateJS: 

    (function (cjs, an) {

    var p; // shortcut to reference prototypes
    var lib={};var ss={};var img={};
    lib.ssMetadata = [];


    // symbols:
    // helper functions:

    function mc_symbol_clone() {
    var clone = this._cloneProps(new this.constructor(this.mode, 
    this.startPosition, this.loop));
    clone.gotoAndStop(this.currentFrame);
    clone.paused = this.paused;
    clone.framerate = this.framerate;
    return clone;
    }

    function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
    var prototype = cjs.extend(symbol, cjs.MovieClip);
    prototype.clone = mc_symbol_clone;
    prototype.nominalBounds = nominalBounds;
    prototype.frameBounds = frameBounds;
    return prototype;
    }


    (lib.RestartButton = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer_1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#000000").s().p("AgiBQIAAgFIAHAAQAKAAADgGQADgEAAgNIAAh5IgTAAQgLAAgEACQgHADgEAGQgEAGgCALIgDAAIABgmICBAAIABAmIgEAAQgBgKgDgEQgDgHgGgDQgGgEgKAAIgXAAIAAB5QABAPADADQAEAFAJAAIAGAAIAAAFg");
    this.shape.setTransform(146.2,28.5);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("#000000").s().p("AAlBQIg1hLIgKABIgDAAIgEgBIAAAvQABAOADAEQAEAFAJAAIAGAAIAAAFIhEAAIAAgFIAGAAQAKAAAFgGQACgEAAgNIAAhnQAAgPgDgDQgFgFgJAAIgGAAIAAgFIA6AAQAYAAANAFQALADAJAKQAIAKAAAOQAAAOgKALQgJALgUADIAhAtQALARAIAFQAIAFANABIAAAFgAghhDIAABCIAEAAIADAAQAXAAAKgKQALgJAAgQQABgPgKgJQgJgKgPAAIgSADg");
    this.shape_1.setTransform(131.1,28.5);

    this.shape_2 = new cjs.Shape();
    this.shape_2.graphics.f("#000000").s().p("AAWBRIAAgEQAJgBAEgCQADgDAAgEQAAgFgFgLIgJgXIg9AAIgLAZQgEAJAAAFQAAAEAEACQADADAMABIAAAEIgyAAIAAgEQAKgCADgDQAFgFAIgSIA4iBIADAAIA3CDQAHAQAFAFQAGAEAJABIAAAEgAghATIA1AAIgag/g");
    this.shape_2.setTransform(114.1,28.3);

    this.shape_3 = new cjs.Shape();
    this.shape_3.graphics.f("#000000").s().p("AghBQIAAgFIAFAAQALAAAEgGQACgEAAgNIAAh5IgTAAQgLAAgFACQgGADgEAGQgFAGAAALIgFAAIACgmICBAAIABAmIgEAAQgBgKgDgEQgDgHgGgDQgGgEgKAAIgWAAIAAB5QgBAPAEADQAEAFAKAAIAFAAIAAAFg");
    this.shape_3.setTransform(98.2,28.5);

    this.shape_4 = new cjs.Shape();
    this.shape_4.graphics.f("#000000").s().p("AgJBSIgPgEQgMgEgDAAQAAAAgBAAQgBAAAAABQgBAAAAAAQgBAAAAABQgCABgBAGIgEAAIAAg3IAEAAQADASAFAIQAFAIALAHQALAFALAAQAPAAAJgHQAIgIAAgLQAAgGgDgGQgDgGgHgFIgYgPQgVgLgIgGQgJgHgEgIQgFgJAAgJQAAgRANgNQAOgMAUAAQALAAAPAGQAGADADAAQADAAACgBQACgCABgGIAEAAIAAA3IgEAAQgCgQgGgKQgFgIgKgGQgKgFgKgBQgMABgIAHQgIAHAAAKQAAAHAFAGQAHAIAaAQQAXALAIAGQAIAGAFAJQAEAJAAAJQAAASgOANQgOANgWAAIgMgBg");
    this.shape_4.setTransform(84.2,28.5);

    this.shape_5 = new cjs.Shape();
    this.shape_5.graphics.f("#000000").s().p("AhDBQIAAgFIAFAAQAGAAAFgDQAEgCABgDIABgPIAAhnQAAgPgCgEQgEgEgLAAIgFAAIAAgFIB5AAIACAjIgFAAQgCgMgDgFQgDgFgFgCQgGgCgLAAIgrAAIAAA/IAiAAQAOAAAEgEQAHgFAAgOIAFAAIAAA3IgFAAQgBgNgCgDQgDgEgEgCQgFgCgKgBIgiAAIAAA1QAAAKABADIADAEQACABAHAAIAaAAQAOAAAGgCQAGgCAGgGQAHgHAHgOIAFAAIgOAog");
    this.shape_5.setTransform(70.1,28.5);

    this.shape_6 = new cjs.Shape();
    this.shape_6.graphics.f("#000000").s().p("AAlBQIg1hLIgJABIgEAAIgEgBIAAAvQAAAOADAEQAFAFAJAAIAGAAIAAAFIhEAAIAAgFIAGAAQAKAAAEgGQADgEAAgNIAAhnQAAgPgEgDQgEgFgJAAIgGAAIAAgFIA6AAQAZAAAMAFQALADAJAKQAIAKAAAOQAAAOgJALQgKALgUADIAhAtQALARAIAFQAIAFANABIAAAFgAghhDIAABCIAEAAIADAAQAXAAAKgKQAMgJAAgQQgBgPgIgJQgKgKgPAAIgSADg");
    this.shape_6.setTransform(55.1,28.5);

    this.shape_7 = new cjs.Shape();
    this.shape_7.graphics.f("#00FFFF").s().p("AxBFKIAAqTMAiDAAAIAAKTg");
    this.shape_7.setTransform(109,33);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape}]}).to({state:[{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape}]},1).to({state:[{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape}]},1).to({state:[{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape}]},1).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,218,66);


    (lib.NumberedBox = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer_1
    this.numberedText = new cjs.Text("98", "24px 'Times New Roman'");
    this.numberedText.name = "numberedText";
    this.numberedText.lineHeight = 29;
    this.numberedText.lineWidth = 44;
    this.numberedText.parent = this;
    this.numberedText.setTransform(33.5,36.2);

    this.shape = new cjs.Shape();
    this.shape.graphics.f("#34EDFC").s().p("AoVHgIAAu/IQrAAIAAO/g");
    this.shape.setTransform(53.4,48);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape},{t:this.numberedText}]}).wait(1));

}).prototype = getMCSymbolPrototype(lib.NumberedBox, new cjs.Rectangle(0,0,106.8,96), null);


    (lib.Background = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer_1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#FF00CC").s().p("EhK1AoeMAAAhQ7MCVrAAAMAAABQ7g");
    this.shape.setTransform(655,249);

    this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = getMCSymbolPrototype(lib.Background, new cjs.Rectangle(176,-10,958,518), null);


    (lib.GameOverView = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer_1
    this.RestartButton = new lib.RestartButton();
    this.RestartButton.name = "RestartButton";
    this.RestartButton.parent = this;
    this.RestartButton.setTransform(418.2,368.6,1,1,0,0,0,109,33);
    new cjs.ButtonHelper(this.RestartButton, 0, 1, 2, false, new lib.RestartButton(), 3);

    this.shape = new cjs.Shape();
    this.shape.graphics.f("#00FFFF").s().p("AgIBPQgEgEAAgFQAAgFAEgEQAEgEAEAAQAFAAAEAEQAEAEAAAFQAAAFgEAEQgEAEgFAAQgEAAgEgEgAgBAlIgKheIgBgJQAAgHAEgFQAEgEAEAAQAGAAAEAEQADAFAAAJIAAAHIgLBeg");
    this.shape.setTransform(407.6,212.7);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("#00FFFF").s().p("AgIBPQgEgEAAgFQAAgFAEgEQAEgEAEAAQAFAAAEAEQAEAEAAAFQAAAFgEAEQgEAEgFAAQgEAAgEgEgAgBAlIgKheIgBgJQAAgHAEgFQAEgEAEAAQAGAAAEAEQADAFAAAJIAAAHIgLBeg");
    this.shape_1.setTransform(399.6,212.7);

    this.shape_2 = new cjs.Shape();
    this.shape_2.graphics.f("#00FFFF").s().p("AAGA3IAAgEIACAAQAHAAADgCQADgDABgEIABgLIAAgrQAAgPgEgGQgEgHgJAAQgNAAgNAPIAAA4QAAALABACQABAEADACQADABAJAAIAAAEIg1AAIAAgEIACAAQAIAAADgEQADgEAAgMIAAgnQAAgTgBgEQgBgFgBgBQgCgCgDAAQgEAAgEACIgCgEIAhgNIAFAAIAAAWQASgWARAAQAIAAAHAEQAGAFAEAKQACAHAAAOIAAAtQAAAKACAEQABADADABQADACAIAAIAAAEg");
    this.shape_2.setTransform(389.7,215.1);

    this.shape_3 = new cjs.Shape();
    this.shape_3.graphics.f("#00FFFF").s().p("AgnAmQgMgRAAgUQAAgOAIgOQAHgPAMgHQAMgHAMAAQAZAAAOASQANARAAAUQAAANgHAPQgHAPgMAHQgMAIgOAAQgYAAgPgTgAgPgsQgGADgEAJQgEAKAAAOQAAAXAKAQQAJARAOAAQALAAAIgJQAHgJAAgXQAAgcgMgQQgIgMgMAAQgHAAgGAFg");
    this.shape_3.setTransform(377.6,215.3);

    this.shape_4 = new cjs.Shape();
    this.shape_4.graphics.f("#00FFFF").s().p("AAlBRIgkhkIgjBkIgEAAIgwiDIgGgRQgDgEgEgDQgEgCgHAAIAAgEIA7AAIAAAEIgDAAQgGAAgDADQgDADAAAEQAAAEAFAPIAfBYIAahLIgEgNIgEgLIgFgKIgEgEIgGgDIgHgBIAAgEIA9AAIAAAEIgEAAQgHAAgDADQgDADAAAFQAAAGAFAOIAfBWIAehXQAFgOAAgGQAAgDgCgCQgBgCgDgBQgEgCgIAAIAAgEIAwAAIAAAEQgGAAgEACQgEADgEAGIgHATIgsB/g");
    this.shape_4.setTransform(360.4,212.9);

    this.shape_5 = new cjs.Shape();
    this.shape_5.graphics.f("#00FFFF").s().p("AAXA4IAAgYQgOAPgIAEQgGAFgIAAQgJgBgHgFQgGgFgDgIQgCgJAAgPIAAguQAAgIgCgDQgCgDgDgCQgDgBgJAAIAAgFIAmAAIAABHQAAAQAFAEQAGAFAHAAQAEAAAGgDQAHgDAJgKIAAg7QAAgJgEgEQgDgDgLAAIAAgFIAlAAIAABBQAAASABAEQABAFACACQAAAAABAAQAAAAABABQAAAAABAAQAAAAABAAQAEAAAEgCIACAEIggAOg");
    this.shape_5.setTransform(384.3,186.9);

    this.shape_6 = new cjs.Shape();
    this.shape_6.graphics.f("#00FFFF").s().p("AgnAlQgMgQAAgUQAAgOAIgOQAHgPAMgHQAMgHAMAAQAZAAAOATQANAQAAAUQAAANgHAPQgHAPgMAHQgMAIgOAAQgYAAgPgUgAgPgsQgGADgEAJQgEAJAAAPQAAAWAKARQAJASAOgBQALAAAIgJQAHgJAAgXQAAgcgMgQQgIgMgMAAQgHABgGAEg");
    this.shape_6.setTransform(372.3,186.7);

    this.shape_7 = new cjs.Shape();
    this.shape_7.graphics.f("#00FFFF").s().p("AghBQIAAgFIAGAAQAJAAAFgGQADgEAAgNIAAglIgshCIgKgPQgEgDgIgEIgHgBIAAgFIBEAAIAAAFIgDAAQgGAAgEACQgFADAAAFQAAAFAHALIAgAxIAggvQAHgMAAgFQgBgDgBgDIgFgDQgEgCgGAAIAAgFIA4AAIAAAFIgDAAQgDAAgGACQgGAEgFAFQgEAEgIAMIgmA7IAAAoQAAAOADAEQAFAFAJAAIAGAAIAAAFg");
    this.shape_7.setTransform(357.6,184.1);

    this.shape_8 = new cjs.Shape();
    this.shape_8.graphics.f("#000000").s().p("EhK5AooMAAAhRPMCVzAAAMAAABRPgA6lWIMAiDAAAIAAqUMgiDAAAg");
    this.shape_8.setTransform(479.4,260);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_8},{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape},{t:this.RestartButton}]}).wait(1));

}).prototype = getMCSymbolPrototype(lib.GameOverView, new cjs.Rectangle(0,0,958.8,520), null);


// stage content:
(lib.test = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer_1
    this.instance = new lib.GameOverView();
    this.instance.parent = this;
    this.instance.setTransform(480.6,314,1,1,0,0,0,479.4,260);

    this.Background = new lib.Background();
    this.Background.name = "Background";
    this.Background.parent = this;
    this.Background.setTransform(1273.2,329,1,1,0,0,0,479,259);

    this.NumberedBox = new lib.NumberedBox();
    this.NumberedBox.name = "NumberedBox";
    this.NumberedBox.parent = this;
    this.NumberedBox.setTransform(1037.6,290,1,1,0,0,0,53.4,48);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.NumberedBox},{t:this.Background},{t:this.instance}]}).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(481.2,374,1927,524);
// library properties:
lib.properties = {
    id: '9B2E3308BA873548975E3DE315BD1F74',
    width: 960,
    height: 640,
    fps: 24,
    color: "#FFFFFF",
    opacity: 1.00,
    manifest: [],
    preloads: []
};



// bootstrap callback support:

(lib.Stage = function(canvas) {
    createjs.Stage.call(this, canvas);
}).prototype = p = new createjs.Stage();

p.setAutoPlay = function(autoPlay) {
    this.tickEnabled = autoPlay;
}
    p.play = function() { this.tickEnabled = true; 
    this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) }
    p.stop = function(ms) { if(ms) this.seek(ms); this.tickEnabled = false; }
p.seek = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000); }
p.getDuration = function() { return this.getChildAt(0).totalFrames / lib.properties.fps * 1000; }

    p.getTimelinePosition = function() { return 
    this.getChildAt(0).currentFrame / lib.properties.fps * 1000; }

    an.bootcompsLoaded = an.bootcompsLoaded || [];
    if(!an.bootstrapListeners) {
    an.bootstrapListeners=[];
    }

    an.bootstrapCallback=function(fnCallback) {
    an.bootstrapListeners.push(fnCallback);
    if(an.bootcompsLoaded.length > 0) {
        for(var i=0; i<an.bootcompsLoaded.length; ++i) {
            fnCallback(an.bootcompsLoaded[i]);
        }
    }
    };

    an.compositions = an.compositions || {};
    an.compositions['9B2E3308BA873548975E3DE315BD1F74'] = {
    getStage: function() { return exportRoot.getStage(); },
    getLibrary: function() { return lib; },
    getSpriteSheet: function() { return ss; },
    getImages: function() { return img; }
    };

    an.compositionLoaded = function(id) {
    an.bootcompsLoaded.push(id);
    for(var j=0; j<an.bootstrapListeners.length; j++) {
        an.bootstrapListeners[j](id);
    }
    }

    an.getComposition = function(id) {
    return an.compositions[id];
    }



    })(createjs = createjs||{}, AdobeAn = AdobeAn||{});
    var createjs, AdobeAn;

Есть идеи, что я делаю не так?Спасибо за вашу помощь !!

Ответы [ 3 ]

0 голосов
/ 19 октября 2018

В отличие от свойств canvas и stage, свойство lib доступно не во всех местах.Вам нужно будет отправить его в качестве параметра при создании экземпляра класса Game.Например: 

   class NumberedBox extends createjs.Container  
    {  
        constructor(lib, number = 0)  
        {  
              super();  
              var movieclip = new lib.NumberedBox();  
              movieclip.numberedText.text = number;  
              this.addChild(movieclip);  

              movieclip.x = Math.random() * 200;  
              movieclip.y = Math.random() * 200;  
        }  
    }  

    class Game  
    {  
        constructor(lib)  
        {  
              this.lib = lib;  

              this.canvas = document.getElementById("canvas"); // you can call the canvas property from anywhere without doing this  
              this.stage = new createjs.Stage(this.canvas); // a stage is already created for you  

              createjs.Ticker.framerate = 60;  
              createjs.Ticker.on("tick", this.stage);  

              this.stage.addChild(new lib.Background());  
              this.stage.addChild(new NumberedBox(lib, 88));  
        }  
    }  

    var game = new Game(lib); // assuming that this line is being called from some timeline in your FLA document

Ответ на этот вопрос также можно найти по адресу: https://forums.adobe.com/message/10690481#.Спасибо всем, кто ответил на этот вопрос.Я ценю вашу помощь.- Рамона

0 голосов
/ 11 ноября 2018

lib больше не доступен как глобальная переменная, следовательно, ошибка.Вы можете сохранить ссылку на lib, изменив опубликованный HTML-код, или использовать следующий косвенный способ доступа к нему: 

var lib = AdobeAn.getComposition(AdobeAn.bootcompsLoaded[0]).getLibrary();
0 голосов
/ 19 октября 2018

В указанном вами источнике скрипта ссылка lib определяется только в контексте createjs и не определяется во внешнем контексте документа / окна.Вам нужно вызвать AdobeAn.getComposition(id).getLibrary(), чтобы получить ссылку на lib и получить доступ к ее свойствам (значение id, которое нужно использовать, кажется, встроено в источник скрипта)

...