javascript - LimeJS 上的 GUI 层

Question

我正在与 LimeJS 合作，试图找出在 LimeJS 上放置 GUI 的最佳方法。这是更好的解释:

我创建了两个类，一个名为“SceneWithGui”，另一个名为“GuiOverlay”。我的意图是“SceneWithGui”继承自“lime.Scene”，添加一个属性和两个方法:

• guiLayer(这是一个 GuiOverlay 对象)
• 设置GuiLayer
• 获取GuiLayer

如下:

//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 元素，当场景或 Controller 调整大小时，它也会随之调整。对于它，我只是继承自“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(this)”时会发生这种情况。

更新:在对代码进行一些困惑之后，我能够解决之前遇到的问题(在此编辑之前)，现在我偶然发现了上面引用的问题。当到达 directior.js:301 时，该行是 scene.domElement.style['display']='none';。 scene 存在，但 scene.domElement 不存在。我是否用我的 guiOverlay 搞砸了 domElement？

有什么想法吗？我的设计有什么明显的缺陷吗？我走在正确的道路上吗？

谢谢。

Answer 1

你的SceneWithGui扩展了lime.Scene，但是你调用了lime.Node.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;
};

在该行使用 var scene = new Lime.Scene() 断点创建普通场景并单步执行时可以很快找到它。

它将带你到 scene.js，然后在 Lime.Node.call(this); 设置断点

那么你在创建 scene = new tictacawesome.menuscreen(); 时就会注意到了该断点永远不会命中。