limeJS上的GUI层

Question

我正在与limeJS合作，试图找出将GUI置于limeJS之上的最佳方法。这里有一个更好的解释：

我创建了两个类，一个叫做'SceneWithGui‘，另一个叫做'GuiOverlay’。我的意图是，“SceneWithGui”继承了‘lines.cene’，添加了一个属性和两个方法：

• 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元素的方式，当场景或导演被调整大小时，也会这样。为此，我从“英国佬”那里继承了下来，希望它已经有了某种意义。我的代码：

//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控制台中遇到的错误：

未定义TypeError:无法读取未定义director.js:301的属性“样式” 未定义的TypeError:无法读取未定义的属性“transform_cache_”

我对JS没有真正的经验，所以我发现的唯一线索是，当'tictacawesome.menuscreen‘到达'goog.base( this )’时就会发生这种情况。

更新:在对代码做了一些修改之后，我能够传递以前的问题(在此编辑之前)，现在我偶然发现了上面提到的问题。当它到达directior.js:301时，这一行是scene.domElement.style['display']='none';。scene存在，但scene.domElement不存在。我是不是用guiOverlay搞砸了domElement？

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

谢谢。

Answer 1

您的SceneWithGui扩展了莱姆.场景，但您在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场景=新的lime.Scene()断点并进入其中。

它将带您到scene.js，然后在lime.Node.call设置一个断点(这里)；

那么，在创建场景=新tictacawesome.menuscreen()时，您就会注意到，这个断点从未命中。