1

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

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

  • guiLayer（这是一个 GuiOverlay 对象）
  • setGuiLayer
  • 获取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 元素，当场景或导演调整大小时，它也会。对于它，我只是从“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 控制台遇到的错误：

未捕获的类型错误：无法读取未定义的 director.js:301 的属性“样式”

未捕获的类型错误：无法读取未定义的属性“transform_cache_”

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

更新：在弄乱了代码之后，我能够解决我以前遇到的问题（在此编辑之前），现在我偶然发现了上面引用的问题。当它到达directior.js:301时，线是scene.domElement.style['display']='none';。scene存在，但scene.domElement不存在。我是否以某种方式用我的 guiOverlay 搞砸了 domElement？

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

谢谢。

4

1 回答 1

0

你的 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 = newlime.Scene() 断点创建一个普通场景并进入它时，可以很快找到它。

它会带你到scene.js，然后在lime.Node.call(this)处设置一个断点；

然后你会在创建场景时注意到 = new tictacawesome.menuscreen(); 那个断点永远不会命中。

于 2013-05-08T02:33:03.553 回答