1

I'm working with limeJS trying to figure out the best way to put a GUI over limeJS. Here's a better explanation:

I've created two classes, one called 'SceneWithGui' and another called 'GuiOverlay'. My intention is that 'SceneWithGui' inherits from 'lime.Scene', adding a property and two methods:

  • guiLayer (which is a GuiOverlay object)
  • setGuiLayer
  • getGuiLayer

As follows:

//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;
};

The intention with 'GuiOverlay' is to make it hold the DOM element in a way that when the Scene or the Director get resized, it will too. For it, I just inherited from 'lime.Node', hoping it is something already set on it. My code:

//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);

And that's basically the idea of it all. For better visualization, here's a sample use:

//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);

It all looks pretty on code, but it just doesn't work (the scene doesn't even get displayed anymore). Here are the errors I'm getting through Chrome console:

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

Uncaught TypeError: Cannot read property 'transform_cache_' of undefined

I'm not really experienced in JS, so the only clue I found is that this happens when 'tictacawesome.menuscreen' reaches 'goog.base(this)'.

UPDATE: After some messing with the code, I'm able to pass the previous problems I had (before this edit), and now I stumble on the ones cited above. When it reaches directior.js:301, the line is scene.domElement.style['display']='none';. scene exists, but scene.domElement doesn't. Did I somehow fucked up the domElement with my guiOverlay?

Any ideas? Any obvious flaws on my design? Am I on the right path?

Thanks.

1
  • I don't know how to use linme but are you running this uncompiled? If so why you have a require to lime.director in tictacawesome.menuscreen? I don't see you use the director. If any of the other classes use it but as I understand it they should load it when needed. In google closure you should put all the require in one code block (on the html page) before requiring them in your js files. You can't require and use it in the same code block (running it uncompiled).
    – HMR
    May 7, 2013 at 13:21

1 Answer 1

0

Your SceneWithGui extends lime.Scene but you call lime.Node.call(this); in SceneWithGui.

The code in SceneWithGui should look like this:

//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;
};

Can find it out quite quickly when creating a normal scene with var scene = new lime.Scene() breakpoint at that line and stepping into it.

It'll take you to scene.js and then set a breakpoint at lime.Node.call(this);

Then you would have noticed when creating scene = new tictacawesome.menuscreen(); that that breakpoint never hits.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.