Question

我正在使用limeJS试图找出将GUI放在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元素的方式，当Scene或Director调整大小时，它也会。对于它，我只是从'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控制台获得的错误：

未捕获的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扩展了石灰。场景，但你打电话给石灰。节点 .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（）时;该断点永远不会发生。

limeJS上的GUI层

1 个答案: