GUI Layer on limeJS

Question

Я работаю с limeJS, пытаясь найти лучший способ поместить графический интерфейс поверх limeJS. Вот лучшее объяснение:

Я создал два класса, один из которых называется «SceneWithGui», а другой называется «GuiOverlay». Мое намерение состоит в том, что наследует 'SceneWithGui' от '' lime.Scene, добавив свойство и два метода:

• guiLayer (который является объектом GuiOverlay)
• setGuiLayer
• getGuiLayer

В следующем порядке:

//set main namespace 
goog.provide('tictacawesome.SceneWithGui'); 

//get requirements 
goog.require('lime.Scene'); 
goog.require('tictacawesome.GuiOverlay'); 

tictacawesome.SceneWithGui = function() { 
    lime.Node.call(this); 

    this.guiLayer = {}; 
}; 
goog.inherits(tictacawesome.SceneWithGui, lime.Scene); 

tictacawesome.SceneWithGui.prototype.setGuiLayer = function (domElement){ 
    this.guiLayer = new tictacawesome.GuiOverlay(domElement); 
}; 

tictacawesome.SceneWithGui.prototype.getGuiLayer = function(){ 
    return this.guiLayer; 
}; 

Целью «GuiOverlay» является удержание элемента DOM таким образом, чтобы при сцена или директор меняются, это тоже произойдет. Для этого я просто унаследовал от lime.Node, надеясь, что на нем уже что-то уже установлено. Мой код:

//set main namespace 
goog.provide('tictacawesome.GuiOverlay'); 

//get requirements 
goog.require('lime.Node'); 

tictacawesome.GuiOverlay = function(domElement){ 
    lime.Node.call(this); 
    this.setRenderer(lime.Renderer.DOM); 
    this.domElement = domElement; 
}; 

goog.inherits(tictacawesome.GuiOverlay, lime.Node); 

И это в основном идея всего этого. Для лучшей визуализации, вот пример использования:

//set main namespace 
goog.provide('tictacawesome.menuscreen'); 

//get requirements 
goog.require('lime.Director'); 
goog.require('lime.Scene'); 
goog.require('lime.Layer'); 
goog.require('lime.Sprite'); 
goog.require('lime.Label'); 
goog.require('tictacawesome.SceneWithGui'); 

tictacawesome.menuscreen = function(guiLayer) { 
    goog.base(this); 
    this.setSize(1024,768).setRenderer(lime.Renderer.DOM); 

    var backLayer = new lime.Layer().setAnchorPoint(0, 0).setSize(1024,768), 
     uiLayer = new lime.Layer().setAnchorPoint(0, 0).setSize(1024,768), 
     backSprite = new lime.Sprite().setAnchorPoint(0, 0).setSize(1024,768).setFill('assets/background.png'); 

    backLayer.appendChild(backSprite); 
    this.appendChild(backLayer);  

    lime.Label.installFont('Metal', 'assets/metalang.ttf'); 

    var title = new lime.Label(). 
     setText('TicTacAwesome'). 
     setFontColor('#CCCCCC').   
     setFontSize(50). 
     setPosition(1024/2, 100).setFontFamily('Metal');  

    uiLayer.appendChild(title); 

    this.appendChild(uiLayer); 

    this.setGuiLayer(guiLayer); 
}; 

goog.inherits(tictacawesome.menuscreen, tictacawesome.SceneWithGui); 

Все это выглядит довольно на код, но он просто не работает (сцена, даже не получить отображается больше). Вот ошибки я получаю через Chrome консоль:

Uncaught TypeError: Cannot read property 'style' of undefined director.js:301

Uncaught TypeError: Cannot read property 'transform_cache_' of undefined

Я не очень опытный в JS, так что единственный ключ я нашел, что это происходит, когда «tictacawesome.menuscreen» goog.base достигает»(это)'.

ОБНОВЛЕНИЕ: После некоторого испорчения кода я могу передать предыдущие проблемы, которые у меня были (до этого редактирования), и теперь я натыкаюсь на те, которые были упомянуты выше. Когда он достигает directior.js:301, линия scene.domElement.style['display']='none';. scene есть, но scene.domElement нет. Я как-то испортил domElement своим guiOverlay?

Любые идеи? Какие-либо очевидные недостатки в моем дизайне? Я на правильном пути?

Спасибо.

Answer 1

Ваша сфераWithGui расширяет известь. Сцена, но вы называете известь. Узел .call (this); в SceneWithGui.

Код в SceneWithGui должен выглядеть следующим образом:

//set main namespace 
goog.provide('tictacawesome.SceneWithGui'); 

//get requirements 
goog.require('lime.Scene'); 
goog.require('tictacawesome.GuiOverlay'); 

tictacawesome.SceneWithGui = function() { 
    lime.Scene.call(this);//This was lime.Node.call(this); 

    this.guiLayer = {}; 
}; 
goog.inherits(tictacawesome.SceneWithGui, lime.Scene); 

tictacawesome.SceneWithGui.prototype.setGuiLayer = function (domElement){ 
    this.guiLayer = new tictacawesome.GuiOverlay(domElement); 
}; 

tictacawesome.SceneWithGui.prototype.getGuiLayer = function(){ 
    return this.guiLayer; 
}; 

можете найти его довольно быстро при создании нормальной сцены с вар сцены = новый lime.Scene() точки останова на этой линии и заходя в него.

Это приведет вас к scene.js, а затем установить точку останова в lime.Node.call (this);

Тогда вы заметили бы при создании scene = new tictacawesome.menuscreen(); что эта точка останова никогда не попадает.